- 響應式網(wǎng)站設計是一種網(wǎng)絡頁面設計布局守屉，其理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設備環(huán)境進行相對應的布局夷野。
-1大部分 HTML 元素都有一個開始標簽和一個結(jié)束標簽懊蒸。<h1>Hello</h1>
-2 h2元素
h1元素通常被用作主標題，h2 元素通常被用作副標題悯搔， 還有 h3锉桑、h4湖饱、h5、h6 元素，它們分別用作不同級別的標題浪谴。
-3用 p 元素代表段落
- p 元素是網(wǎng)站上段落文本使用的元素。 p 是“paragraph（段落）”的縮寫雕什。
創(chuàng)建一個段落：
<p>I'm a p tag!</p>
在 h2 元素下方添加一個 p 元素裕照，
-4用占位符文本填充空白
-5HTML 的注釋
- 注釋的作用是給代碼添加一些說明，方便團隊合作或日后自己查看在刺，但又不影響代碼本身逆害。
- 注釋的另一個用途就是在不刪除代碼的前提下，讓代碼不起作用蚣驼。
-6HTML5 元素介紹
- HTML5 引入了很多更具描述性的 HTML 元素魄幕， 包括 main、header颖杏、footer纯陨、nav、video输玷、article队丝、section 等等。
- 這些元素讓 HTML 更易讀欲鹏，同時有助于搜索引擎優(yōu)化和無障礙訪問机久。 main 元素讓搜索引擎和開發(fā)者能很快地找到網(wǎng)頁的主要內(nèi)容。
-7給網(wǎng)站添加圖片
- 使用 img 元素來為你的網(wǎng)站添加圖片赔嚎，其中 src 屬性指向圖片的地址膘盖。
<img src="https://www.freecatphotoapp.com/your-image.jpg">
注意：img 元素是沒有結(jié)束標簽的。
所有的 img 元素 必須 有 alt 屬性尤误。 alt 的屬性值有兩個作用侠畔，第一個作用是讓屏幕閱讀器可以知曉圖片的內(nèi)容，這會對網(wǎng)頁的可訪問性有很大提升损晤；另一個作用是當圖片無法加載時软棺，頁面需要顯示的替代文本。
注意： 如果圖片是純裝飾性的尤勋，把 alt 的屬性值設置為空是最佳實踐喘落。
理想情況下茵宪，alt 屬性不應該包含特殊字符，除非有特殊需要瘦棋。
讓我們給上面例子的 img 添加 alt 屬性稀火。
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
-8用 a 實現(xiàn)網(wǎng)頁間的跳轉(zhuǎn)
用 a（Anchor，簡寫為 a）來實現(xiàn)網(wǎng)頁間的跳轉(zhuǎn)赌朋。
a 需要一個 href 屬性指向跳轉(zhuǎn)的目的地凰狞。 同時，它還應有內(nèi)容沛慢。 例如：
<a >this links to freecodecamp.org</a>
瀏覽器將顯示文本 this links to freecodecamp.org赡若，這是一個可點擊的鏈接。
通過這個鏈接可以訪問https://www.freecodecamp.org颠焦。
-9用 a 實現(xiàn)網(wǎng)頁內(nèi)部跳轉(zhuǎn)
-10 a（anchor）元素也可以用于創(chuàng)建內(nèi)部鏈接斩熊，跳轉(zhuǎn)到網(wǎng)頁內(nèi)的各個不同部分。
- 要創(chuàng)建內(nèi)部鏈接伐庭，你需要將鏈接的 href 屬性值設置為一個 哈希符號 # 加上你想內(nèi)部鏈接到的元素的 id粉渠，通常是在網(wǎng)頁下方的元素。 然后你需要將相同的 id 屬性添加到你鏈接到的元素中圾另。 id 是描述網(wǎng)頁元素的一個屬性霸株，它的值在整個頁面中唯一。
- 當用戶點擊了 Contacts 鏈接集乔，頁面就會跳轉(zhuǎn)到網(wǎng)頁的 Contacts 區(qū)域去件。
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
當用戶點擊 Contacts 鏈接，可以訪問網(wǎng)頁中帶有 Contacts 標題元素的部分扰路。
-12將 a 嵌套在段落中
<p>
Here's a <a target="_blank" > link to www.freecodecamp.org</a> for you to follow.
</p>
文本是被包裹在 p 元素內(nèi)
- 錨點元素 <a>（它需要結(jié)束標簽 </a>）：
<a> ... </a>
- target 是錨點元素的一個屬性尤溜，它用來指定鏈接的打開方式。 屬性值_blank表示鏈接會在新標簽頁打開汗唱。
- href 是錨點元素的另一個屬性宫莱，它用來指定鏈接的 URL：
- a 元素內(nèi)的文本 link to www.freecodecamp.org 叫作錨文本，會顯示為一個可以點擊的鏈接：
此示例的最終輸出結(jié)果是這樣：
Here's a link to www.freecodecamp.org for you to follow.
-13用 # 號來創(chuàng)建鏈接占位符
(有時你想為網(wǎng)站添加一個 a 元素哩罪，但還不確定要將它鏈接到哪里授霸。)
href 屬性的當前值是指向 “https://www.freecatphotoapp.com”。
請將 href 屬性的值替換為#际插，以此來創(chuàng)建鏈接占位符碘耳。
- 例如: href="#"
-14給圖片添加鏈接
通過把元素嵌套進 a 里使其變成一個鏈接。將 img 嵌套進 a 元素中框弛。
如果我們要把圖片嵌套進 a 元素辛辨， 可以這樣寫：
<a href="#"><img src="https://www.bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
=>把 a 的 href 屬性值設置為 #，創(chuàng)建的是一個死鏈接（不跳轉(zhuǎn)到其他畫面）
=><img> 標簽的 alt 屬性指定了替代文本，用于在圖像無法顯示或者用戶禁用圖像顯示時愉阎，代替圖像顯示在瀏覽器中的內(nèi)容绞蹦。
<p>Click here to view more
<a href="#">
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
cat photos
</a>.
</p>
-15創(chuàng)建一個無序列表
- HTML 有一個特定的元素用于創(chuàng)建無序列表力奋。
無序列表以 <ul> 開始榜旦，中間包含一個或多個 <li> 元素， 最后以 </ul> 結(jié)束景殷。
例如:
<ul>
<li>milk</li>
<li>cheese</li>
</ul>
會創(chuàng)建一個要點列表溅呢，包括 milk 和 cheese。顯示效果如下:
- milk
- cheese
-16創(chuàng)建一個有序列表
HTML 中有用于創(chuàng)建有序列表的特定元素猿挚。
有序列表以 <ol> 開始咐旧，中間包含一個或多個 <li> 元素。 最后以 </ol> 結(jié)束绩蜻。
例如:
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
將創(chuàng)建一個包含 Garfield 和 Sylvester 的編號列表铣墨。
1.Garfield
2.Sylvester
-17創(chuàng)建一個輸入框
-
input 輸入框可以讓你輕松獲得用戶的輸入。
你可以像這樣創(chuàng)建一個文本輸入框：<input type="text">
( 注意 input 輸入框是沒有結(jié)束標簽的办绝。)
-18給輸入框添加占位符文本
- 占位符文本用戶在 input 輸入框中輸入任何東西前的預定義文本伊约。
你可以像這樣創(chuàng)建一個占位符(placeholder[?ple?sh??ld?(r)])：
<input type="text" placeholder="this is placeholder text">
注意： 別忘了 input 元素是 "自閉和標簽"，即不需要結(jié)束標簽孕蝉。(input / //表單元素標簽
br/ //換行 hr/ //水平線 img / //圖片 option/ //下拉菜單項 meta / link /)
-19創(chuàng)建一個表單
- 通過 HTML 來實現(xiàn)發(fā)送數(shù)據(jù)給服務器的表單屡律， 只需要給 form 元素添加 action 屬性即可。例如：
<form action="/url-where-you-want-to-submit-form-data">
<input>
</form>
把現(xiàn)有的 input 元素嵌套到一個表單 form 元素里降淮，然后設置 form 元素的 action 屬性值
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
</form>
-20給表單添加提交按鈕
- 給表單添加一個 submit（提交）按鈕超埋。 點擊提交按鈕時，表單中的數(shù)據(jù)將會被發(fā)送到 action 屬性指定的 URL 上佳鳖。
例如：
<button type="submit">this button submits the form</button>
-21給表單添加一個必填字段
- 當你設計表單時霍殴，你可以指定某些字段為必填項（required），只有當用戶填寫了該字段后系吩，才可以提交表單来庭。
如果你想把文本輸入框設置為必填項，在 input 元素中加上 required 屬性就可以了淑玫，例如：<input type="text" required>
-22創(chuàng)建一組單選按鈕
radio buttons（單選按鈕）就好比單項選擇題巾腕，正確答案只有一個。
( 單選按鈕是 input 選擇框的一種類型 )
每一個單選按鈕都應該嵌套在它自己的 label（標簽）元素中絮蒿。 這樣尊搬，我們相當于給 input 元素和包裹它的 label 元素建立起了對應關系。
所有關聯(lián)的單選按鈕應該擁有相同的 name 屬性土涝。 創(chuàng)建一組單選按鈕佛寿，選中其中一個按鈕，其他按鈕即顯示為未選中，以確保用戶只提供一個答案冀泻。
下面是一個單選按鈕的例子：
<label> #label 標簽中嵌入 input 元素
<input type="radio" name="indoor-outdoor">Indoor
</label>
#最佳實踐是在 label 元素上設置 for 屬性常侣，讓其值與相關聯(lián)的 input 單選按鈕的 id 屬性值相同。
# 這使得輔助技術能夠在標簽和相關的 input 元素之間建立關聯(lián)關系弹渔。
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
-23創(chuàng)建一組復選框
-
checkboxes（復選框）就好比多項選擇題胳施，正確答案有多個。
( 復選框是 input 選擇框的一種類型 ) - 每一個復選框都應該嵌套在它自己的 label（標簽）元素中肢专。 這樣舞肆，我們相當于給 input 元素和包裹它的 label 元素建立起了對應關系。
- 所有關聯(lián)的復選框應該擁有相同的 name 屬性博杖。
使得 input 與 label 關聯(lián)的最佳實踐是在 label 元素上設置 for 屬性椿胯，讓其值與相關聯(lián)的 input 復選框的 id 屬性值相同。
下面是一個復選框的例子：
<label for="loving">
<input id="loving" type="checkbox" name="personality"> Loving
</label>
-24使用單選框和復選框的 value 屬性
- 提交表單時剃根，所選項的值會發(fā)送給服務端哩盲。 radio 和 checkbox 的 value 屬性值決定了發(fā)送到服務端的實際內(nèi)容。
例如：
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor"type="radio" name="indoor-outdoor">Outdoor
</label>
這里有兩個 radio 單選框狈醉。 當用戶提交表單時廉油，如果 indoor 選項被選中，表單數(shù)據(jù)會包含：indoor-outdoor=indoor舔糖。 也就是所選項的 name 和 value 屬性值娱两。
如果沒有指明 value 屬性值，則會使用默認值做為表單數(shù)據(jù)提交金吗，也就是 on十兢。 在這種情況下，如果用戶選中 "indoor" 選項然后提交表單摇庙，表單數(shù)據(jù)則會包含 indoor-outdoor=on旱物。 這樣的表單數(shù)據(jù)看起來不夠直觀，因此最好將 value 屬性值設置為一些有意義的內(nèi)容卫袒。
-25給單選按鈕和復選框添加默認選中項
- 用 checked 屬性把第一個復選框和單選按鈕都設置為默認選中宵呛。在一個 input 元素里面添加 checked 這個詞，即可實現(xiàn)夕凝。
例如:
<input type="radio" name="test-name" checked>
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor" value="indoor"checked> Indoor
</label>
#默認值選中宝穗，可修改
-26元素嵌套
- div 元素也叫內(nèi)容劃分元素，是一個包裹其他元素的通用容器码秉。
- 它也是 HTML 中出現(xiàn)頻率最高的元素逮矛。
- 和其他普通元素一樣，可以用 <div> 來標記一個 div 元素的開始转砖，用 </div> 來標記一個 div 元素的結(jié)束须鼎。
-27聲明 HTML 的文檔類型
- 在文檔的頂部，我們需要告訴瀏覽器網(wǎng)頁所使用的 HTML 的版本。 HTML 是一個在不停發(fā)展的語言晋控，大部分瀏覽器都支持 HTML 的最新標準汞窗，也就是 HTML5。 大部分主流瀏覽器都支持最新的 HTML5 規(guī)范赡译。 但是一些陳舊的網(wǎng)頁可能使用的是老版本的 HTML仲吏。
- 可以通過 <!DOCTYPE ...> 來告訴瀏覽器頁面上使用的 HTML 版本，"..." 部分就是版本號捶朵。 <!DOCTYPE html> 對應的就是 HTML5蜘矢。
- ! 和大寫的 DOCTYPE 是很重要的，尤其是對那些老的瀏覽器综看。 但 html 無論大寫小寫都可以。
- 所有的 HTML 代碼都必須位于 html 標簽中岖食。 其中 <html> 位于 <!DOCTYPE html> 之后红碑，</html> 位于網(wǎng)頁的結(jié)尾。
網(wǎng)頁布局
<!DOCTYPE html>
<html>
<head>
<meta />
</head>
<body>
<div>
</div>
</body>
</html>
標記文本的結(jié)構主要分為兩大部分：head 和 body泡垃。 head 元素應只包含 title析珊，body 元素應該包含 h1 和 p。
-28定義 HTML 文檔的 head 和 body
- html 的結(jié)構主要分為兩大部分：head 和 body蔑穴。 網(wǎng)頁的描述應放入 head 標簽忠寻， 網(wǎng)頁的內(nèi)容（向用戶展示的）則應放入 body 標簽。
-
比如 link存和、meta奕剃、title 和 style 都應放入 head 標簽。
