一、HTML简介
html结构png
注意事项：
-
<!DOCTYPE html>必须首行定格 -
<title>为文档标题 -
<meta charset=“utf-8”>文档解码格式 -
<meta name="keywords" content="...">和<meat name="description" >提供给搜索引擎使用 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">移动端浏览器的宽高缩放 -
<link>标签可以引入favicon和样式CSS文件
二、HTML语法
html语法.png
书写规范
- 小写标签属性
- 属性值双引号
- 代码因嵌套缩进
全局属性
- id，
<div id="unique-element"></div>，页面中唯一 - class，
<div class='btn'>Click Me</div>，页面中可重复出现 - style，尽量避免
- title，对于元素的描述类似于Tooltip的效果
三、HTML标签
[HTML5 标签集合]
html标签集合.jpg
文档章节
<body> 页面内容 <header> 文档头部 <nav> 导航 <aside> 侧边栏 <aritce> 定义外部内容（如外部引用的文章）<section> 一个独立的块 <footer> 尾部
页面通常结构
页面结构.gif
文本标签
<!— 默认超链接 —>
<a href=“http://sample-link.com” title=“Sample Link”>Sample</a>
<!-- 当前窗口显示 -->
<a href="http://sample-link.com" title="Sample Link" target="_self">Sample</a>
<!-- 新窗口显示 -->
<a href="http://sample-link.com" title="Sample Link" target="_blank">Sample</a>
<!-- iframe 中打开链接 -->
<a href="http://sample-link.com" 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>
<!-- 邮箱及电话需系统支持 -->
<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>
<!-- 添加抄送，主题和内容 -->
<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>
组合内容标签
<div><p><ol><ul><dl><pre><blockquote>
文档章节
<body> 页面内容 <header> 文档头部 <nav> 导航 <aside> 侧边栏 <aritce> 定义外部内容（如外部引用的文章）<section> 一个独立的块 <footer> 尾部
引用
-
<cite>引用作品的名字、作者的名字等 -
<q>引用一段文字（大段文字引用用<blockquote>） -
<blockquote>引用大块文字 -
<pre>保存格式化的内容（其空格、换行等格式不会丢失）
<pre>
<code>
int main(void) {
printf('Hello, world!');
return 0;
}
</code>
</pre>
代码
<code> 引用代码
格式化
<b> 加粗 <i> 斜体
强调
<em> 斜体。着重于强调内容，会改变语义的强调<strong>粗体。着重于强调内容的重要性
换行
<br> 换行
列表
无序列表
<ul>
<li>标题</li>
<li>结论</li>
</ul>
有序列表
<ol>
<li>第一</li>
<li>第二</li>
</ol>
自定义列表
<dl>
<dt>作者</dt>
<dd>爱因斯坦</dd>
<dt>作品</dt>
<dd>《相对论》</dd>
<dd>《时间与空间》</dd>
</dl>
一个<dt>可以对应多个<dd>
NOTE：<dl>为自定义列表，其中包含一个或多个<dt>及一个或多个<dd>，并且<dt>与<dl>列表会有缩进的效果。<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的内容
<!--object embed通常用来嵌入外部资源 -->
<object type="application/x-shockwave-player">
<param name="movie" value="book.pdf">
</object>
<!--视频 track可以引入字幕 autoplay可以使视频加载后自动播放，loop可以使其循环播放 -->
<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>
资源标签
图标签
canvans基于像素，性能要求比较高，可用于实时数据展示。svg为矢量图形图像。
热点区域标签
`img`中套用`map`以及`area`可以实现点击某部图片触发一个链接，点击另一部分触发另外一个链接。
<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进行跨列，使用rowspan=val进行跨行。
表单
<form action="WebCreation_submit" method="get" accept-charset="utf-8">
<fieldset>
<legend>title or explanatory caption</legend>
<!-- 第一种添加标签的方法 -->
<label><input type="text/submit/hidden/button/etc" name="" value=""></label>
<!-- 第二种添加标签的方法 -->
<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>
<!-- 隐藏文本框，可提交影藏数据 -->
<input type="text" name="hidden-info" value="hiden-info-value" hidden>
</fieldset>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
使用fieldset可用于对表单进行分区
表单中的其他控件类型：
-
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）是指用合适的标签标识适当的内容，它可以起到搜索引擎优化（Search Engine Optimization），提高可访问性（例如盲人使用的屏幕阅读器），与此同时还可以提高代码的可读性。简而言之也就是在正确的地方使用正确的标签
三、实体字符
实体字符（ASCII Encoding Reference）是用来在代码中以实体代替与HTML语法相同的字符，避免浏览解析错误。它的两种表示方式，第一种为& 外加实体字符名称，例如 ，第二种为 & 加实体字符序号，例如 。
常用HTML字符实体（建议使用实体）
| 字符 | 名称 | 实体名 | 实体数 |
|---|---|---|---|
| " | 双引号 | " | " |
| & | &符 | & | & |
| < | 左尖括号（小于号） | < | < |
| > | 右尖括号（大于号） | > | > |
| 空格 |   |   | |
| 中文全角空格 | &qmp | 　 |
常用特殊字符实体（不建议使用实体）：
| 字符 | 名称 | 实体名 | 实体数 |
|---|---|---|---|
| ¥ | 元 | ¥ | ¥ |
| ¦ | 断竖线 | ¦ | ¦ |
| © | 版权 | © | © |
| ® | 注册商标R | ® | ® |
| ™ | 商标TM | ™ | ™ |
| · | 间隔符 | · | · |
| « | 左双尖括号 | « | « |
| » | 右双尖括号 | » | » |
| ° | 度 | ° | ° |
| × | 乘 | × | × |
| ÷ | 除 | ÷ | ÷ |
| ‰ | 千分比 | ‰ | ‰ |
NOTE：具体所需可在使用时查询，无需记忆。
浏览器兼容
主流浏览器都兼容 HTML5 的新标签，对于 IE8 及以下版本不认识 HTML5的新元素，可以使用 JavaScript 创建一个没用的元素来解决，例如：
<script>
document.createElement("header");
</script>
也可以使用 shiv 来解决兼容性问题，详情可参考HTML5 Shiv
