HTMLCSS的语法与使用
互聯網原理
互聯網原理：上網即請求數據
HTML：制作網頁文件
上網時，用戶通過客戶端發送http請求到服務器，服務器端將對應請求找到后，通過http響應傳給本地計算機，計算機加載網頁
上網過程由實際的物理文件的傳輸
http協議
瀏覽過程
輸入URL→DNS域名解析（瀏覽器無法直接通過域名發起請求，需要將域名解析為IP地址）→建立TCP鏈接→發送HTTP Request→Web服務器Nginx反向代理→應用服務器Servlet處理請求→關閉TCP鏈接→渲染響應頁面
純文本和超文本區別
定義：純文本只包含文字內容，不能包含文字以外的（圖片視頻等）。
純本文文件：文件內部只能書寫純文本，且不包含樣式，常見如.txt、.html、.css、.js。
超文本文件：是一種含有特殊標記的文本文件，其作用類似word的排版標記最常見的.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超文本標記語言
關于html標簽
整個網頁必須被包裹，其中包含和兩部分
：網頁的配置 ：網頁的內容標簽屬性lang(language)：整個網頁的主題語言
英語：en
漢語：zh、cn、zh-CN。
無論那種語言都要使用英文開發
字符集
head標簽對中幾乎所有的配置都是些在meta標簽中的，meta意為元
<meta charset="UTF-8"> <meta charset="gb2312"> <meta charset="gbk">網頁面向國際使用"UTF-8"，面向國內使用"gbk"
如需修改字符集
以將現有字符集utf-8修改為gbk為例
視口標簽
meta name="viewport" content="width=device-width, initial-scale=1.0">如果不加這個視口，手機看這個網頁是“俯瞰”模式，將以980px俯瞰網頁
如果加上這個視口，手機看網頁就是“APP”模式，將以APP的狀態字號看頁面
瀏覽器私有設置
edge是win10中IE升級版瀏覽器，這句話的意思表示設置兼容性為讓IE和edge渲染方式一樣
<meta http-equiv="X-UA-Compatibale" content="ie=edge">還有些雙核瀏覽器都可以加上這句話表示盡可能用高級核打開頁面
<meta name="renderer" content="webkit">title標簽
網頁標簽
<title>Document</title>關鍵字
最基本的SEO技術就是把keywords寫好，keywords是網頁關鍵字
<meta name="keywords" content="前端,HTML,JavaScript">description頁面描述
頁面描述就是搜索引擎搜索到之后顯示的文字
<meta name="Description" content="網頁描述"/>HTML基本語法
標簽
標簽必須書寫在一對<>內
標簽分單標簽和雙標簽，雙標簽成對出現，有開始標簽和結束標簽
結束標簽必須有關閉符號/。
根據標簽內部存放內容不同，將不同的標簽劃分為兩個級別
| img | h1-h6 |
| br | div |
| hr | span |
| p | |
| a | |
| ul+li |
根據標簽的種類區分兩個等級，分別是容器級和文本級
容器級：元素內部除了可以存放文本之外，還可以嵌套標簽
文本級：元素內部只能存放文本或者文本級標簽
| div | span |
| ol | img |
| ul | b |
| li | u |
| dl | i |
| dt | |
| dd | |
| h1-h6 |
標簽屬性
對標簽賦予職能，但前提是它具有此項功能，多個屬性用空格隔開。
<a href="" title="">我是超鏈接</a>文字的位置不通過標簽位置決定，而是通過標簽特性決定。
<p>文字</p><p>文字</p>其輸出結果是換行的
<span>文字</span> <span>文字</span>- 標簽與其他標簽之間對空白、換行、縮進不敏感，有沒有空白不影響瀏覽器加載效果
- HTML語法中，認識標簽的開始和結束，不論有沒有換行都只認標簽開始結束
- 標簽之間還認識嵌套關系
- 書寫過程中，為了讓代碼是容易解讀的，建議進行合理的換行和縮進
- 在上傳代碼的過程中，為了提高傳輸速度，可以將代碼進行壓縮，刪除多余的空白，目的是壓縮文件大小
空白折疊現象
多個空格會被折疊成一個空格
<p>你好 我是張三</p>多個空格顯示需要特殊寫法
<p>你好 我是張三</p>HTML常見標簽
h系列標簽(headline)
一共六級標題(h1-h6)
都是雙標簽，容器級標簽
作用：給內部添加對應級別標題的語義
標題標簽權重最高
<h1>我是h1標簽</h1><h2>我是h2標簽</h2><h3>我是h3標簽</h3><h4>我是h4標簽</h4><h5>我是h5標簽</h5><h6>我是h6標簽</h6>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-L8i8syU3-1630767244054)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210722160410847.png)]
h1一般是logo，如用多個，瀏覽器會認為你作弊，從而降低排名
p標簽(paragraph)
文本級標簽
img標簽
文本級標簽
用于插入一張圖片
src：圖片路徑
alt：文件加載不出來時的替換文本
title：鼠標懸停圖片上時出現的文字
width：圖片寬度
height：圖片高度
border：邊框設置
<img src="" alt="" width="" height="" title="" border="">一般為了避免圖片變形長度寬度不會同時使用
一般不在此處使用border，而在css中使用，邊框顏色不光有黑色
src中使用相對路徑或絕對路徑都可以，實戰中因為沒有盤符劃分所以很少使用絕對路徑。相對路徑中常見有："/"：進入某個文件夾；"…/"：出某個文件夾；同級文件夾不需要進出。
錨點(anchor)
a標簽
雙標簽，文本級標簽
作用：指定位置添加一個娼妓鏈接，從而實現相應的跳轉
a標簽常見屬性：
href：超文本引用（hypertext reference）
<a href="http://www.baidu.com">鏈接到百度</a>跳轉也可以使用絕對路徑和相對路徑
target：
作用是是否在新標簽打開鏈接，值一定是"_blank"
<a href="http://www.baidu.com" target="_blank">鏈接到百度</a>title:
和img的title一致，都是設置鼠標懸停的文字
<a href="http://www.baidu.com" target="_blank" title="我是鼠標懸停的文字">鏈接到百度</a>錨點的使用
方法一：name屬性定位
錨點的錨
<a href="#abc">標題1</a>錨點的點
<a name="abc"></a>代碼示例
<h1>總標題</h1><a href="#abc">標題1</a><a href="#def">標題2</a><a href="#hij">標題3</a><h2>標題1</h2><a name="abc"></a><p>內容1</p><h2>標題2</h2><a name="def"></a><p>內容2</p><h2>標題3</h2><a name="hij"></a><p>內容3</p>方法二：id屬性定位
錨點的錨
<a href="#abc">標題1</a>錨點的點
<h2 id="abc">標題1</h2>代碼示例
<h1>總標題</h1><a href="#abc">標題1</a><a href="#def">標題2</a><a href="#hij">標題3</a><h2 id="abc">標題1</h2><p>內容1</p><h2 id="def">標題2</h2><p>內容2</p><h2 id="hij">標題3</h2><p>內容3</p>列表
無序列表
用于定義無序列表，標簽包括：
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>孫權</li><li>劉備</li></ul></li><li><h3>紅樓夢</h3><ul><li>賈寶玉</li><li>林黛玉</li><li>薛寶釵</li><li>王熙鳳</li></ul></li></ul>ul內部嵌套且只能嵌套li標簽，li標簽內部可以嵌套任何標簽
無序列表之間沒有前后順序之分
列表項之間的前綴樣式是CSS去控制的，目前只需搭建結構
有序列表
用于定義有序列表，包括：
ol: ordered list
li: list item
<h2>三年級期末考試排名</h2><ol><li><h3>三年級1班</h3><ol><li>第一名：王同學</li><li>第二名：李同學</li><li>第三名：張同學</li></ol></li><li><h3>三年級2班</h3><ol><li>第一名：王同學</li><li>第二名：李同學</li><li>第三名：張同學</li></ol></li><li><h3>三年級3班</h3><ol><li>第一名：王同學</li><li>第二名：李同學</li><li>第三名：張同學</li></ol></li></ol>嵌套規則同無序列表
定義列表
用于定義自定義列表，標簽包括：
dl: definition list
dt: definition term
dd: definition description
<h3>國內明星</h3><dl><dt>明星1</dt><dd>作品：《作品1》、《作品2》、《作品3》</dd><dt>明星2</dt><dd>作品：《作品1》、《作品2》、《作品3》</dd><dt>明星3</dt><dd>作品：《作品1》、《作品2》、《作品3》</dd><dt>明星4</dt><dd>作品：《作品1》、《作品2》、《作品3》</dd></dl>di內部只能存放dt和dd，dt和dd是同級關系
dt和dd都是容器級標簽，內部可以存放任意內容
每個dt主題后面跟0或多個解釋的dd，每個dd解釋上一個dt
很多時候dl、dt、dd組合使用
<h3>國內明星</h3><dl><dt>明星1</dt><dd><p>作品：《作品1》、《作品2》、《作品3》</p><p>家庭成員：成員1、成員2、成員3</p><p>合作演員：演員1，演員2，演員3</p></dd></dl><dl><dt>明星2</dt><dd><p>作品：《作品1》、《作品2》、《作品3》</p><p>家庭成員：成員1、成員2、成員3</p><p>合作演員：演員1，演員2，演員3</p></dd></dl><dl><dt>明星3</dt><dd><p>作品：《作品1》、《作品2》、《作品3》</p><p>家庭成員：成員1、成員2、成員3</p><p>合作演員：演員1，演員2，演員3</p></dd></dl><dl><dt>明星4</dt><dd><p>作品：《作品1》、《作品2》、《作品3》</p><p>家庭成員：成員1、成員2、成員3</p><p>合作演員：演員1，演員2，演員3</p></dd></dl>如果再加上一定的CSS設置
<style>dl{border: 1px solid #333;float: left;height: 500px;width: 200px;margin: 0 5px;}</style>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AHJDVhG9-1630767244055)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20210723184904264.png)]
表格
表格基本標簽
table: 定義表格
tr: table rows，定義表格列
td: table dock，定義表格的單元格
關系：table>tr>td
table上有兩個標簽：一是邊框，二是CSS樣式
如果表格需要添加表頭，可以使用tr>th
<table border="1" style="border-collapse:collapse"><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></tr2><tr><td>第3行，第1列</td><td>第3行，第2列</td><td>第3行，第3列</td><td>第3行，第4列</td></tr></table>單元格合并
跨行跨列合并，可以給對應的td和th標簽設置相關屬性
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>表格分區
完整表格主要包括三部分：表格標題、表格表頭、表格主題
table內部還有三個分區標簽組成
caption: 定義表格的主題
thead: 定義表格的頭部
tbody: 定義表格的主體
<table border="1"><caption>各地區資產投資情況</caption><thead><tr><th rowspan="2">地區</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標簽
form是表單的意思
form是容器級標簽，內部存放可輸入的控件。如果輸入的表單需要提交到數據，所有的控件需要被表單包裹
method：數據提交的方法。屬性值是post和get
action：是數據提交的位置
input標簽
input是輸入框的一種，但不僅僅是輸入框，通過type屬性實現多功能
輸入框
輸入框有兩個重要的屬性：
value：設置默認顯示的內容，屬性值為自定義內容
placeholder：屬性作用是如果沒有value的時候提示用戶的文字占位符
<p>用戶名：<input type="text" value="" placeholder="請輸入用戶名"></p>密碼框
通過type設置為password實現
<p>密 碼：<input type="password" placeholder="請輸入密碼"></p>單選框
通過type設置為radio實現
欲實現一組互斥的按鈕，將單選按鈕組name屬性設置成相同
<p>性 別：<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex">保密</p>復選框
通過type設置為checkbox實現
復選框可以通過對自身進行多次點擊實現選擇或者取消
一組多選框建議設置相同的name
不論單選復選，若希望默認選定則需要添加
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標簽
如果想實現點擊文字即選中，則需要label標簽來擴大選取
<p>年 齡：<label><input type="radio" name="sex">0-20</label><label><input type="radio" name="sex">21-40</label><label><input type="radio" name="sex">40+</label></p>文本域
標簽textarea
input之前只能輸入單行文本，如果想實現多行輸入，就需要使用textarea
textarea是一個雙標簽，是文本級標簽
屬性值為rows和cols
rows：定義當前文本域有幾行，單位是數字
cols：定義當前文本域有幾列，單位是數字（以英文為準）
placeholder：占位符
<textarea rows="3" cols="10" placeholder="請輸入自我介紹"></textarea>textarea默認是可以通過右下角進行縮放，如不想縮放設置style
<textarea rows="3" cols="10" placeholder="請輸入自我介紹" style="resize: none;"></textarea>下拉菜單
需要一組標簽進行制作
select：表示搭建下拉項
option：表示搭建下拉項
select內部嵌套option
如果需要將某一選項定位默認則
籍貫：<select><option>北京</option><option selected="selected">廣州</option><option>上海</option><option>重慶</option></select>HTML字符實體
&開頭，；結尾。常見如下：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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>今天學習了<h1>標簽的作用</div>正確表達：
<div>今天學習了<h1>標簽的作用</div>div和span
div和span都是常用布局標簽，俗稱盒子
div：分割大跨度。主要用于網頁布局拆分，沒有明確語義
span：分割小跨度。用于小范圍，只是用于文本
作用：用來分割頁面布局。div是跨度布局分割，span是文字分割
div是容器級標簽
<!-- 頂部 --><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開始，結構層和樣式層進行了分離
前端三層
結構層：HTML作用是從語義的角度進行網頁結構的搭建
樣式層：CSS作用從美觀的角度講修飾頁面樣式
交互層：JavaScript作用是從交互的角度講述頁面的行為
CSS常用屬性
CSS常用的文字屬性有三個：color, font-size, font-family
CSS的屬性樣式發生了改變，由HTML的k="v"變為了k:v
文字三屬性
文字顏色
文字屬性：color
顏色值：
十六進制：#ff0000/Green(#00ff00)/Blue(#0000ff)，可簡化(#00ff00簡化為#0f0)
RGB: Red(255,0,0)/Green(0,255,0)/Blue(0,0,255)，共1670萬種顏色
<p style="color: blue;">顏色1</p><p style="color: #0000FF;">顏色2</p><p style="color: rgb(0, 0, 255);">顏色3</p>https://www.w3school.com.cn/cssref/css_colors.asp
字號
屬性：font-size
數值：以px（像素）為單位的數值；以百分比為單位；以em（倍數）為單位
<p style="font-size: 16px;">文字大小1</p>不同瀏覽器有自身不同的默認大小和最小顯示大小（chrome的默認大小是16px，最小為8px）
字體
屬性：font-family
屬性值：必須以雙引號包裹，屬性可以有多個（前置屬性無法識別就識別下一個），使用逗號分隔
中文常用字體屬性：微軟雅黑(Microsoft Yahei)，宋體(Smisun)
英文常用屬性值：Arial，consolas
<p style="font-family: 宋體;">字體1</p> <p style="font-family: 微軟雅黑;">字體2</p>大多數瀏覽器默認字體為微軟雅黑，以上兩種書寫皆可
如果有中英文混雜，則同時設置對應字體
行高
文字一定垂直居中
屬性：line-height
屬性值：
px為單位：數值以像素為單位
百分比：參考自身字號大小
<style>*{margin: 0px;padding: 0px;}p{font-size: 14px;background: aqua;height: 200px;width: 100px;margin: 100px auto;line-height: 200px;} </style>文字加粗(font-weight)
數值表示
單詞表示
normal表示不加粗
<style>font-weight: 700; </style>bold表示加粗（默認加粗700）
<style>font-weight: bold; </style>字體樣式(font-style)
設置文字是否有傾斜或者斜體
屬性值
normal：正規的，沒有傾斜
italic：斜體的，文字斜體（該文字有斜體樣式才會傾斜，使用最多）
oblique：傾斜的，與字體無關（無論什么字體都會傾斜）
<style> #noraml{font-style: normal;}#italic{font-style: italic;}#oblique{font-style: oblique;} </style>font屬性綜合寫法
包含五個單一屬性，屬性之間使用空格隔開，字號和行高使用斜杠分割，字號、行高、字體必須連續書寫，順序不能變，必須位于倒數三個
<style>.font{font: italic bold 24px/48px 'Simsun';} </style>文本
對齊text-align
用來設置段落整體水平方向對齊
屬性值：left、center、right
<style>p{width: 200px;height: 200px;border: 1px solid red;text-align: center;} </style>文本修飾(text-decoration)
設置文本整體是否有線條修飾
屬性值
none：沒有修飾
overline：上劃線
line-through：中劃線、刪除線
underline：下劃線
<style>.none{text-decoration: none;}.overline{text-decoration: blue overline;}.line-through{text-decoration: green line-through;}.underline{text-decoration: red underline;} </style>縮進(text-indent)
設置段落首行縮進
屬性值
px為單位：數字代表多少像素
百分比為單位：參考標簽的父級元素width值的百分比
em為單位：數字是幾表示縮進幾個字符（最常用）
<style>.none{text-indent: 20px;}.overline{text-indent: 10%;}.line-through{text-indent: 2em;} </style>盒模型（盒子）
寬度屬性：width
高度屬性：height
內邊距屬性：padding
邊框：border
外邊距屬性：margin
背景顏色屬性：background-color（也有單詞和數字三屬性）
盒子實際加載區域：width+height
盒子可實體化顯示區域：width+height+padding+border
盒子實際占位區域：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)
如果盒子不設置寬高，則默認撐滿父盒子寬度
如果盒子不設置高度，則默認被文字撐滿（文字包括其行高）
內邊距(padding)
設置寬高到邊框的間距
不能加載內容但可以加載背景
屬性名：padding
屬性值：px為單位的數值
對四周一起設置
padding: 20px;對四周分別設置
padding-left: 40px; padding-right: 20px; padding-top: 10px; padding-bottom: 30px;四值法：以上可簡寫為（順序為上右下左）
padding: 10px 20px 30px 40px;三值法：設置順序為上、左右、下
padding: 10px 20px 30px;二值法：設置順序為：上下、左右
padding: 10px 20px;邊框(border)
設置盒子顯示邊緣
border: 10px solid black;border是個綜合屬性，包括了：線寬(border-width)、線形(border-style)、顏色(border-color)，單個屬性書寫也有四值法，順序規則同padding。
border-style常見效果有：實線(solid)、虛線(dashed)、點線(dotted)、雙線(double)、邊框凹陷效果groove、邊框凸顯效果(rideg)、內容凹陷效果(inset)、內容凸現效果(outset)等。
border-width: 10px 20px 30px 40px; border-style: solid dashed dotted double; border-color: red blue green yellow;也可以對某一方向某一屬性精確設置（border+方向+類型）
border-right-color: purple外邊距(margin)
設置盒子與其他盒子的間距
設置與padding一致
盒模型擴展
默認樣式清除
所有的標簽都有自身的邊距，如有需要可對其進行刪除
<style>常見清除樣式body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dl,dt,dd,th,td,input{margin: 0;padding: 0;}ul,ol{list-style: none; /* 清除小圓點 */}h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 100%;} </style> <style>*{padding: 0;margin: 0;/*全局清除*/} </style>height屬性擴展
一個盒子必須有高度，否則看不到內容樣式，比如超出部分，如果沒有設置高度，則被內容撐高；如果設置高度小于文本高度，則文本不會被隱藏，會自動超出。
超出部分，可通過overflow進行設置。
overflow屬性
visible: 顯示超出部分
hidden: 隱藏超出部分
scroll: 增加一個滾動軸樣式
auto: 對超出部分進行滾動軸樣式
居中
單行文字設置居中
<style>p{width: 100px;height: 100px;border: 1px solid #ccc;text-align: center; /* 設置水平居中 */line-height: 100px; /* 設置垂直居中 */} </style>多行文字設置居中
<style>ul,li{margin: 0px;padding: 0px;}li{width: 100px;border: 1px solid #ccc;text-align: center;padding: 20px 0;list-style: none;} </style>盒子水平居中
margin: auto;盒子垂直居中
<style>div,ul,li{margin: 0px;padding: 0px;}/*此處div標簽內嵌套p*/div{width: 600px;/* height: 300px; */padding: 75px; /* 盒子設置垂直居中（不設置父盒子的高只設置padding） */background-color: chartreuse;}/* 盒子設置居中 */p{width: 100px;height: 100px;background-color: cyan;border: 1px solid #ccc;margin: auto; /* 設置盒子水平居中 */} </style>margin塌陷現象
垂直方向兩個盒子margin相遇，兩個盒子垂直距離為兩個盒子margin中較大值
父子盒子中，如果子盒子的margin-top比父盒子大，或者父盒子沒有設置margin-top，則父子盒子一同向下塌陷
陰影
陰影分為盒子陰影和文本陰影，用法幾乎一樣，只是文本陰影沒有內陰影
/* 盒子陰影 */ /* 四個參數分別代表：邊距左移距離，邊距下移距離，模糊程度（越大越模糊），顏色 */ /* 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; }標準文檔流
HTML文件就是一個標準文檔流文件
元素類型
從HTML角度來說分兩種：文本級和容器級
從CSS角度來說分三種：塊級元素、行內元素和行內塊元素
塊元素
文字自動換行。常見塊級元素：div, p, h1-h6, ul, ol, dl等
行內元素
文字并排顯示，不能設置寬高。常見行內元素：span, a, b, u, i等
行內塊元素
可設置寬高且并排顯示、常見行內塊元素：input, img, table。
display顯示模式
大多數標簽有其自身顯示模式，但可以通過CSS屬性display進行切換
display屬性值：block, inline, inline-block
浮動
脫離標準文檔流，不受元素等級限制，可以并排顯示，可以設置寬高
屬性標簽為float，屬性值為left、right。（貼左邊從左往右或貼右邊從右往左）
脫標
如果兄弟盒子中一部分設置浮動而另一部分不設置浮動，則浮動盒子會飄在標準流之上，我們將其稱之為脫標。
字圍
同級元素中，如果前面盒子浮動，后面標準流會占有前面盒子的文字；如果后面標準流盒子有文字，則不會占有前面浮動盒子的文字，而是會繞開形成文字環繞。
浮動中的margin塌陷
在設置浮動后，標準流中的margin塌陷現象消失。
浮動清除
在標準流中，如果不設置父盒子高度，則父盒子會被子盒子撐高。
如果子盒子浮動了則：父盒子的高度不會被撐高了；父盒子后面還有其他與父盒子同級的兄弟標簽，且其中也有浮動標簽，則前面的浮動會影響后面的貼邊。
清除方法一：height屬性
通過設置父盒子的高消除浮動影響
清除方法二：clear屬性
CSS屬性中的clear有三個屬性值
left：清除左浮動的影響
right：清除右浮動的影響
both：清除兩種浮動的影響
清除方法三：隔墻法
結合使用height和clear屬性，制作一堵墻。只能實現分別貼邊不能實現撐高
<style>*{margin: 0;padding: 0;}.box1{width: 500px;border: 5px solid black;}.box1 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}.box2{width: 500px;border: 5px solid black;}.box2 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}.wall{clear: both;height: 10px;} </style> <body><div class="box1"><p></p><p></p><p></p><p></p></div><div class="wall"></div><div class="box2"><p></p><p></p><p></p><p></p></div> </body>清除方法四：內墻法（推薦）
通過把墻設置在父盒子內來達到撐高和分別貼邊
<style>*{margin: 0;padding: 0;}.box1{width: 500px;border: 5px solid black;}.box1 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}.box2{width: 500px;border: 5px solid black;}.box2 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}.wall{clear: both;height: 10px;} </style> <body><div class="box1"><p></p><p></p><p></p><p></p><div class="wall"></div></div><div class="box2"><p></p><p></p><p></p><p></p><div class="wall"></div></div> </body>清除方法五：偽類
CSS選擇器的一種
.clearfix::after{content: '';display: block;height: 0;clear: both;visibility: hidden;}清除方法六：overflow（推薦）
<style>*{margin: 0;padding: 0;}.box1{width: 500px;border: 5px solid black;overflow: hidden;}.box1 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;}.box2{width: 500px;border: 5px solid black;overflow: hidden;}.box2 p{width: 80px;height: 100px;background: gold;margin: 0 5px;float: left;} </style> <body><div class="box1"><p></p><p></p><p></p><p></p></div><div class="box2"><p></p><p></p><p></p><p></p> </body>overflow屬性有BFC特性，設置該屬性的特性便是會被內部元素撐高
a標簽的偽類
概念
a標簽可以根據用戶的不同行為的觸發，從而實現不同形態的樣式，我們將這四種可設置的樣式稱為偽類。
標簽類型
a:link{/* 標簽未訪問過 */color: #0f0 } a:visited{/* 標簽已經訪問過 */color: #f0f } a:hover{/* 鼠標在標簽上 */color: #ff0 } a:active{/*鼠標點擊*/color: #0ff } a:disabled{/*不可使用*/color: #00f } a:focus{/*聚焦*/color: #fff } a:empty{/*空的*/color: #f00 }注意事項
對于普通元素，非超級鏈接，也可進行設置偽類狀態，但只可以設置hover和active，
偽類選擇器推薦使用類名來精確匹配。
偽類權重和普通選擇器權重相同
書寫順序必須是：link, visited, hover, active（保證全部加載）
偽元素
雙閉合標簽才有偽元素
偽元素務必有content屬性
偽元素必須脫離文檔流
| 寫法一 | ::after |
| 寫法二 | ::before |
偽元素可以當成通過CSS樣式給父元素層疊一個子元素
一個元素最多兩個偽元素
HTML5新增標簽
布局標簽
新增七個布局標簽，全都是塊元素，雙向閉合標簽，使用同div
| header | 標簽頭部 |
| footer | 頁腳 |
| main | 網頁主要部分 |
| nav | 導航 |
| aside | 側邊欄 |
| section | 段落 |
| article | 文章 |
小語義化標簽
address
顯示地址，內部文字傾斜
地圖生成器：百度地圖→地圖生成器http://api.map.baidu.com/lbsapi/creatmap/
bdo
設置文本方向，屬性值dir有兩個值：ltr（從左到右），rtl（從右到左）
cite
引用標簽，文本傾斜顯示
code
網頁中的代碼可以封裝在code標簽內
details&summary
details要結合summary標簽一起使用（details內嵌套summary）顯示效果是折疊卡片
pre
文本如何復制，標簽就如何顯示，文字顯示會偏小
ruby&rt
ruby要結合rt標簽一起使用（ruby內嵌套rt），顯示效果是rt內拼音顯示在ruby文本上
template
內部文本、嵌套內容都不可視
新增表單元素
form標簽有個action屬性，用于設置提交路徑
| range | 范圍選取，后續還可以設置最值(min/max)、默認值(value) |
| color | 顏色選取 |
| date | 日期選取 |
| week | 周目選取 |
| time | 時間選取 |
| 郵箱輸入（非法郵箱會報錯） | |
| url | 網址輸入（非法網址會報錯） |
| search | 搜索輸入 |
| number | 計數器，可以設置步長(step) |
label標簽與datalist標簽組合使用
用于實現下拉選項輸入的功能
<!-- label標簽 --><label><input type="checkbox">選項一</label><!-- datalist標簽 --><input type="text" list="box"><datalist id="box"><option>JS</option><option>OS</option></datalist>表單元素新增屬性
| placeholder | 占位符 |
| disable | 不可選中 |
| autofocus | 自動聚焦 |
| readonly | 只讀，不可輸入新文本 |
background
background-color
作用范圍：width，height，padding，margin
rgb、十六進制、rgba(rgb+透明度（0-1）)
background-image
作用范圍：width，height，padding，margin
給標簽的顯示區域添加圖片
屬性值為url（相對位置或者絕對位置）
如果對background-color和background-image同時設置，則都會被加載，但是image會覆蓋color
background-repeat
屬性值為repeat，repeat-x（水平重復），repeat-y（垂直重復）和no-repeat，如不需要對背景圖進行重復渲染，則可將屬性值設置為no-repeat
background-position
用于設置背景圖位置（常用不設置背景圖重復）
屬性值：單詞定位法、像素定位法、百分比定位法。不論那種都有兩個值，第一個值是水平方向位置，第二個值是垂直方向。
單詞定位法
水平方向：left, center, right
垂直方向：top, center, bottom
像素定位法
水平方向：左上角水平方向移動距離
垂直方向：左上角垂直方向移動距離
像素值還可以為負數
正數：圖片以左上頂點為參考點，向右向下移動
負數：圖片以左上頂點為參考點，向左向上移動
百分比定位法
水平方向100%=（盒子width）-圖片寬度
垂直方向100%=（盒子height）-圖片高度
background-attach
設置背景圖是否隨著頁面滾動而滾動
屬性值：scroll（和頁面一起滾動）、fixed（不會和頁面一起滾動）
background綜合屬性
可以將五個background屬性組成一個綜合屬性，屬性值1-5皆可，空格隔開，順序可顛倒。
background: url() no-repeat center top scroll cyanbackground應用
logo替換文案
使用背景圖片替換文字，文字通過設置text-indent為負移出h1盒子，后設置overflow: hidden隱藏文字
使用padding制作背景圖
將原來的ul默認小黑點去掉（list-style: none），用padding擠出位置（padding可以加載背景圖片），后為每一個li設置背景圖片即可。
精靈
圖片大盒子小的時候，只顯示局部。圖片位置設置與圖片小盒子大的時候剛好相反
背景精靈就是將許多小的icon圖標匯集在一起顯示，利于網頁加載
background-origin
即背景起源，HTML5新增內容
| border-box | 背景圖從border開始設置 |
| padding-box | 背景圖從padding開始設置 |
| content-box | 背景圖從content開始設置 |
background-clip
即背景圖裁切，HTML5新增內容
| 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新增內容
屬性值可以是：px、百分比、cover、contain，其中cover會盡可能拉伸，會有一部分不被顯示，contain則是盡可能顯示整張圖，會有空白
定位
定位就是把盒模型按照指定位置加載
相對定位不脫離標準流，絕對定位和固定定位脫離標準流
position：設置盒子針對某個參考元素進行位置偏移設置
屬性值
relative：相對定位
absolute：絕對定位
fixed：固定定位
如果定位的元素想要發生位置偏移，就必須加上偏移量屬性進行設置
水平方向：left，right
垂直方向：top，bottom
相對定位
position: reletive; left: 100px; /* 相當于right: -100px，數值有正負之分 */ top: 100px; /* 相當于bottom: -100px，數值有正負之分 */參考點依然是左上頂點
同時設置數值沖突的left/top和right/bottom，會按照left/top的設置為準，與順序無關
絕對定位
原理
position: reletive; left: 100px; top: 100px;參考元素為最近的祖先元素，如果沒有就參考body
絕對定位的元素是脫離標準流的，后面標準流的元素會占領之前的位置
任何元素都可以設置絕對位置，設置后不受標準流控制（span可以設置寬高）
屬性設置與參考點：
設置left&top的參考點是body的左上頂點
設置right&top的參考點是body的右上頂點
設置left&bottom的參考點是body的左下頂點
設置right&bottom的參考點是body的右下頂點
應用場景
制作壓蓋
<style>*{margin: 0;padding: 0;}div{width: 1202px;height: 676px;margin: 20 auto;background: url(絕對位置.jpg) no-repeat;position: relative;left: 300px;top: 100px;}p{width: 300px;height: 50px;background: #fff;text-align: center;line-height: 50px;position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -200px;border-radius: 8px;box-shadow: 3px 1px 3px 1px rgba(0,0,0,.5);} </style>居中
position: absolute; left:50%; margin-left:自己寬度的一半；固定定位
參考元素為瀏覽器窗口；參考點根據組合方向不同為瀏覽器窗口的四個點（同絕對位置參考點）。
position: fixed; left: 100px; top: 100px;壓蓋順序
默認壓蓋順序
標準流非標準了重疊在一起，優先級是根據HTML書寫順序決定的，后寫的壓蓋先寫的。
自定義壓蓋順序
屬性標簽為z-index，屬性值為數字（1，2，3，…），數字較小的元素在下面，數字較大的元素在上面；數字相同按順序后寫的壓蓋先寫的。如果沒有z-index則定位失敗。
父子盒子不涉及優先級設置，一定是子盒子壓蓋父盒子
CSS樣式表
行內式樣式表
基本語法：
<div style="width: 100px;height: 100px;background-color:red"></div>內嵌式樣式表
<style>div{color: aqua;font-size: 20px;}</style>外鏈式樣式表
<link rel="stylesheet" href="外鏈式文件.css">link標簽的作用是引入外部文件，rel="stylesheet"意為引入樣式表，通過href=文件地址來引入樣式
導入式樣式表（了解）
必須寫在style最頂部
<style>@import url(外鏈式文件.css);</style>四種樣式表優缺點
| 行內式樣式表 | 第一 | 樣式設置精確 | 結構和樣式沒有分離；不能批量修改 |
| 內嵌式樣式表 | 第二 | 樣式結構分離；可批量修改 | 未完全分離，不能實現多個html使用 |
| 外鏈式樣式表 | 第二 | 樣式和結構完全分離，css文件可多次使用 | 寫小demo時會比較麻煩 |
| 導入式樣式表 | 第三 | 樣式和結構完全分離，css文件可多次使用 | 導入式有加載問題，且涉及加載順序（網頁進去會先白一下，影響使用體驗） |
CSS選擇器
基礎選擇器：標簽選擇器、類名選擇器、id選擇器、通配符選擇器
高級選擇器：后代選擇器、交集選擇器、并集選擇器
標簽選擇器
通過標簽名稱選擇，特點是無視嵌套（只能實現全選）
<style>p{color: red;}h3{color: aqua;} </style> <body><p>標簽1</p><div><div><p>標簽2</p></div></div><h3>標簽3</h3> </body>id選擇器
通過id屬性確定位置，權重最高，只能是單選，同名id不允許
<style>#p1{color: aqua;}#p2{color:aquamarine;}#p3{color: bisque;} </style> <body><p id="p1">標簽1</p><p id="p2">標簽2</p><p id="p3">標簽3</p>類名屬性
通過class屬性確定
<style>.p1{color: bisque;}.p2{color: blue;} </style> <body><p class="p1">標簽1</p><p class="p1">標簽2</p><p class="p2">標簽3</p><p class="p2">標簽4</p> </body>通配符選擇器
選擇包含html在內的所有標簽
通配符*后面添加的樣式，每個標簽都會加載一次
我們通常使用清除頁面的默認樣式
<style>*{margin: 0;padding: 0;}p{width: 100px;height: 100px;background: crimson;}div{width: 100px;height: 100px;background: cyan;}</style> </head> <!-- <style>*{color: brown;} </style> --> <body><span>span標簽</span><p>p標簽</p><div>div標簽</div><h3>h3標簽</h3> </body>后代選擇器
通過標簽之間的后代關系去決定選擇某個某個范圍的元素
<style>.box1 ul li{color: cyan;}/* 前后不一定是父子關系 */.box2 ul li{color: darkblue;} </style> <body><div class="box1"><ul><li>box1中的li</li><li>box1中的li</li><li>box1中的li</li><li>box1中的li</li></ul></div><div class="box2"><ul><li>box2中的li</li><li>box2中的li</li><li>box2中的li</li><li>box2中的li</li></ul></div> </body>交集選擇器
滿足所有條件進行匹配，書寫方法是將多個選擇器連接，之間不加空格（同一層級不加空格，下轄標簽要以空格隔開）
<style>p{color: darkblue;}p.p1{color: darkcyan;} </style> <body><p>標簽1</p><p class="p1">標簽2</p><div class="p1">標簽3</div> </body>并集選擇器
對多個標簽進行同類設置，標簽之間用逗號隔開
<style>div,p,span{color: darkcyan;} </style> <body><div>標簽1</div><p>標簽2</p><span>標簽3</span> </body>自定義屬性選擇器
<style>/* p標簽，且帶有v-if這個自定義標簽 */p[v-if]{color:red;}/* p標簽，且帶有v-if='cur'這個自定義標簽 */p[v-if='cur']{color:green;}/* p標簽，帶有v-show這個自定義標簽，且以li開頭 */p[v-show^='li']{color:pink;}/* p標簽，帶有v-show這個自定義標簽，且以tion結尾 */p[v-show$='tion']{color:cyan;}/* p標簽，帶有v-show這個自定義標簽，且帶有i */p[v-show*='i']{color:yellow;} </style> <body><p>標簽1</p><p v-if>標簽2</p><p v-if='cur'>標簽3</p><p v-show='like'>標簽4</p><p v-show='condition'>標簽5</p><p v-show='i am'>標簽6</p> </body>JQuery庫也支持屬性選擇器
不區分元素類型的字類選擇器
| first-child | 父標簽下的第一個子標簽 |
| last-child | 父標簽下的最后一個子標簽 |
| nth-child() | 第括號內數字個子標簽，如果是2n則是順序上偶數個子標簽 |
| nth-last-child() | 第括號內數字個子標簽，如果是2n則是倒序上偶數個子標簽 |
區分元素類型的字類選擇器
| first-of-type | 該類型的第一個子節點 |
| last-of-type | 該類型的最后一個子節點 |
| nth-of-type() | 該類型的第括號內元素個子節點 |
| nth-last-of-type() | 該類型的第括號內元素個子節點 |
關系型選擇器
| A+B | A標簽后緊隨的姊妹標簽B（不包括A） |
| A~B | A標簽后緊隨的所有姊妹標簽B（不包括A） |
偽類選擇器
a:disabled{/*不可使用*/color: #00f } a:focus{/*聚焦*/color: #fff } a:empty{/*空的*/color: #f00 }偽選擇器
以兩個冒號開頭
| ::first-letter | 對選中的第一個字母/漢字進行設置 |
| ::first-line | 對選中的第一行進行設置 |
| ::first-selection | 對瀏覽器中鼠標選中的文本進行設置 |
CSS繼承性與層疊性
繼承性
祖先元素進行設置，后代元素就可以繼承（繼承的都是文字屬性）
<style>.box{color: darkgoldenrod;} </style> <body><div class="box">標簽1<ul>標簽2<li>標簽3</li></ul></div> </body>層疊性
CSS樣表又稱為層疊性樣表
<style>p{color: darkgoldenrod;}.p1{font-size: 20px;}#p1{text-decoration: underline;} </style> <body><p class="p1" id="p1">標簽1</p> </body>一個標簽可以被多個選擇器選擇（優先級為：id選擇器>class選擇器>標簽選擇器，多個選擇器同時定義一個標簽的同一屬性會被層疊掉）
<style>p{color: darkgoldenrod;}.p1{color: darkgoldenrod;}#p1{color: darkgoldenrod;} </style> <body><p class="p1" id="p1">標簽1</p> </body>就近原則
文本離得近的選擇器生效
<style>p{color: darkblue;}p.p1{color: darkcyan;} </style> </head> <body><p>標簽1</p><p class="p1">標簽2</p><div class="p1">標簽3</div> </body>ound-color:cyan;
}
h6:nth-last-of-type(2n){
background-color:purple;
}
段落1
一級標題1
一級標題2
段落2
段落3
段落4
段落5
段落6
段落7
一級標題2
一級標題2
```關系型選擇器
| A+B | A標簽后緊隨的姊妹標簽B（不包括A） |
| A~B | A標簽后緊隨的所有姊妹標簽B（不包括A） |
偽類選擇器
a:disabled{/*不可使用*/color: #00f } a:focus{/*聚焦*/color: #fff } a:empty{/*空的*/color: #f00 }偽選擇器
以兩個冒號開頭
| ::first-letter | 對選中的第一個字母/漢字進行設置 |
| ::first-line | 對選中的第一行進行設置 |
| ::first-selection | 對瀏覽器中鼠標選中的文本進行設置 |
CSS繼承性與層疊性
繼承性
祖先元素進行設置，后代元素就可以繼承（繼承的都是文字屬性）
<style>.box{color: darkgoldenrod;} </style> <body><div class="box">標簽1<ul>標簽2<li>標簽3</li></ul></div> </body>層疊性
CSS樣表又稱為層疊性樣表
<style>p{color: darkgoldenrod;}.p1{font-size: 20px;}#p1{text-decoration: underline;} </style> <body><p class="p1" id="p1">標簽1</p> </body>一個標簽可以被多個選擇器選擇（優先級為：id選擇器>class選擇器>標簽選擇器，多個選擇器同時定義一個標簽的同一屬性會被層疊掉）
<style>p{color: darkgoldenrod;}.p1{color: darkgoldenrod;}#p1{color: darkgoldenrod;} </style> <body><p class="p1" id="p1">標簽1</p> </body>就近原則
文本離得近的選擇器生效
<style>p{color: darkblue;}p.p1{color: darkcyan;} </style> </head> <body><p>標簽1</p><p class="p1">標簽2</p><div class="p1">標簽3</div> </body>總結
以上是生活随笔為你收集整理的HTMLCSS的语法与使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 程序员转行都去干嘛了？产品经理很正常，这
- 下一篇： 2017年html5行业报告,云适配发布