一 心得體會(huì)
今天的任務(wù)是利用HTML制作一份在線(xiàn)簡(jiǎn)歷匣摘，先不考慮樣式拾并，只從結(jié)構(gòu)和語(yǔ)義化方面著手豺旬。對(duì)于已經(jīng)有了前端b編程經(jīng)驗(yàn)的我來(lái)說(shuō)挺簡(jiǎn)單的怕敬，但是我還是當(dāng)作我是一個(gè)剛?cè)腴T(mén)的菜鳥(niǎo)，在學(xué)習(xí)過(guò)程中發(fā)現(xiàn)其實(shí)還有很多基礎(chǔ)知識(shí)被我忽略了秕狰，例如meta的強(qiáng)大功能稠腊，HTML5表單新增的輸入類(lèi)型，列表標(biāo)簽dl鸣哀、dt架忌、dd等，這提醒這我不要眼高手低诺舔，要潛心學(xué)習(xí)鳖昌，穩(wěn)固基礎(chǔ)。
二 相關(guān)知識(shí)點(diǎn)
問(wèn)題1 HTML是什么低飒，HTML5是什么？
- HTML是一個(gè)超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language）懂盐，其有一套標(biāo)記標(biāo)簽褥赊，使用這些標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)。
- HTML5是最新的HTML標(biāo)準(zhǔn)莉恼，新增了一些元素拌喉，API，同時(shí)也刪除了部分舊元素俐银，具體可以看相關(guān)文檔尿背。相較于 HTML4來(lái)說(shuō)，HTML5最大的改進(jìn)就是新增了強(qiáng)大的圖像支持（
<canvas>和<svg>）捶惜，多媒體支持（<video>和<audio>）和API田藐，使得其能獨(dú)自完成以前需要其他語(yǔ)言輔助的工作。
問(wèn)題2 HTML文檔是什么吱七？
HTML文檔其實(shí)就是我們看到的網(wǎng)頁(yè)汽久，其包含HTML標(biāo)簽和純文本。
問(wèn)題3 HTML元素踊餐、標(biāo)簽景醇、屬性都是什么概念？
- HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞吝岭，表示其在HTML文檔中的含義三痰。元素標(biāo)簽通常成對(duì)出現(xiàn)（
<p></p>）吧寺，也有單獨(dú)出現(xiàn)（<img>）；成對(duì)出現(xiàn)的標(biāo)簽第一個(gè)為開(kāi)始標(biāo)簽（或開(kāi)放標(biāo)簽）散劫，第二個(gè)為結(jié)束標(biāo)簽（或閉合標(biāo)簽）撮执，結(jié)束標(biāo)簽多了一個(gè)/。 - HTML元素是指從開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼（
<p>包含標(biāo)簽和此文本</p>）舷丹。注意：如果元素內(nèi)沒(méi)有文本抒钱，可以直接在開(kāi)始標(biāo)簽進(jìn)行關(guān)閉（<p/>） - HTML屬性相當(dāng)于HTML元素的修飾符，為該元素提供相應(yīng)的特性颜凯。屬性通常以鍵值對(duì)的形式出現(xiàn)（
name="value"）谋币，并且都是出現(xiàn)在開(kāi)始標(biāo)簽中。
問(wèn)題4 文檔類(lèi)型是什么概念症概，起什么作用蕾额？
HTML經(jīng)歷過(guò)多個(gè)版本的更新，每個(gè)版本中元素不盡相同彼城，那么我們?nèi)绾尾拍苁褂?jì)算機(jī)準(zhǔn)確知道當(dāng)前的版本并正確顯示HTML頁(yè)面呢诅蝶？為了解決這個(gè)問(wèn)題，引進(jìn)了文檔類(lèi)型的概念募壕。在HTML文檔首行使用<!DOCTYPE>來(lái)聲明該HTML文檔的版本调炬，如果版本為HTML5，那么聲明代碼為<!DOCTYPE html>舱馅；如果為HTML4缰泡，那么聲明代碼為<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"。目前創(chuàng)建新網(wǎng)頁(yè)都盡量使用HTML5的文檔類(lèi)型代嗤，維護(hù)舊網(wǎng)頁(yè)可以沿用舊網(wǎng)頁(yè)的文檔類(lèi)型棘钞。
問(wèn)題5 meta標(biāo)簽都用來(lái)做什么的？
meta標(biāo)簽位于HTML頭部干毅，攜帶元信息宜猜，不顯示在頁(yè)面上，對(duì)于計(jì)算機(jī)是可讀的硝逢。其主要作用有以下幾點(diǎn)：
- 聲明當(dāng)前文檔所使用的字符編碼
<!--聲明文檔使用的字符編碼-->
<meta charset="utf-8">
注意：鼓勵(lì)使用UTF-8字符編碼姨拥，不使用不兼容ASCII的編碼規(guī)范，必須禁用CESU-8, UTF-7, BOCU-1或 SCSU這些字符趴捅，因?yàn)槠浔蛔C實(shí)存在跨站腳本攻擊（XSS）的風(fēng)險(xiǎn)垫毙。
- 攜帶相關(guān)信息關(guān)聯(lián)到HTTP頭部
此處需要用到http-equiv和content屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| content | some_tex | 定義與 http-equiv 或 name 屬性相關(guān)的元信息 |
| http-equiv | content-security-policy/ default-style/ refresh | 把 content 屬性關(guān)聯(lián)到 HTTP 頭部 |
注：http-equiv的屬性值content-language, content-type, set-cookie已經(jīng)棄用，請(qǐng)查看最新文檔使用替代方案
示意代碼如下：
<!--告訴計(jì)算機(jī)6s后跳轉(zhuǎn)相應(yīng)地址-->
< Meta HTTP-EQUIV="refresh" content="6; url=地址" >
- 使用
name屬性攜帶相關(guān)信息
| 屬性 | 值 | 描述 |
|---|---|---|
| name | author/ description/ keywords/ generator/ revised/others | 把 content 屬性關(guān)聯(lián)到一個(gè)名稱(chēng) |
示意代碼如下：
<!--以下為常用屬性值-->
<!--標(biāo)注作者-->
< Meta name="author" content="前端嘮嘮嗑" >
<!--攜帶關(guān)鍵字拱绑，便于搜索網(wǎng)站收錄综芥，提高搜索排名-->
< Meta name="keyword" content="關(guān)鍵字" >
<!--文檔描述，便于搜索網(wǎng)站收錄猎拨，提高搜索排名-->
< Meta name="descript" content="描述內(nèi)容" >
問(wèn)題6 Web語(yǔ)義化是什么膀藐，是為了解決什么問(wèn)題
我理解的語(yǔ)義化有兩方面：1. 便于計(jì)算機(jī)識(shí)別HTML內(nèi)容屠阻，降低其處理難度，提高效率额各，與此同時(shí)還能搜索程序更好更快的搜索到此文檔国觉；2. 便于程序員理解代碼以及后期維護(hù)——結(jié)構(gòu)良好，語(yǔ)義明確的代碼利于閱讀和維護(hù)虾啦。
問(wèn)題7 鏈接是什么概念麻诀，對(duì)應(yīng)什么標(biāo)簽？
超鏈接的含義是一個(gè)點(diǎn)擊跳轉(zhuǎn)相應(yīng)文檔的字傲醉，詞或者圖像蝇闭。對(duì)應(yīng)的為<a>標(biāo)簽。其使用方式如下硬毕。
- 通過(guò)href屬性跳轉(zhuǎn)到另一個(gè)HTML文檔
<a href="地址">跳轉(zhuǎn)到相應(yīng)的地址</a>
- 跳轉(zhuǎn)文檔內(nèi)的錨點(diǎn)（書(shū)簽）
<!--通過(guò)name屬性創(chuàng)建文檔內(nèi)的錨點(diǎn)-->
<a name="tips">設(shè)定的錨點(diǎn)</a>
<!--通過(guò)href屬性跳轉(zhuǎn)文檔內(nèi)的錨點(diǎn)-->
<a href="#tips">跳轉(zhuǎn)錨點(diǎn)</a>
注意：創(chuàng)建錨點(diǎn)時(shí)可以用id來(lái)替代name屬性呻引，也可以用其他元素標(biāo)簽替代a標(biāo)簽。
- 跳轉(zhuǎn)另一個(gè)文檔的錨點(diǎn)
<a href="地址#tips">另一個(gè)文檔的錨點(diǎn)</a>
問(wèn)題8 常用標(biāo)簽都有哪些吐咳，都適合用在什么場(chǎng)景逻悠？
- 塊級(jí)元素：
<div>——外框,<p>——段落,<h1>——標(biāo)題,<ul>——列表,<table>——表格 - 行內(nèi)元素：
<span>——提示性文字,<a>——鏈接,<b>——加粗,<img>——圖像,<td>——表格單元
問(wèn)題9 表單標(biāo)簽都有哪些，對(duì)應(yīng)著什么功能韭脊，都有哪些屬性童谒？
表單一般包裹在<form>標(biāo)簽下，主要用于用戶(hù)輸入乾蓬，獲取用戶(hù)輸入的信息并傳輸給服務(wù)器惠啄。其輸入類(lèi)型有以下幾種：
- 文本
- 單行文本輸入
<input type="text"> - 多行文本輸入
<textarea name="message" rows="10" cols="30"></textarea>
- 單行文本輸入
2.密碼（輸入的字符會(huì)做掩碼處理） <input type="password">
- 單選
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
注：當(dāng)input的type為radio時(shí)，該輸入框?yàn)閱芜x框任内，若單選框的name值相同，那么他們是同一組選項(xiàng)融柬，不能同時(shí)選取到死嗦。
- 多選
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
注：當(dāng)input的type為checkbox時(shí)，該輸入框?yàn)閱芜x框粒氧，若單選框的name值相同越除，那么他們是同一組選項(xiàng)，可以同時(shí)選取到外盯。
- 按鈕
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
注：點(diǎn)擊可以執(zhí)行相關(guān)操作
- submit
<input type="submit" value="Submit">
此輸入類(lèi)型用于提交表單到服務(wù)器
- HTML5新增輸入類(lèi)型（
<input type="新增類(lèi)型" >）
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注釋?zhuān)?/strong>老式 web 瀏覽器不支持的輸入類(lèi)型摘盆，會(huì)被視為輸入類(lèi)型 text。
問(wèn)題10 ol, ul, li, dl, dd, dt等這些標(biāo)簽都適合用在什么地方饱苟，舉個(gè)例子
| 標(biāo)簽 | 描述 |
|---|---|
| <ol> | 定義有序列表孩擂。 |
| <ul> | 定義無(wú)序列表。 |
| <li> | 定義列表項(xiàng)箱熬。 |
| <dl> | 定義定義列表类垦。 |
| <dt> | 定義定義項(xiàng)目狈邑。 |
| <dd> | 定義定義的描述。 |
ol搭配li構(gòu)建有序列表蚤认，ul搭配li構(gòu)建無(wú)序列表米苹，dl，dd砰琢，dt不常用蘸嘶，看了一下介紹dl類(lèi)似于ol和ul，屬于最外層標(biāo)簽陪汽；dd類(lèi)似于li训唱，表示項(xiàng)目?jī)?nèi)容；而dt類(lèi)似于序號(hào)掩缓，只不過(guò)內(nèi)容可以自定義雪情。由以上可以看出dl，dd你辣，dt挺適合做菜單類(lèi)列表巡通，dt表示菜名，dd表示相應(yīng)菜品的介紹舍哄。
