HTML5的相关知识学习笔记（一）

最近学习了HTML+CSS的相关用法和操作，稍微整理下所学的知识内容，以方便同样在学习的朋友们共同学习探讨。

HTML元素

1. 块级元素
   独占一行，用来布局段落，列表，导航菜单，脚注等结构，不可嵌套在行内元素中。
2. 行内元素
   与其他元素共享一行，一般被嵌套在块级元素中，通常作为段落的一部分出现。
3. 空元素
   只包含单个标签，通常用于在文档中插入部分内容。
4. 替代元素
   替代元素已经脱离了CSS的范畴，它们的表现不依赖CSS，典型的替换元素有

<img>、<object>、<video>、<textarea>、<input>、<audio>、<canvas>

行内块级元素转换

display:inline-block;
将其他元素转换成行内显示，同时可设置宽高的元素
display:inline;
将其他元素转换成行内元素。
display:block;
将其他元素转换成块级元素。
display:inline-block;
块级行内展示

HTML语法

1. 空白

在文档中无论出现多少个空白或者换行，但是在浏览器中解析出来的只有一个空白。

2. 实体

在HTML中某些字符是预留的，因为浏览器在解析过程中会出现一些差错，误认为这些字符属于标签，具体的实体情况请跳转以下链接。
HTML ISO-8859-1 实体参考手册

3.标签
标签是可以嵌套的

		<div>
			<span></span>
			<h1></h1>
		</div>

块级元素可以包含其他标签
行内元素中不可以放置块级元素

<--! 错误示范 -->
<span>
	<div></div>
</span>

<ul>
	<li>
		<div>
			<h1></h1>
			<br />
		</div>
	</li>
</ul>

列表

1. 有序列表ol
   li项
2. 无序列表ul
   li项
3. 自定义列表dl
   dt标题
   dd内容

超链接

1. a标签（行内元素）

    href表示跳转的目的地，取值如下：
        1、目标元素的ID值（用于锚点跳转）
        href="#目标元素的id值"
        2、URL（外部链接"url"、相对路径"./"）
        3、email（发送邮件mailto:xxx@163.com）
    
    target属性：规定在何处打开链接文档
        以新窗口打开        _blank
        在当前窗口打开      _self（默认为当前窗口打开。）

2. a标签访问的顺序：

• “:link”: a标签还未被访问的状态；
• “:visited”: a标签已被访问过的状态；
• “:hover”: 鼠标悬停在a标签上的状态；
• “:active”: a标签被鼠标按着时的状态；

同等优先权的样式，写在后边的会覆盖前边。前2者两种状态是常态，而后2者是即时状态，当即时状态触发时，要覆盖常态，所以2个即时状态要放在后边。

图片

img标签

<img src="images/1.jpg" alt="" width="200px">

• src属性
  path 相对路径 绝对路径
  url 网络上的url地址
• alt属性
  src属性替补。表示替换图片的文本内容，当src属性出错时，将会显示图片内容。
• width和height表示图片宽高，px单位。
• alt与title的区别：
  alt表示替换图片的文本内容，当url地址出错的时候会显示alt的 内容。
  title作为图片的标题内容。

表格

table标签
（经常配合caption、thead、tfoot、tbody、tr、td、th、col、colgroup一起使用）

 *align：表格应该如何在文档中对齐，可以取值：left，center，right
 *border：设定表格的边框特性，取整数位值，单位为px
 *cellpadding：设定内容与单元格之间的距离
 *cellspacing：设定单元格与单元格之间的距离
 *width：设定表格宽度
 *bgcolor：设置表格背景颜色
 *colgroup:定义一个表中的一组列，只能作为table子元素，位于caption元素后，其他元素前。

表格：<td>表示表格用来包含数据的单元格，<th>常用于表头。

属性：

• colspan： 跨列数
• rowspan： 跨行数
• width： 宽度，当宽度太窄以至于无法正确显示单元格内容时，在页面显示时候会适当调整。

HTML5里面新增标签（版本低无法使用，语义化标签）

• header标签：一个具有引导和导航作用的结构元素，

• nav标签：一个可以用作页面导航的链接组

• article标签：代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。

• section标签：作为html文档独立的功能。

• aside元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。

• footer元素作为其上层父级内容区块或是一个根区块的脚注。

• address元素用来在文档中呈现联系信息等。

• figure元素是一种元素的组合，带有可选标题。
  figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。

• details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。
  open属性，当取的属性值为true，其内部元素的子元素将被展示；当取值为false，其内部元素的子元素收缩不展示。默认值【false】。
  注意：open属性是布尔属性，取值为true和false，在html中，只要写了open，无论取值为什么，都是true。
  *summary元素属于details的子元素

注意新增标签的兼容性（）