关于HTML的几个问题

• HTML、XML、XHTML 有什么区别

HTML，超文本标记语言，是语法较为松散的、不严格的web语言；
XML，可扩展标记语言，主要用于存储数据和结构参考；
XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格参考。

• 怎样理解 HTML 语义化

语义化的含义

语义化HTML是一种编写HTML的方式。
“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。
　　HTML 标签语义化是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。很明显

系列看起来很像标题,因为拥有粗体和a较大的字，,用来区别于其他文字，起到了强调的作用。

怎样语义化

写语义化的 HTML 结构其实很简单，首先掌握 HTML 中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。例如：

• ~

  ，作为标题使用，并且依据重要性递减，

  是最高的等级；

• 尽可能少的使用无语义的标签div和span；
• 、， 是用作强调， 是用作重点强调；
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td。

语义化的好处

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:增强可读性；
• 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
  有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
• 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

• 怎样理解内容与样式分离的原则

内容与样式分离的原则

一个网页包含内容（HTML）样式（CSS），在 Web 开发中，所谓内容与样式分离，就是让内容的归 HTML, 样式归 CSS, 不要混着用。

• 写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能体现页面结构或者内容。之后再去写CSS样式。
• 写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化。
• HTML内不允许出现属性样式，尽量不要出现行内样式。

好处

• 由于大部分代码写在CSS中,浏览器加载速度变快。
• 代码会得到精简和重用，后期的维护会变得非常简单，样式的变换只需要在CSS中修改即可。
• 整套文档就变得清晰易读、易维护。

• 有哪些常见的meta标签

meta标签主要有两个属性，分别是name属性和http-equiv属性。其中content主要用来定义与name属性和http-equiv属性相关的信息。

属性	值	描述
name	author/keywords/description/viewport	把content属性关联到一个名称
http-equiv	content-type/refresh/expire/set-cookie	把content属性关联到HTTP头部

一、name属性

标注网页作者
页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。
页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签

viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。

• width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
• height：高度（数值 / device-height）（范围从223 到10,000）
• initial-scale：初始的缩放比例 （范围从>0 到10）
• minimum-scale：允许用户缩放到的最小比例
• maximum-scale：允许用户缩放到的最大比例
• user-scalable：用户是否可以手动缩 (no,yes)
• minimal-ui：可以在页面加载时最小化上下状态栏。（已弃用）

二、 http-equiv属性

refresh:自动刷新并指向新页面,这里指在当前页面停留2秒后，跳到百度。
expires:设定网页的过期时间,必须使用GMT的时间格式。
set-cookie:如果网页过期，那么自动删除本地cookie

X-UA-Compatible:IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题.　
优先使用 IE 最新版本和 Chrome
使用IE8
使用IE10

• 文档声明的作用?严格模式和混杂模式指什么? 的作用?

文档声明的作用

文档声明是为了告诉浏览器，你的 HTML 文档是用的什么版本的 HTML 来写的，这样浏览器才能按照你声明的版本来正确的解析你的 HTML 文档。

严格模式和混杂模式

• 严格模式（推荐）现在也称为标准模式，在该模式下，浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。
• 混杂模式（不推荐）,又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码.它的由来是一个历史问题。在互联网早期，网页一般写成两个版本：一个写给网景公司的 Navigator浏览器，一个写给微软公司的IE浏览器。当W3C制定了 Web 标准后，这两个浏览器不能马上开始按标准来解析渲染页面，因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式，在该模式下，浏览器会模拟Navigator 4和IE5的非标准行为来解析渲染页面，这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。

的作用

的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们要避免的

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

• 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的,例如：你的编辑器默认的保存格式是gbk2312，然后浏览器在打开文件时按照它默认的utf-8的格式打开，编码和解码的格式不一致，才会导致乱码
• 解决办法：清楚编辑器的默认编码方式。如果你的文件是保存为utf-8格式，那么一定要在html 的 里添加。

• 常见的浏览器有哪些，什么内核

浏览器	内核
IE、Maxthon、TT、The World等	Trident
Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey	Gecko
Opera7及以上版本	Presto
Safari、Chrome	Webkit

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

• h1-h6 定义标题
• p 定义一段文字
• ul li 无序列表
• ol li 有序列表
• div 块级元素 盒子模型，用于页面分块
• span 行内元素
• dl dd dt 用于展示一系列“标题：内容”的场景
• img 用于插入图片
• a 超链接
• strong 加粗 语义强
• em 斜体
• del 删除线