前端HTML知识点学习
HTML
1.1 html标签的类型（head， body，！Doctype） 的作用是什么？
!DOCTYPE 声明：
- 它不是一个HTML标签，是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
- 例如：
- HTML 4.01 Strict
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML5
- <!DOCTYPE html>
- HTML 4.01 Strict
head：
- 头部元素的容器，绝大多数头部标签的内容不会显示给读者
- 该标签下所包含的部分可加入的标签有：
- titile标签，页面的标题，对于SEO非常重要，尽量多次出现关键词
- link标签，作用是链接外部css文件和收藏夹图标
- 引入外部css样式：<link rel=”stylesheet” type=”text/css” href=”http://www....... /style.css” />
- 设置网站小图标（收藏图标）：<link rel=”shortcut icon” type=”image/x-icon” href="http://....../favicon.ico" />
- script标签
- 作用是调用外部js文件。该标签不仅仅可以在头部head使用，还可以在body标签的任意位置使用。
- meta标签：
- meta标签的作用通常是用作网页关键词、网页描述、作者、网页编码、robots、自动跳转等说明性标签。这样写法随处可见，任何一个网页中都有meta标签的使用。
- http-equiv：
- http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。
- <meta http-equiv="content-Type" content="text/html; charset=utf-8">
- 设定页面使用的字符集
- <meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
- 设定网页的过期时间。必须使用GMT的时间格式。
- <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
- 自动刷新并指向新页面，2代表页面停留2秒后跳转到后面的网址上
- <meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
- 如果网页过期，那么自动删除本地cookie。必须使用GMT的时间格式。
- <meta http-equiv="Window-target" content="_top">
- 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用。
- <meta http-equiv="cache-control" content="no-cache">
- 缓存机制
- name:
-
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
-
<meta name="author" content="dashen" />
- 标注网页的作者
-
<meta name="keywords" content="新闻,新闻中心, 新闻频道">
- 页面关键词，用于被搜索引擎收录
-
<meta name="description" content="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
- 页面描述，用于搜索引擎收录
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
- 用于控制页面缩放
-
<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp">//默认IE兼容模式
<meta name="renderer" content="ie-stand">//默认IE标准模式
- 指定双核浏览器默认以何种方式渲染页面。
-
<meta name="generator" content="Microsoft"/>
- 说明网站的采用的什么软件制作
-
<meta name="revised" content="设计网, 6/24/2015"/>
- 网页文档的修改时间
-
<meta name="robots" content="none"/>
- 用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
-
<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />
- 网站版权信息
-
- style标签
- 放置CSS内部样式。
body：
- body标签定义文档的主体。包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
1.2 HTML5新特性
- 新增选择器 document.querySelector、document.querySelectorAll
- 拖拽释放(Drag and drop) API
- 媒体播放的 video 和 audio
- 本地存储 localStorage 和 sessionStorage
- 离线应用 manifest
- 桌面通知 Notifications
- 语意化标签 article、footer、header、nav、section
- 增强表单控件 calendar、date、time、email、url、search
- 地理位置 Geolocation
- 多任务 webworker
- 全双工通信协议 websocket
- 历史管理 history
- 跨域资源共享(CORS) Access-Control-Allow-Origin
- 页面可见性改变事件 visibilitychange
- 跨窗口通信 PostMessage
- Form Data 对象
- 绘画 canvas
- H5移除的元素：
- 纯表现的元素：basefont、big、center、font、s、strike、tt、u
- 对可用性产生负面影响的元素：frame、frameset、noframes
1.3 伪类和伪元素
伪类：
- 已有元素处于某种状态时，为其添加对应的样式
- 例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，然后添加样式
伪元素：
- 创建一些不在DOM树中的元素，并为其添加样式。
- 例如：可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见 这些文本，但是它实际上并不在DOM文档中。
1.4 HTML5语义化
在HTML5之前，我们都是使用div，但是div本身没有语义。而现在，HTML5添加了article、footer、header、nav、section等语义化标签
<title> <!--：页面主体内容。-->
<hn> <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul> <!--：无序列表。-->
<li> <!--：有序列表。-->
<header> <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav> <!--：标记导航，仅对文档中重要的链接群使用。-->
<main> <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
<article> <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section> <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<aside> <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
<footer> <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->
<small> <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong> <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em> <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark> <!--：使用黄色突出显示部分文本。-->
<figure> <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
<figcaption><!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<cite> <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto><!--：定义块引用，块引用拥有它们自己的空间。-->
<q> <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time> <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
<abbr> <!--：简称或缩写。-->
<dfn> <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address> <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del> <!--：移除的内容。-->
<ins> <!--：添加的内容。-->
<code> <!--：标记代码。-->
<meter> <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
<progress> <!--：定义运行中的进度（进程）。-->
- 语义化的优点：
- 样式丢失的时候，能让页面呈现清晰的结构，便于用户阅读
- 有利于SEO，搜索引擎根据语义化标签来确定上下文和各个关键字的权重
- 方便屏幕阅读器解析，比如说盲人的阅读器可以根据语义来渲染网页
- 有利于开发和维护，语义化更具有可读性，代码更好维护
