HTML基础知识
鹿酒 2016/9/18 HTML
罗列一下可能用到的HTML知识，
包括标签、属性、事件等···
# 标签
# 基本标签
# 语义化
# 发展过程
旧网站常用table布局（我猜测可能是因为Dreamweaver），但是这种DOM经常难以实现设计稿，所以，现在的网站大多改用div布局。
为了实现效果，页面内会出现大量div，由于div数量太多、使用大量class等方法导致源码非常混乱，不方便维护。
所以，HTML的语义化才会作为一个最最基本的思想，融入到代码中。
# 什么是语义化
说白了就是把原来难以区分的标签用各种新标签去代替。
为了区分原来的标签，大家会使用注释，现在的标签省去了注释，以英文单词实现了最基本的结构。
# 新结构
header标签：理解为页眉或者标题栏，用来放置选项、搜索框等nav标签：理解为导航栏，用来放置跳转的信息（页面主要位置的跳转）article标签：理解为拥有完整结构的独立部分，里面可以放置新的一整套结构（header、footer等），用来显示一篇文章、一个信息栏、一套按钮等section标签：理解为文章的一节（eg:包含h3标签+p标签）， 用来显示文章拥有子标题的部分内容（不只一段）aside标签：理解为附加信息栏，用来显示文章的作者等信息，或者显示侧边栏（常见）、侧边导航、广告等footer标签：理解为页脚，用来显示页面信息，版权，友情连接等信息
group标签：当不只有一个h1~h6标签时，要把这几个标题标签都放进hgroup标签内time标签：用来显示时间，便于搜索引擎搜索mark标签：用来显示突出的文本figure标签：用来包含独立的流内容（照片，代码等）figcaption标签：用来显示figure的标题，放在figure标签内部，可以再开头或者结尾
# 属性
常见的属性如下所示，不同的标签有着不用的属性，例如：value、placeholder、disabled等。另外，在必要的时候我们可以自定义属性（语法为data-name）来帮助操作。
| 常见属性 | 作用效果 |
|---|---|
| class | 规定元素的一个或多个类名 |
| id | 规定元素的唯一 id |
| style | 规定元素的行内 CSS 样式 |
| title | 规定有关元素的额外信息 |
# 事件
在不同的情况下可以触发相应的方法。
# window事件
| 常见事件 | 作用条件 |
|---|---|
| onload | 页面结束加载之后触发 |
| onerror | 在错误发生时运行的脚本 |
| onoffline | 当文档离线时运行的脚本 |
| onunload | 一旦页面已下载时触发 |
# Mouse事件
| 常见事件 | 作用条件 |
|---|---|
| onmousedown | 元素上按下鼠标按钮时触发 |
| onmouseup | 元素上释放鼠标按钮时触发 |
| onclick | 元素上发生鼠标点击时触发 |
| - | - |
| onmousemove | 鼠标指针移动到元素上时触发 |
| onmouseover | 当鼠标指针移动到元素上时触发 |
| onmouseout | 鼠标指针移出元素时触发 |
| - | - |
| onmousewheel | 当鼠标滚轮正在被滚动时运行的脚本 |
| onscroll | 当元素滚动条被滚动时运行的脚本 |
# KeyBoard事件
| 常见事件 | 作用条件 |
|---|---|
| onkeydown | 在用户按下按键时触发 |
| onkeypress | 在用户敲击按钮时触发 |
| onkeyup | 当用户释放按键时触发 |
# Form事件
| 常见事件 | 作用条件 |
|---|---|
| onblur | 元素失去焦点时运行的脚本 |
| onfocus | 元素获得焦点时运行的脚本 |
| - | - |
| onchange | 在元素值被改变时运行的脚本 |
| onforminput | 当表单获得用户输入时运行的脚本 |
| onsubmit | 在提交表单时触发 |
# 元素类型
# 块级元素
- 独占一行的元素。
- 块级元素的width（默认是父元素的100%）、height、line-height均可以设置。
- 包含了
<div>、<p>、<h1>、<form>、<ul>、<li>这些标签。
# 内联元素
- 可以和其他元素在一行的元素。
- 块级元素的width（默认是父元素的100%）、height、line-height不可以设置。
- 包含了
<span>、<a>、<label>、<strong>、<em>这些标签。
# 内联块状元素
- 可以和其他元素在一行的元素。
- 块级元素的width（默认是父元素的100%）、height、line-height均可以设置。
- 包含了
<img>、<input>这些标签。
# 标签语意（补）
<span>：没有语意的、基本的标签，就是为了设置单独的样式而存在的。
<q>：语意是引用别人的话，自带“双引号”。
<blockquote>：对长文本的引用，解析为缩进。
<address>：语意是联系信息。
<code>：插入单行代码。
<pre>：预格式化的文本，一般用来表示代码段。