HTML个人总结

1. 概念类

1.1 HTML5 新特性

 ### 标签
  1.语义化标签：header、footer、section、nav、aside、article
  2.增强型表单：input 的多个 type
  3.新增表单元素：datalist、keygen、output
  4.新增表单属性：placehoder、required、min 和 max
  5.音频视频：audio、video
  6.canvas
  7.地理定位
  8.拖拽
  
 ### 存储
  9.本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

 ### 事件
  10.新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

  11.WebSocket：单个 TCP 连接上进行全双工通讯的协议

1.2 谈谈对语义化标签的理解

1.2.1 常用语义化标签

• header：页头
• footer：页脚
• nav：导航链接部分
• aside：侧边栏
• section：文档中的一个区域

1.2.2 什么是语义化标签?

• 是指使用语义恰当的标签，使页面有更好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、有利于SEO。
• 正确的标签做正确的事

1.2.3 语义化标签的作用?

1. 使页面内容结构化，有利于更好的理解代码结构
2. 便于浏览器、搜索引擎解析。便于爬虫标记、利于SEO
3. 即在css丢失的情况下，页面结构仍然可以比较清晰的展现

1.2.4 什么是SEO

• 即搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
• 目的是让其在行业内占据领先地位，获得品牌收益。

1.3 块级元素、行内元素、置换元素

1.3.1 块级元素和行内元素的区别

• 块级元素：

  1. 会独占一行
  2. 内部可以包含内容、行内元素、块级元素（p标签不能包含div标签）
  3. 默认可以设置宽高

• 行内元素：

  1. 只占据自身宽度空间
  2. 一般行内元素只能包含数据和其它的行内元素
  3. 一般来说，非置换元素的行内元素是不能设置宽高的

1.3.2 img、input是什么元素

• img、input是行内元素，但同时也是置换元素。置换元素一般内置宽高属性，因此可以设置其宽高

1.3.3 什么是置换元素?

1. 置换元素就是会根据自身标签属性来显示的元素，一般内置宽高属性，因此可以设置其宽高
2. 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
   • 例如：浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容。
   • 标签的type属性来决定是显示输入框，还是单选按钮等
3. 置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因

1.3.4 哪些元素是置换元素?

  1.<img/>
  2.<input/>
  3.<textarea>
  4.<video>
  5.<button>
  6.<select>

1.4 关于<! DOCTYPE html>的理解

1,4,1 概念

• <!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

1.4.2 使用方式

• 声明必须是 HTML 文档的第一行，位于html标签之前