一檀夹、HTML簡介
html結(jié)構(gòu)png
注意事項：
-
<!DOCTYPE html>必須首行定格 -
<title>為文檔標(biāo)題 -
<meta charset=“utf-8”>文檔解碼格式 -
<meta name="keywords" content="...">和<meat name="description" >提供給搜索引擎使用 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">移動端瀏覽器的寬高縮放 -
<link>標(biāo)簽可以引入favicon和樣式CSS文件
二炸渡、HTML語法
html語法.png
書寫規(guī)范
- 小寫標(biāo)簽屬性
- 屬性值雙引號
- 代碼因嵌套縮進(jìn)
全局屬性
- id蚌堵，
<div id="unique-element"></div>，頁面中唯一 - class督赤，
<div class='btn'>Click Me</div>躲舌，頁面中可重復(fù)出現(xiàn) - style，盡量避免
- title羹奉，對于元素的描述類似于Tooltip的效果
三、HTML標(biāo)簽
[HTML5 標(biāo)簽集合]
html標(biāo)簽集合.jpg
文檔章節(jié)
<body> 頁面內(nèi)容 <header> 文檔頭部 <nav> 導(dǎo)航 <aside> 側(cè)邊欄 <aritce> 定義外部內(nèi)容（如外部引用的文章）<section> 一個獨(dú)立的塊 <footer> 尾部
頁面通常結(jié)構(gòu)
頁面結(jié)構(gòu).gif
文本標(biāo)簽
<!— 默認(rèn)超鏈接 —>
<a href=“http://sample-link.com” title=“Sample Link”>Sample</a>
<!-- 當(dāng)前窗口顯示 -->
<a title="Sample Link" target="_self">Sample</a>
<!-- 新窗口顯示 -->
<a title="Sample Link" target="_blank">Sample</a>
<!-- iframe 中打開鏈接 -->
<a title="Sample Link" target="iframe-name">Sample</a>
<iframe name="iframe-name" frameborder="0"></iframe>
<!-- 頁面中的錨點 -->
<a href="#achor">Achor Point</a>
<section id="achor">Achor Content</section>
<!-- 郵箱及電話需系統(tǒng)支持 -->
<a href="mailto:sample-address@me.com" title="Email">Contact Us</a>
<!-- 多個郵箱地址 -->
<a href="mailto:sample-address@me.com, sample-address0@me.com" title="Email">Contact Us</a>
<!-- 添加抄送，主題和內(nèi)容 -->
<a href="mailto:sample-address@me.com?cc=admin@me.com&subject=Help&body=sample-body-text" title="Email">Contact Us</a>
<!-- 電話示例 -->
<a href="tel:99999999" title="Phone">Ring Us</a>
組合內(nèi)容標(biāo)簽
<div><p><ol><ul><dl><pre><blockquote>
文檔章節(jié)
<body> 頁面內(nèi)容 <header> 文檔頭部 <nav> 導(dǎo)航 <aside> 側(cè)邊欄 <aritce> 定義外部內(nèi)容（如外部引用的文章）<section> 一個獨(dú)立的塊 <footer> 尾部
引用
-
<cite>引用作品的名字、作者的名字等 -
<q>引用一段文字（大段文字引用用<blockquote>） -
<blockquote>引用大塊文字 -
<pre>保存格式化的內(nèi)容（其空格俗孝、換行等格式不會丟失）
<pre>
<code>
int main(void) {
printf('Hello, world!');
return 0;
}
</code>
</pre>
代碼
<code> 引用代碼
格式化
<b> 加粗 <i> 斜體
強(qiáng)調(diào)
<em> 斜體魄健。著重于強(qiáng)調(diào)內(nèi)容沽瘦，會改變語義的強(qiáng)調(diào)<strong>粗體。著重于強(qiáng)調(diào)內(nèi)容的重要性
換行
<br> 換行
列表
無序列表
<ul>
<li>標(biāo)題</li>
<li>結(jié)論</li>
</ul>
有序列表
<ol>
<li>第一</li>
<li>第二</li>
</ol>
自定義列表
<dl>
<dt>作者</dt>
<dd>愛因斯坦</dd>
<dt>作品</dt>
<dd>《相對論》</dd>
<dd>《時間與空間》</dd>
</dl>
一個<dt>可以對應(yīng)多個<dd>
NOTE：<dl>為自定義列表良哲，其中包含一個或多個<dt>及一個或多個<dd>筑凫，并且<dt>與<dl>列表會有縮進(jìn)的效果并村。<pre>會保留換行和空格，通常與<code>一同使用棚潦。
<pre>
<code>
int main(void) {
printf('Hello, world!');
return 0;
}
</code>
</pre>
<blockquote>擁有cite屬性膝昆，它包含引用文本的出處，示例如下所示：
<blockquote cite="http://example.com/facts">
<p>Sample Quote...</p>
</blockquote>
嵌入
<iframe src=""></iframe> 頁面操作可以不影響到iframe的內(nèi)容
<!--object embed通常用來嵌入外部資源 -->
<object type="application/x-shockwave-player">
<param name="movie" value="book.pdf">
</object>
<!--視頻 track可以引入字幕 autoplay可以使視頻加載后自動播放纬朝，loop可以使其循環(huán)播放 -->
<video autoplay loop controls="controls" poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<track kind="subtitles" src="video.vtt" srclang="cn" label="cn">
</video>
資源標(biāo)簽
圖標(biāo)簽
canvans基于像素嘱吗，性能要求比較高谒麦，可用于實時數(shù)據(jù)展示。svg為矢量圖形圖像绕德。
熱點區(qū)域標(biāo)簽
`img`中套用`map`以及`area`可以實現(xiàn)點擊某部圖片觸發(fā)一個鏈接，點擊另一部分觸發(fā)另外一個鏈接踪蹬。
<map name="map">
<area shap="rect" coords="0,0,50,50" href="" alt="">
<area shap="circle" coords="75,75,25" href="" alt="">
</map>
表格
表格代碼示例
<table>
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
使用colspan=val進(jìn)行跨列臣咖，使用rowspan=val進(jìn)行跨行夺蛇。
表單
<form action="WebCreation_submit" method="get" accept-charset="utf-8">
<fieldset>
<legend>title or explanatory caption</legend>
<!-- 第一種添加標(biāo)簽的方法 -->
<label><input type="text/submit/hidden/button/etc" name="" value=""></label>
<!-- 第二種添加標(biāo)簽的方法 -->
<label for="input-id">Sample Label</label>
<input type="text" id="input-id">
</fieldset>
<fieldset>
<legend>title or explanatory caption</legend>
<!-- 只讀文本框 -->
<input type="text" readonly>
<!-- 隱藏文本框，可提交影藏數(shù)據(jù) -->
<input type="text" name="hidden-info" value="hiden-info-value" hidden>
</fieldset>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
使用fieldset可用于對表單進(jìn)行分區(qū)
表單中的其他控件類型：
-
textarea（文本框） -
select與option（下拉菜單可多選）
input 類型支持值列表
| Value | Description |
|---|---|
| button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
| checkbox | Defines a checkbox |
| color | Defines a color picker |
| date | Defines a date control (year, month and day (no time)) |
| datetime | The input type datetime has been removed from the HTML standard. Use datetime-local instead. |
| datetime-local | Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone) |
| Defines a field for an e-mail address | |
| file | Defines a file-select field and a "Browse..." button (for file uploads) |
| hidden | Defines a hidden input field |
| image | Defines an image as the submit button |
| month | Defines a month and year control (no time zone) |
| number | Defines a field for entering a number |
| password | Defines a password field (characters are masked) |
| radio | Defines a radio button |
| range | Defines a control for entering a number whose exact value is not important (like a slider control) |
| reset | Defines a reset button (resets all form values to default values) |
| search | Defines a text field for entering a search string |
| submit | Defines a submit button |
| tel | Defines a field for entering a telephone number |
| text | Default. Defines a single-line text field (default width is 20 characters) |
| time | Defines a control for entering a time (no time zone) |
| url | Defines a field for entering a URL |
| week | Defines a week and year control (no time zone) |
語義化
語義化（Semantic Tag）是指用合適的標(biāo)簽標(biāo)識適當(dāng)?shù)膬?nèi)容甚脉，它可以起到搜索引擎優(yōu)化（Search Engine Optimization），提高可訪問性（例如盲人使用的屏幕閱讀器）狡耻，與此同時還可以提高代碼的可讀性波闹。簡而言之也就是在正確的地方使用正確的標(biāo)簽
三、實體字符
實體字符（ASCII Encoding Reference）是用來在代碼中以實體代替與HTML語法相同的字符，避免瀏覽解析錯誤歹篓。它的兩種表示方式，第一種為& 外加實體字符名稱背捌，例如 洞斯，第二種為 & 加實體字符序號，例如 么抗。
常用HTML字符實體（建議使用實體）
| 字符 | 名稱 | 實體名 | 實體數(shù) |
|---|---|---|---|
| " | 雙引號 | " | " |
| & | &符 | & | & |
| < | 左尖括號（小于號） | < | < |
| > | 右尖括號（大于號） | > | > |
| 空格 |   |   | |
| 中文全角空格 | &qmp | 　 |
常用特殊字符實體（不建議使用實體）：
| 字符 | 名稱 | 實體名 | 實體數(shù) |
|---|---|---|---|
| ￥ | 元 | ￥ | ￥ |
| | | 斷豎線 | | | | |
| ? | 版權(quán) | ? | ? |
| ? | 注冊商標(biāo)R | ? | ? |
| ? | 商標(biāo)TM | ? | ? |
| · | 間隔符 | · | · |
| ? | 左雙尖括號 | ? | ? |
| ? | 右雙尖括號 | ? | ? |
| ° | 度 | ° | ° |
| × | 乘 | × | × |
| ÷ | 除 | ÷ | ÷ |
| ‰ | 千分比 | ‰ | ‰ |
NOTE：具體所需可在使用時查詢蝇刀，無需記憶徘溢。
瀏覽器兼容
主流瀏覽器都兼容 HTML5 的新標(biāo)簽然爆，對于 IE8 及以下版本不認(rèn)識 HTML5的新元素，可以使用 JavaScript 創(chuàng)建一個沒用的元素來解決奴烙，例如：
<script>
document.createElement("header");
</script>
也可以使用 shiv 來解決兼容性問題翻默，詳情可參考HTML5 Shiv
