html學(xué)習(xí)中的重點(diǎn)知識(shí)有哪些

本文將為大家詳細(xì)介紹“html學(xué)習(xí)中的重點(diǎn)知識(shí)有哪些”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“html學(xué)習(xí)中的重點(diǎn)知識(shí)有哪些”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到杏花嶺網(wǎng)站設(shè)計(jì)與杏花嶺網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國(guó)際域名空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋杏花嶺地區(qū)。

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。 3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。

html的重點(diǎn)總結(jié)

塊元素、行內(nèi)元素、行內(nèi)塊狀元素

HTML可以將元素分類方式分為行內(nèi)元素、塊狀元素和行內(nèi)塊狀元素三種
使用display屬性能夠?qū)⑷呷我廪D(zhuǎn)換
塊狀元素自動(dòng)換行
轉(zhuǎn)換方法
(1)display:inline;轉(zhuǎn)換為行內(nèi)元素
(2)display:block;轉(zhuǎn)換為塊狀元素
(3)display:inline-block;轉(zhuǎn)換為行內(nèi)塊狀元素
比較

1.行內(nèi)元素

行內(nèi)元素最常使用的就是span，其他的只在特定功能下使用，修飾字體<b>和<i>標(biāo)簽，還有<sub>和<sup>這兩個(gè)標(biāo)簽可以直接做出平方的效果，而不需要類似移動(dòng)屬性的幫助，很實(shí)用。

行內(nèi)元素特征：(1)設(shè)置寬高無(wú)效

(2)對(duì)margin僅設(shè)置左右方向有效，上下無(wú)效；padding設(shè)置上下左右都有效，即會(huì)撐大空間

(3)不會(huì)自動(dòng)進(jìn)行換行

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>行內(nèi)元素</title>
          <style type="text/css">
              span {                  
              width: 120px;                 
              height: 120px;                 
              margin: 1000px 20px;                 
              padding: 50px 40px;                 
              background: lightblue;             
              }
         </style>
     </head>

     <body>
         <sspan>不會(huì)自動(dòng)換行</span>
         <span>行內(nèi)元素</span>
     </body>

 </html>

2.塊狀元素

塊狀元素代表性的就是p，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用p來(lái)實(shí)現(xiàn)。不過(guò)為了可以方便程序員解讀代碼，一般都會(huì)使用特定的語(yǔ)義化標(biāo)簽，使得代碼可讀性強(qiáng)，且便于查錯(cuò)。

塊狀元素特征：(1)能夠識(shí)別寬高

(2)margin和padding的上下左右均對(duì)其有效

(3)可以自動(dòng)換行

(4)多個(gè)塊狀元素標(biāo)簽寫在一起，默認(rèn)排列方式為從上至下

<!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>自動(dòng)換行</i>
         <p>塊狀元素</p>
         <p>塊狀元素</p>
     </body>

 </html>

3.行內(nèi)塊狀元素

行內(nèi)塊狀元素綜合了行內(nèi)元素和塊狀元素的特性，但是各有取舍。因此行內(nèi)塊狀元素在日常的使用中，由于其特性，使用的次數(shù)也比較多。

行內(nèi)塊狀元素特征：(1)不自動(dòng)換行

(2)能夠識(shí)別寬高

(3)默認(rèn)排列方式為從左到右

<!DOCTYPE html>
  <html>

      <head>
          <meta charset="utf-8" />
          <title>行內(nèi)塊狀元素</title>
          <style type="text/css">
              p {                  
              display: inline-block;                 
              width: 100px;                 
              height: 50px;                 
              background: lightblue;             
              }
         </style>
     </head>

     <body>
         <p>行內(nèi)塊狀元素</p>
         <p>行內(nèi)塊狀元素</p>   
     </body>

 </html>

絕對(duì)路徑與相對(duì)路徑

絕對(duì)路徑：指目錄下的絕對(duì)位置，直接到達(dá)目標(biāo)位置，通常是從盤符開(kāi)始的路徑
相對(duì)路徑：指由這個(gè)文件所在的路徑引起的跟其它文件（或文件夾）的路徑關(guān)系
每一個(gè).向外跳一層

樣式的三種寫法

1.行內(nèi)樣式：

把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中

<p style="color:red">這里文字是紅色。</p>

2.內(nèi)嵌樣式:

嵌入式css樣式，就是可以把css樣式代碼寫在標(biāo)簽之間

<style type="text/css">span{color:red;}</style>

3.外部樣式表:

外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名

<link href="style.css" rel="stylesheet" type="text/css" />

注意：

css樣式文件名必須符合命名規(guī)則，如 main.css
rel=”stylesheet” type=”text/css” 是固定寫法不可修改
css文件也可以在<style></style>中用import引入，但是這種方法不可以用js操作

絕對(duì)定位、相對(duì)定位和固定定位

注意：

1.position屬性可以控制Web瀏覽器如何以及在何處顯示特定的元素。
2.可以使用position屬性把一個(gè)元素放置到網(wǎng)頁(yè)中的任何位置。
可選值：
– static：默認(rèn)值，元素沒(méi)有開(kāi)啟定位
– relative：開(kāi)啟相對(duì)定位
– absolute：開(kāi)啟絕對(duì)定位
– fixed：開(kāi)啟固定定位

3.相對(duì)定位

①每個(gè)元素在頁(yè)面的文檔流中都有一個(gè)自然位置。相對(duì)于這個(gè)位置對(duì)元素進(jìn)行移動(dòng)就稱為相對(duì)定位。周圍的元素完全不受此影響。

②當(dāng)開(kāi)啟了相對(duì)定位以后，可以使用top、 right、bottom、 left四個(gè)屬性對(duì)元素進(jìn)行定位。

—-left：元素相對(duì)于其定位位置的左偏移量。left:100px，相對(duì)與原來(lái)位置向右偏移100px

—-right：元素相對(duì)于其定位位置的右偏移量

—-top：元素相對(duì)于其定位位置的上邊偏移量

—-bottom：元素相對(duì)于其定位位置的下邊偏移量

③相對(duì)定位的特點(diǎn)

—-如果不設(shè)置元素的偏移量，元素位置不會(huì)發(fā)生改變。

—-相對(duì)定位是相對(duì)與元素在文檔流中原來(lái)的位置進(jìn)行定位。

—-相對(duì)定位不會(huì)使元素脫離文本流。元素在文本流中的位置不會(huì)改變。

—-相對(duì)定位不會(huì)改變?cè)卦瓉?lái)的特性。塊元素還是塊元素，內(nèi)聯(lián)還是內(nèi)聯(lián)

—-相對(duì)定位會(huì)使元素的層級(jí)提升，使元素可以覆蓋文本流中的元素。

4.絕對(duì)定位

①絕對(duì)定位指使元素相對(duì)于html元素或離他最近的祖先定位元素進(jìn)行定位。

②當(dāng)將position屬性設(shè)置為absolute時(shí)，則開(kāi)啟了元素的絕對(duì)定位。

③當(dāng)開(kāi)啟了絕對(duì)定位以后，可以使用top、 right、bottom、 left四個(gè)屬性對(duì)元素進(jìn)行定位。

④絕對(duì)定位的特點(diǎn)：

—-絕對(duì)定位會(huì)使元素完全脫離文本流。

—-絕對(duì)定位的塊元素的寬度會(huì)被其內(nèi)容撐開(kāi)。

—-絕對(duì)定位會(huì)使行內(nèi)元素變成塊元素。

—-絕對(duì)定位是相對(duì)于離它最近的開(kāi)啟了定位的祖先元素。如果所有的祖先都沒(méi)有開(kāi)啟定位，則會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位。

—-一般使用絕對(duì)定位時(shí)會(huì)同時(shí)為其父元素指定一個(gè)相對(duì)定位，以確保元素可以相對(duì)于父元素進(jìn)行定位。

—-絕對(duì)定位會(huì)使元素的層級(jí)提升。

5.固定定位

①固定定位的元素會(huì)被鎖定在屏幕的某個(gè)位置上，當(dāng)訪問(wèn)者滾動(dòng)網(wǎng)頁(yè)時(shí)，固定元素會(huì)在屏幕上保持不動(dòng)

②當(dāng)將position屬性設(shè)置為fixed時(shí)，則開(kāi)啟了元素的固定定位。

③當(dāng)開(kāi)啟了固定定位以后，可以使用top、 right、bottom、 left四個(gè)屬性對(duì)元素進(jìn)行定位。

④固定定位也是一種絕對(duì)定位，固定定位的其他特性和絕對(duì)定位類似。

不同：

(1)固定定位永遠(yuǎn)相對(duì)與瀏覽器定位。

(2)會(huì)固定在瀏覽器窗口某個(gè)位置，不會(huì)隨滾動(dòng)條滾動(dòng)。

(3)IE6不支持固定定位。

如果你能讀到這里，小編希望你對(duì)“html學(xué)習(xí)中的重點(diǎn)知識(shí)有哪些”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：html學(xué)習(xí)中的重點(diǎn)知識(shí)有哪些
文章出自：http://www.muchs.cn/article48/jiophp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、搜索引擎優(yōu)化、網(wǎng)站維護(hù)、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容