1.html基述

1.1 html概述

html：超文本標(biāo)記語言 Hypertext Markup Language 用于搭建網(wǎng)頁的結(jié)構(gòu)。

網(wǎng)頁的組成：

前端三層： html(結(jié)構(gòu)層) css(樣式層) JavaScript(行為層)

其他的多媒體內(nèi)容：圖片視頻音頻超級(jí)鏈接等

運(yùn)行過程：將網(wǎng)頁上傳的到服務(wù)器 ---> 服務(wù)器 <---- 客戶端發(fā)送html請(qǐng)求到服務(wù)器

服務(wù)器通過http響應(yīng)將請(qǐng)求傳回的到客戶端，通過客戶端將網(wǎng)頁渲染

html是一種純文本格式文件。

超文本：超級(jí)文本用來鏈接另一個(gè)文本或多媒體內(nèi)容的文本，鏈接到圖片，鏈接，音頻，視頻，程序等

標(biāo)記：標(biāo)簽 html tag 有特殊的書寫規(guī)范，是寫給瀏覽器的一種語法格式，結(jié)合普通的文字信息，實(shí)現(xiàn)特殊的語義或顯示內(nèi)容。在編輯器匯總可以編輯和查看，在瀏覽器中不顯示

<h1>HTML概念<h1>
<h2>超文本</h2>
<p>是超級(jí)文本的簡稱，簡單來說就是用于鏈接到另一個(gè)文本或多媒體內(nèi)容的文本</p>
<img src="images/smile01.jpg" >

功能：利用標(biāo)記給普通文本添加語義，描述超文本內(nèi)容，搭建網(wǎng)頁的基本結(jié)構(gòu)

1.1 html語義化

合適的標(biāo)簽做合適的事情

1.方便代碼閱讀和后期維護(hù)

2.便于瀏覽或者網(wǎng)絡(luò)爬蟲更好地解析網(wǎng)站內(nèi)容

3.使用語義化標(biāo)簽有利于SEO搜索引擎優(yōu)化，提高網(wǎng)站的搜索排名

1.2 .互聯(lián)網(wǎng)原理

1.2.1 服務(wù)器和客戶端

服務(wù)器：一種特殊的計(jì)算機(jī)

作用：對(duì)于開發(fā)人員來說，用于存儲(chǔ)開發(fā)人員上傳的網(wǎng)頁數(shù)據(jù)，且需要響應(yīng)服務(wù)請(qǐng)求，并進(jìn)行處理

服務(wù)器是24小時(shí)工作不間斷的

云服務(wù)器：簡單高效安全可靠處理能力可彈性伸縮的計(jì)算服務(wù)

客戶端：普通用戶使用的終端瀏覽器 app

1.2.2 瀏覽器：

用戶上網(wǎng)搜索，查看信息的應(yīng)用程序

功能：用于發(fā)送http請(qǐng)求到服務(wù)器，接收服務(wù)器發(fā)送的http響應(yīng)，渲染html頁面

主流瀏覽器的內(nèi)核:

瀏覽器	內(nèi)核	說明
IE Edge	Trident	ie內(nèi)核
FireFox	Gecko	FireFox內(nèi)核
Safari	Webkit
Chrome	Webkit -->blink	統(tǒng)稱為chrome內(nèi)核 chromium內(nèi)核
Opera	Presto->webkit->blink

瀏覽器的功能：1.發(fā)送http請(qǐng)求，發(fā)送方式是在瀏覽器地址欄輸入對(duì)應(yīng)的網(wǎng)址，或者點(diǎn)擊超級(jí)鏈接

2.接收服務(wù)器發(fā)回的http響應(yīng)，服務(wù)器會(huì)發(fā)回一個(gè)html給瀏覽器

3.將接收的html渲染出來

1.2.3 http協(xié)議：

Hypertext Transfer Protocol:超文本傳輸協(xié)議，是客戶端劉拉你或其他程序與web服務(wù)器之間的應(yīng)用層通信協(xié)議

http請(qǐng)求：request 瀏覽器根據(jù)網(wǎng)址向?qū)?yīng)的服務(wù)器發(fā)送請(qǐng)求

http響應(yīng)：response 服務(wù)器根據(jù)請(qǐng)求響應(yīng)一個(gè)html文件，將文件傳輸給客戶端，在瀏覽器中進(jìn)行html渲染

1.3 純文本格式

純文本格式：沒有任何文本修飾，沒有任何粗體，下劃線，斜體，圖片，符號(hào)或特殊字符及特殊打印格式的文本，只保存文本，不保存其格式的設(shè)置

常見格式是：.txt文件

特點(diǎn)：1.文件只能保存文本，不保存其他的格式或非文本內(nèi)容，利于網(wǎng)絡(luò)傳輸

2.所有的純文本格式的文件，可以通過直接更改擴(kuò)展名的方式更改保存格式。

3.純文本格式文件可以使用任意的純文本編輯器進(jìn)行查看和編輯

.html .js .css都是純文本格式文件

富文本格式：與純文本對(duì)應(yīng) 。常見的是.rtf文件 .doc文件內(nèi)部可以保存文本樣式，圖片等

1.4 html基本語法

1.4.1 HTML規(guī)范版本

W3C: 萬維網(wǎng)聯(lián)盟專門發(fā)布和維護(hù)互聯(lián)網(wǎng)的規(guī)格和標(biāo)準(zhǔn)

1.4.2 HTML標(biāo)簽

HTML標(biāo)記通常被稱為HTML標(biāo)簽 html tag.標(biāo)簽再書寫和使用過程中，必須遵循特定的語法

標(biāo)簽名必須書寫在一對(duì)尖括號(hào)<>內(nèi)部
```
<html></html>
```
標(biāo)簽分單標(biāo)簽和雙標(biāo)簽，雙標(biāo)簽必須成對(duì)出現(xiàn)
```
<p></p>  雙標(biāo)簽
<br />   單標(biāo)簽
```
雙標(biāo)簽包含開始標(biāo)簽和結(jié)束標(biāo)簽，結(jié)束標(biāo)簽必須書寫關(guān)閉符合/.單標(biāo)簽也需要進(jìn)行自行封閉書寫，在HTML5中，單標(biāo)簽可以不寫關(guān)閉符號(hào)

1.4.2 HTML元素

html元素指從開始標(biāo)簽到結(jié)束標(biāo)簽的所有容。包含開始標(biāo)簽，內(nèi)容，結(jié)束標(biāo)簽

元素內(nèi)容：純文本，其他html的元素包含其他html元素內(nèi)容的情況，稱為嵌套。div標(biāo)簽元素內(nèi)部嵌套p標(biāo)簽元素

<div>
    <p>這是div內(nèi)部的段落</p>
</div>

一個(gè)html元素div內(nèi)容可以h1,p.

div是h1,p的父級(jí)元素。h1,p互為兄弟關(guān)系

<div>
    <h1>這是div內(nèi)部的標(biāo)題</h1>
    <p>這是div內(nèi)部的段落</p>
</div>

標(biāo)簽的級(jí)別：

容器級(jí)：可以存放任意內(nèi)容，包含容器級(jí)標(biāo)簽 h1 div

文本級(jí)：標(biāo)簽內(nèi)部只能存放文字或類似文本的內(nèi)容，比如圖片，表單元素等 p

特性：

1.元素間對(duì)空格，換行，縮進(jìn)等形成的空白不敏感。有無空白對(duì)在瀏覽器中加載的效果是沒有影響。瀏覽器識(shí)別的是元素的開始和結(jié)束以及互相之間的嵌套關(guān)系

2.空白折疊現(xiàn)象：元素內(nèi)容如果是文本，所有文字(類似文字內(nèi)容)之間如果有空格，換行，縮進(jìn)等空白不敏感，出現(xiàn)空白折疊現(xiàn)象。

1.4.3 html屬性

規(guī)范：

1.書寫位置：必須寫在開始標(biāo)簽或者單標(biāo)簽之內(nèi)，與標(biāo)簽名之間用空格進(jìn)行分割。

2.屬性包含：屬性名(key)，屬性值(value).屬性名與屬性值之間的寫法通常稱作鍵值對(duì)寫法。html標(biāo)簽屬性的鍵值對(duì)寫法是k="v"。XHTML要求屬性值必須在雙引號(hào)內(nèi)部

3.一個(gè)標(biāo)簽可以設(shè)置多個(gè)不用的屬性，屬性與屬性之間用空格進(jìn)行分割。每個(gè)屬性的鍵值對(duì)的寫法都是k="v"

4.部分標(biāo)簽的屬性k可以設(shè)置多個(gè)屬性值v.所有屬性值v都必須在同一對(duì)雙引號(hào)內(nèi)，值與值之間需要使用空格分隔

1.5 HTML基本骨架

html文件最基本的四個(gè)標(biāo)簽，組成了網(wǎng)頁的基本骨架。

<html>
  <head>
    <title>網(wǎng)頁的標(biāo)題</title>
  </head>
  <body>
    網(wǎng)頁的主體
  </body>
</html>

1.html標(biāo)簽。 html的根元素。所有標(biāo)簽必須在寫html標(biāo)簽的內(nèi)部

2.head標(biāo)簽。用于存放title,meta,base,style,script,link。內(nèi)部用于對(duì)網(wǎng)頁的設(shè)置，除了titl內(nèi)部的文字，其他標(biāo)簽不顯示在瀏覽器上。

注意:head標(biāo)簽中我們必須要設(shè)置的是title

3.title標(biāo)簽

作用：a:讓頁面擁有一個(gè)屬于自己的標(biāo)題

b:title中的關(guān)鍵字可以作為搜索引擎抓取時(shí)的關(guān)鍵字，提高seo搜索引擎優(yōu)化

c:內(nèi)部的內(nèi)容會(huì)顯示在搜索結(jié)果的標(biāo)題部分

d:作為瀏覽器收藏夾默認(rèn)的網(wǎng)頁標(biāo)題

e:建議網(wǎng)頁必須添加title標(biāo)簽內(nèi)部內(nèi)容，內(nèi)容精簡，提取關(guān)鍵字

4.body標(biāo)簽

作用：定義網(wǎng)頁的主體部分，用于存放所有的html顯示內(nèi)容的標(biāo)簽如 p h1 div a等

body標(biāo)簽內(nèi)部的元素內(nèi)容顯示在瀏覽器的窗口中

1.6 DTD 命名空間字符集

1.6.1 DTD

完整的html文件的第一行內(nèi)容叫做文檔定義類型 DocType Definition DTD

文檔聲明類型 DocType Declaration

作用：告知瀏覽器該網(wǎng)頁使用的是哪個(gè)版本的html規(guī)范，讓瀏覽器按照對(duì)應(yīng)版本的html語法進(jìn)行解析頁面。

<!DOCTYPE html>   <!-- html5的 -->

1.6.2 命名空間

html元素標(biāo)簽整個(gè)網(wǎng)頁文檔，在開始標(biāo)簽上設(shè)置了命名空間xmlns的屬性

xml：可擴(kuò)展標(biāo)記語言使用在傳輸過程中的規(guī)范，被設(shè)計(jì)來傳輸和存儲(chǔ)數(shù)據(jù) 是html的補(bǔ)充

xmlns:XML NameSpace NameSpace命名空間瀏覽器會(huì)將此命名空間用于該屬性所在元素內(nèi)的所有內(nèi)容

html元素的命名空間規(guī)定了在不同用戶的瀏覽器匯總標(biāo)簽語義遵循的統(tǒng)一標(biāo)準(zhǔn)，避免出現(xiàn)標(biāo)簽命名沖突。

對(duì)搜索引擎和瀏覽器是有幫助的

<html lang="en"></html>
<html lang="zh"></html>

1.6.2 字符集

<html>
  <head>
    <meta charset="utf-8">
  </head>
</html>

常用字符集編碼：

國際通用字庫：

utf-8 以字節(jié)為單位對(duì)unicode萬國碼進(jìn)行編碼涵蓋了人類所有的語言一個(gè)漢字為3個(gè)字節(jié)

中國國標(biāo)字庫：gb2312,gbk 一個(gè)漢字為2個(gè)字節(jié)

使用情況建議:

1.如果沒有網(wǎng)頁加載速度要求，或制作外文網(wǎng)站 utf-8

2.如果含有大量中文漢字的網(wǎng)站要求網(wǎng)頁加載速度快 gbk

注意：meat標(biāo)簽聲明的字庫，必須和編輯器軟件的默認(rèn)編譯字庫相同，否則會(huì)出現(xiàn)兩個(gè)字庫不匹配，瀏覽器加載時(shí)出現(xiàn)亂碼

2.html標(biāo)簽

2.1 注釋

注釋是在編輯器中可以查看，瀏覽器中看不到

用途：

1.在源代碼中添加描述信息，方便開發(fā)人員閱讀代碼

2.對(duì)html糾錯(cuò)也很大的幫助，通過注釋來檢索代碼的錯(cuò)誤

3.暫時(shí)注釋掉一部分不用的代碼，便于后期恢復(fù)代碼

<html>
  <body>
    <!-- 我是一行注釋 -->
  </body>
</html>

2.2 標(biāo)題標(biāo)簽

標(biāo)題：通過h1-h6六個(gè)標(biāo)簽分別來對(duì)六個(gè)級(jí)別的標(biāo)題進(jìn)行定義的。

h1定義最大的標(biāo)題，h6定義最小的標(biāo)簽

h1-h6標(biāo)簽都是雙標(biāo)簽，且是容器級(jí)標(biāo)簽

作用：給標(biāo)簽內(nèi)部的元素內(nèi)容添加對(duì)應(yīng)級(jí)別標(biāo)題語義，不負(fù)責(zé)文字的粗體，字號(hào)等樣式。

樣式由css設(shè)定。

標(biāo)簽的級(jí)別：

標(biāo)題標(biāo)簽之間不能相互嵌套，下一級(jí)標(biāo)題與上一級(jí)標(biāo)題之間通過同級(jí)關(guān)系書寫，下一級(jí)標(biāo)題解釋說明的是前面距離最近的上一級(jí)標(biāo)題。

權(quán)重：標(biāo)題標(biāo)簽對(duì)呈現(xiàn)文檔的結(jié)構(gòu)非常重要，使用時(shí)要根據(jù)標(biāo)簽的重要程度進(jìn)行選擇。

h1在整個(gè)html中的權(quán)重非常高，內(nèi)部應(yīng)該放置html中最重要的內(nèi)容，如：logo

約定俗成：一個(gè)頁面中只會(huì)出現(xiàn)一個(gè)h1

  <h1>1級(jí)標(biāo)題</h1>
  <h2>2級(jí)標(biāo)題</h2>
  <h3>3級(jí)標(biāo)題</h3>
  <h4>4級(jí)標(biāo)題</h4>
  <h5>5級(jí)標(biāo)題</h5>
  <h6>6級(jí)標(biāo)題</h6>

2.3 段落和換行

2.3.1 段落 paragraph

段落(paragraph)是通過p標(biāo)簽進(jìn)行定義的

p標(biāo)簽是雙標(biāo)簽，且為文本標(biāo)簽。內(nèi)部只能放置文本，圖片，表單元素，或者廢棄的font標(biāo)簽等

作用：給標(biāo)簽內(nèi)部的內(nèi)容添加一個(gè)完整段落的語義，不負(fù)責(zé)內(nèi)容自動(dòng)換行的樣式，換行效果由css樣式?jīng)Q定。

<p>我是一行文字,我可以放在p里面</p>
<p>
  <img src="images/01.jpg" title="我是一個(gè)圖片，我可以放在p里面">
</p>

2.3.2 換行標(biāo)簽 breaking

<p>
    我本來是一段完整的文字，<br />我被br標(biāo)簽打斷了
</p>

2.4 文本格式化標(biāo)簽

html中有部分標(biāo)簽是用來對(duì)文字進(jìn)行格式化顯示設(shè)置的，比如：粗體斜體 html 4.0之前。

<p>
  <b>這是b標(biāo)簽,可以讓文字加粗</b>
  <u>這是u標(biāo)簽，可以給文字添加下劃線</u>
  <i>這是i標(biāo)簽，可以設(shè)置斜體</i>
</p>

標(biāo)簽	描述
b	定義粗體文本 bold
big	定義大號(hào)字
em	定義著重文字 emphasis 自帶斜體效果
i	定義斜體字 italic
small	定義小號(hào)字
strong	定義加重語氣，自帶加粗效果
sub	定義下標(biāo)字，subscript
sup	定義上標(biāo)字 superscript
ins	定義插入字，自帶下劃線效果，insert
del	定義刪除字，delete
s	不贊成使用，使用del代替，strike的簡化
strike	不贊成使用，使用del代替
u	定義下劃線，不贊成使用，使用css樣式代替，underline

2.5 圖像標(biāo)簽 iamge

圖像image 由img標(biāo)簽進(jìn)行定義

img標(biāo)簽是單標(biāo)簽，相等于一個(gè)特殊的文本

作用：在指定的位置插入一張圖片

常用圖片格式：.jpg .png .gif

img標(biāo)簽常用屬性：

屬性名	描述
src	表示圖片的路徑,必須設(shè)置的屬性，路徑可以是本地圖片路徑，也可以是網(wǎng)絡(luò)圖片路徑
width	表示圖片的寬度建議用css設(shè)置
height	表示圖片的高度建議用css設(shè)置
border	邊框?qū)傩?值可以設(shè)定邊框的厚度建議用css設(shè)置
title	設(shè)置鼠標(biāo)懸停時(shí)提示文本
alt	設(shè)置圖像沒有找到時(shí)候的替換文本，盡量添加這個(gè)屬性，便于seo優(yōu)化

<img src="image/01.jpg" width="200" height="200" border="10" title="豬的圖片" alt="這是一只豬的圖片">

注意：

1.當(dāng)width height 只設(shè)置一個(gè)的時(shí)候會(huì)進(jìn)行等比伸縮

路徑：

相對(duì)路徑：在查找文件的時(shí)候，從html本身出發(fā)，根據(jù)相對(duì)的位置進(jìn)行查找，包含三種方向：

同級(jí)查找：直接書寫文件名和后綴名就行

<img src="01.jpg">

字跡查找：目標(biāo)文件與html同一級(jí)的內(nèi)部，需要先查找文件夾名稱，再查找文件名和后綴名就行

./ 代表本級(jí)

<img src="image/01.jpg">
<img src="./image/01.jpg">

上級(jí)查找：目標(biāo)文件在html文件的上一級(jí)的，通過../進(jìn)入上一級(jí)，依次類推，再查找文件名和后綴名

<img src="./../image/01.jpg">

絕對(duì)路徑：從盤符觸發(fā)，或者網(wǎng)址形式查找

路徑不能被移動(dòng)，否則會(huì)出現(xiàn)圖片加載失敗的效果

從盤符的出發(fā)的路徑容易出現(xiàn)中文字符，html解析可能出現(xiàn)亂碼

<img src="c:/users/code/image/01.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2473774775,3673961281&fm=26&gp=0.jpg" >

2.6 音頻和視頻

2.6.1 音頻 audio

雙標(biāo)簽，格式：.mp3 .ogg .wav

<audio src="media/snow.mp3" controls></audio>

2.6.2 視頻 video

雙標(biāo)簽格式：.mp4 .ogg .webm

<video src="media/snow.mp4" controls></video>

2.7 超級(jí)鏈接 a

a標(biāo)簽：anchor 錨雙標(biāo)簽可以放容器級(jí) 文本級(jí)標(biāo)簽

跨頁面，同一個(gè)頁面。

默認(rèn)文字顏色藍(lán)色有下劃線出現(xiàn) 鼠標(biāo)樣式變成小手

屬性	描述
href	用于規(guī)定鏈接的目標(biāo)地址
target	定義被跳轉(zhuǎn)后的文檔在哪個(gè)標(biāo)簽頁顯示：self:默認(rèn)值當(dāng)前頁面打開; blank:在一個(gè)新標(biāo)簽頁打開
title	設(shè)置鼠標(biāo)懸停時(shí)顯示的文本

<a  target="_blank" title="跳轉(zhuǎn)到拉鉤官網(wǎng)">點(diǎn)擊跳轉(zhuǎn)到拉鉤</a>

2.7.1 錨點(diǎn)跳轉(zhuǎn)

頁面內(nèi)錨點(diǎn)跳轉(zhuǎn)

<a href="#maodian1">第一段</a>
<a href="#maodian2">第二段</a>
<a href="#maodian3">第三段</a>
<p id="mudian1">我是第一屏</p>
<p id="maodian2">我是第二屏</p>
<p id="maodian3">我是第三屏</p>

跨頁面錨點(diǎn)跳轉(zhuǎn)

<a href="17-anchor.html/#maodian3">跳轉(zhuǎn)到另一個(gè)頁面</a>

2.8 列表

列表：用于制作html中的一系列項(xiàng)目

將內(nèi)容相關(guān)，結(jié)構(gòu)相似，樣式相近的內(nèi)容使用列表結(jié)構(gòu)進(jìn)行搭建

2.8.1 無序列表 ul li

標(biāo)簽	描述
ul：unorder list	定義一個(gè)無序列表的大結(jié)構(gòu)
li: list item	列表項(xiàng) 定義的是無序列表內(nèi)的某一項(xiàng)

ul和li是嵌套關(guān)系

一個(gè)列表中可以有任意個(gè)列表項(xiàng)

注意：

1.ul標(biāo)簽只能嵌套li標(biāo)簽，li標(biāo)簽不能脫離ul標(biāo)簽單獨(dú)書寫。

2.li標(biāo)簽是一個(gè)經(jīng)典的容器級(jí)標(biāo)簽，內(nèi)部可以放著任意內(nèi)容，甚至可以放置一組ul>li無序列表結(jié)構(gòu)。

3.無序列表的列表項(xiàng)li之間沒有順序的先后之分，它們的重要程度是相同的

4.無序列表的作用只是搭建列表結(jié)構(gòu)，沒有添加樣式前綴的功能，樣式由css負(fù)責(zé)。

<h2>小說列表</h2>
<ul>
  <li>紅樓夢</li>
  <li>西游記</li>
  <li>水滸傳</li>
  <li>三國演義</li>
</ul>

2.8.2 有序列表 ol li

標(biāo)簽	描述
ol:ordered list	定義一個(gè)有序的列表的大結(jié)構(gòu)
li:list item	定義有序列表的每一項(xiàng)

ol和li是嵌套關(guān)系

一個(gè)列表中可以有任意個(gè)列表項(xiàng)

注意：

1.ol標(biāo)簽只能嵌套li標(biāo)簽，li標(biāo)簽不能脫離ol標(biāo)簽單獨(dú)書寫。

2.li標(biāo)簽是一個(gè)經(jīng)典的容器級(jí)標(biāo)簽，內(nèi)部可以放著任意內(nèi)容，甚至可以放置一組ol>li無序列表結(jié)構(gòu)。

3.有序列表的列表項(xiàng)li之間有順序的先后之分，根據(jù)內(nèi)容的順序需要合理調(diào)整書寫位置

4.有序列表的作用只是搭建列表結(jié)構(gòu)，沒有添加樣式前綴的功能，樣式由css負(fù)責(zé)。

<h2>世界國土面積排行榜：</h2>
<ol>
  <li>俄羅斯</li>
  <li>加拿大</li>
  <li>
    <h4>中國</h4>
    <ol>
      <li>新疆</li>
      <li>西藏</li>
      <li>內(nèi)蒙古</li>
    </ol>
  </li>
</ol>

2.8.3 定義列表 dl dt dd

標(biāo)簽	描述
dl:definition list	定義一個(gè)自定義列表的大結(jié)構(gòu)
dt:definition item	定義一個(gè)自定義列表匯總的一個(gè)主題或術(shù)語
dd:definition decription	定義一個(gè)解釋項(xiàng)，表示描述或解釋前面的定義主題

dl內(nèi)部只能嵌套dt和dd,dt和dd是同級(jí)關(guān)系

注意：

1.dl內(nèi)部只能嵌套dt和dd,dt和dd是同級(jí)關(guān)系

2.dl內(nèi)部可以放多組dt和dd,每一個(gè)dd解釋說明的是前面的距離最近的一個(gè)dt。

3.每一個(gè)dt后面可以有0到多個(gè)解釋項(xiàng)的dd,每個(gè)dd解釋的都是前面距離最近的一個(gè)dt.

4.dt,dd是容器級(jí)標(biāo)簽，里面可以放置任意內(nèi)容

5.定義列表中的縮進(jìn)樣式由css負(fù)責(zé)，標(biāo)簽只負(fù)責(zé)搭建語義結(jié)構(gòu)。

6.配合著Css布局，最好每個(gè)dl中只添加一組dt和dd，便于后期管理

<dl>
  <dt>張三</dt>
  <dd>城市：北京</dd>
  <dd>年齡：18</dd>
  <dt>李四</dt>
  <dd>城市：上海</dd>
  <dd>年齡：20</dd>
  <dd>學(xué)校：復(fù)旦大學(xué)</dd>
  <dt>王五</dt>
</dl>

2.9 布局標(biāo)簽 div span

div和span常用作布局標(biāo)簽，俗稱盒子，后續(xù)h5增加了更多的布局標(biāo)簽

div和span都會(huì)沒有具體明確的語義的

2.9.1 div標(biāo)簽

div:division 分割區(qū)域跨度的意思俗稱大盒子

div是雙標(biāo)簽是最經(jīng)典的容器級(jí)標(biāo)簽，內(nèi)部可以放置任意內(nèi)容

作用：多用于劃分網(wǎng)頁的區(qū)域，進(jìn)行結(jié)構(gòu)布局，一般將相關(guān)的內(nèi)容使用div包裹起來，整體設(shè)置大的布局效果。

<div id="header"></div>
<div id="nav"></div>
<div id="section"></div>
<div id="footer"></div>

2.9.2 span標(biāo)簽

span：小區(qū)域小跨度的意思俗稱小盒子

span也是雙標(biāo)簽，容器級(jí)標(biāo)簽

作用：在不改變整體效果的情況下，可以輔助進(jìn)行局部調(diào)整。

<div>
  <dl>
    <dt>張三</dt>
    <dd>
        <p>城市：<span>北京</span></p>\
      <p>年齡：19</p>
    </dd>
  </dl>
</div>

2.10 表格

2.10.1 表格基礎(chǔ)

表格的基礎(chǔ)：創(chuàng)建一個(gè)簡單的表格至少需要三個(gè)標(biāo)簽，table,tr,td

標(biāo)簽	描述
table	表格定義整個(gè)的表格的大結(jié)構(gòu)
tr:table rows	定義表格的行，定義的是表格由多少行組成
td:table data	表格的數(shù)據(jù)，也叫表格單元格，定義的是每一行內(nèi)部的單元格。
th:table head data	表頭單元格

三者之間的關(guān)系：table>tr>td 一個(gè)表格有多個(gè)行，每個(gè)行中有多個(gè)單元格。

<table style="border-collapse:collapse" border="1">
    <tr>
        <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
    <tr>
      <td>第1行,第1列</td>
      <td>第1行,第2列</td>
      <td>第1行,第3列</td>
      <td>第1行,第4列</td>
    </tr>
    <tr>
      <td>第2行,第1列</td>
      <td>第2行,第2列</td>
      <td>第2行,第3列</td>
      <td>第2行,第4列</td>
    </tr>
    <tr>
      <td>第3行,第1列</td>
      <td>第3行,第2列</td>
      <td>第3行,第3列</td>
      <td>第3行,第4列</td>
    </tr>
  </table>

2.10.2 合并單元格

rowspan：跨行合并上下合并

colspan：跨列合并左右合并

屬性值都是數(shù)字，數(shù)值是幾就是跨幾行，跨幾列

<table style="border-collapse:collapse" border="1">
    <tr>
      <td colspan="2">1</td>
      <td rowspan="2">2</td>
      <td colspan="2">3</td>
    </tr>
    <tr>
      <td>4</td>
      <td rowspan="2">5</td>
      <td>6</td>
      <td rowspan="2">7</td>
    </tr>
    <tr>
      <td rowspan="2">8</td>
      <td>9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>11</td>
      <td colspan="2">12</td>
      <td>13</td>
    </tr>
  </table>

2.10.3 表格的分區(qū)

標(biāo)簽	描述
caption	表格的標(biāo)題，內(nèi)部書寫標(biāo)題文字
thead: table head	表格的頭部，內(nèi)部嵌套 tr>th
tbody:table body	表格的主體內(nèi)部嵌套 tr>td
tfoot:table foot	表格的頁腳內(nèi)部嵌套 tr>td

注意：不論書寫順序如何顛倒，瀏覽器中的加載順序都是自動(dòng)按照caption,thead,tbody,tfoot進(jìn)行的

<table style="border-collapse:collapse" border="1" width="500">
    <caption>各地區(qū)的固定資產(chǎn)投資情況</caption>
    <thead>
      <tr>
        <th rowspan="2">地區(qū)</th>
        <th colspan="2">按總量分</th>
        <th colspan="2">按比重分</th>
      </tr>
      <tr>
        <th>自年初累計(jì)(億元)</th>
        <th>比去年同期增長(%)</th>
        <th>自年初累計(jì)(%)</th>
        <th>去年同期(%)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>

2.11 表單

html表單用于搜集不同類型的用戶輸入，表單元素就是網(wǎng)頁中提供用戶進(jìn)行輸入或點(diǎn)擊的小控件

在html中，一個(gè)完整的表單通常由表單域，提示信息和表單控件(表單元素)3個(gè)部分構(gòu)成。

2.11.1 form標(biāo)簽

form標(biāo)簽是一個(gè)功能性標(biāo)簽，填寫的表單信息想要正確的提交到后臺(tái)服務(wù)器，必須放在一個(gè)form標(biāo)簽之內(nèi)。

雙標(biāo)簽，容器級(jí)標(biāo)簽

屬性名	屬性值	描述
action	url	指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址
method	get/post	用于設(shè)置表單數(shù)據(jù)的提交方式
name	自定義名稱	規(guī)定表單的名稱

<form action="data.php" method="post" name="firstForm"></form>

2.11.2 表單元素

2.11.2.1 input標(biāo)簽

input 單標(biāo)簽相當(dāng)于一個(gè)特殊的文本

通過標(biāo)簽屬性實(shí)現(xiàn)各種功能

屬性名	屬性值	描述
type	text	單行文本輸入框
	password	密碼輸入框
	radio	單選框同一組單選框必須是互斥的關(guān)系，設(shè)置相同的name值
	checkbox	復(fù)選框
	button	普通按鈕
	reset	重置按鈕
	submit	提交按鈕
	image	圖片按鈕
	file	定義輸入文字和"瀏覽"按鈕，供文件上傳
	hidden	定義隱藏的輸入字段
name	自定義	定義控件的名稱
value	自定義	定義控件的默認(rèn)文本值
size	數(shù)字	定義控件的寬度
checked	checked	定義選框控件的默認(rèn)被選中項(xiàng)
maxlength	數(shù)字	定義允許輸入的最多字符數(shù)

<form action="">
    <p>
      <!-- input 單行文本輸入框 -->
      用戶名：<input type="text" value="請(qǐng)輸入你的用戶名">
    </p>
    <p>
      <!-- 密碼輸入框 -->
      密碼：<input type="password">
    </p>
    <p>
      <!-- 單選框 -->
      性別： <input type="radio" name="sex" checked>男
      <input type="radio" name="sex"> 女
    </p>
    <p>
      <!-- 復(fù)選框 -->
      興趣：<input type="checkbox" name="hobby">唱歌
      <input type="checkbox" name="hobby">繪畫
      <input type="checkbox" name="hobby">攝影
    </p>

    <p>
      <input type="button" value="按鈕">
    </p>
    <p>
      <input type="reset" value="重置">
    </p>
    <p>
      <input type="submit" value="提交">
    </p>
    <p>
      <input type="image"
      src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3092528988,4008414166&fm=26&gp=0.jpg" alt="">
    </p>
    <p>
      上傳圖片：<input type="file" name="" multiple>
    </p>
  </form>

2.11.2.2 文本域 textarea

textarea: 文本域可以允許輸入多行文本的區(qū)域

雙標(biāo)簽，相當(dāng)于一個(gè)特殊的文字

cols:列出現(xiàn)滾動(dòng)條后每一行顯示的最大字節(jié)數(shù) 一個(gè)漢字2個(gè)字節(jié)

rows:行文本框顯示的最大行數(shù) 超過行數(shù)，會(huì)被隱藏且出現(xiàn)滾動(dòng)條

<form>
 <p>
   自我介紹：
   <textarea cols="30" rows="10">請(qǐng)輸入200字左右的自我介紹</textarea>
 </p>
</form>

2.11.2.3 下拉菜單 select potion

select：選擇定義下拉菜單整體結(jié)構(gòu)

potion:選擇的項(xiàng) 可以有多個(gè)

<form>
  <p>
    城市:
    <select>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="1">廈門</option>
    </select>
 </p>

  <!-- 分組 -->
  <p>
      城市:
      <select>
        <optgroup label="國內(nèi)">
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">廈門</option>
        </optgroup>
        <optgroup label="國外">
          <option value="4">倫敦</option>
          <option value="5">巴黎</option>
          <option value="6">慕尼黑</option>
        </optgroup>
      </select>
    </p>
</form>

2.11.3 label標(biāo)簽

<form>
  <label for="user">
    用戶名：<input id="user" type="text">
  </label>
</form>

2.12 字符實(shí)體

使用是查看文檔，實(shí)體名稱對(duì)大小寫敏感。

結(jié)果	描述
<	& gt;
>	& lt;
空格	& nbsp;
版權(quán)符	& copy;

3.css概述

css： cascading style sheets 層疊樣式表，是一種用來表現(xiàn)HTML的文件樣式的計(jì)算機(jī)語言。

作用：靜態(tài)地修飾網(wǎng)頁，并且可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。

組成：

層疊式：層疊性，繼承性

樣式：文字文本，背景，盒模型，浮動(dòng)，定位，其他

3.1 css語法

css規(guī)則：選擇器，以及一條或多條聲明

書寫的位置：

3.1.1 內(nèi)聯(lián)樣式

缺點(diǎn)：

1.內(nèi)聯(lián)式必須寫在標(biāo)簽之上，沒有完全脫離html標(biāo)簽
2.css樣式代碼讓標(biāo)簽結(jié)構(gòu)繁重，不利于HTML結(jié)構(gòu)的解讀。
3.一個(gè)內(nèi)聯(lián)式的css代碼，只能給一個(gè)標(biāo)簽使用，如果多個(gè)標(biāo)簽有相同的樣式，同樣的css代碼需要書寫多次，增加代碼量

<!-- 1.內(nèi)聯(lián)式 -->
<div style="width:100px;height:100px;font-size:20px;">這是一個(gè)div元素</div>

3.1.2 內(nèi)嵌式樣式

優(yōu)點(diǎn)：

1.實(shí)現(xiàn)了結(jié)構(gòu)和樣式的初步分離，

2.多個(gè)標(biāo)簽可以利用一段代碼設(shè)置。節(jié)省代碼量

缺點(diǎn)：

1.結(jié)構(gòu)樣式分離不夠徹底。樣式還是寫在html文件的style標(biāo)簽中。

2.css樣式只能被一個(gè)html文件使用，不能被多個(gè)html使用。

3.在HTML中如果css代碼太多，會(huì)造成文件頭重腳輕。

<!-- 內(nèi)嵌式樣式表 -->
<head>
  <style type="text/css">
    p {
      font-size: 20px;
      color: red;
    }
  </style>
</head>
<body>
  <p>這是一個(gè)p元素</p>
</body>

3.1.3 外聯(lián)式

書寫在一個(gè)單獨(dú)的.css文件中,直接書寫css規(guī)則。

優(yōu)點(diǎn)：

1.實(shí)現(xiàn)了HTML和CSS的完全分離。

2.多個(gè)HTML文件可以共用一個(gè)css文件，可以把公共的樣式單獨(dú)寫在一個(gè)css文件中,減少代碼量。

3.可以實(shí)現(xiàn)css變化，多個(gè)HTML頁面同時(shí)變化，減少工作量。

4.一個(gè)HTML文件可以引入多個(gè)css文件，可以實(shí)現(xiàn)同一個(gè)頁面中css代碼分層。

01.css:

p,div {
  font-size: 20px;
  color: red;
}

<head>
  <!-- 引用外部css樣式 -->
  <link rel="stylesheet" href="01.css" type="text/css">
</head>
<body>
  <div>這是一個(gè)div元素</div>
  <p>這是一個(gè)p元素</p>
</body>

3.1.4 導(dǎo)入式

利用@import url()導(dǎo)入其他樣式表。

問題：

1.導(dǎo)入式的作用與外鏈?zhǔn)降南嗤?/p>

2.瀏覽器會(huì)在HTML結(jié)構(gòu)加載完畢之后，再去解析導(dǎo)入式樣式表，可能導(dǎo)致頁面沒有css樣式的情況。

@import url("02.css");
p,div {
  color: red;
  font-size: 20px;
}

3.2 css規(guī)則

以內(nèi)嵌式樣式表為例：

1.所有的css代碼都必須寫在head標(biāo)簽內(nèi)部的一對(duì)style標(biāo)簽內(nèi)。

2.css在給某個(gè)標(biāo)簽設(shè)置樣式前，必須使用選擇器先選中標(biāo)簽。

3.css樣式的屬性，屬性名和屬性值的鍵值對(duì)寫法：k:v; 。

4.給每個(gè)選擇器添加的樣壞死屬性必須后面的寫在{}內(nèi)。

5.每個(gè){}可以寫一條或多條樣式屬性。

注意：

1.每一條屬性后面的;必須寫，否則會(huì)出現(xiàn)錯(cuò)誤；

2.css中所有的屬性與屬性之間對(duì)空格，換行不敏感。

3.css注釋語法 /* */ 之間書寫css注釋，瀏覽器不會(huì)解析。

<head>
  <style>
    p {
      color: red;
      font-size: 30px;
    }
  </style>
</head>

3.2.1 代碼的書寫風(fēng)格

1.css樣式格式，展開格式。

/* 展開格式 */ 
div {
    color: red;
    width: 200px;
    height: 200px;
  border: 1px solid #ccc;
}

/* 緊湊格式 */
div{color:red;width:100px;height:200px;border:1px solid #ccc;}

2.css的英文可以使用大寫，也可以使用小寫。開發(fā)情況下，除特殊情況，盡量寫小寫。

3.空格規(guī)范：選擇器與{}之間保留一個(gè)空格；冒號(hào)后面，屬性值前面，保留一個(gè)空格。

3.3 css常用樣式

3.3.1 文字的三屬性

3.3.1.1 color: 顏色

屬性值：

1.可以寫顏色名。 red yellow blue

2.可以寫顏色值：

rgb模式 : rgb(255,200,0) 255--紅 255-綠 255--藍(lán)

十六進(jìn)制的格式： #ffffff; 0-9 a-f

<head>
  <style>
    p {
      color: yellow;
    }
  </style>
</head>
<body>
  <p>這是一個(gè)p元素</p>
</body>

3.3.1.2 字體 font-family

作用：定義元素內(nèi)文字的字體。

屬性值可以多個(gè),選擇的時(shí)候依據(jù)書寫順序進(jìn)行加載。一般先寫英文字體，在寫中文字體

瀏覽器中加載的字體來自用戶機(jī)器自帶的字體。

常用： SimSun Microsoft YaHei Arial consolas

如果不設(shè)置字體屬性，瀏覽器會(huì)加載自己的默認(rèn)字體。

<head>
  <style>
    p {
      font-family: "宋體";
    }
  </style>
</head>
<body>
  <p>這是一個(gè)p元素</p>
</body>

3.3.1.3 字號(hào) font-size

作用：設(shè)置文字的大小。

相對(duì)長度單位： px em %;

絕對(duì)長度單位： in cm mm pt;

chrome,ie的默認(rèn)文字字號(hào)是16px;

瀏覽器有默認(rèn)的最低顯示字號(hào)，chrome是8px,ie瀏覽器最小是1px;

實(shí)際應(yīng)用中網(wǎng)頁中最小字號(hào)是12px.盡量使用12px 14px 16px 偶數(shù)字號(hào)

實(shí)際中的字號(hào)，根據(jù)設(shè)計(jì)圖為準(zhǔn)。

<head>
  <style>
    p {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>這是一個(gè)p元素</p>
</body>

3.4 盒子實(shí)體化3屬性

屬性名	屬性值	說明
width	px單位的數(shù)值	定義元素占有的寬度
height	px單位的數(shù)值	定義元素占有的高度
background-color	顏色名，顏色值	定義元素的背景顏色

<head>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div>這是一個(gè)div元素</div>
</body>

3.4 css的選擇器

選擇器：選擇要添加樣式的HTML標(biāo)簽的一種方法，模式。

基礎(chǔ)選擇器：標(biāo)簽選擇器，id選擇器，類選擇器，通配符選擇器。

高級(jí)選擇器：后代選擇器，交集選擇器，并集選擇器。

3.4.1 標(biāo)簽選擇器

通過標(biāo)簽名去選擇標(biāo)簽元素

書寫方式：標(biāo)簽名

作用范圍：整個(gè)HTML文檔中所有的同名標(biāo)簽，會(huì)忽略HTML元素的嵌套關(guān)系。

優(yōu)點(diǎn)：1.可以選擇所要的同名標(biāo)簽，設(shè)置所要的同名標(biāo)簽的樣式

缺點(diǎn)：只能全選，不能對(duì)局部標(biāo)簽添加樣式。

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
    <h3>這是一個(gè)三級(jí)標(biāo)題</h3>
  <p>這是一個(gè)p</p>
    <p>這也是一個(gè)p</p>
  <p>這還是一個(gè)p</p>
  <div>這是一個(gè)div</div>
  <span>這是一個(gè)span</span>
  <p>這同樣是個(gè)p</p>
</body>

3.4.2 id選擇器

通過標(biāo)簽上的id屬性去選擇標(biāo)簽。

書寫方式： #id 屬性值

范圍：只能選擇一個(gè)標(biāo)簽。每個(gè)id屬性值必須唯一的，不能與其他標(biāo)簽的id同名。對(duì)大小寫敏感。

缺點(diǎn)：只能實(shí)現(xiàn)單選，不能幫我們完成多選功能。

<head>
  <style>
    #para1 {
      color: red;
    }
  </style>
</head>
<body>
    <h3>這是一個(gè)三級(jí)標(biāo)題</h3>
  <p>這是一個(gè)p</p>
    <p>這也是一個(gè)p</p>
  <p id="para1">這還是一個(gè)p</p>
  <div>這是一個(gè)div</div>
  <span>這是一個(gè)span</span>
  <p>這同樣是個(gè)p</p>
</body>

3.4.3 類選擇器

通過標(biāo)簽的class屬性去選擇標(biāo)簽。

書寫方式：.class屬性值

范圍：頁面中所有的class屬性值相同的標(biāo)簽。

特點(diǎn)：不區(qū)分標(biāo)簽類型，只要class名相同就可以被選中。

一個(gè)標(biāo)簽可以有多個(gè)屬性值，屬性值之間用空格分隔

工作上類上樣式，id上行為

<head>
  <style>
    .demo {
      color: red;
    }
    .para{
      font-size:20px;
    }
  </style>
</head>
<body>
    <h3>這是一個(gè)三級(jí)標(biāo)題</h3>
  <p>這是一個(gè)p</p>
    <p>這也是一個(gè)p</p>
  <p class="demo para">這還是一個(gè)p</p>
  <div>這是一個(gè)div</div>
  <span>這是一個(gè)span</span>
  <p class="demo">這同樣是個(gè)p</p>
</body>

3.4.4 通配符選擇器

包括html標(biāo)簽在內(nèi)的所有標(biāo)簽

優(yōu)點(diǎn)：實(shí)現(xiàn)全選，簡化書寫

缺點(diǎn)：效率低

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      color:red;
    }
  </style>
</head>
<body>
    <h3>這是一個(gè)三級(jí)標(biāo)題</h3>
  <p>這是一個(gè)p</p>
    <p>這也是一個(gè)p</p>
  <p>這還是一個(gè)p</p>
  <div>這是一個(gè)div</div>
  <span>這是一個(gè)span</span>
  <p>這同樣是個(gè)p</p>
</body>

3.4.5 后代選擇器

通過標(biāo)簽之間的嵌套關(guān)系(族譜關(guān)系)去選擇元素，基本組成部分就是基礎(chǔ)選擇器。

書寫方式：通過空格表示后代空格前的標(biāo)簽必須是前面的組先級(jí)。

<head>
  <style>
    .box1 ul li p {
      color: red;
    }
  </style>
</head>
<body>
    <div class="box1">
    <ul>
      <li><p>這是1p</p></li>
      <li><p>這是2p</p></li>
    </ul>
    <p>這是一個(gè)p</p>
  </div>
  <div class="box2">
    <ol>
      <li><p>這是1p</p></li>
      <li><p>這是2p</p></li>
    </ol>
    <p>這是一個(gè)p</p>
  </div>
</body>

3.4.6 交集選擇器

通過一個(gè)標(biāo)簽之上滿足所有的基礎(chǔ)選擇器的需求去選擇標(biāo)簽。

<head>
  <style>
    p.demo {
      color: red;
    }
  </style>
</head>
<body>
    <div class="box1">
    <ul>
      <li><p class="demo">這是1p</p></li>
      <li><p>這是2p</p></li>
    </ul>
    <p>這是一個(gè)p</p>
  </div>
  <div class="box2">
    <ol>
      <li><p class="demo">這是1p</p></li>
      <li><p>這是2p</p></li>
    </ol>
    <p>這是一個(gè)p</p>
  </div>
</body>

3.4.7 并集選擇器

在不同選擇器選中的元素需要設(shè)置相同的樣式的時(shí)候,用來化簡，減少代碼量。

可以彌補(bǔ)通配符選擇器的缺點(diǎn)。

<head>
  <style>
    h2,.demo {
      color: red;
    }
  </style>
</head>
<body>
  <h3>標(biāo)題3</h3>
    <div class="box1">
    <ul>
      <li><p class="demo">這是1p</p></li>
      <li><p>這是2p</p></li>
    </ul>
    <p>這是一個(gè)p</p>
  </div>
  <div class="box2">
    <ol>
      <li><p class="demo">這是1p</p></li>
      <li><p>這是2p</p></li>
    </ol>
    <p>這是一個(gè)p</p>
  </div>
</body>

3.4 層疊式

3.4.1 繼承性

如果一個(gè)標(biāo)簽沒有設(shè)置過一些樣式，它的某個(gè)祖先級(jí)曾經(jīng)設(shè)置過，在瀏覽器中該標(biāo)簽也加載了這些樣式，這些樣式是從組先級(jí)繼承而來的，這種現(xiàn)象就是繼承性。

能夠被繼承的樣式是文字相關(guān)的樣式。

<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: red;
      color: green;
      font-size: 14px;
      font-family: "宋體";
    }
  </style>
</head>
<body>
  <h2>標(biāo)題w</h2>
  <biv class="box">
    <p>是文字1</p>
    <p>是文字2</p>
    <p>是文字3</p>
  </biv>
</body>

3.4.2 層疊性

用于解決同一條屬性被多次設(shè)置的機(jī)制

基本層疊后面一定把前面層疊掉使用相同的選擇器

設(shè)置相同的樣式后面的會(huì)層疊前面的樣式

作用于相同屬性會(huì)被層疊掉優(yōu)先級(jí)

選擇器	權(quán)重
!important	10000
內(nèi)聯(lián)樣式	1000
# id選擇器	100
類選擇器屬性選擇器偽類	10
元素選擇器偽元素	1
通配符	0

注意：優(yōu)先比較最大的權(quán)重不會(huì)累加高過上一層
這個(gè)權(quán)重的值只是一個(gè)參考值，并不是實(shí)際的。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

html和css自看筆記

1.html基述

1.1 html概述

1.1 html語義化

1.2 .互聯(lián)網(wǎng)原理

1.2.1 服務(wù)器和客戶端

1.2.2 瀏覽器：

1.2.3 http協(xié)議：

1.3 純文本格式

1.4 html基本語法

1.4.1 HTML規(guī)范版本

1.4.2 HTML標(biāo)簽

1.4.2 HTML元素

1.4.3 html屬性

1.5 HTML基本骨架

1.6 DTD 命名空間 字符集

1.6.1 DTD

1.6.2 命名空間

1.6.2 字符集

2.html標(biāo)簽

2.1 注釋

2.2 標(biāo)題標(biāo)簽

2.3 段落和換行

2.3.1 段落 paragraph

2.3.2 換行標(biāo)簽 breaking

2.4 文本格式化標(biāo)簽

2.5 圖像標(biāo)簽 iamge

2.6 音頻和視頻

2.6.1 音頻 audio

2.6.2 視頻 video

2.7 超級(jí)鏈接 a

2.7.1 錨點(diǎn)跳轉(zhuǎn)

頁面內(nèi)錨點(diǎn)跳轉(zhuǎn)

跨頁面錨點(diǎn)跳轉(zhuǎn)

2.8 列表

2.8.1 無序列表 ul li

2.8.2 有序列表 ol li

2.8.3 定義列表 dl dt dd

2.9 布局標(biāo)簽 div span

2.9.1 div標(biāo)簽

2.9.2 span標(biāo)簽

2.10 表格

2.10.1 表格基礎(chǔ)

2.10.2 合并單元格

2.10.3 表格的分區(qū)

2.11 表單

2.11.1 form標(biāo)簽

2.11.2 表單元素

2.11.2.1 input標(biāo)簽

2.11.2.2 文本域 textarea

2.11.2.3 下拉菜單 select potion

2.11.3 label標(biāo)簽

2.12 字符實(shí)體

3.css概述

3.1 css語法

3.1.1 內(nèi)聯(lián)樣式

3.1.2 內(nèi)嵌式樣式

3.1.3 外聯(lián)式

3.1.4 導(dǎo)入式

3.2 css規(guī)則

3.2.1 代碼的書寫風(fēng)格

3.3 css常用樣式

3.3.1 文字的三屬性

3.3.1.1 color: 顏色

3.3.1.2 字體 font-family

3.3.1.3 字號(hào) font-size

3.4 盒子實(shí)體化3屬性

3.4 css的選擇器

3.4.1 標(biāo)簽選擇器

3.4.2 id選擇器

3.4.3 類選擇器

3.4.4 通配符選擇器

3.4.5 后代選擇器

3.4.6 交集選擇器

3.4.7 并集選擇器

3.4 層疊式

3.4.1 繼承性

3.4.2 層疊性

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

1.6 DTD 命名空間字符集