html和css自看筆記

1.html基述

1.1 html概述

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

網(wǎng)頁(yè)的組成：

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

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

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

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

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

超文本：超級(jí)文本用來(lái)鏈接另一個(gè)文本或多媒體內(nèi)容的文本棱貌，鏈接到圖片玖媚，鏈接，音頻婚脱，視頻今魔，程序等

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

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

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

1.1 html語(yǔ)義化

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

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

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

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

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

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

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

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

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

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

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

1.2.2 瀏覽器：

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

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

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

瀏覽器	內(nèi)核	說(shuō)明
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渲染出來(lái)

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 純文本格式

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

常見(jiàn)格式是：.txt文件

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

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

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

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

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

1.4 html基本語(yǔ)法

1.4.1 HTML規(guī)范版本

W3C: 萬(wàn)維網(wǎng)聯(lián)盟專(zhuān)門(mé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)簽再書(shū)寫(xiě)和使用過(guò)程中特恬，必須遵循特定的語(yǔ)法

標(biāo)簽名必須書(shū)寫(xiě)在一對(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)簽包含開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，結(jié)束標(biāo)簽必須書(shū)寫(xiě)關(guān)閉符合/.單標(biāo)簽也需要進(jìn)行自行封閉書(shū)寫(xiě)癌刽，在HTML5中役首，單標(biāo)簽可以不寫(xiě)關(guān)閉符號(hào)

1.4.2 HTML元素

html元素指從開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽的所有容尝丐。包含開(kāi)始標(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)部只能存放文字或類(lèi)似文本的內(nèi)容乏屯，比如圖片根时，表單元素等 p

特性：

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

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

1.4.3 html屬性

規(guī)范：

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

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

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

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

1.5 HTML基本骨架

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

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

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

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

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

3.title標(biāo)簽

作用：a:讓頁(yè)面擁有一個(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)頁(yè)標(biāo)題

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

4.body標(biāo)簽

作用：定義網(wǎng)頁(yè)的主體部分计螺，用于存放所有的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)容叫做文檔定義類(lèi)型 DocType Definition DTD

文檔聲明類(lèi)型 DocType Declaration

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

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

1.6.2 命名空間

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

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

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

html元素的命名空間規(guī)定了在不同用戶的瀏覽器匯總標(biāo)簽語(yǔ)義遵循的統(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>

常用字符集編碼：

國(guó)際通用字庫(kù)：

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

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

使用情況建議:

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

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

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

2.html標(biāo)簽

2.1 注釋

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

用途：

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

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

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

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

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

標(biāo)題：通過(guò)h1-h6六個(gè)標(biāo)簽分別來(lái)對(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)題語(yǔ)義钩述，不負(fù)責(zé)文字的粗體寨躁，字號(hào)等樣式。

樣式由css設(shè)定牙勘。

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

標(biāo)題標(biāo)簽之間不能相互嵌套职恳，下一級(jí)標(biāo)題與上一級(jí)標(biāo)題之間通過(guò)同級(jí)關(guān)系書(shū)寫(xiě)，下一級(jí)標(biāo)題解釋說(shuō)明的是前面距離最近的上一級(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è)頁(yè)面中只會(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)是通過(guò)p標(biāo)簽進(jìn)行定義的

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

作用：給標(biāo)簽內(nèi)部的內(nèi)容添加一個(gè)完整段落的語(yǔ)義，不負(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>
    我本來(lái)是一段完整的文字尾抑，<br />我被br標(biāo)簽打斷了
</p>

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

html中有部分標(biāo)簽是用來(lái)對(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	定義加重語(yǔ)氣护戳，自帶加粗效果
sub	定義下標(biāo)字，subscript
sup	定義上標(biāo)字 superscript
ins	定義插入字垂睬，自帶下劃線效果媳荒，insert
del	定義刪除字，delete
s	不贊成使用驹饺，使用del代替钳枕，strike的簡(jiǎn)化
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è)置圖像沒(méi)有找到時(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í)查找：直接書(shū)寫(xiě)文件名和后綴名就行

<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í)的袜蚕，通過(guò)../進(jìn)入上一級(jí)，依次類(lèi)推绢涡，再查找文件名和后綴名

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

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

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

從盤(pá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)簽

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

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

屬性	描述
href	用于規(guī)定鏈接的目標(biāo)地址
target	定義被跳轉(zhuǎn)后的文檔在哪個(gè)標(biāo)簽頁(yè)顯示：self:默認(rèn)值當(dāng)前頁(yè)面打開(kāi); blank:在一個(gè)新標(biāo)簽頁(yè)打開(kāi)
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)

頁(yè)面內(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>

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

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

2.8 列表

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

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

2.8.1 無(wú)序列表 ul li

標(biāo)簽	描述
ul：unorder list	定義一個(gè)無(wú)序列表的大結(jié)構(gòu)
li: list item	列表項(xiàng) 定義的是無(wú)序列表內(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ú)書(shū)寫(xiě)箱残。

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

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

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

<h2>小說(shuō)列表</h2>
<ul>
  <li>紅樓夢(mèng)</li>
  <li>西游記</li>
  <li>水滸傳</li>
  <li>三國(guó)演義</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ú)書(shū)寫(xiě)榜揖。

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

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

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

<h2>世界國(guó)土面積排行榜：</h2>
<ol>
  <li>俄羅斯</li>
  <li>加拿大</li>
  <li>
    <h4>中國(guó)</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ù)語(yǔ)
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解釋說(shuō)明的是前面的距離最近的一個(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é)搭建語(yǔ)義結(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ì)沒(méi)有具體明確的語(yǔ)義的

2.9.1 div標(biāo)簽

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

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

作用：多用于劃分網(wǎng)頁(yè)的區(qū)域棱诱，進(jìn)行結(jié)構(gòu)布局泼橘，一般將相關(guān)的內(nèi)容使用div包裹起來(lái)，整體設(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è)簡(jiǎn)單的表格至少需要三個(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)部書(shū)寫(xiě)標(biāo)題文字
thead: table head	表格的頭部，內(nèi)部嵌套 tr>th
tbody:table body	表格的主體內(nèi)部嵌套 tr>td
tfoot:table foot	表格的頁(yè)腳內(nèi)部嵌套 tr>td

注意：不論書(shū)寫(xiě)順序如何顛倒脖母，瀏覽器中的加載順序都是自動(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>比去年同期增長(zhǎng)(%)</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表單用于搜集不同類(lèi)型的用戶輸入士鸥，表單元素就是網(wǎng)頁(yè)中提供用戶進(jìn)行輸入或點(diǎn)擊的小控件

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

2.11.1 form標(biāo)簽

form標(biāo)簽是一個(gè)功能性標(biāo)簽，填寫(xiě)的表單信息想要正確的提交到后臺(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è)特殊的文本

通過(guò)標(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">繪畫(huà)
      <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ù) 超過(guò)行數(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">廈門(mén)</option>
    </select>
 </p>

  <!-- 分組 -->
  <p>
      城市:
      <select>
        <optgroup label="國(guó)內(nèi)">
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">廈門(mén)</option>
        </optgroup>
        <optgroup label="國(guó)外">
          <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ì)大小寫(xiě)敏感。

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

3.css概述

css： cascading style sheets 層疊樣式表努溃，是一種用來(lái)表現(xiàn)HTML的文件樣式的計(jì)算機(jī)語(yǔ)言硫嘶。

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

組成：

層疊式：層疊性音半，繼承性

樣式：文字文本，背景贡蓖，盒模型曹鸠，浮動(dòng)，定位斥铺，其他

3.1 css語(yǔ)法

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

書(shū)寫(xiě)的位置：

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

缺點(diǎn)：

1.內(nèi)聯(lián)式必須寫(xiě)在標(biāo)簽之上，沒(méi)有完全脫離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代碼需要書(shū)寫(xiě)多次滥沫，增加代碼量

<!-- 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)樣式分離不夠徹底萤皂。樣式還是寫(xiě)在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)式

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

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

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

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

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

4.一個(gè)HTML文件可以引入多個(gè)css文件他膳，可以實(shí)現(xiàn)同一個(gè)頁(yè)面中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)入其他樣式表绒窑。

問(wèn)題：

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

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

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

3.2 css規(guī)則

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

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

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

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

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

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

注意：

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

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

3.css注釋語(yǔ)法 /* */ 之間書(shū)寫(xiě)css注釋识补，瀏覽器不會(huì)解析族淮。

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

3.2.1 代碼的書(shū)寫(xiě)風(fēng)格

1.css樣式格式，展開(kāi)格式凭涂。

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

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

2.css的英文可以使用大寫(xiě)祝辣，也可以使用小寫(xiě)。開(kāi)發(fā)情況下切油，除特殊情況蝙斜，盡量寫(xiě)小寫(xiě)。

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

3.3 css常用樣式

3.3.1 文字的三屬性

3.3.1.1 color: 顏色

屬性值：

1.可以寫(xiě)顏色名岛琼。 red yellow blue

2.可以寫(xiě)顏色值：

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ù)書(shū)寫(xiě)順序進(jìn)行加載巢株。一般先寫(xiě)英文字體槐瑞，在寫(xiě)中文字體

瀏覽器中加載的字體來(lái)自用戶機(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ì)長(zhǎng)度單位： px em %;

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

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

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

實(shí)際應(yīng)用中網(wǎng)頁(yè)中最小字號(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屬性

屬性名	屬性值	說(shuō)明
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選擇器义郑，類(lèi)選擇器，通配符選擇器丈钙。

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

3.4.1 標(biāo)簽選擇器

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

書(shū)寫(xiě)方式：標(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選擇器

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

書(shū)寫(xiě)方式： #id 屬性值

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

缺點(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 類(lèi)選擇器

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

書(shū)寫(xiě)方式：.class屬性值

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

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

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

工作上類(lèi)上樣式，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)全選蜜宪，簡(jiǎn)化書(shū)寫(xiě)

缺點(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 后代選擇器

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

書(shū)寫(xiě)方式：通過(guò)空格表示后代空格前的標(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 交集選擇器

通過(guò)一個(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í)候,用來(lái)化簡(jiǎn)，減少代碼量澳窑。

可以彌補(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)簽沒(méi)有設(shè)置過(guò)一些樣式，它的某個(gè)祖先級(jí)曾經(jīng)設(shè)置過(guò)摊聋，在瀏覽器中該標(biāo)簽也加載了這些樣式鸡捐，這些樣式是從組先級(jí)繼承而來(lái)的，這種現(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
類(lèi)選擇器屬性選擇器偽類(lèi)	10
元素選擇器偽元素	1
通配符	0

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

最后編輯于：2020.10.24 15:51:23

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末鹿寨，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子薪夕，更是在濱河造成了極大的恐慌脚草，老刑警劉巖，帶你破解...
沈念sama閱讀 222,183評(píng)論 6贊 516
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件原献，死亡現(xiàn)場(chǎng)離奇詭異馏慨，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)姑隅，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,850評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)写隶，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人讲仰，你說(shuō)我怎么就攤上這事慕趴。” “怎么了鄙陡？”我有些...
開(kāi)封第一講書(shū)人閱讀 168,766評(píng)論 0贊 361
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵冕房，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我趁矾，道長(zhǎng)耙册，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 59,854評(píng)論 1贊 299
?港島之戀（遺憾婚禮）
正文為了忘掉前任毫捣，我火速辦了婚禮详拙，結(jié)果婚禮上帝际，老公的妹妹穿的比我還像新娘。我一直安慰自己饶辙，他們只是感情好蹲诀，可當(dāng)我...
茶點(diǎn)故事閱讀 68,871評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著弃揽，像睡著了一般侧甫。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上蹋宦，一...
開(kāi)封第一講書(shū)人閱讀 52,457評(píng)論 1贊 311
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音咒锻，去河邊找鬼冷冗。笑死，一個(gè)胖子當(dāng)著我的面吹牛惑艇，可吹牛的內(nèi)容都是我干的蒿辙。我是一名探鬼主播，決...
沈念sama閱讀 40,999評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼滨巴，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼思灌！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起恭取，我...
開(kāi)封第一講書(shū)人閱讀 39,914評(píng)論 0贊 277
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤泰偿，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后蜈垮，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體耗跛，經(jīng)...
沈念sama閱讀 46,465評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,543評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年攒发，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了调塌。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,675評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡惠猿，死狀恐怖羔砾，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情偶妖，我是刑警寧澤姜凄，帶...
沈念sama閱讀 36,354評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站餐屎，受9級(jí)特大地震影響檀葛，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜腹缩，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,029評(píng)論 3贊 335
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一屿聋、第九天我趴在偏房一處隱蔽的房頂上張望空扎。院中可真熱鬧，春花似錦润讥、人聲如沸转锈。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,514評(píng)論 0贊 25
一樁弒父案楚殿，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)撮慨。三九已至，卻和暖如春脆粥，著一層夾襖步出監(jiān)牢的瞬間砌溺，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,616評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工变隔，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留规伐，地道東北人。一個(gè)月前我還...
沈念sama閱讀 49,091評(píng)論 3贊 378
代替公主和親
正文我出身青樓匣缘，卻偏偏與公主長(zhǎng)得像猖闪，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子肌厨，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,685評(píng)論 2贊 360

html和css自看筆記

1.html基述

1.1 html概述

1.1 html語(yǔ)義化

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

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

1.2.2 瀏覽器：

1.2.3 http協(xié)議：

1.3 純文本格式

1.4 html基本語(yǔ)法

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)

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

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

2.8 列表

2.8.1 無(wú)序列表 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語(yǔ)法

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 代碼的書(shū)寫(xiě)風(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 類(lèi)選擇器

3.4.4 通配符選擇器

3.4.5 后代選擇器

3.4.6 交集選擇器

3.4.7 并集選擇器

3.4 層疊式

3.4.1 繼承性

3.4.2 層疊性

1.6 DTD 命名空間字符集