Html
一、基本介紹
1、定義：html是一種超文本標(biāo)記語(yǔ)言，也是一種標(biāo)識(shí)性語(yǔ)言（不是編程語(yǔ)言）
標(biāo)記：記號(hào)（綽號(hào)）
超文本：就是頁(yè)面內(nèi)容可以包含圖片、鏈接，音樂(lè)，視頻等素材。
2、為什么學(xué)習(xí)html？
（1）測(cè)試頁(yè)面元素，了解頁(yè)面頁(yè)面元素（頁(yè)面是html語(yǔ)言編寫(xiě)的）
（2）進(jìn)行ui自動(dòng)化需用到元素定位
3、html有哪些特點(diǎn)？
（1）簡(jiǎn)易性
（2）可拓展性
（3）平臺(tái)無(wú)關(guān)性
（4）通用性
4、什么人員使用html？
（1）前端開(kāi)發(fā)：
（2）測(cè)試
定位元素，實(shí)現(xiàn)ui自動(dòng)化
5、html查看 方式？
（1）第一種方式：
fn+f12 或f12
（2）第二種方式
瀏覽器中更多工具開(kāi)發(fā)者工具
6、如何查看元素？
f12+fn點(diǎn)擊小箭頭=在去點(diǎn)擊自己要查看的元素
7、切換web和app端模式（h5）
html快捷鍵：
（1）ctrl+n+w 創(chuàng)建項(xiàng)目
（2）ctrl+n+h 創(chuàng)建html文件
（3）ctrl+s 保存）（未保存顯示*號(hào)）
（4）ctrl+r 運(yùn)行
（5）ctrl+z 撤回
（6）！+tab鍵 聯(lián)想基本格式
（7）ctrl+/ 注釋和取消注釋
（8）ctrl+鼠標(biāo)滾輪， 字體方大和縮小
四、認(rèn)識(shí)標(biāo)簽
1、標(biāo)題標(biāo)簽（h1--h6）
h1是最大的標(biāo)簽
h6是最小的標(biāo)簽
輸入方式：
（1）h1+tab鍵
（2）h2+enter鍵
2、段落標(biāo)簽（p標(biāo)簽）
3、其他標(biāo)簽
（1）&nbsp 空格
（2）em 標(biāo)簽表示斜體
（3）i 標(biāo)簽表示斜體
（4）br 表示換行
（5）b 標(biāo)簽表示加粗
（6） strong 標(biāo)簽表示加粗
（7）s 標(biāo)簽表示刪除線
（8）u 標(biāo)簽 表示下劃線
（9）font 顏色
（10）sub下標(biāo)
（11）sup上標(biāo)
圖片標(biāo)簽：
（1）引用本地圖片
a .通過(guò)打開(kāi)文件所在目錄，存放圖片
b、通過(guò)拖拽到img中圖片

c.導(dǎo)入圖片img 加上寬度，長(zhǎng)度
案例：<img src="../img/山水畫(huà)001.jpg" alt="" / width="100" height="100">
（2）引用網(wǎng)上圖片
a. 網(wǎng)上圖片的鏈接：
打開(kāi)圖片，右鍵=復(fù)制（圖片地址）將復(fù)制的地址黏貼到src中
b.通過(guò)查看圖片的元素獲取src
通過(guò)查看的圖片點(diǎn)擊元素==查看src
鏈接標(biāo)簽
（1）定義：從一個(gè)網(wǎng)頁(yè)指向另一個(gè)網(wǎng)頁(yè)的目的地，這個(gè)目標(biāo)可以是一個(gè)網(wǎng)頁(yè)，也可以是相同上的位置，還可以是圖片，一個(gè)文件，一個(gè)應(yīng)用程序等；
（2）四種類型：
a.新連接覆蓋原連接
b、新開(kāi)一個(gè)窗口
c、圖片連接
d、死鏈接
案例：

新連接覆蓋原連接
案例2：
target="_blank"
百度
詳解：
target=屬性
（1） target=“_blank” 表示將連接的畫(huà)面內(nèi)容，在新的瀏覽器窗口中打開(kāi)；（打開(kāi)新窗口）重點(diǎn)
（2）target=“_self” 表示將連接畫(huà)面內(nèi)容，顯示在目前的窗口中；
（3）target=“_top” 表示將連接畫(huà)面內(nèi)容，顯示在沒(méi)有框架的視窗中；
（4）target=“_parent” 表示將連接畫(huà)面內(nèi)容，當(dāng)成文件的上一個(gè)畫(huà)面；
（5）target=“_search” 表示將連接畫(huà)面內(nèi)容，搜索區(qū)裝載的文檔
案例3：

案例4：
死鏈接：
多測(cè)師
列表標(biāo)簽
1、有序列表
ol 表示有序列表 （order lists 簡(jiǎn)稱ol）
修改排序內(nèi)容：a，A,1
快速生成有序列表
案例：ol2>li3
2、無(wú)序列表
ul 表示無(wú)序： （unordered lists 簡(jiǎn)寫(xiě)：ul）
無(wú)序類型:
(1)circle 空心圓點(diǎn)
（2）disc 實(shí)心圓點(diǎn) （默認(rèn)實(shí)心點(diǎn)）
（3）square實(shí)心方塊
快速生無(wú)序列表
案例：ul2>li3
表格： table
（1）認(rèn)識(shí)表中的一些常用單詞
border 邊距
align 格式 ‘ center’ 對(duì)齊
cellspacing 單元格與單元格的距離
cellpadding 單元格與內(nèi)容的距離
wedth 寬度
height 高度
tr 表示：行
th 表示：表頭
td ：表示列
（2）輸入table +回車(chē)
（3）編輯表格
合并行：
rowspan=‘行數(shù)’
合并列：
colspan =“行數(shù)”
表單：
表單標(biāo)簽格式：form
action：開(kāi)始網(wǎng)址
method：get和post等等
表單標(biāo)簽：主要用來(lái)收集用戶輸入信息如：登入、注冊(cè)、搜索商品等
用戶名格式：text （明文）
密碼格式：password （密文）
性別：radio 性別格式 性別是單選，單選類型是radio，注意name要加上sex
復(fù)選框：checkbox
文本框：textarea
上傳文件：file
下拉選擇框：select
button：按鈕
reset：重置
submit：提交
css
層疊樣式
（1）定義：css是一種用來(lái)表現(xiàn)html或xml等文件樣式的計(jì)算機(jī)語(yǔ)言。
（2）css 不僅可以靜態(tài)的修飾網(wǎng)頁(yè)，還可以配合各種動(dòng)態(tài)對(duì)網(wǎng)頁(yè)元素進(jìn)行格式化；
（3）層疊樣式表有兩種方法：
第一種：在head中加上style屬性
第二種：通過(guò)外鏈方式
在css中新建一個(gè)css文件，在css文件中寫(xiě)內(nèi)容
在使用link 通過(guò)外鏈方式實(shí)現(xiàn)
（1）新建css文件，并且編輯
（1）id選擇器
在id屬性值前加#
（2）class選擇器
在class屬性值前加.
(3) 標(biāo)簽選擇器 （4）組合選擇器 （5）偽類選擇器（6）字體樣式和文本樣式