HTML基础（我的复习和学习过程）day-01
1.前端組成部分
**HTML結(jié)構(gòu)層** **CSS樣式層** **js行為交互層**2、命名規(guī)范
文件命名規(guī)則：
1、 不能使用中文
2、不能使用數(shù)字開頭
3、能夠使用：字母，數(shù)字，下劃線配合使用：小寫字母開頭為主
4、推薦使用語義化的命名，見名知意
5、給元素起id、類名、建議使用駝峰命名法
HTML基本結(jié)構(gòu)和基本語法
<!DOCTYPE html><!- 聲明文檔類型 HTML--> <html><!- 超文本標(biāo)記語言， 基本結(jié)構(gòu)， 所有的標(biāo)簽，所有的標(biāo)記都需要放在HTML標(biāo)簽里--><head><!- 網(wǎng)頁的頭部 地址欄及以上--><meta charset="UTF-8"><!- 定義字符編碼格式 使用了UTF-8--><title></title><!- 網(wǎng)頁的標(biāo)題標(biāo)簽--></head><body><!- 網(wǎng)頁的主體 地址欄向下=>給用戶來看的--></body> </html>標(biāo)簽分類
1.雙標(biāo)簽
含義：成對出現(xiàn)的標(biāo)簽，有開始，有結(jié)束
特點(diǎn)：
- a)有開始，有結(jié)束
- b)標(biāo)簽名字需要放在尖角號里
- c)雙標(biāo)簽必須帶’/’
- d)所有的屬性和屬性值都寫在了開始標(biāo)簽里面
- e)標(biāo)簽名字和屬性之間必須帶空格
- f)每一組屬性和屬性值結(jié)束后，也需要空格
- g)標(biāo)簽里面的屬性和屬性值需要用=鏈接
- h)所有的屬性值都需要帶引號（單雙均可）
2.單標(biāo)簽
含義：自己獨(dú)立出現(xiàn)，沒有結(jié)束標(biāo)記
特點(diǎn)：
- a)獨(dú)立出現(xiàn)，沒有結(jié)束
- b)標(biāo)簽名字和屬性需要帶空格
- c)屬性和屬性值之間需要使用=鏈接
- d)屬性值需要帶引號
- e)單標(biāo)簽也放在尖角號里面
標(biāo)簽的基本語法
1.加粗標(biāo)簽
- 語法格式：b/strong
- 基本語法: 文本文本
- 作用：讓文本具有加粗效果
- 區(qū)別：strong 更具有語義化
2.傾斜標(biāo)簽
- 語法格式：i/em標(biāo)簽
- 基本語法：文本 文本
- 作用：給文本實(shí)現(xiàn)傾斜效果
- 區(qū)別：em更具有語義化
3.下劃線標(biāo)簽
- 語法格式：u標(biāo)簽
- 基本語法：文本
- 作用：給文本添加下劃線
4.角標(biāo)標(biāo)簽
- 上角標(biāo)<sup>
文本/數(shù)值 - 下角標(biāo)
<sub>文本。數(shù)值
5.刪除線標(biāo)簽
作用：給文本添加刪除線效果
應(yīng)用場合：商場促銷、文章對文字進(jìn)行修改刪除的效果
基本標(biāo)簽: 文本 文本
6.div和span標(biāo)簽
都沒有實(shí)際含義，使用上是有區(qū)別的
相同點(diǎn)：都是雙標(biāo)簽
div：布局元素 主要用來做布局區(qū)塊劃分，縱向排列，橫著排會(huì)用到后續(xù)知識(shí)點(diǎn)
span：主要是對于獨(dú)立文本進(jìn)行修飾，對于某一塊文本的修飾
7.網(wǎng)頁中的標(biāo)題標(biāo)簽：一般指的是，新聞?lì)愋偷母寮?/p>
h1-h6=======雙標(biāo)簽特點(diǎn)：h1最大，h6最小 總共有六個(gè)級別，自動(dòng)加粗，自動(dòng)換行h1==》一般應(yīng)用在網(wǎng)頁文章標(biāo)題，網(wǎng)頁logoh2==》新聞稿件的標(biāo)題，或者二級標(biāo)題處h3==》新聞稿件居多，布局元素中有加粗效果的部分h4-h6==》根據(jù)實(shí)際情況選擇應(yīng)用
8.列表標(biāo)簽0如何快速創(chuàng)建標(biāo)簽
a)div+tab ===> <div></div>b)div>b +tab ====> <div><b></b></div>c)div>b*3 +tab ====> <div><b></b><b></b><b></b></div>d)div>b{文本} ====> <div><b>文本</b><b>文本</b><b>文本</b></div>
1.有序列表ol>li 與ol相鄰的只能是li，如果想嵌套其他內(nèi)容，需要li里面嵌套基本語法：
<ol><li>文本</li><li>文本</li><li>文本</li></ol>
效果：有順序的列表修改列表項(xiàng)的類型 type='1/a/A/I/i'修改列表項(xiàng)的起始 start="取值是純數(shù)值"2.無序列表ul>li 與ul相鄰的只能是li，如果想嵌套其他內(nèi)容，需要li里面嵌套基本語法：
<ul><li>文本</li><li>文本</li><li>文本</li></ul>
效果：無序的列表修改無序列表項(xiàng)類型：type="默認(rèn)值：disc{黑色實(shí)心圓點(diǎn)}circle{圓環(huán)空心圓}square{黑色實(shí)心正方形}none{取消列表項(xiàng)}"3.自定義列表一般情況下應(yīng)用于問答列表，圖文互排布局區(qū)域基本語法：
<dl><dt>圖片</dt><dd>文字，對圖片的解釋/回答</dd></dl>
一般情況下一個(gè)dl下放一個(gè)dt和一個(gè)dd
總結(jié)
以上是生活随笔為你收集整理的HTML基础（我的复习和学习过程）day-01的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 十大正规外汇平台排行，外汇平台名单一览
- 下一篇： 学习响应式BootStrap来写融职教育