HTML知识点总结

作者: 饥人谷_兔子君 | 来源:发表于2017-05-17 14:43 被阅读0次

1. HTML、XML、XHTML 有什么区别：

HTML（Hypertext Markup Language）：超文本标记语言，语法较为松散、不严格的web语言，大小写混写且编码不规范；设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
XHTML（EXtensible HyperText Markup Language）：升级版的HTML，对HTML进行了规范，编码更加严谨纯洁，也是一种过渡语言，由HTML向XML过渡的语言；基本语言都还是沿用的HTML的标签，只不过废除了部分表现层的标签，同时在标准上要求高了点，比如标签的严格嵌套、标签结束等等。
XML（Extentsible Markup Language）：可扩展标记语言，是一种跨平台语言，主要用于存储数据和结构，编码更自由，可以自由创建标签；它没有标签集(tag set)，也没有语法规则(grammatical rule)，但是它有句法规则(syntax rule)。

三者区别：

(1) XML和HTML的区别：

XML是被设计用来描述数据的，重点是什么是数据，如何存放数据；HTML是被设计用来显示数据的；
两者实际上没有非常必然的关系，XML可以视为对HTML的补充；
与HTML相似，XML不进行任何操作。虽然XML标记可用于描述订单之类的项的结构，但它不包含可用于发送或处理该订单以及确保按该订单交货的任何代码，其他人必须编写代码来实际对XML格式的数据执行这些操作。与 HTML 不同，XML 标记由架构或文档的作者定义，并且是无限制的。HTML 标记则是预定义的;HTML 作者只能使用当前 HTML 标准所支持的标记；
与 HTML 不同，XML 标记由架构或文档的作者定义，并且是无限制的。HTML 标记则是预定义的;HTML 作者只能使用当前 HTML 标准所支持的标记；

(2) HTML和XHTML的区别：XHTML是HTML的升级版，更严谨有更多规范：

所有的标记都必须要有一个相应的结束标记。以前在HTML中，你可以打开许多标签。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它；
所有标签的元素和属性的名字都必须使用小写。与HTML不一样，XHTML对大小写是敏感的；
所有的XML标记都必须合理嵌套。同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序；
所有的属性必须用引号""括起来。在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号；
把所有<和&特殊符号用编码表示。任何小于号（<），不是标签的一部分，都必须被编码为& l t ；任何大于号（>），不是标签的一部分，都必须被编码为& g t ；任何与号（&），不是实体的一部分的，都必须被编码为& a m p；注：以上字符之间无空格；
给所有属性赋一个值。XHTML规定所有属性都必须有一个值，没有值的就重复本身；
不要在注释内容中使“--”。“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的：：用等号或者空格替换内部的虚线；
图片必须有说明文字。每个图片标签都必须有ALT说明文字；

2. 怎样理解 HTML 语义化：

定义：

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。HTML标签语义化是Web网页标准化的重要一环，也是标准制定时重要的设计原则。HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于这样的设计原则。

检验标准：

浏览器会对语义化的标签设计默认的样式，所以验证页面是否语义规范的一个简单方式就是去掉CSS样式后页面是否还能正常阅读。

为什么要语义化：

有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重；
语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构；
方便其他设备的解析；
便于团队开发和维护；

语义化应当注意什么：

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置；
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来；

3. 怎样理解内容与样式分离的原则：

定义：

写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能提现页面结构或者内容,，然后进行 css 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离），写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。

初级的开发人员思路及制作方法：div 层层嵌套；
中级的开发人员思路及制造方法：去掉多余的 div ,进行简化；
高级的开发人员思路及制造方法：最大化的简化 html 的结构，然后用 css 进行设置，减少 html 与 css 的契合度；

分离原则的优点：

浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小；
网页修改设计时，效率、省时：典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式；
更好地被搜索引擎收录；
css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式；

4. 有哪些常见的meta标签：

<meta charset="utf-8"> 指明页面保存的编码方式；
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 指明浏览器渲染方式；
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 适应移动端展示；
<meta name="keywords" content="前端饥人谷"> SEO搜索优化；
<meta name="description" content="最有爱的前端学习社区"> 是对一个网页概况的介绍；
<meta http-equiv="Refresh" content="n;url=http://yourlink"> 定时让网页在指定的时间n内，跳转到你的页面；
<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT"> 可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
<meta http-equiv="Pragma" content="no-cache"> 是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
<meta http-equiv="windows-Target" content="_top"> 强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

5. 文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

文档声明的作用：

DOCTYPE是docunment type（文档定义）的简写，用来说明web设计中所用的html或xhtml的类型，指出浏览器或者其他阅读程序按照什么样的规则去解释文档中的标记；

严格模式和混杂模式：

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码；
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码；

<!DOCTYPE>声明作用：

为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签；

6. 浏览器乱码的原因是什么？如何解决?

浏览器乱码原因：

文件保存的编码格式和浏览器解析时的解码格式不匹配；
乱码一般是英文以外的字符才会出现；

如何解决：

在文件保存的时候要清楚是用哪种编码方式保存的（sublime默认保存方式是utf-8，如果安装了插件也可另存为gbk，其它IDE可以做设置保存格式）。如果文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">

7. 常见的浏览器有哪些，什么内核?

Trident内核代表产品Internet Explorer，又称其为IE内核：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等；
Gecko内核代表作品Mozilla：Firefox、Netscape6至9；
WebKit内核代表作品Safari、Chromewebkit：Safari、Chrome；
Presto内核代表作品OperaPresto：Opera 7.0及以上；

8. 列出常见的标签，并简单介绍这些标签用在什么场景：

h1-h6：标题，h1代表页面最大最大的标题，以此类推；
p：段落，大段文字；标题里不能有段落，段落里不能有标题；
a：链接，到一个地址，href属性是必备属性，还有target，title（鼠标放上去后显示的文字，在不去点击的情况下知道要进入的网页）；href=#（锚点，页面不会跳转）；href=#about（跳转到id=about的内容上）；
img：展示图片，src是必备属性，还有alt属性（如果地址有问题，则显示该内容）；对于SEO有用，搜索引擎根据alt知道图片是什么，可以被搜索出来；自闭合标签；
div：给页面划分区域，让结构更清晰；header、content、footer，常见的标记：id（唯一）、class（类），既可以有id，也可以有class；
ul li：ul（unsort list）无序列表，用于表示并列的内容，ul的直接子元素是li，可以嵌套；
ol li：ol（order list）有序列表，用于展示带步骤或编号的并列内容，ol的直接子元素是li ，可以嵌套；
dl dt dd：用于展示一系列“标题：内容……”的场景；
button：按钮；
iframe：用于嵌入一个页面，注意跨域操作问题；name属性；加入iframe地址和当前域名不同，只能去展示它，而无法用js操纵；
table：用于展示表格，不要用来做布局；thead（tr行、th表头、td内容）、tbody、tfoot