前端知识点总结(HTML)

一,头部常用的标签

1,link标签

(1),设置ico图标

 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

 <link rel="icon" href="img/gif_favicon.gif" type="image/gif">

(2),外链CSS样式

 <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />

 <link href="css/style.css" rel='stylesheet' type='text/css' />

2,meta标签

(1),指定字符集

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

(2),向搜索引擎说明你的网页的关键词

 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

(3),告诉搜索引擎你的站点的主要内容

 <meta name="description" content="jackson影琪">

(4),告诉搜索引擎你的站点的制作的作者

<meta name="author" content="your name">

(5),响应式页面

 <meta name="viewport" content="width=device-width, initial-scale=1">

(6),定时让网页在3秒内跳转到mozilla首页(http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对）

 <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(浏览器采取何种版本渲染当前页面)

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

(8),浏览器的内核控制

 <meta name="renderer" content="webkit|ie-comp|ie-stand">

(9),媒介查询

html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位。这样页面在不同设备下就能保持一致的网页布局。但是从工作量和复杂度方面来考虑，确有不足。

简单的解决办法是：文字流式布局，控件弹性布局，图片等比缩放。一些网站的做法：

 <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：

 @media screen and (max-width:321px){

 .j-navlist{font-size:15px}

 }

 @media screen and (min-width:321px) and (max-width:400px){

 .j-navlist{font-size:16px}

 }

 @media screen and (min-width:400px){

 .j-navlist{font-size:18px}

 }

3,script标签

(1),外链js代码

 <script src="js/bootstrap.js"></script>

(2),内链js代码

 <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

4,style标签

(1),内链css样式

 <style type="text/css">

 h1 {color:red}

 p {color:blue}

 </style>

5,HTML5 为什么只需要写<!DOCTYPE HTML>

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,空元素

空元素：<br> <hr> <img> <link> <meta>

4,不常用元素

<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

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),新特性，新增元素

内容元素

<header>：代表HTML的头部数据
<footer>：页面的脚部区域
<nav>：页面导航元素
<article>：自包含的内容
<section>：使用内部article去定义区域或者把分组内容放到区域里
<aside>：代表页面的侧边栏内容

表单控件：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表)进行读取和修改数据。）

<audio> 标签定义声音，比如音乐或其他音频流。
<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

(6),移除元素

1）显现层元素：basefont，big，center，font，s，strike，tt，u

2）性能较差元素：frame，frameset，noframes

(7),HTML5中的Datalist元素有助于提供文本框自动完成特性。

(8),HTML5中的输出元素

当你需要计算两个输入的和值到一个标签中的时候你需要输出元素。显示a+b

 <form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">

 <input name="a" type="number"> +

 <input name="b" type="number"> =

 <output name="o" />

 </form>

 <output name="o" for="a b"></output>

(8),HTML5的form关闭自动完成功能

给不想要提示的 form 或某个 input 设置为 autocomplete=off。

6,title与h1的区别、b与strong的区别、i与em的区别

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。
i内容展示为斜体，em表示强调的文本；

7,Label的作用

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

 <label for="Name">Number:</label>

 <input type=“tex e" id="Name"/>

 <label>Date:<input type="text" name="B"/></label>

三,其他总结

1,避免 FOUC

(1),什么是FOUC

FOUC - Flash Of Unstyled Content 文档样式闪烁

(2),产生FOUC的原因

(3),解决办法

在<head>之间加入一个<link>或者<script>元素就可以了。

2,常见的浏览器内核

(1),Trident内核 css前缀为"-ms-"

IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

(2),Gecko内核 css前缀为"-moz-"

Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

(3),Presto内核 css前缀为"-o-"

Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

(4),Webkit内核 css前缀为"-webkit-"

Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

3,网页验证码作用

(1),区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；

(2),有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

3,处理兼容问题有两种方式

(1),IE6/IE7/IE8支持通过document.createElement方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式；

(2),使用是html5shim框架

 <!--[if lt IE 9]>

 <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

 <![endif]-->

DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构元素header等，功能元素audio等来加以区分

4, HTML 和 HTML5的区别

(1),在文档类型声明上不同

HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。

(2),在结构语义上不同

HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>

4, HTML与XHTML的区别

所有的标记都必须要有一个相应的结束标记
所有标签的元素和属性的名字都必须使用小写
所有的XML标记都必须合理嵌套
所有的属性必须用引号""括起来
把所有<和&特殊符号用编码表示
给所有属性赋一个值
不要在注释内容中使“--”
图片必须有说明文字

5, 标准模式与兼容模式的区别

(1),<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

(2),标准模式（严格模式）的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式（在混杂模式中）中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

5, HTML5的优点与缺点

(1),优点

a、网络标准统一、HTML5本身是由W3C推荐出来的。

b、多设备、跨平台

c、即时更新。

d、提高可用性和改进用户的友好体验；

e、有几个新的标签，这将有助于开发人员定义重要的内容；

f、可以给站点带来更多的多媒体元素(视频和音频)；

g、可以很好的替代Flash和Silverlight；

h、涉及到网站的抓取和索引的时候，对于SEO很友好；

i、被大量应用于移动应用程序和游戏。

(2),缺点

a、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。

b、完善性：许多特性各浏览器的支持程度也不一样。

c、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战

d、性能：某些平台上的引擎问题导致HTML5性能低下。

e、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。