前端知识点总结(HTML)
一,头部常用的标签
1,link标签
(1),设置ico图标
1 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 2 <link rel="icon" href="img/gif_favicon.gif" type="image/gif">
(2),外链CSS样式
1 <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> 2 <link href="css/style.css" rel='stylesheet' type='text/css' />
2,meta标签
(1),指定字符集
1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
(2),向搜索引擎说明你的网页的关键词
1 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
(3),告诉搜索引擎你的站点的主要内容
1 <meta name="description" content="jackson影琪">
(4),告诉搜索引擎你的站点的制作的作者
<meta name="author" content="your name">
(5),响应式页面
1 <meta name="viewport" content="width=device-width, initial-scale=1">
(6),定时让网页在3秒内跳转到mozilla首页(http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对）
1 <meta http-equiv="refresh" content="3" url=https://www.yingqigroup.top">
(7),如果安装了GCF (Google Chrome Frame)，则使用GCF来渲染页面 ("chrome=1"), 如果没有安装GCF，则使用最高版本的IE内核进行渲染 ("IE=edge")。X-UA-Compatible(浏览器采取何种版本渲染当前页面)
1 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
(8),浏览器的内核控制
1 <meta name="renderer" content="webkit|ie-comp|ie-stand">
(9),媒介查询
html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位。这样页面在不同设备下就能保持一致的网页布局。但是从工作量和复杂度方面来考虑，确有不足。
简单的解决办法是：文字流式布局，控件弹性布局，图片等比缩放。 一些网站的做法：
1 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
通过document.documentElement.clientWidth获得deviceWidth，然后通过js动态设置html的font-size。 布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
对于容器的font-size，需要通过媒介查询设置font-size：
1 @media screen and (max-width:321px){ 2 .j-navlist{font-size:15px} 3 } 4 @media screen and (min-width:321px) and (max-width:400px){ 5 .j-navlist{font-size:16px} 6 } 7 @media screen and (min-width:400px){ 8 .j-navlist{font-size:18px} 9 }
3,script标签
(1),外链js代码
1 <script src="js/bootstrap.js">script>
(2),内链js代码
1 <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } script>
4,style标签
(1),内链css样式
1 <style type="text/css"> 2 h1 {color:red} 3 p {color:blue} 4 style>
5,HTML5 为什么只需要写
Html5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。XHTML创建于XML，他被使用在HTML4.0中。
页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
（4）link方式的样式的权重高于@import的权重。
5,Doctype的文档类型
(1),该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
(2),HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset
(3),XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
(4),Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
二,BODY常用的标签
1,行内元素
span a b img input select strong i em
2,块级元素
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
3,空元素
空元素：
4,不常用元素
5,html5的新特性、以及移除了的元素
(1),结构性元素
主要负责web上下文结构的定义
- section：在 web 页面应用中，该元素也可以用于区域的章节描述。
- header：页面主体上的头部， header 元素往往在一对 body 元素中。
- footer：页面的底部（页脚），通常会标出网站的相关信息。
- nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。
- article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。
(2),结构性元素
主要完成web页面区域的划分，确保内容的有效分割。 aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
- figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。
- code：表示一段代码块。
- dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。
(3),行内语义性元素
主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
- meter：表示特定范围内的数值，可用于工资、数量、百分比等。 time：表示时间值。
- progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。
- video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
- audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
(4),交互性元素
主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。 details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。
- datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
- menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。
- command：用来处理命令按钮。
(5),新特性，新增元素
内容元素
：代表HTML的头部数据 -
：自包含的内容 -
：使用内部article去定义区域或者把分组内容放到区域里
表单控件：calendar、date、time、email、url、search、Telephone、Range(显示范围控制)、Number、Color
控件元素：新的技术：webworker，websockt，Geolocation
多媒体：video、audio
游戏：绘画canvas、webgl
存储：localstorage、sessonstorage、websql、indexedDB（使用对象进行存储数据，indexedDB.open()打开或新建某个数据库， database=indexedDB.open("mydatabase").result。对象存储空间-表，对象-表中的记录，使用keyPath指定键，使用add()，put()向对象存储空间中存储对象，当存储的对象相同时add报错。put则是更新，可以使用database.transaction("users")(即操作users表)进行读取和修改数据。）
标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。 - command 元素表示用户能够调用的命令。
标签可以定义命令按钮，比如单选按钮、复选框或 按钮。只有当 command 元素位于 menu 元素内时，该元素才 可见的。否则不会显示这个元素，但是 可以用它规定键盘快捷键。
(6),移除元素
1）显现层元素：basefont，big，center，font，s，strike，tt，u
2）性能较差元素：frame，frameset，noframes
(7),HTML5中的Datalist元素有助于提供文本框自动完成特性。
(8),HTML5中的输出元素
当你需要计算两个输入的和值到一个标签中的时候你需要输出元素。显示a+b
1 <form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)"> 2 <input name="a" type="number"> + 3 <input name="b" type="number"> = 4 <output name="o" /> 5 form> 6 <output name="o" for="a b">output>
(8),HTML5的form关闭自动完成功能
给不想要提示的 form 或某个 input 设置为 autocomplete=off。
6,title与h1的区别、b与strong的区别、i与em的区别
- title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
- strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。
- i内容展示为斜体，em表示强调的文本；
7,Label的作用
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
1 <label for="Name">Number:label> 2 <input type=“tex e" id="Name"/> 3 <label>Date:<input type="text" name="B"/>label>
三,其他总结
1,避免 FOUC
(1),什么是FOUC
FOUC - Flash Of Unstyled Content 文档样式闪烁
(2),产生FOUC的原因
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
(3),解决办法
在之间加入一个或者