溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文將為大家詳細介紹“html學習中的重點知識有哪些”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“html學習中的重點知識有哪些”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。
1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。 3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
HTML可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種
使用display屬性能夠將三者任意轉換
塊狀元素自動換行
轉換方法
(1)display:inline;轉換為行內元素
(2)display:block;轉換為塊狀元素
(3)display:inline-block;轉換為行內塊狀元素
比較
行內元素最常使用的就是span，其他的只在特定功能下使用，修飾字體<b>和<i>標簽，還有<sub>和<sup>這兩個標簽可以直接做出平方的效果，而不需要類似移動屬性的幫助，很實用。
行內元素特征：(1)設置寬高無效
(2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間
(3)不會自動進行換行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行內元素</title>
<style type="text/css">
span {
width: 120px;
height: 120px;
margin: 1000px 20px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<sspan>不會自動換行</span>
<span>行內元素</span>
</body>
</html>塊狀元素代表性的就是p，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用p來實現。不過為了可以方便程序員解讀代碼，一般都會使用特定的語義化標簽，使得代碼可讀性強，且便于查錯。
塊狀元素特征：(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標簽寫在一起，默認排列方式為從上至下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>塊狀元素</title>
<style type="text/css">
p {
width: 120px;
height: 120px;
margin: 50px 50px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<i>自動換行</i>
<p>塊狀元素</p>
<p>塊狀元素</p>
</body>
</html>行內塊狀元素綜合了行內元素和塊狀元素的特性，但是各有取舍。因此行內塊狀元素在日常的使用中，由于其特性，使用的次數也比較多。
行內塊狀元素特征：(1)不自動換行
(2)能夠識別寬高
(3)默認排列方式為從左到右
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行內塊狀元素</title>
<style type="text/css">
p {
display: inline-block;
width: 100px;
height: 50px;
background: lightblue;
}
</style>
</head>
<body>
<p>行內塊狀元素</p>
<p>行內塊狀元素</p>
</body>
</html>絕對路徑：指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑
相對路徑：指由這個文件所在的路徑引起的跟其它文件（或文件夾）的路徑關系
每一個.向外跳一層
把css代碼直接寫在現有的HTML標簽中
<p style="color:red">這里文字是紅色。</p>
嵌入式css樣式，就是可以把css樣式代碼寫在標簽之間
<style type="text/css">span{color:red;}</style>外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名
<link href="style.css" rel="stylesheet" type="text/css" />
css樣式文件名必須符合命名規則，如 main.css
rel=”stylesheet” type=”text/css” 是固定寫法不可修改
css文件也可以在<style></style>中用import引入，但是這種方法不可以用js操作
1.position屬性可以控制Web瀏覽器如何以及在何處顯示特定的元素。
2.可以使用position屬性把一個元素放置到網頁中的任何位置。
可選值：
– static：默認值，元素沒有開啟定位
– relative：開啟相對定位
– absolute：開啟絕對定位
– fixed：開啟固定定位
3.相對定位
①每個元素在頁面的文檔流中都有一個自然位置。相對于這個位置對元素進行移動就稱為相對定位。周圍的元素完全不受此影響。
②當開啟了相對定位以后，可以使用top、 right、bottom、 left四個屬性對元素進行定位。
—-left：元素相對于其定位位置的左偏移量。left:100px，相對與原來位置向右偏移100px
—-right：元素相對于其定位位置的右偏移量
—-top：元素相對于其定位位置的上邊偏移量
—-bottom：元素相對于其定位位置的下邊偏移量
③相對定位的特點
—-如果不設置元素的偏移量，元素位置不會發生改變。
—-相對定位是相對與元素在文檔流中原來的位置進行定位。
—-相對定位不會使元素脫離文本流。元素在文本流中的位置不會改變。
—-相對定位不會改變元素原來的特性。塊元素還是塊元素，內聯還是內聯
—-相對定位會使元素的層級提升，使元素可以覆蓋文本流中的元素。
4.絕對定位
①絕對定位指使元素相對于html元素或離他最近的祖先定位元素進行定位。
②當將position屬性設置為absolute時，則開啟了元素的絕對定位。
③當開啟了絕對定位以后，可以使用top、 right、bottom、 left四個屬性對元素進行定位。
④絕對定位的特點：
—-絕對定位會使元素完全脫離文本流。
—-絕對定位的塊元素的寬度會被其內容撐開。
—-絕對定位會使行內元素變成塊元素。
—-絕對定位是相對于離它最近的開啟了定位的祖先元素。如果所有的祖先都沒有開啟定位，則會相對于瀏覽器窗口進行定位。
—-一般使用絕對定位時會同時為其父元素指定一個相對定位，以確保元素可以相對于父元素進行定位。
—-絕對定位會使元素的層級提升。
5.固定定位
①固定定位的元素會被鎖定在屏幕的某個位置上，當訪問者滾動網頁時，固定元素會在屏幕上保持不動
②當將position屬性設置為fixed時，則開啟了元素的固定定位。
③當開啟了固定定位以后，可以使用top、 right、bottom、 left四個屬性對元素進行定位。
④固定定位也是一種絕對定位，固定定位的其他特性和絕對定位類似。
(1)固定定位永遠相對與瀏覽器定位。
(2)會固定在瀏覽器窗口某個位置，不會隨滾動條滾動。
(3)IE6不支持固定定位。
如果你能讀到這里，小編希望你對“html學習中的重點知識有哪些”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
