一、認(rèn)識(shí) WEB1.瀏覽器的內(nèi)核2.Web標(biāo)準(zhǔn)2.1 網(wǎng)頁 中 web 標(biāo)準(zhǔn)三層組成二、HTML1.HTML初識(shí)1.1定義1.2HTML骨架標(biāo)簽1.3HTML標(biāo)簽分類1.4 HTML標(biāo)簽關(guān)系1.5 sublime1.6HTML標(biāo)簽的語義化2. HTML常用標(biāo)簽1.1 排版標(biāo)簽1）標(biāo)題標(biāo)簽h (熟記)2）段落標(biāo)簽p ( 熟記)3）水平線標(biāo)簽hr(認(rèn)識(shí))4）換行標(biāo)簽br (熟記)5）div 和 span標(biāo)簽(重點(diǎn))6）排版標(biāo)簽總結(jié)1.2 文本格式化標(biāo)簽(熟記)1.3 圖像標(biāo)簽img (重點(diǎn))1.4 鏈接標(biāo)簽(重點(diǎn))1.5 注釋標(biāo)簽1.6 拓展練習(xí)1.1錨點(diǎn)定位 （難點(diǎn)）1.2base 標(biāo)簽1.3預(yù)格式化文本pre標(biāo)簽1.4特殊字符 （理解）1.5什么是XHTML1.6. 路徑(重點(diǎn)、難點(diǎn))3.表格 table(會(huì)使用)3.1表格屬性3.2表頭3.3表格標(biāo)題3.4合并單元格(難點(diǎn))3.5表格劃分結(jié)構(gòu)（了解）3.6表格總結(jié)4.列表（重點(diǎn)）4.1有序無序自定義4.2列表總結(jié)5.表單(掌握)5.1input控件5.2label標(biāo)簽（理解）5.3textarea文本域5.4select下來列表5.5表單域三、查字典
一、認(rèn)識(shí) WEB
1.瀏覽器的內(nèi)核
國產(chǎn)瀏覽器最新版都采用Blink內(nèi)核，Chrome 瀏覽器之中使用Blink， 其實(shí)是 WebKit 的分支。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n6" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;">移動(dòng)端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核。
Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核，大部分國產(chǎn)瀏覽器宣稱的自己的內(nèi)核，基本上也是屬于webkit二次開發(fā)。
iOS以及WP7平臺(tái)上，由于系統(tǒng)原因，系統(tǒng)大部分自帶瀏覽器內(nèi)核，一般是Safari（blink）或者IE內(nèi)核Trident的</pre>
2.Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是由W3C組織和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合。
W3C 萬維網(wǎng)聯(lián)盟是國際最著名的標(biāo)準(zhǔn)化組織。1994年成立后，至今已發(fā)布近百項(xiàng)相關(guān)萬維網(wǎng)的標(biāo)準(zhǔn)，對(duì)萬維網(wǎng)發(fā)展做出了杰出的貢獻(xiàn)。
w3c就類似于現(xiàn)實(shí)世界中的聯(lián)合國。
2.1 網(wǎng)頁 中 web 標(biāo)準(zhǔn)三層組成
構(gòu)成： 主要包括結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）三個(gè)方面。
二、HTML
1.HTML初識(shí)
1.1定義
HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)是用來描述網(wǎng)頁的一種語言。
標(biāo)簽有自己的語法規(guī)范，所有的html標(biāo)簽都是用 <> 表示的
H（很）T（甜）M（蜜）L（啦） 是很快樂的一件事情
1.2HTML骨架標(biāo)簽
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n24" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><html>
<head>
<title></title>
</head>
<body>
</body>
</html></pre>
| 標(biāo)簽名 | 定義 | 說明 |
|---|---|---|
| <html></html> | HTML標(biāo)簽 | 頁面中最大的標(biāo)簽，我們成為 根標(biāo)簽 |
| <head></head> | 文檔的頭部 | 注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title |
| <titile></title> | 文檔的標(biāo)題 | 讓頁面擁有一個(gè)屬于自己的網(wǎng)頁標(biāo)題 |
| <body></body> | 文檔的主體 | 元素包含文檔的所有內(nèi)容，頁面內(nèi)容 基本都是放到body里面的 |
[圖片上傳失敗...(image-c68042-1635339135908)]
1.3HTML標(biāo)簽分類
- 常規(guī)元素（雙標(biāo)簽）
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n51" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><標(biāo)簽名> 內(nèi)容 </標(biāo)簽名> 比如 <body> 我是文字 </body></pre>
- 空元素（單標(biāo)簽）
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n55" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><標(biāo)簽名 /> 比如 <br /></pre>
1.4 HTML標(biāo)簽關(guān)系
- 嵌套關(guān)系
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n60" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><head>
<title> </title>
</head></pre>
2.并列關(guān)系
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n62" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><head></head>
<body></body></pre>
1.5 sublime
-
生成頁面骨架結(jié)構(gòu)
html: 5 按下tab鍵 或者
! 按下tab鍵
-
文檔類型
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n74" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"><!DOCTYPE html> </pre>
此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
-
頁面語言
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n78" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"><html lang="en"> 指定html 語言種類</pre>
最常見的2個(gè)：
en定義語言為英語zh-CN定義語言為中文
-
字符集
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" cid="n87" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"><meta charset="UTF-8" /></pre>
字符集(Character set)是多個(gè)字符的集合。
gb2312 簡單中文 包括6763個(gè)漢字 國標(biāo)GUO BIAO
BIG5 繁體中文 港澳臺(tái)等用
GBK包含全部中文字符 是GB2312的擴(kuò)展，加入對(duì)繁體字的支持，兼容GB2312 國標(biāo)擴(kuò)展
UTF-8則基本包含全世界所有國家需要用到的字符
一般情況下統(tǒng)一使用 "UTF-8" 編碼（不是小寫）
1.6HTML標(biāo)簽的語義化
所謂標(biāo)簽語義化，就是指標(biāo)簽的含義，根據(jù)標(biāo)簽的語義，在合適的地方給一個(gè)最為合理的標(biāo)簽，讓結(jié)構(gòu)更清晰。
當(dāng)我們?nèi)サ鬋SS之后，網(wǎng)頁結(jié)構(gòu)依然組織有序
遵循的原則：先確定語義的HTML ，再選合適的CSS。
2. HTML常用標(biāo)簽
1.1 排版標(biāo)簽
排版標(biāo)簽主要和css搭配使用，顯示網(wǎng)頁結(jié)構(gòu)的標(biāo)簽，是網(wǎng)頁布局最常用的標(biāo)簽。
1）標(biāo)題標(biāo)簽h (熟記)
單詞縮寫： head 頭部. 標(biāo)題 title 文檔標(biāo)題
為了使網(wǎng)頁更具有語義化，我們經(jīng)常會(huì)在頁面中用到標(biāo)題標(biāo)簽，HTML提供了6個(gè)等級(jí)的標(biāo)題
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n114" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><h1> 標(biāo)題文本 </h1>
<h2> 標(biāo)題文本 </h2>
<h3> 標(biāo)題文本 </h3>
<h4> 標(biāo)題文本 </h4>
<h5> 標(biāo)題文本 </h5>
<h6> 標(biāo)題文本 </h6></pre>
2）段落標(biāo)簽p ( 熟記)
單詞縮寫： paragraph 段落 [?p?r?gr?f] 無須記這個(gè)單詞
作用語義：可以把 HTML 文檔分割為若干段落，段落之間間隔較大
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n118" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><p> 文本內(nèi)容 </p></pre>
3）水平線標(biāo)簽hr(認(rèn)識(shí))
單詞縮寫： horizontal 橫線 [?h?r??zɑntl]
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n121" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><hr />是單標(biāo)簽</pre>
4）換行標(biāo)簽br (熟記)
單詞縮寫： break 打斷 ,換行，行與行之間間隔小
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n124" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><br /></pre>
5）div 和 span標(biāo)簽(重點(diǎn))
div span 是沒有語義的 是我們網(wǎng)頁布局主要的2個(gè)盒子 想必你聽過 css+div
div 就是 division 的縮寫 分割， 分區(qū)的意思 其實(shí)有很多div 來組合網(wǎng)頁。
span 跨度，跨距；范圍
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n129" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><div> 這是頭部 </div>
<span>今日價(jià)格</span></pre>
div標(biāo)簽 用來布局的，但是現(xiàn)在一行只能放一個(gè)div
span標(biāo)簽 用來布局的，一行上可以放好多個(gè)span
6）排版標(biāo)簽總結(jié)
| 標(biāo)簽名 | 定義 | 說明 |
|---|---|---|
| <hx></hx> | 標(biāo)題標(biāo)簽 | 作為標(biāo)題使用，并且依據(jù)重要性遞減 |
| <p></p> | 段落標(biāo)簽 | 可以把 HTML 文檔分割為若干段落 |
| <hr /> | 水平線標(biāo)簽 | 沒啥可說的，就是一條線 |
| 換行標(biāo)簽 | ||
| <div></div> | div標(biāo)簽 | 用來布局的，但是現(xiàn)在一行只能放一個(gè)div |
| <span></span> | span標(biāo)簽 | 用來布局的，一行上可以放好多個(gè)span |
1.2 文本格式化標(biāo)簽(熟記)
在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線效果
[圖片上傳失敗...(image-f6b414-1635339135907)]
b 只是加粗 ，strong 除了可以加粗還有 強(qiáng)調(diào)的意思， 語義更強(qiáng)烈，其他同理
1.3 圖像標(biāo)簽img (重點(diǎn))
標(biāo)簽屬性的格式：放在第一個(gè)尖括號(hào)內(nèi)，用逗號(hào)隔開
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n172" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標(biāo)簽名>
<手機(jī) 顏色="紅色" 大小="5寸"> </手機(jī)></pre>
單詞縮寫： image 圖像
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n174" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><img src="圖像URL" />
<img src="cz.jpg" width="300" height="300" border="3" alt="圖片不存在" title="這是個(gè)小蒲公英"/></pre>
src:必須給
一般寬高只給一個(gè)
[圖片上傳失敗...(image-71f4b6-1635339135907)]
1.4 鏈接標(biāo)簽(重點(diǎn))
單詞縮寫： anchor 的縮寫 [???k?(r)] ?；窘忉?錨, 鐵錨 的
語法格式：
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n186" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a></pre>
| 屬性 | 作用 |
|---|---|
| href | 用于指定鏈接目標(biāo)的url地址，（必須屬性）當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能 |
| target | 用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中_self為默認(rèn)值，__blank為在新窗口中打開方式。 |
例子：
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n198" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;">外部鏈接
<a >百度</a>
內(nèi)部鏈接
<a href="index.html">本地主頁</a>
尚未確定的鏈接
<a href="#">未指定鏈接</a>
新窗口打開鏈接
<a target="__blank">百度</a>
</pre>
不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接
1.5 注釋標(biāo)簽
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n201" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"> 快捷鍵是：ctrl + / 或者 ctrl +shift + / </pre>
注釋內(nèi)容前后各一個(gè)空格字符，注釋位于要注釋代碼的上面，單獨(dú)占一行
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="" cid="n203" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;">
<div>...</div></pre>
1.6 拓展練習(xí)
1.1錨點(diǎn)定位 （難點(diǎn)）
通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。
創(chuàng)建錨點(diǎn)鏈接分為兩步：
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n208" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;">1. 使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。 (找目標(biāo))
例如：<h3 id="two">第2集</h3>
2. 使用<a href="#id名">第2集具體內(nèi)容</a>（拉關(guān)系）
例如：<a href="#two">第2集具體內(nèi)容</a> </pre>
1.2base 標(biāo)簽
base 可以設(shè)置整體鏈接的打開狀態(tài)
base 寫到 <head> </head> 之間
把所有的連接 都默認(rèn)添加 target="_blank"
語法：
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n218" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><base target="_blank" />
例如：
<html>
<head>
<title></title>
<base target="_blank"/>
</head>
<body>
</body>
</html></pre>
1.3預(yù)格式化文本pre標(biāo)簽
被包圍在 <pre> 標(biāo)簽 元素中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體。(現(xiàn)在用的少)
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n222" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><pre>
此例演示如何使用 pre 標(biāo)簽
對(duì)空行和 空格
進(jìn)行控制
</pre></pre>
1.4特殊字符 （理解）
是以運(yùn)算符
&開頭,以分號(hào)運(yùn)算符;結(jié)尾。他們不是標(biāo)簽，而是符號(hào)。
HTML 中不能使用小于號(hào) “<” 和大于號(hào) “>”特殊字符，瀏覽器會(huì)將它們作為標(biāo)簽解析，若要正確顯示，在 HTML 源代碼中使用字符實(shí)體
Non-breaking space nbsp
[圖片上傳失敗...(image-c3c647-1635339135906)]
1.5什么是XHTML
XHTML 是更嚴(yán)格更純凈的 HTML 代碼。
XHTML 指可擴(kuò)展超文本標(biāo)簽語言（EXtensible HyperText Markup Language）。
XHTML 的目標(biāo)是取代 HTML。
XHTML 與 HTML 4.01 幾乎是相同的。
XHTML 是更嚴(yán)格更純凈的 HTML 版本。
XHTML 是作為一種 XML 應(yīng)用被重新定義的 HTML。
XHTML 是一個(gè) W3C 標(biāo)準(zhǔn)。
XHTML是嚴(yán)格版本的HTML，例如它要求標(biāo)簽必須小寫，標(biāo)簽必須被正確關(guān)閉，標(biāo)簽順序必須正確排列，對(duì)于屬性都必須使用雙引號(hào)等。
1.6. 路徑(重點(diǎn)、難點(diǎn))
相對(duì)路徑和絕對(duì)路徑: 大部分情況用效果路徑
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n253" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;">
./
../</pre>
3.表格 table(會(huì)使用)
表格不是用來布局，常用來后臺(tái)展示數(shù)據(jù)，雖然 div 布局也可以做到，但是總沒有表格來得方便。
創(chuàng)建表格的基本語法：
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n258" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><table>
<tr>
<td>單元格內(nèi)的文字</td>
...
</tr>
...
</table></pre>
table用于定義一個(gè)表格標(biāo)簽。
tr標(biāo)簽 用于定義表格中的行，必須嵌套在 table標(biāo)簽中。
td 用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽內(nèi)，<tr></tr>中只能嵌套<td></td> 類的單元格。
字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容，現(xiàn)在我們明白，表格最合適的地方就是用來存儲(chǔ)數(shù)據(jù)的。
3.1表格屬性
表格有部分屬性我們不常用，這里重點(diǎn)記住 cellspacing 、 cellpadding。
我們經(jīng)常有個(gè)說法，是三參為0， 平時(shí)開發(fā)的我們這三個(gè)參數(shù) border cellpadding cellspacing 為 0
[圖片上傳失敗...(image-f4dd11-1635339135906)]
3.2表頭
th 也是一個(gè)單元格 只不過和普通的 td單元格不一樣，它會(huì)讓自己里面的文字居中且加粗，th放在tr里面
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n275" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性別</th>
<th>電話</th>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>110</td>
</tr>
</table></pre>
3.3表格標(biāo)題
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n278" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><table>
<caption>我是表格標(biāo)題</caption>
</table></pre>
3.4合并單元格(難點(diǎn))
跨行合并：rowspan="合并單元格的個(gè)數(shù)"
跨列合并：colspan="合并單元格的個(gè)數(shù)"
合并單元格三步曲：
先確定是跨行還是跨列合并
根據(jù) 先上 后下 先左 后右的原則找到目標(biāo)單元格 然后寫上合并方式，還有 要合并的單元格數(shù)量 比如 ： <td colspan="3"> </td>
刪除多余的單元格 單元格
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n294" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><table border="1" width="500" height="240" align="center" cellspacing="0">
<caption> 個(gè)人簡歷 </caption>
<tr>
<td>劉德華</td>
<td>男</td>
<td>18</td>
<td rowspan="2">照片</td>
</tr>
<tr>
<td>身高 180</td>
<td>漢族</td>
<td>已婚</td>
</tr>
</table></pre>
3.5表格劃分結(jié)構(gòu)（了解）
對(duì)于比較復(fù)雜的表格，題頭、正文和腳注。thead,tbody,tfoot來標(biāo)注，前2個(gè)長用。
注意：
<thead></thead>：用于定義表格的頭部。用來放標(biāo)題之類的東西。<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽！
<tbody></tbody>：用于定義表格的主體。放數(shù)據(jù)本體 。
<tfoot></tfoot>放表格的腳注之類。
以上標(biāo)簽都是放到table標(biāo)簽中。
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n308" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><table border="1" cellspacing="0" align="center" width="500">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>劉德華</td>
<td>男</td>
<td>55</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>信息地址</td>
<td colspan="2"> 北京市金燕龍校區(qū)舉辦演唱會(huì)</td>
</tr>
</tfoot>
</table></pre>
3.6表格總結(jié)
| 標(biāo)簽名 | 定義 | 說明 |
|---|---|---|
| <table></table> | 表格標(biāo)簽 | 就是一個(gè)四方的盒子 |
| <tr></tr> | 表格行標(biāo)簽 | 行標(biāo)簽要再table標(biāo)簽內(nèi)部才有意義 |
| <td></td> | 單元格標(biāo)簽 | 單元格標(biāo)簽是個(gè)容器級(jí)元素，可以放任何東西 |
| <th></th> | 表頭單元格標(biāo)簽 | 它還是一個(gè)單元格，但是里面的文字會(huì)居中且加粗 |
| <caption></caption> | 表格標(biāo)題標(biāo)簽 | 表格的標(biāo)題，跟著表格一起走，和表格居中對(duì)齊 |
| clospan 和 rowspan | 合并屬性 | 用來合并單元格的 |
表格提供了HTML 中定義表格式數(shù)據(jù)的方法。
表格中由行中的單元格組成。
表格中沒有列元素，列的個(gè)數(shù)取決于行的單元格個(gè)數(shù)。
表格不要糾結(jié)于外觀，那是CSS 的作用。
表格的學(xué)習(xí)要求： 能手寫表格結(jié)構(gòu)，并且能簡單合并單元格。
4.列表（重點(diǎn)）
列表就是用來布局的，組合自由度更高
4.1有序無序自定義
無序
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n356" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
</ul>
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。
2. <li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。
3. 無序列表會(huì)帶有自己樣式屬性，但是，一般用CSS設(shè)置！</pre>
有序
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n358" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
</ol>
1. 用的少</pre>
自定義（理解）
dl ——> dt ——>dd
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n361" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
</dl></pre>
4.2列表總結(jié)
| 標(biāo)簽名 | 定義 | 說明 |
|---|---|---|
| <ul></ul> | 無序標(biāo)簽 | 里面只能包含li 沒有順序，我們以后布局中最常用的列表 |
| <ol></ol> | 有序標(biāo)簽 | 里面只能包含li 有順序， 使用情況較少 |
| <dl></dl> | 自定義列表 | 里面有2個(gè)兄弟， dt 和 dd |
5.表單(掌握)
5.1input控件
屬性：type, name, value, checked
- 當(dāng)type=image時(shí)必須有src屬性
[圖片上傳失敗...(image-d1f904-1635339135906)]
| 屬性 | 說明 | 作用 |
|---|---|---|
| type | 表單類型 | 用來指定不同的控件類型 |
| value | 表單值 | 表單里面默認(rèn)顯示的文本 |
| name | 表單名字 | 頁面中的表單很多，name主要作用就是用于區(qū)別不同的表單。 |
| checked | 默認(rèn)選中 | 表示那個(gè)單選或者復(fù)選按鈕一開始就被選中了 |
例子：
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n411" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;">用戶名: <input type="text" />
密 碼：<input type="password" />
用戶名:<input type="text" name=“username” />
用戶名:<input type="text" name="username" value="請輸入用戶名">
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女 </pre>
5.2label標(biāo)簽（理解）
當(dāng)我們鼠標(biāo)點(diǎn)擊 label標(biāo)簽里面的文字時(shí)， 光標(biāo)會(huì)定位到指定的表單里面
2種用法：
- 第一種用法就是用label直接包括input表單， 適合單個(gè)表單選擇。
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n419" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><label> 用戶名： <input type="text" name="usename"> </label></pre>
- 第二種用法 for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n423" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><label for="1">用戶名：</label>
<input type="text" name="usrname" id="1"></pre>
5.3textarea文本域
通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，屬性cols="每行中的字符數(shù)" rows="顯示的行數(shù)" ，實(shí)際開發(fā)不用。
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n426" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><textarea >
文本內(nèi)容
</textarea></pre>
5.4select下來列表
用的少
在option 中定義selected =" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)
<select> 中至少包含一對(duì) option
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n435" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><select>
<option selected="selected">選項(xiàng)1</option>
<option>選項(xiàng)2</option>
</select></pre>
5.5表單域
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n437" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form></pre>
例子：
<pre class="md-fences mock-cm md-end-block" spellcheck="false" lang="html" cid="n439" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit inherit; background-repeat: inherit inherit;"><!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form action="" name="form1" method="post">
用戶名：<input type="text" name="username">
密碼：<input type="password" name="pwd">
<input type="submit" name="sumit">
<input type="reset" name="reset">
</form>
</body>
</html></pre>
常用屬性：
