當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTMLCSS的语法与使用

發(fā)布時間：2024/1/8 HTML 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTMLCSS的语法与使用小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

互聯(lián)網(wǎng)原理：上網(wǎng)即請求數(shù)據(jù)

HTML：制作網(wǎng)頁文件

上網(wǎng)時，用戶通過客戶端發(fā)送http請求到服務(wù)器，服務(wù)器端將對應(yīng)請求找到后，通過http響應(yīng)傳給本地計算機，計算機加載網(wǎng)頁

上網(wǎng)過程由實際的物理文件的傳輸

http協(xié)議

瀏覽過程

輸入URL→DNS域名解析（瀏覽器無法直接通過域名發(fā)起請求，需要將域名解析為IP地址）→建立TCP鏈接→發(fā)送HTTP Request→Web服務(wù)器Nginx反向代理→應(yīng)用服務(wù)器Servlet處理請求→關(guān)閉TCP鏈接→渲染響應(yīng)頁面

純文本和超文本區(qū)別

定義：純文本只包含文字內(nèi)容，不能包含文字以外的（圖片視頻等）。

純本文文件：文件內(nèi)部只能書寫純文本，且不包含樣式，常見如.txt、.html、.css、.js。

超文本文件：是一種含有特殊標(biāo)記的文本文件，其作用類似word的排版標(biāo)記最常見的.docx、.pptx。

查詢某一瀏覽器html5兼容情況：https://html5test.com/results/desktop.html

查詢某一新增方法瀏覽器兼容情況：https://caniuse.com

HTML骨架

DTD(Document Type Definition)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body></body> </html>

html就是HTML超文本標(biāo)記語言

關(guān)于html標(biāo)簽

整個網(wǎng)頁必須被包裹，其中包含和兩部分

：網(wǎng)頁的配置：網(wǎng)頁的內(nèi)容

標(biāo)簽屬性lang(language)：整個網(wǎng)頁的主題語言

英語：en

漢語：zh、cn、zh-CN。

無論那種語言都要使用英文開發(fā)

字符集

head標(biāo)簽對中幾乎所有的配置都是些在meta標(biāo)簽中的，meta意為元

網(wǎng)頁面向國際使用"UTF-8"，面向國內(nèi)使用"gbk"

如需修改字符集

以將現(xiàn)有字符集utf-8修改為gbk為例

將meta標(biāo)簽修改為gbk

點擊右下角字符集標(biāo)志[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DAfH6KcB-1630767244050)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210721185344849.png)]

在彈出檢索欄點擊通過編碼重新打開[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6UWIMe2w-1630767244051)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210721185516140.png)]

搜索gbk，選中搜索內(nèi)容即可[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-iu2yIoKa-1630767244052)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210721185610876.png)]

視口標(biāo)簽

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

如果不加這個視口，手機看這個網(wǎng)頁是“俯瞰”模式，將以980px俯瞰網(wǎng)頁

如果加上這個視口，手機看網(wǎng)頁就是“APP”模式，將以APP的狀態(tài)字號看頁面

瀏覽器私有設(shè)置

edge是win10中IE升級版瀏覽器，這句話的意思表示設(shè)置兼容性為讓IE和edge渲染方式一樣

還有些雙核瀏覽器都可以加上這句話表示盡可能用高級核打開頁面

title標(biāo)簽

網(wǎng)頁標(biāo)簽

<title>Document</title>

關(guān)鍵字

最基本的SEO技術(shù)就是把keywords寫好，keywords是網(wǎng)頁關(guān)鍵字

description頁面描述

頁面描述就是搜索引擎搜索到之后顯示的文字

HTML基本語法

標(biāo)簽

標(biāo)簽必須書寫在一對<>內(nèi)

標(biāo)簽分單標(biāo)簽和雙標(biāo)簽，雙標(biāo)簽成對出現(xiàn)，有開始標(biāo)簽和結(jié)束標(biāo)簽

結(jié)束標(biāo)簽必須有關(guān)閉符號/。

根據(jù)標(biāo)簽內(nèi)部存放內(nèi)容不同，將不同的標(biāo)簽劃分為兩個級別

單標(biāo)簽雙標(biāo)簽

img	h1-h6
br	div
hr	span
	p
	a
	ul+li

根據(jù)標(biāo)簽的種類區(qū)分兩個等級，分別是容器級和文本級

容器級：元素內(nèi)部除了可以存放文本之外，還可以嵌套標(biāo)簽

文本級：元素內(nèi)部只能存放文本或者文本級標(biāo)簽

容器級文本級

div	span
ol	img
ul	b
li	u
dl	i
dt
dd
h1-h6

標(biāo)簽屬性

對標(biāo)簽賦予職能，但前提是它具有此項功能，多個屬性用空格隔開。

<a href="" title="">我是超鏈接</a>

文字的位置不通過標(biāo)簽位置決定，而是通過標(biāo)簽特性決定。

其輸出結(jié)果是換行的

標(biāo)簽與其他標(biāo)簽之間對空白、換行、縮進不敏感，有沒有空白不影響瀏覽器加載效果
HTML語法中，認(rèn)識標(biāo)簽的開始和結(jié)束，不論有沒有換行都只認(rèn)標(biāo)簽開始結(jié)束
標(biāo)簽之間還認(rèn)識嵌套關(guān)系
書寫過程中，為了讓代碼是容易解讀的，建議進行合理的換行和縮進
在上傳代碼的過程中，為了提高傳輸速度，可以將代碼進行壓縮，刪除多余的空白，目的是壓縮文件大小

空白折疊現(xiàn)象

多個空格會被折疊成一個空格

<p>你好我是張三</p>

多個空格顯示需要特殊寫法

HTML常見標(biāo)簽

h系列標(biāo)簽(headline)

一共六級標(biāo)題(h1-h6)

都是雙標(biāo)簽，容器級標(biāo)簽

作用：給內(nèi)部添加對應(yīng)級別標(biāo)題的語義

標(biāo)題標(biāo)簽權(quán)重最高

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-L8i8syU3-1630767244054)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210722160410847.png)]

h1一般是logo，如用多個，瀏覽器會認(rèn)為你作弊，從而降低排名

p標(biāo)簽(paragraph)

文本級標(biāo)簽

img標(biāo)簽

文本級標(biāo)簽

用于插入一張圖片

src：圖片路徑

alt：文件加載不出來時的替換文本

title：鼠標(biāo)懸停圖片上時出現(xiàn)的文字

width：圖片寬度

height：圖片高度

border：邊框設(shè)置

一般為了避免圖片變形長度寬度不會同時使用

一般不在此處使用border，而在css中使用，邊框顏色不光有黑色

src中使用相對路徑或絕對路徑都可以，實戰(zhàn)中因為沒有盤符劃分所以很少使用絕對路徑。相對路徑中常見有："/"：進入某個文件夾；"…/"：出某個文件夾；同級文件夾不需要進出。

錨點(anchor)

a標(biāo)簽

雙標(biāo)簽，文本級標(biāo)簽

作用：指定位置添加一個娼妓鏈接，從而實現(xiàn)相應(yīng)的跳轉(zhuǎn)

a標(biāo)簽常見屬性：

href：超文本引用（hypertext reference）

<a href="http://www.baidu.com">鏈接到百度</a>

跳轉(zhuǎn)也可以使用絕對路徑和相對路徑

target：

作用是是否在新標(biāo)簽打開鏈接，值一定是"_blank"

<a href="http://www.baidu.com" target="_blank">鏈接到百度</a>

title:

和img的title一致，都是設(shè)置鼠標(biāo)懸停的文字

<a href="http://www.baidu.com" target="_blank" title="我是鼠標(biāo)懸停的文字">鏈接到百度</a>

錨點的使用

方法一：name屬性定位

錨點的錨

錨點的點

代碼示例

方法二：id屬性定位

錨點的錨

錨點的點

代碼示例

列表

無序列表

用于定義無序列表，標(biāo)簽包括：

ul: unordered list

li: list item

<h2>古典四大名著</h2><ul><li><h3>西游記</h3><ul><li>唐僧</li><li>孫悟空</li><li>豬八戒</li><li>沙僧</li></ul></li><li><h3>水滸傳</h3><ul><li>林沖</li><li>盧俊義</li><li>宋江</li><li>武松</li></ul></li><li><h3>三國演義</h3><ul><li>董卓</li><li>曹操</li><li>孫權(quán)</li><li>劉備</li></ul></li><li><h3>紅樓夢</h3><ul><li>賈寶玉</li><li>林黛玉</li><li>薛寶釵</li><li>王熙鳳</li></ul></li></ul>

ul內(nèi)部嵌套且只能嵌套li標(biāo)簽，li標(biāo)簽內(nèi)部可以嵌套任何標(biāo)簽

無序列表之間沒有前后順序之分

列表項之間的前綴樣式是CSS去控制的，目前只需搭建結(jié)構(gòu)

有序列表

用于定義有序列表，包括：

ol: ordered list

li: list item

<h2>三年級期末考試排名</h2><ol><li><h3>三年級1班</h3><ol><li>第一名：王同學(xué)</li><li>第二名：李同學(xué)</li><li>第三名：張同學(xué)</li></ol></li><li><h3>三年級2班</h3><ol><li>第一名：王同學(xué)</li><li>第二名：李同學(xué)</li><li>第三名：張同學(xué)</li></ol></li><li><h3>三年級3班</h3><ol><li>第一名：王同學(xué)</li><li>第二名：李同學(xué)</li><li>第三名：張同學(xué)</li></ol></li></ol>

嵌套規(guī)則同無序列表

定義列表

用于定義自定義列表，標(biāo)簽包括：

dl: definition list

dt: definition term

dd: definition description

di內(nèi)部只能存放dt和dd，dt和dd是同級關(guān)系

dt和dd都是容器級標(biāo)簽，內(nèi)部可以存放任意內(nèi)容

每個dt主題后面跟0或多個解釋的dd，每個dd解釋上一個dt

很多時候dl、dt、dd組合使用

如果再加上一定的CSS設(shè)置

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AHJDVhG9-1630767244055)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210723184904264.png)]

表格

表格基本標(biāo)簽

table: 定義表格

tr: table rows，定義表格列

td: table dock，定義表格的單元格

關(guān)系：table>tr>td

table上有兩個標(biāo)簽：一是邊框，二是CSS樣式

如果表格需要添加表頭，可以使用tr>th

單元格合并

跨行跨列合并，可以給對應(yīng)的td和th標(biāo)簽設(shè)置相關(guān)屬性

rowspan：上下跨行合并

colspan：左右跨列合并

td{width: 80px;height: 60px;text-align: center;} <table border="1" style="border-collapse: collapse;"><tr><td colspan="2">1</td><td rowspan="2">2</td><td colspan="3">3</td><td>4</td></tr><tr><td rowspan="2">5</td><td>6</td><td>7</td><td>8</td><td rowspan="2">9</td><td>10</td></tr><tr><td rowspan="2">11</td><td>12</td><td colspan="2">13</td><td rowspan="2">14</td></tr><tr><td>15</td><td>16</td><td>17</td><td colspan="2">18</td></tr></table>

表格分區(qū)

完整表格主要包括三部分：表格標(biāo)題、表格表頭、表格主題

table內(nèi)部還有三個分區(qū)標(biāo)簽組成

caption: 定義表格的主題

thead: 定義表格的頭部

tbody: 定義表格的主體

<table border="1"><caption>各地區(qū)資產(chǎn)投資情況</caption><thead><tr><th rowspan="2">地區(qū)</th><th colspan="2">按總量分</th><th colspan="2">按比重分</th></tr><tr><th>自年初累計</th><th>去年同期增長（%）</th><th>自年初累計</th><th>去年同期（%）</th></tr></thead><tbody><tr><td>全國</td><td>10000</td><td>100</td><td>100</td><td>100</td></tr><tr><td>全國</td><td>10000</td><td>100</td><td>100</td><td>100</td></tr><tr><td>全國</td><td>10000</td><td>100</td><td>100</td><td>100</td></tr><tr><td>全國</td><td>10000</td><td>100</td><td>100</td><td>100</td></tr><tr><td>全國</td><td>10000</td><td>100</td><td>100</td><td>100</td></tr></tbody>

表單元素

form標(biāo)簽

form是表單的意思

form是容器級標(biāo)簽，內(nèi)部存放可輸入的控件。如果輸入的表單需要提交到數(shù)據(jù)，所有的控件需要被表單包裹

method：數(shù)據(jù)提交的方法。屬性值是post和get

action：是數(shù)據(jù)提交的位置

input標(biāo)簽

input是輸入框的一種，但不僅僅是輸入框，通過type屬性實現(xiàn)多功能

輸入框

輸入框有兩個重要的屬性：

value：設(shè)置默認(rèn)顯示的內(nèi)容，屬性值為自定義內(nèi)容

placeholder：屬性作用是如果沒有value的時候提示用戶的文字占位符

密碼框

通過type設(shè)置為password實現(xiàn)

單選框

通過type設(shè)置為radio實現(xiàn)

欲實現(xiàn)一組互斥的按鈕，將單選按鈕組name屬性設(shè)置成相同

復(fù)選框

通過type設(shè)置為checkbox實現(xiàn)

復(fù)選框可以通過對自身進行多次點擊實現(xiàn)選擇或者取消

一組多選框建議設(shè)置相同的name

不論單選復(fù)選，若希望默認(rèn)選定則需要添加

checked="checked" <p>愛 好：<input type="checkbox" name="hobby">繪畫<input type="checkbox" name="hobby" checked="checked">讀書<input type="checkbox" name="hobby">音樂<input type="checkbox" name="hobby">天文</p>

label標(biāo)簽

如果想實現(xiàn)點擊文字即選中，則需要label標(biāo)簽來擴大選取

文本域

標(biāo)簽textarea

input之前只能輸入單行文本，如果想實現(xiàn)多行輸入，就需要使用textarea

textarea是一個雙標(biāo)簽，是文本級標(biāo)簽

屬性值為rows和cols

rows：定義當(dāng)前文本域有幾行，單位是數(shù)字

cols：定義當(dāng)前文本域有幾列，單位是數(shù)字（以英文為準(zhǔn)）

placeholder：占位符

textarea默認(rèn)是可以通過右下角進行縮放，如不想縮放設(shè)置style

下拉菜單

需要一組標(biāo)簽進行制作

select：表示搭建下拉項

option：表示搭建下拉項

select內(nèi)部嵌套option

如果需要將某一選項定位默認(rèn)則

籍貫：<select><option>北京</option><option selected="selected">廣州</option><option>上海</option><option>重慶</option></select>

HTML字符實體

&開頭，；結(jié)尾。常見如下：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BYDPARTf-1630767244056)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210724210950674.png)]

參考鏈接：https://www.w3school.com.cn/html/html_entities.asp

錯誤表達：

正確表達：

div和span

div和span都是常用布局標(biāo)簽，俗稱盒子

div：分割大跨度。主要用于網(wǎng)頁布局拆分，沒有明確語義

span：分割小跨度。用于小范圍，只是用于文本

作用：用來分割頁面布局。div是跨度布局分割，span是文字分割

div是容器級標(biāo)簽

<div><div>今天收入<span style="color: aqua;">300</span>元</div></div><div><div></div></div><div><div></div></div>

CSS(cascading style sheet)

CSS樣式

文字樣式

盒模型的樣式

CSS布局

輔助頁面布局，完成HTML無法完成的功能，比如并排顯示、精確定位顯示

從HTML4.0開始，結(jié)構(gòu)層和樣式層進行了分離

前端三層

結(jié)構(gòu)層：HTML作用是從語義的角度進行網(wǎng)頁結(jié)構(gòu)的搭建

樣式層：CSS作用從美觀的角度講修飾頁面樣式

交互層：JavaScript作用是從交互的角度講述頁面的行為

CSS常用屬性

CSS常用的文字屬性有三個：color, font-size, font-family

CSS的屬性樣式發(fā)生了改變，由HTML的k="v"變?yōu)榱薻:v

文字三屬性

文字顏色

文字屬性：color

顏色值：

十六進制：#ff0000/Green(#00ff00)/Blue(#0000ff)，可簡化(#00ff00簡化為#0f0)

RGB: Red(255,0,0)/Green(0,255,0)/Blue(0,0,255)，共1670萬種顏色

https://www.w3school.com.cn/cssref/css_colors.asp

字號

屬性：font-size

數(shù)值：以px（像素）為單位的數(shù)值；以百分比為單位；以em（倍數(shù)）為單位

不同瀏覽器有自身不同的默認(rèn)大小和最小顯示大小（chrome的默認(rèn)大小是16px，最小為8px）

字體

屬性：font-family

屬性值：必須以雙引號包裹，屬性可以有多個（前置屬性無法識別就識別下一個），使用逗號分隔

中文常用字體屬性：微軟雅黑(Microsoft Yahei)，宋體(Smisun)

英文常用屬性值：Arial，consolas

大多數(shù)瀏覽器默認(rèn)字體為微軟雅黑，以上兩種書寫皆可

如果有中英文混雜，則同時設(shè)置對應(yīng)字體

行高

文字一定垂直居中

屬性：line-height

屬性值：

px為單位：數(shù)值以像素為單位

百分比：參考自身字號大小

文字加粗(font-weight)

數(shù)值表示

單詞表示

normal表示不加粗

bold表示加粗（默認(rèn)加粗700）

字體樣式(font-style)

設(shè)置文字是否有傾斜或者斜體

屬性值

normal：正規(guī)的，沒有傾斜

italic：斜體的，文字斜體（該文字有斜體樣式才會傾斜，使用最多）

oblique：傾斜的，與字體無關(guān)（無論什么字體都會傾斜）

font屬性綜合寫法

包含五個單一屬性，屬性之間使用空格隔開，字號和行高使用斜杠分割，字號、行高、字體必須連續(xù)書寫，順序不能變，必須位于倒數(shù)三個

文本

對齊text-align

用來設(shè)置段落整體水平方向?qū)R

屬性值：left、center、right

文本修飾(text-decoration)

設(shè)置文本整體是否有線條修飾

屬性值

none：沒有修飾

overline：上劃線

line-through：中劃線、刪除線

underline：下劃線

縮進(text-indent)

設(shè)置段落首行縮進

屬性值

px為單位：數(shù)字代表多少像素

百分比為單位：參考標(biāo)簽的父級元素width值的百分比

em為單位：數(shù)字是幾表示縮進幾個字符（最常用）

盒模型（盒子）

寬度屬性：width

高度屬性：height

內(nèi)邊距屬性：padding

邊框：border

外邊距屬性：margin

背景顏色屬性：background-color（也有單詞和數(shù)字三屬性）

盒子實際加載區(qū)域：width+height

盒子可實體化顯示區(qū)域：width+height+padding+border

盒子實際占位區(qū)域：width+height+padding+border+margin

<div style="width: 100px;height: 100px;background-color:red"></div> div{width: 400px;height: 400px;padding: 20px;border: 10px solid black;margin: 50px;background-color: pink; } p{color: rgb(214, 19, 19);font-size: 20px;width: 50%;height: 50%;background: green;padding: 0;margin: 0; }

寬和高(width&height)

如果盒子不設(shè)置寬高，則默認(rèn)撐滿父盒子寬度

如果盒子不設(shè)置高度，則默認(rèn)被文字撐滿（文字包括其行高）

內(nèi)邊距(padding)

設(shè)置寬高到邊框的間距

不能加載內(nèi)容但可以加載背景

屬性名：padding

屬性值：px為單位的數(shù)值

對四周一起設(shè)置

padding: 20px;

對四周分別設(shè)置

padding-left: 40px; padding-right: 20px; padding-top: 10px; padding-bottom: 30px;

四值法：以上可簡寫為（順序為上右下左）

padding: 10px 20px 30px 40px;

三值法：設(shè)置順序為上、左右、下

padding: 10px 20px 30px;

二值法：設(shè)置順序為：上下、左右

padding: 10px 20px;

邊框(border)

設(shè)置盒子顯示邊緣

border: 10px solid black;

border是個綜合屬性，包括了：線寬(border-width)、線形(border-style)、顏色(border-color)，單個屬性書寫也有四值法，順序規(guī)則同padding。

border-style常見效果有：實線(solid)、虛線(dashed)、點線(dotted)、雙線(double)、邊框凹陷效果groove、邊框凸顯效果(rideg)、內(nèi)容凹陷效果(inset)、內(nèi)容凸現(xiàn)效果(outset)等。

border-width: 10px 20px 30px 40px; border-style: solid dashed dotted double; border-color: red blue green yellow;

也可以對某一方向某一屬性精確設(shè)置（border+方向+類型）

border-right-color: purple

外邊距(margin)

設(shè)置盒子與其他盒子的間距

設(shè)置與padding一致

盒模型擴展

默認(rèn)樣式清除

所有的標(biāo)簽都有自身的邊距，如有需要可對其進行刪除

height屬性擴展

一個盒子必須有高度，否則看不到內(nèi)容樣式，比如超出部分，如果沒有設(shè)置高度，則被內(nèi)容撐高；如果設(shè)置高度小于文本高度，則文本不會被隱藏，會自動超出。

超出部分，可通過overflow進行設(shè)置。

overflow屬性

visible: 顯示超出部分

hidden: 隱藏超出部分

scroll: 增加一個滾動軸樣式

auto: 對超出部分進行滾動軸樣式

居中

單行文字設(shè)置居中

多行文字設(shè)置居中

盒子水平居中

margin: auto;

盒子垂直居中

margin塌陷現(xiàn)象

垂直方向兩個盒子margin相遇，兩個盒子垂直距離為兩個盒子margin中較大值

父子盒子中，如果子盒子的margin-top比父盒子大，或者父盒子沒有設(shè)置margin-top，則父子盒子一同向下塌陷

陰影

陰影分為盒子陰影和文本陰影，用法幾乎一樣，只是文本陰影沒有內(nèi)陰影

/* 盒子陰影 */ /* 四個參數(shù)分別代表：邊距左移距離，邊距下移距離，模糊程度（越大越模糊），顏色 */ /* inset可有可無 */ box-shadow: inset 50px 50px 30px cyan,60px 60px 30px yellow,70px 70px 30px red; .text{font-size: 30px;color: skyblue;text-shadow: 5px 5px 3px cyan,10px 10px 3px yellow; }

標(biāo)準(zhǔn)文檔流

HTML文件就是一個標(biāo)準(zhǔn)文檔流文件

元素類型

從HTML角度來說分兩種：文本級和容器級

從CSS角度來說分三種：塊級元素、行內(nèi)元素和行內(nèi)塊元素

塊元素

文字自動換行。常見塊級元素：div, p, h1-h6, ul, ol, dl等

行內(nèi)元素

文字并排顯示，不能設(shè)置寬高。常見行內(nèi)元素：span, a, b, u, i等

行內(nèi)塊元素

可設(shè)置寬高且并排顯示、常見行內(nèi)塊元素：input, img, table。

display顯示模式

大多數(shù)標(biāo)簽有其自身顯示模式，但可以通過CSS屬性display進行切換

display屬性值：block, inline, inline-block

浮動

脫離標(biāo)準(zhǔn)文檔流，不受元素等級限制，可以并排顯示，可以設(shè)置寬高

屬性標(biāo)簽為float，屬性值為left、right。（貼左邊從左往右或貼右邊從右往左）

脫標(biāo)

如果兄弟盒子中一部分設(shè)置浮動而另一部分不設(shè)置浮動，則浮動盒子會飄在標(biāo)準(zhǔn)流之上，我們將其稱之為脫標(biāo)。

字圍

同級元素中，如果前面盒子浮動，后面標(biāo)準(zhǔn)流會占有前面盒子的文字；如果后面標(biāo)準(zhǔn)流盒子有文字，則不會占有前面浮動盒子的文字，而是會繞開形成文字環(huán)繞。

浮動中的margin塌陷

在設(shè)置浮動后，標(biāo)準(zhǔn)流中的margin塌陷現(xiàn)象消失。

浮動清除

在標(biāo)準(zhǔn)流中，如果不設(shè)置父盒子高度，則父盒子會被子盒子撐高。

如果子盒子浮動了則：父盒子的高度不會被撐高了；父盒子后面還有其他與父盒子同級的兄弟標(biāo)簽，且其中也有浮動標(biāo)簽，則前面的浮動會影響后面的貼邊。

清除方法一：height屬性

通過設(shè)置父盒子的高消除浮動影響

清除方法二：clear屬性

CSS屬性中的clear有三個屬性值

left：清除左浮動的影響

right：清除右浮動的影響

both：清除兩種浮動的影響

清除方法三：隔墻法

結(jié)合使用height和clear屬性，制作一堵墻。只能實現(xiàn)分別貼邊不能實現(xiàn)撐高

清除方法四：內(nèi)墻法（推薦）

通過把墻設(shè)置在父盒子內(nèi)來達到撐高和分別貼邊

清除方法五：偽類

CSS選擇器的一種

.clearfix::after{content: '';display: block;height: 0;clear: both;visibility: hidden;}

清除方法六：overflow（推薦）

overflow屬性有BFC特性，設(shè)置該屬性的特性便是會被內(nèi)部元素?fù)胃?/p>

a標(biāo)簽的偽類

概念

a標(biāo)簽可以根據(jù)用戶的不同行為的觸發(fā)，從而實現(xiàn)不同形態(tài)的樣式，我們將這四種可設(shè)置的樣式稱為偽類。

標(biāo)簽類型

a:link{/* 標(biāo)簽未訪問過 */color: #0f0 } a:visited{/* 標(biāo)簽已經(jīng)訪問過 */color: #f0f } a:hover{/* 鼠標(biāo)在標(biāo)簽上 */color: #ff0 } a:active{/*鼠標(biāo)點擊*/color: #0ff } a:disabled{/*不可使用*/color: #00f } a:focus{/*聚焦*/color: #fff } a:empty{/*空的*/color: #f00 }

注意事項

對于普通元素，非超級鏈接，也可進行設(shè)置偽類狀態(tài)，但只可以設(shè)置hover和active，

偽類選擇器推薦使用類名來精確匹配。

偽類權(quán)重和普通選擇器權(quán)重相同

書寫順序必須是：link, visited, hover, active（保證全部加載）

偽元素

雙閉合標(biāo)簽才有偽元素

偽元素務(wù)必有content屬性

偽元素必須脫離文檔流

偽元素樣式

寫法一	::after
寫法二	::before

偽元素可以當(dāng)成通過CSS樣式給父元素層疊一個子元素

一個元素最多兩個偽元素

HTML5新增標(biāo)簽

布局標(biāo)簽

新增七個布局標(biāo)簽，全都是塊元素，雙向閉合標(biāo)簽，使用同div

新增標(biāo)簽意義

header	標(biāo)簽頭部
footer	頁腳
main	網(wǎng)頁主要部分
nav	導(dǎo)航
aside	側(cè)邊欄
section	段落
article	文章

小語義化標(biāo)簽

address

顯示地址，內(nèi)部文字傾斜

地圖生成器：百度地圖→地圖生成器http://api.map.baidu.com/lbsapi/creatmap/

bdo

設(shè)置文本方向，屬性值dir有兩個值：ltr（從左到右），rtl（從右到左）

cite

引用標(biāo)簽，文本傾斜顯示

code

網(wǎng)頁中的代碼可以封裝在code標(biāo)簽內(nèi)

details&summary

details要結(jié)合summary標(biāo)簽一起使用（details內(nèi)嵌套summary）顯示效果是折疊卡片

pre

文本如何復(fù)制，標(biāo)簽就如何顯示，文字顯示會偏小

ruby&rt

ruby要結(jié)合rt標(biāo)簽一起使用（ruby內(nèi)嵌套rt），顯示效果是rt內(nèi)拼音顯示在ruby文本上

template

內(nèi)部文本、嵌套內(nèi)容都不可視

新增表單元素

form標(biāo)簽有個action屬性，用于設(shè)置提交路徑

新增元素意義

range	范圍選取，后續(xù)還可以設(shè)置最值(min/max)、默認(rèn)值(value)
color	顏色選取
date	日期選取
week	周目選取
time	時間選取
email	郵箱輸入（非法郵箱會報錯）
url	網(wǎng)址輸入（非法網(wǎng)址會報錯）
search	搜索輸入
number	計數(shù)器，可以設(shè)置步長(step)

<form action=""><p>你的身高<input type="range" min='150' max='200' value="180"></p><p>你喜歡的顏色<input type="color"></p><p>日歷<input type="date"></p><p>當(dāng)前這個月是第幾周啊<input type="week"></p><p>時間<input type="time"></p><p>你的郵箱地址<input type="email"></p><p>你經(jīng)常逛的網(wǎng)址<input type="url"></p><p>你要搜索什么<input type="search"></p><p>計數(shù)器<input type="number" step="0.5"></p><p><input type="submit"></p> </form>

label標(biāo)簽與datalist標(biāo)簽組合使用

用于實現(xiàn)下拉選項輸入的功能

<label><input type="checkbox">選項一</label><input type="text" list="box"><datalist id="box"><option>JS</option><option>OS</option></datalist>

表單元素新增屬性

新增屬性意義

placeholder	占位符
disable	不可選中
autofocus	自動聚焦
readonly	只讀，不可輸入新文本

<p>placeholder: <input type="text" placeholder="請輸入密碼"> </p> <p>disabled: <input type="text" disabled> </p> <p>autofocus: <input type="text" autofocus> </p> <p>readonly: <input type="text" readonly value="只能讀取數(shù)據(jù)"> </p>

background

background-color

作用范圍：width，height，padding，margin

rgb、十六進制、rgba(rgb+透明度（0-1）)

background-image

作用范圍：width，height，padding，margin

給標(biāo)簽的顯示區(qū)域添加圖片

屬性值為url（相對位置或者絕對位置）

如果對background-color和background-image同時設(shè)置，則都會被加載，但是image會覆蓋color

background-repeat

屬性值為repeat，repeat-x（水平重復(fù)），repeat-y（垂直重復(fù)）和no-repeat，如不需要對背景圖進行重復(fù)渲染，則可將屬性值設(shè)置為no-repeat

background-position

用于設(shè)置背景圖位置（常用不設(shè)置背景圖重復(fù)）

屬性值：單詞定位法、像素定位法、百分比定位法。不論那種都有兩個值，第一個值是水平方向位置，第二個值是垂直方向。

單詞定位法

水平方向：left, center, right

垂直方向：top, center, bottom

像素定位法

水平方向：左上角水平方向移動距離

垂直方向：左上角垂直方向移動距離

像素值還可以為負(fù)數(shù)

正數(shù)：圖片以左上頂點為參考點，向右向下移動

負(fù)數(shù)：圖片以左上頂點為參考點，向左向上移動

百分比定位法

水平方向100%=（盒子width）-圖片寬度

垂直方向100%=（盒子height）-圖片高度

background-attach

設(shè)置背景圖是否隨著頁面滾動而滾動

屬性值：scroll（和頁面一起滾動）、fixed（不會和頁面一起滾動）

background綜合屬性

可以將五個background屬性組成一個綜合屬性，屬性值1-5皆可，空格隔開，順序可顛倒。

background: url() no-repeat center top scroll cyan

background應(yīng)用

logo替換文案

使用背景圖片替換文字，文字通過設(shè)置text-indent為負(fù)移出h1盒子，后設(shè)置overflow: hidden隱藏文字

使用padding制作背景圖

將原來的ul默認(rèn)小黑點去掉（list-style: none），用padding擠出位置（padding可以加載背景圖片），后為每一個li設(shè)置背景圖片即可。

精靈

圖片大盒子小的時候，只顯示局部。圖片位置設(shè)置與圖片小盒子大的時候剛好相反

背景精靈就是將許多小的icon圖標(biāo)匯集在一起顯示，利于網(wǎng)頁加載

background-origin

即背景起源，HTML5新增內(nèi)容

background-origin的屬性值意義

border-box	背景圖從border開始設(shè)置
padding-box	背景圖從padding開始設(shè)置
content-box	背景圖從content開始設(shè)置

background-clip

即背景圖裁切，HTML5新增內(nèi)容

background-clip的屬性值意義

border-box	從border開始裁切（即border以外切掉）
padding-box	從padding開始裁切（即padding以外切掉）
content-box	從content開始裁切（即content以外切掉）
text	使用text裁切（即text以外切掉）

注：文本裁切有兼容問題，需要在background-clip屬性前加上私有前綴，例如

-webkit-background-clip:text;

不同瀏覽器有不同的私有前綴

瀏覽器名稱瀏覽器私有前綴

谷歌	-webkit-
火狐	-moz-
IE	-ms-

background-size

即背景圖尺寸，HTML5新增內(nèi)容

屬性值可以是：px、百分比、cover、contain，其中cover會盡可能拉伸，會有一部分不被顯示，contain則是盡可能顯示整張圖，會有空白

定位

定位就是把盒模型按照指定位置加載

相對定位不脫離標(biāo)準(zhǔn)流，絕對定位和固定定位脫離標(biāo)準(zhǔn)流

position：設(shè)置盒子針對某個參考元素進行位置偏移設(shè)置

屬性值

relative：相對定位

absolute：絕對定位

fixed：固定定位

如果定位的元素想要發(fā)生位置偏移，就必須加上偏移量屬性進行設(shè)置

水平方向：left，right

垂直方向：top，bottom

相對定位

position: reletive; left: 100px; /* 相當(dāng)于right: -100px，數(shù)值有正負(fù)之分 */ top: 100px; /* 相當(dāng)于bottom: -100px，數(shù)值有正負(fù)之分 */

參考點依然是左上頂點

同時設(shè)置數(shù)值沖突的left/top和right/bottom，會按照left/top的設(shè)置為準(zhǔn)，與順序無關(guān)

絕對定位

原理

position: reletive; left: 100px; top: 100px;

參考元素為最近的祖先元素，如果沒有就參考body

絕對定位的元素是脫離標(biāo)準(zhǔn)流的，后面標(biāo)準(zhǔn)流的元素會占領(lǐng)之前的位置

任何元素都可以設(shè)置絕對位置，設(shè)置后不受標(biāo)準(zhǔn)流控制（span可以設(shè)置寬高）

屬性設(shè)置與參考點：

設(shè)置left&top的參考點是body的左上頂點

設(shè)置right&top的參考點是body的右上頂點

設(shè)置left&bottom的參考點是body的左下頂點

設(shè)置right&bottom的參考點是body的右下頂點

應(yīng)用場景

制作壓蓋

居中

position: absolute; left:50%; margin-left:自己寬度的一半；

固定定位

參考元素為瀏覽器窗口；參考點根據(jù)組合方向不同為瀏覽器窗口的四個點（同絕對位置參考點）。

position: fixed; left: 100px; top: 100px;

壓蓋順序

默認(rèn)壓蓋順序

標(biāo)準(zhǔn)流非標(biāo)準(zhǔn)了重疊在一起，優(yōu)先級是根據(jù)HTML書寫順序決定的，后寫的壓蓋先寫的。

自定義壓蓋順序

屬性標(biāo)簽為z-index，屬性值為數(shù)字（1，2，3，…），數(shù)字較小的元素在下面，數(shù)字較大的元素在上面；數(shù)字相同按順序后寫的壓蓋先寫的。如果沒有z-index則定位失敗。

父子盒子不涉及優(yōu)先級設(shè)置，一定是子盒子壓蓋父盒子

CSS樣式表

行內(nèi)式樣式表

基本語法：

內(nèi)嵌式樣式表

外鏈?zhǔn)綐邮奖?/h2> <link rel="stylesheet" href="外鏈?zhǔn)轿募?css">
link標(biāo)簽的作用是引入外部文件，rel="stylesheet"意為引入樣式表，通過href=文件地址來引入樣式

導(dǎo)入式樣式表（了解）

必須寫在style最頂部

四種樣式表優(yōu)缺點

樣式表名稱權(quán)重優(yōu)點缺點

行內(nèi)式樣式表	第一	樣式設(shè)置精確	結(jié)構(gòu)和樣式?jīng)]有分離；不能批量修改
內(nèi)嵌式樣式表	第二	樣式結(jié)構(gòu)分離；可批量修改	未完全分離，不能實現(xiàn)多個html使用
外鏈?zhǔn)綐邮奖?/td>	第二	樣式和結(jié)構(gòu)完全分離，css文件可多次使用	寫小demo時會比較麻煩
導(dǎo)入式樣式表	第三	樣式和結(jié)構(gòu)完全分離，css文件可多次使用	導(dǎo)入式有加載問題，且涉及加載順序（網(wǎng)頁進去會先白一下，影響使用體驗）

CSS選擇器

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

高級選擇器：后代選擇器、交集選擇器、并集選擇器

標(biāo)簽選擇器

通過標(biāo)簽名稱選擇，特點是無視嵌套（只能實現(xiàn)全選）

id選擇器

通過id屬性確定位置，權(quán)重最高，只能是單選，同名id不允許

類名屬性

通過class屬性確定

通配符選擇器

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

通配符*后面添加的樣式，每個標(biāo)簽都會加載一次

我們通常使用清除頁面的默認(rèn)樣式

后代選擇器

通過標(biāo)簽之間的后代關(guān)系去決定選擇某個某個范圍的元素

交集選擇器

滿足所有條件進行匹配，書寫方法是將多個選擇器連接，之間不加空格（同一層級不加空格，下轄標(biāo)簽要以空格隔開）

并集選擇器

對多個標(biāo)簽進行同類設(shè)置，標(biāo)簽之間用逗號隔開

自定義屬性選擇器

JQuery庫也支持屬性選擇器

不區(qū)分元素類型的字類選擇器

方法意義

first-child	父標(biāo)簽下的第一個子標(biāo)簽
last-child	父標(biāo)簽下的最后一個子標(biāo)簽
nth-child()	第括號內(nèi)數(shù)字個子標(biāo)簽，如果是2n則是順序上偶數(shù)個子標(biāo)簽
nth-last-child()	第括號內(nèi)數(shù)字個子標(biāo)簽，如果是2n則是倒序上偶數(shù)個子標(biāo)簽

區(qū)分元素類型的字類選擇器

方法意義

first-of-type	該類型的第一個子節(jié)點
last-of-type	該類型的最后一個子節(jié)點
nth-of-type()	該類型的第括號內(nèi)元素個子節(jié)點
nth-last-of-type()	該類型的第括號內(nèi)元素個子節(jié)點

關(guān)系型選擇器

語法意義

A+B	A標(biāo)簽后緊隨的姊妹標(biāo)簽B（不包括A）
A~B	A標(biāo)簽后緊隨的所有姊妹標(biāo)簽B（不包括A）

偽類選擇器

a:disabled{/*不可使用*/color: #00f } a:focus{/*聚焦*/color: #fff } a:empty{/*空的*/color: #f00 }

偽選擇器

以兩個冒號開頭

方法意義

::first-letter	對選中的第一個字母/漢字進行設(shè)置
::first-line	對選中的第一行進行設(shè)置
::first-selection	對瀏覽器中鼠標(biāo)選中的文本進行設(shè)置

p::first-letter{color:red; } p::first-line{background-color:yellow; } p::first-selection{background-color:blue; }

CSS繼承性與層疊性

繼承性

祖先元素進行設(shè)置，后代元素就可以繼承（繼承的都是文字屬性）

層疊性

CSS樣表又稱為層疊性樣表

一個標(biāo)簽可以被多個選擇器選擇（優(yōu)先級為：id選擇器>class選擇器>標(biāo)簽選擇器，多個選擇器同時定義一個標(biāo)簽的同一屬性會被層疊掉）

就近原則

文本離得近的選擇器生效

ound-color:cyan;
}
h6:nth-last-of-type(2n){
background-color:purple;
}

段落1

一級標(biāo)題1

一級標(biāo)題2

段落2

段落3

段落4

段落5

段落6

段落7

一級標(biāo)題2

```

關(guān)系型選擇器

語法意義

A+B	A標(biāo)簽后緊隨的姊妹標(biāo)簽B（不包括A）
A~B	A標(biāo)簽后緊隨的所有姊妹標(biāo)簽B（不包括A）

偽類選擇器

a:disabled{/*不可使用*/color: #00f } a:focus{/*聚焦*/color: #fff } a:empty{/*空的*/color: #f00 }

偽選擇器

以兩個冒號開頭

方法意義

::first-letter	對選中的第一個字母/漢字進行設(shè)置
::first-line	對選中的第一行進行設(shè)置
::first-selection	對瀏覽器中鼠標(biāo)選中的文本進行設(shè)置

p::first-letter{color:red; } p::first-line{background-color:yellow; } p::first-selection{background-color:blue; }

CSS繼承性與層疊性

繼承性

祖先元素進行設(shè)置，后代元素就可以繼承（繼承的都是文字屬性）

層疊性

CSS樣表又稱為層疊性樣表

就近原則

文本離得近的選擇器生效

總結(jié)

以上是生活随笔為你收集整理的HTMLCSS的语法与使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：程序员转行都去干嘛了？产品经理很正常，这
下一篇： Auto.js Pro安卓免ROOT引流