HTML总结

1.你是如何理解 HTML 语义化的？

⭕ 让页面内容结构化，它有如下优点

够清晰的、有结构地表述这个页面的内容。
易于用户阅读，去掉或样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐

⭕ 语义化标签：

<header>:用来表示网页的头部
<main> 用来规定出 <header>、<footer> 外的文档主要内容：
		🔸 <nav>:导航标签
		🔸 <article>:内容标签
		🔸 <section>:块级标签    --> 类似于div
		🔸 <aside>:侧边栏标签
<footer>:尾部标签

2.层级关系

window > document > html > body

	🔸 window 是 BOM 的核心对象，它一方面用来获取和设置浏览器的属性和行为，另一方面作为一个全局对象。 					       	 	
	🔸 document对象是一个跟文档相关的对象，拥有一些操作文档内容的功能，但是地位没有 window 高。 	
	🔸 html 元素对象跟 document元素对象是属于 html 文档的 DOM 对象，可以认为就是 html 源代码中那些标签化成的对象，它们跟 div、select这些对象没有什么根本区别。

3.替换元素和不可替换元素

<input> 和 <img> 虽然是行内元素，但是它们是可以设置宽和高的，因为它们涉及到可替换元素和不可替换元素。

⭕ 替换元素

	替换元素 就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
	例如：
		🔸 <img> 根据 src 属性来读取图片信息并显示出来
		🔸 <input> 根据标签的 type 属性来决定是显示输入框，还是单选按钮。
	替换元素有：<img>、<input>、<textarea>、<select>、<object>。

⭕ 不可替换元素

	HTML 大多数元素都是不可替换的，即其内容直接展现给浏览器。

	例如：
	<p> 直接全部展示

4.meta 的使用

	meta：元数据（metadata）是关于数据的信息。
		  标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
		  典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
		  
	meta的作用：meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容，

meta有两个属性name 和 http-equiv

	⭕ name
	name属性与content属性结合使用, name用来表示元数据的类型，表示当前<meta>标签的具体作用；content属性用来提供值。
	🔸 keywords(关键字)   告诉搜索引擎，你网页的关键字
	🔸 description(网站内容描述)   用于告诉搜索引擎，你网站的主要内容。
	🔸 viewport(移动端的窗口)  后面介绍
	🔸 robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
	🔸 author(作者)
	🔸 generator(网页制作软件）
	🔸 copyright(版权)
	
	
	⭕ http-equiv

	属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。
	
	有以下参数：
	
	🔸 content-Type 设定网页字符集
	  //旧的HTML，不推荐
	 //HTML5设定网页字符集的方式，推荐使用UTF-8

	🔸 X-UA-Compatible(浏览器采用哪种版本来渲染页面)
	 //指定IE和Chrome使用最新版本渲染当前页面
	
	🔸 cache-control（请求和响应遵循的缓存机制

HTML5新特性

⭕ 语义化标签

⭕ 增强型表单

	html5修改一些新的input输入特性，改善更好的输入控制和验证
	🔸 type="number"   --> 限制用户输入必须为数字类型
    🔸 type="tel"      --> 手机号码
    🔸 type="search"   --> 搜索框
    🔸 type="email"    --> 限制用户输入必须为Email类型
    🔸 type="date"     --> 限制用户输入必须为日期类型 
    🔸 等
    
    html5新增表单属性
    🔸   required="required"       --> 表单内容不能为空，必填
    🔸  *placeholder="提示文本"     --> 表单提示信息，没有内容时显示 
    🔸   autofocus="autofocus"      --> 自动聚焦，光标自动聚焦到表单上
    🔸   autocomplete="off/on"      --> 当用户输入值时，浏览器基于之前输入过的值，提示出现过的内容
                                     (该属性默认时打开的,需要在表单上加上name属性)
                                     (不用时需要添加autocomplete="off"属性)
                                     > 例 <input type="text" name="username">
                                          提交一次后,下次输入就会提示上传输入的内容。

    🔸  *multiple="multiple"        --> 规定<input>元素中可选择多个值

⭕ 视频和音频
	<audio> 音频标签
    	H5在不使用插件的情况下也可以原生的支持音频格式文件的播放，支持格式有限。
    <video> 视频标签
⭕ Canvas绘图

⭕ SVG绘图