1. HTML、XML、XHTML 有什么区别
HTML被设计用来显示数据，焦点是数据的外观
XML被设计用来描述数据，焦点是数据的内容，并且标签没有自定义，全部需要自己定义
XHTML是居于可扩展标记语言的标记语言，也是HTML的一个子集，格式比HTML更加严谨
2. 怎样理解HTML的语义化
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
语义化的目的是
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构（为了裸奔时好看）
- 提升用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用
- 有利于SEO「Search Engine Optimization」：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
- 便于团队开发和维护，语义化更具可读性，是下一步网页设计的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
如何语义化
- 尽可能少的使用无语义的标签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上只应该设置内容与结构，不使设置具体样式
这样的做的好处是
- 利用CSS中的重用、组合、继承等特性减少样式的代码量，样式结构上非常清晰；
- 页面视觉有变动只需要修改相应的CSS文件，不用或者基本上不用改动html文档中的标签结构；
- 方便JavaScript脚本编写，比如用js控制标签的className来方便的、动态的改变元素的样式，而不是直接修改其具体样式
- 适合产品级、模块化的开发
- 提高可读性，方便后续维护、修改和替换
样式应该单独在CSS中设置，在html中引用
使用JavaScript的地方，同样应当如此
4. 有哪些常见的meta标签
meta的官方定义:
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
-
<meta charset="utf-8">
申明编码，避免网页内的汉字变成乱码 -
<meta name="Keyword" content="关键字">
描述网页关键字，用于搜索引擎搜索 -
<meta name="Description" content="网页内容">
不超过150字，且能准确描述网页内容的标签 -
<meta name="robots" content="index,flow">
robot terms是使用一组用","分开的值
1. all：文件将被检索，且页面上的链接可以被查询
2. none：文件将不被检索，且页面上的链接不可以被查询
3. index：文件将被检索
4. follow：页面上的链接可以被查询
5. noindex：文件将不被检索
6. nofollow：页面上的链接不可以被查询
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
根据不同设备，以及窗口大小调整内容 -
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
选择浏览器内核，优先选择chrome内核，如果不支持，则优先选择edge版的IE内核
5. 文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
-
web中有许多的文档类型，就算是html，也有不同的版本，所以需要文档开头说明文档类型，让浏览器能正确显示文档
<!doctype html> 处于<html>标签之前，告知浏览器以何种形式渲染文档 -
严格排版模式会使浏览器用支持的最高web标准来解析页面，是一种严格要求的DTD(Document Type Definition)不允许使用任何表现层的标识和属性
-
混杂模式是一种向后兼容的解析方法，通常模拟老式浏览器的行为，以防止老站点无法工作
6.浏览器乱码的原因是什么？如何解决
- 造成浏览器乱码的主要是由于，html源代码中的文字内容与html编码不同造成的
- 加入<meta charset>编码标签规定好编码可以避免此种原因造成的乱码
7.常见的浏览器有哪些，什么内核
Trident内核 ： IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核 ： Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核 ： Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核 ： Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
8.列出常见的标签，并简单介绍这些标签用在什么场景
<html> 开始标签
<head> 网页上的控制信息
<title> 页面标题 </title>
</head>
<body> 包括所有 页面显示的内容
<h1~6></h1~6> 页面标题，1~6重要程度依次递减
<p></p> 段落，前后若有其他，执行前后换行，并空开一行，保证自身是一个整体
<div></div> 层标签（默认占一行）
<span></span> 层标签（默认用多大空间占多大空间）
<ol> 有序列表
<li>内容</li>
<li>内容</li>
</ol>
<ul> 无序列表
<li>内容</li>
<li>内容</li>
</ul>
 图片标签，图片无法加载时会显示alt中文字
<a href="http://xxxx.com" target="_blank" title="xxx">xxx.com</a> 超链接
<dl> 用于展示一系列 “标题:内容... ”的场景
<dt>商品名称:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圆口</dd>
<dt>商品介绍</dt>
<dd>这是一个年代久远的瓷器，很贵，易碎</dd>
</dl>
<button>点我</button> 按钮
<iframe src="http://jirengu.com" name="myPage"></iframe> 嵌入页面
</body>
</html> 结束标签
网友评论