前端---html

阿新 • • 發佈：2018-08-06

his 工具哈哈哈 face reference 東方明珠國家出了人員

一、HTML介紹

1、HTML的概述

html全稱HyperText Mackeup Language，翻譯為超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式。比如字體、顏色、大小等。

超文本：音頻，視頻，圖片稱為超文本。
標記：<英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組成。

作用：HTML是負責描述文檔語義的語言。

註意：HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執行。

html中，除了語義，其他什麽都沒有。

html是一個純本文文件（就是用txt文件改名而成），用一些標簽來描述文字的語義，這些標簽在瀏覽器裏面是看不到的，所以稱為“超文本”，所以就是“超文本標記語言”了。
所以，接下來，我們肯定要學習一堆html中的標簽對兒，這些標簽對兒能夠給文本不同的語義。

比如，面試的時候問你，h1標簽有什麽作用？

正確答案：給文本增加主標題的語義。
錯誤答案：給文字加粗、加黑、變大。

2、HTML的網絡術語

　　網頁：由各種標記組成的一個頁面就叫網頁。

　　主頁(首頁) : 一個網站的起始頁面或者導航頁面。

　　標記： <p>稱為開始標記，</p>稱為結束標記，也叫標簽。每個標簽都規定好了特殊的含義。

　　元素：<p>內容</p>稱為元素.

　　屬性：給每一個標簽所做的輔助信息。

二、HTML顏色介紹

顏色表示:

純單詞表示：red、green、blue、orange、gray等

10進制表示：rgb(255,0,0)
16進制表示：#FF0000、#0000FF、#00FF00等

我們大家先記住幾個純單詞的顏色，css課程中會詳細講10進制和16進制

RGB色彩模式：

自然界中所有的顏色都可以用紅、綠、藍(RGB)這三種顏色波長的不同強度組合而得，這就是人們常說的三原色原理。
RGB三原色也叫加色模式，這是因為當我們把不同光的波長加到一起的時候，可以得到不同的混合色。例：紅+綠=黃色，紅+藍＝紫色，綠+藍=青
在數字視頻中，對RGB三基色各進行8位編碼就構成了大約1678萬種顏色，這就是我們常說的真彩色。所有顯示設備都采用的是RGB色彩模式。
RGB各有256級(0-255)亮度，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216。

三、 HTML的規範

　　HTML是一個弱勢語言

　　HTML不區分大小寫

　　HTML頁面的後綴名是html或者htm(有一些系統不支持後綴名長度超過3個字符，比如dos系統)

　　HTML的結構：

　　　　聲明部分：主要作用是用來告訴瀏覽器這個頁面使用的是哪個標準。是HTML5標準。

　　　　head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。

　　　　body部分：我們所寫的代碼必須放在此標簽內。

1、編寫HTML的規範

(1）所有標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>

（2）所有的標記都必須小寫。

（3）所有的標記都必須關閉。

雙邊標記：<span></span>
單邊標記：<br> 轉成 <br /> <hr> 轉成 <hr />，還有<img src=“URL” />

（4）所有的屬性值必須加引號。<h1 id="head"></h1>

（5）所有的屬性必須有值。<input type="radio" checked="checked" />

2、HTML的基本語法特征

（1）HTML對換行不敏感，對tab不敏感

　　HTML只在乎標簽的嵌套結構，嵌套的關系。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。

　　也就是說，HTML不是依靠縮進來表示嵌套的，就是看標簽的包裹關系。但是，我們發現有良好的縮進，代碼更易讀。要求大家都正確縮進標簽。

(2) 空白折疊現象

　　HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。

（3）標簽要嚴格封閉

四、HTML結構詳解

新建HTML文件，輸入 html:5,按tab鍵後，自動生成的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1、文檔聲明頭

任何一個標準的HTML頁面，第一行一定是一個以

<!DOCTYPE...

開頭的這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。

2、頭標簽（head）

head標簽都放在頭部分之間。這裏面包含了：<title>、<meta>、<link>，<style>

<title>：指定整個網頁的標題，在瀏覽器最上方顯示。
<meta>：提供有關頁面的基本信息
<link>：定義文檔與外部資源的關系。
<style>:定義內部樣式表與網頁的關系

2.1 Meta標簽介紹：

meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。

（1）http-equiv屬性

它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。

<!--重定向 2秒後跳轉到對應的網址，註意分號-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--指定文檔的內容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

（2）name屬性

主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字可以有多個用 ‘,’號隔開，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />

這些關鍵詞，就是告訴搜索引擎，這個網頁是幹嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到。

<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、遊戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />

只要設置Description頁面描述，那麽百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO（search engine optimization，搜索引擎優化）

<meta name=viewport content="width=device-width, initial-scale=1">

上面這個標簽，是讓我們網頁支持移動端，移動設備優先（了解即可）

2.2 title標簽

　　主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麽，搜索引擎可以通過網頁標題，迅速的判斷出當前網頁的主題。

 <title>路飛學城</title>

效果如下：

技術分享圖片

2.3 link標簽

鏈接css文件裏的css樣式

html文件代碼：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
    <div>哈哈哈哈哈</div>
</body>
</html>

css文件代碼：
div {
    background-color: yellow;
}

2.4 style標簽

<style type="text/css"></style>
下面寫css樣式

3.body標簽

3.1 h系列標簽

　　標題使用<h1>至<h6>標簽進行定義。<h1>定義最大的標題，<h6>定義最小的標題。具有align屬性，屬性值可以是：left、center、right。

3.2 粗體標簽<b>或<strong>(已放棄)

<b>小馬哥</b>
<strong>小馬哥</strong>

3.3 斜體標記 `<i>`或`<em>`（已廢棄）

<i>小馬哥</i>
<em>小馬哥</em>

3.4 下劃線標記 `<u>` 中劃線標記`<s>`（已廢棄）

<u>小馬哥</u>
<s>小馬哥</s>

3.5 上標<sup> 下標<sub>

上下標這兩個標簽容易混淆，怎麽記呢？這樣記：b的意思是bottom：底xi

5<sup>2</sup>
8<sub>2</sub>

技術分享圖片

3.5 字體標簽<font>(已廢棄)

color="紅色"或color="#ff00cc"或color="new rgb(0,0,255)"：設置字體顏色。設置方式：單詞 #ff00cc rgb(0,0,255)

size：設置字體大小。取值範圍只能是：1至7。取值時，如果取值大於7那就按照7來算，如果取值小於1那就按照1來算。如果想要更大的字體，那就只能通過css樣式來解決
face="微軟雅黑"：設置字體類型。註意在寫字體時，“微軟雅黑”這個字不能寫錯。

實例：

<font face="微軟雅黑" color="green" size="8">字體</font>

特殊字符：

 ：空格（non-breaking spacing，不斷打空格）
<：小於號（less than）
>：大於號（greater than）
&：符號&
"：雙引號
'：單引號
©：版權?
™：商標?

要求大家背過的特殊字符： 、<、>、&copy

比如說，你想把<p>作為一個文本在頁面上顯示，直接寫<p>是肯定不行的，因為這代表的是一個段落標簽，所以這裏需要用到轉義字符。應該這麽寫：

這是一個HTML語言的&lt;p&gt;標簽

技術分享圖片

3.6 段落標簽<p>

段落：是英文paragraph的縮寫。

屬性：

align=‘屬性值‘：對齊方式。屬性值包括：left、center、right

<p>這是一個段落</p>
<p align="center">這是另一個段落</p>

ok,下面這幾句話，大家一定牢牢記住。HTML標簽是分等級的。HTML將所有的標簽分為兩種：

文本級標簽：p、span、a、b、i、u、em。文本標簽裏只能放文字、圖片、表單元素。
容器級標簽：div、h系列、li、dt、dd。容器級標簽裏可以放任何東西。

從學習p的第一天開始，就要死死記住：p標簽是一個文本級標簽，p裏面只能放文字、圖片、表單元素。其他的一律不能放。

錯誤寫法：（把h系列的標簽放到p裏）

<p>
    我是個段落
    <h2>我是二級標題</h2>
</p>

技術分享圖片

上圖顯示，瀏覽器不允許你這麽做。我們使用Chrome的F12審查元素發現，瀏覽器自己把p封閉掉了，不讓你去包裹h2。

PS：Chrome瀏覽器是世界上HTML5支持最好的瀏覽器。提供了非常好的開發工具，非常適合我們開發人員使用。審查元素功能的快捷鍵是F12。

3.7 標簽 <div>和<span>

div和span是非常重要的標簽，div的語義是division“分割”； span的語義就是span“範圍、跨度”。CSS課程中你將知道，這兩個東西，都是最最重要的“盒子”。

div：把標簽中的內容作為一個塊兒來對待(division)。必須單獨占據一行。

div標簽的屬性

　　align="屬性值"：設置塊兒的位置。屬性值可選擇：left、right、 center

<span>和<div>唯一的區別在於：<span>是不換行的，而<div>是換行的。

如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門為定義CSS樣式而生的。或者說，DIV+CSS來實現各種樣式。

div在瀏覽器中，默認是不會增加任何的效果的，但是語義變了，div中的所有元素是一個小區域。

div標簽是一個容器級標簽，裏面什麽都能放，甚至可以放div自己。

span也是表達“小區域、小跨度”的標簽，但是是一個文本級的標簽。

就是說，span裏面只能放置文字、圖片、表單元素。 span裏面不能放p、h、ul、dl、ol、div。

3.8 換行標簽<br> （已廢棄）

當你打算結束一行，而又不想開始一個新段落時，<br>標簽就派上用場了。無論你將它置於何處，<br>標簽都會產生一個強制的換行。

This <br> is a para<br>graph with line breaks

技術分享圖片

上圖顯示，<p>標簽和<br>標簽的區別在於：<p>標簽會在段落的前後自動插入一個空行，而<br>標簽沒有空行；而且<br>標簽沒有屬性。

註意<br> 沒有結束標簽，把<br>標簽寫為 <br/> 是經得起未來考驗的做法，XHTML 和 XML 都接受在打開的標簽內部來關閉標簽的做法。

3.9 水平線標簽`<hr>`（已廢棄）

水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個部分

 <p>小馬哥</p>
    <hr>
    <hr>
<p>我是段落</p>
This <br> is a para<br>graph with line breaks

技術分享圖片

3.10 內容居中標簽 `<center>`

此時center代表是一個標簽，而不是一個屬性值了。只要是在這個標簽裏面的內容，都會居於瀏覽器的中間。

<center>
       <p>小馬哥</p>
</center>

技術分享圖片

到了H5裏面，center標簽不建議使用。

3.11 預定義（預格式化）標簽：`<pre>`

含義：將保留其中的所有的空白字符(空格、換行符)，原封不動的輸出結果（告訴瀏覽器不要忽略空格和空行）
說明：真正排網頁過程中，<pre>標簽幾乎用不著。但在PHP中用於打印一個數組時使用。

 <pre>
        鵝鵝鵝

            作者：李白
        曲項向天歌
        白毛浮綠水
        
 </pre>

技術分享圖片

上圖中，好像pre標簽部分的字體變小了，而且還出現了縮進，好吧，這個其實是瀏覽器搞的鬼。
為什麽要有<pre>這個標簽呢？答案是：

所有的瀏覽器默認情況下都會忽略空格和空行。

好吧，其實這個標簽也用的比較少。排版標簽就給大家介紹到這裏。

3.12 a標簽----超鏈接

a是英語anchor“錨”的意思，就好像這個頁面往另一個頁面扔出了一個錨。是一個文本級的標簽。

href是英語hypertext reference超文本地址的縮寫。讀作“喝瑞夫”，不要讀作“喝夫”。

超鏈接有三種形式：

1、外部鏈接：鏈接到外部文件。舉例：

<a href="new.html">點擊進入到新網頁</a>

當然，我們也可以直接點進鏈接，訪問一個網址。舉例如下；

 <a href="http://www.baidu.com" target="_blank">進入百度</a>

2、錨鏈接：

指給超鏈接起一個名字，作用是在本頁面或者其他頁面的的不同位置進行跳轉。比如說，在網頁底部有一個向上箭頭，點擊箭頭後回到頂部，這個就是利用到了錨鏈接。
首先我們要創建一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。效果如下：

技術分享圖片

上圖中解釋：

11行代碼表示，頂部這個錨的名字叫做top。
然後在底部設置超鏈接，點擊時將回到頂部（此時，網頁中的url的末尾也出現了#top）。註意上圖中紅框部分的#號不要忘記了，表示跳到名為top的特定位置，這是規定。如果少了#號，點擊之後，就會跳到top這個文件或者top這個文件夾中去。

如果我們將上圖中的第23行代碼寫成：

<a href="new.hhml#top">回到頂部</a>

就表示，點擊之後，跳轉到new.html頁面的top錨點中去。

說明：name屬性是HTML4.0以前使用的，id屬性是HTML4.0後才開始使用。為了向前兼容，因此，name和id這兩個屬性都要寫上，並且值是一樣的。

3、郵件鏈接：

<a href="mailto:[email protected]">聯系我們</a>

效果：點擊之後，會彈出outlook，作用不大。

前提：計算機中必須安裝郵件客戶端，並且配置好了郵件相關信息

特殊幾個鏈接：

返回頁面頂部的位置

 <a href="#">跳轉到頂部</a>

與js有關：

 <a href="javascript:alert(1)">內容</a>
 <a href="javascript:;">內容</a>

javascript:;表示什麽都不執行，這樣點擊<a>時就沒有任何反應例如：<a href="javascrip:;">內容</a>
javascript:是表示在觸發<a>默認動作時，執行一段JavaScript代碼。例如：<a href="javascript:alert(1)">內容</a>

超鏈接的屬性

href：目標URL
title：懸停文本。
name：主要用於設置一個錨點的名稱。
target：告訴瀏覽器用什麽方式來打開目標頁面。target屬性有以下幾個值：
- _self：在同一個網頁中顯示（默認值）
- _blank：在新的窗口中打開。
- _parent：在父窗口中顯示
- _top：在頂級窗口中顯示

blank就是“空白”的意思，就表示新建一個空白窗口。為啥有一個_ ，就是規定，沒啥好解釋的。
也就是說，如果不寫target=”_blank”那麽就是在相同的標簽頁打開，如果寫了target=”_blank”，就是在新的空白標簽頁中打開。

ps:a是一個文本級的標簽

比如一個段落中的所有文字都能夠被點擊，那麽應該是p包含a；

<p>
    <a href="">段落段落段落段落段落段落</a>
</p>

而不是a包裹p：

<a href="">
    <p>
        段落段落段落段落段落段落
    </p>
</a>

a的語義要小於p，a就是可以當做文本來處理，所以p裏面相當於放的就是純文字。

3.13 圖片標簽 <img />

img: 代表的就是一張圖片。是單邊標記。

img是自封閉標簽，也稱為單標簽。

能插入的圖片類型：

能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp。類型和類型之間有什麽區別，css課上講。
不能往網頁中插入的圖片格式是：psd、ai

HTML頁面不是直接插入圖片，而是插入圖片的引用地址，所以也要把圖片上傳到服務器上。

`src`屬性：圖片的相對路徑和絕對路徑

這裏涉及到圖片的一個屬性：

src屬性：指圖片的路徑。

在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑

1、寫法一：相對路徑

相對當前頁面所在的路徑。兩個標記 . 和 .. 分表代表當前目錄和父路徑。

舉例1：

<!-- 當前目錄中的圖片 -->
<img src="2.jpg">
<img src=".\2.jpg"> 
<!-- 上一級目錄中的圖片 -->
<img src="..\2.jpg">

img 是image“圖片”的簡寫，src 是英語source“資源”的縮寫。

舉例2：

<img src="images/1.jpg">

上方代碼的意思是說，當前頁面有一個並列的文件夾images，在文件夾images中存放了一張圖片1.jpg

2、寫法二：絕對路徑

（1）以盤符開始的絕對路徑。舉例：

<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

（2）網絡路徑。舉例：

<img src="http://www.baidu.com/2016040102.jpg">

總結一下：

　　我們現在無論是在a標簽、img標簽，如果要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。

　　相對路徑，就是../ image/ 這種路徑。從自己出發，找到別人；　　

　　絕對路徑，就是http://開頭的路徑。

　　絕對不允許使用file://開頭的東西，這個是完全錯誤的！

img標簽的常用其它屬性

　　width：寬度

　　height：高度

　　title：提示性文本。公有屬性。也就是鼠標懸停時出現的文本。

　　align：指圖片的水平對齊方式，屬性值可以是：left、center、right

　　alt：當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate “替代”的意思。（有的瀏覽器不支持）

技術分享圖片

文本級的標簽顯示在瀏覽器上時，不管你的圖片多高，它總會底邊對齊，這是一種現象，“高矮不齊，底邊對齊”。

此時大家可以給圖片設置align屬性，來查看效果吧！

註意事項：
（1）如果要想保證圖片等比例縮放，請只設置width和height中其中一個。
（2）如果想實現圖文混排的效果，請使用align屬性，取值為left或right

如果想點擊圖片的時候跳轉到某個鏈接，應該是：

<a>
   <img src="images/bojie.jpeg" alt="波姐" title=‘波多野結衣‘>
</a>

3.14 列表標簽

列表標簽分為三種。

1、無序列表`<ul>`，無序列表中的每一項是`<li>`

英文單詞解釋如下：

　　ul：unordered list，“無序列表”的意思。

　　li：list item，“列表項”的意思。

註意：

　　li不能單獨存在，必須包裹在ul裏面；反過來說，ul的“兒子”不能是別的東西，只能有li。

　　我們這裏再次強調，ul的作用，並不是給文字增加小圓點的，而是增加無序列表的“語義”的。

屬性：

type="屬性值"。屬性值可以選： disc(實心原點，默認)，square(實心方點)，circle(空心圓)。

效果如下：

技術分享圖片

列表之間是可以嵌套的。我們來舉個例子：

聲明：ul的兒子，只能是li。但是li是一個容器級標簽，li裏面什麽都能放。甚至可以再放一個ul

2、有序列表`<OL>`，裏面的每一項是`<li>`

英文單詞：Ordered List。

屬性：

type="屬性值"。屬性值可以是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始。

效果：

技術分享圖片

和無序列表一樣，有序列表也是可以嵌套的哦，這裏就不舉類似的例子了。

ol和ul就是語義不一樣，怎麽使用都是一樣的。
ol裏面只能有li，li必須被ol包裹。li是容器級。

3、定義列表`<dl>`

定義列表的作用非常大。

<dl>英文單詞：definition list，沒有屬性。dl的子元素只能是dt和dd。

<dt>：definition title 列表的標題，這個標簽是必須的
<dd>：definition description 列表的列表項，如果不需要它，可以不加

備註：dt、dd只能在dl裏面；dl裏面只能有dt、dd。

代碼：

<dl>
        <dt>第一條規則</dt>
        <dd>不準睡覺</dd>
        <dd>不準交頭接耳</dd>
        <dd>不準下神</dd>

        <dt>第二條規則</dt>
        <dd>可以泡妞</dd>
        <dd>可以找妹子</dd>
        <dd>可以看mv</dd>
</dl>

效果：

技術分享圖片

上圖可以看出，定義列表表達的語義是兩層：

（1）是一個列表，列出了幾個dd項目
（2）每一個詞兒都有自己的描述項。

備註：dd是描述dt的。

定義列表用法非常靈活，可以一個dt配很多dd：

   <dl>
        <dt>北京</dt>
        <dd>國家首都，政治文化中心</dd>
        <dd>汙染很嚴重，PM2.0天天報表</dd>
        <dt>上海</dt>
        <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
        <dt>廣州</dt>
        <dd>中國南大門，有珠江、小蠻腰</dd>
    </dl>

還可以拆開，讓每一個dl裏面只有一個dt和dd，這樣子感覺清晰一些：

    <dl>
        <dt>北京</dt>
        <dd>國家首都，政治文化中心</dd>
        <dd>汙染很嚴重，PM2.0天天報表</dd>
    </dl>

    <dl>
        <dt>上海</dt>
        <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
    </dl>

    <dl>
        <dt>廣州</dt>
        <dd>中國南大門，有珠江、小蠻腰</dd>
    </dl>

京東案例（京東首頁最下方）

技術分享圖片

dt、dd都是容器級標簽，想放什麽都可以。所以，現在就應該更加清晰的知道：用什麽標簽，不是根據樣子來決定，而是語義（語義本質上是結構）。

3.15 表格標簽

3.16 表單標簽

標簽總結

head標簽：

　　（1）meta標簽：單閉合標簽 http-equiv屬性和name屬性，與之對應的屬性值均為content

　　（2）title標簽：雙閉合標簽

　　（3）link標簽：單閉合標簽 rel屬性、type屬性、href屬性

　　（4）style標簽：雙閉合標簽 type=“text/css”

body標簽：

　　字體標簽：

　　　　h1~h6:①獨占一行，塊級標簽

　　　　　　　②可以設置寬高，如果不設置寬，則默認是父類的100%寬度

　　　　　　　③h1標題只能設置一個------設置logo

　　　　　　 ④雙閉合標簽 align屬性，屬性值可以是：left、center、right。

　　　　粗體標簽<b>或<strong>：

　　　　　　　①在一行內顯示，行內標簽

　　　　　　　②不可以設置寬高，默認是字體的大小

　　　　　　 ③雙閉合標簽

　　　　斜體標簽<i>或<em>：

　　　　　　　①在一行內顯示，行內標簽

　　　　　　　②不可以設置寬高，默認是字體的大小

　　　　　　 ③雙閉合標簽

　　　　下劃線標記 <u>

　　　　　　　①在一行內顯示，行內標簽

　　　　　　　②不可以設置寬高，默認是字體的大小

　　　　　　 ③雙閉合標簽

　　　中劃線標記<s>

　　　　　　　①在一行內顯示，行內標簽

　　　　　　　②不可以設置寬高，默認是字體的大小

　　　　　　 ③雙閉合標簽

　　　　上標<sup> 下標<sub>

　　　　　　　①在一行內顯示，行內標簽

　　　　　　　②不可以設置寬高，默認是字體的大小

　　　　　　 ③雙閉合標簽

　　　　字體標簽<font>

　　　　　　　①在一行內顯示，行內標簽

　　　　　　　②不可以設置寬高，默認是字體的大小

　　　　　　 ③雙閉合標簽

　　排版標簽

　　　　p標簽:①獨占一行，塊級標簽

　　　　　 ②可以設置寬高，如果不設置寬，則默認是父類的100%寬度

　　　　　　 ③雙閉合標簽 align屬性，屬性值可以是：left、center、right。

④文本級標簽：p、span、a、b、i、u、em。文本標簽裏只能放文字、圖片、表單元素。

　　　　div標簽：①獨占一行，塊級標簽

　　　　　 ②可以設置寬高，如果不設置寬，則默認是父類的100%寬度

　　　　　　 ③雙閉合標簽 align屬性，屬性值可以是：left、center、right。

　　　　　　　　④容器級標簽：div、h系列、li、dt、dd。容器級標簽裏可以放任何東西。

　　　 span標簽：①在一行內顯示，行內標簽

　　　　　　　　　②不可以設置寬高，默認是字體的大小

　　　　　　　　③雙閉合標簽

　　　換行標簽<br> ：①單閉合標簽

　　　水平線標簽<hr>: ①單閉合標簽

　　　內容居中標簽<center>:①雙閉合標簽

　　　預定義（預格式化）標簽<pre>:①雙閉合標簽

　　　 a標簽：①在一行內顯示，行內標簽

　　　　　　　②不可以設置寬高，默認是字體的大小

　　　　　　　③雙閉合標簽 href屬性

　　　　　　　④文本級標簽：p、span、a、b、i、u、em。文本標簽裏只能放文字、圖片、表單元素。

　　　image標簽：①行內塊級標簽

　　　　　　　 ②可以設置寬高，如果不設置寬，則默認是父類的100%寬度

　　　　　　　　 ③單閉合標簽

　　 li標簽：①獨占一行，塊級標簽

　　　　　 ②可以設置寬高，如果不設置寬，則默認是父類的100%寬度

　　　　　　 ③雙閉合標簽

　　　　　　④容器級標簽：div、h系列、li、dt、dd。容器級標簽裏可以放任何東西。

dt標簽和dd標簽：①獨占一行，塊級標簽

　　　　　 ②可以設置寬高，如果不設置寬，則默認是父類的100%寬度

　　　　　　　　③雙閉合標簽

　　　　　　　 ④容器級標簽：div、h系列、li、dt、dd。容器級標簽裏可以放任何東西。

前端---html

前端---html

一、HTML介紹

1、HTML的概述

2、HTML的網絡術語

二、HTML顏色介紹

三、 HTML的規範

1、編寫HTML的規範

2、HTML的基本語法特征

（1）HTML對換行不敏感，對tab不敏感

(2) 空白折疊現象

（3）標簽要嚴格封閉

四、HTML結構詳解

1、文檔聲明頭

2、頭標簽（head）

2.1 Meta標簽介紹：

2.2 title標簽

2.3 link標簽

2.4 style標簽

3.body標簽

3.1 h系列標簽

3.2 粗體標簽<b>或<strong>(已放棄)

3.3 斜體標記 <i>或<em>（已廢棄）

3.4 下劃線標記 <u> 中劃線標記<s>（已廢棄）

3.5 上標<sup> 下標<sub>

3.5 字體標簽<font>(已廢棄)

3.6 段落標簽<p>

3.7 標簽 <div>和<span>

3.8 換行標簽<br> （已廢棄）

3.9 水平線標簽<hr>（已廢棄）

3.10 內容居中標簽 <center>

3.11 預定義（預格式化）標簽：<pre>

3.12 a標簽----超鏈接

特殊幾個鏈接：

超鏈接的屬性

ps:a是一個文本級的標簽

3.13 圖片標簽 <img />

能插入的圖片類型：

src屬性：圖片的相對路徑和絕對路徑

1、寫法一：相對路徑

2、寫法二：絕對路徑

img標簽的常用其它屬性

3.14 列表標簽

1、無序列表<ul>，無序列表中的每一項是<li>

列表之間是可以嵌套的。我們來舉個例子：

2、有序列表<OL>，裏面的每一項是<li>

3、定義列表<dl>

3.15 表格標簽

3.16 表單標簽

標簽總結

相關推薦

3.3 斜體標記 `<i>`或`<em>`（已廢棄）

3.4 下劃線標記 `<u>` 中劃線標記`<s>`（已廢棄）

3.9 水平線標簽`<hr>`（已廢棄）

3.10 內容居中標簽 `<center>`

3.11 預定義（預格式化）標簽：`<pre>`

`src`屬性：圖片的相對路徑和絕對路徑

1、無序列表`<ul>`，無序列表中的每一項是`<li>`

2、有序列表`<OL>`，裏面的每一項是`<li>`

3、定義列表`<dl>`