一、HTML、XML、XHTML 的区别
HTML
- HyperText Markup Language，超文本标记语言
- 浏览器可以读取，并将其渲染成可视化网页
- 包含HTML标签和纯文本
- 语法松散不严格
XML
- EXtensible Markup Language，可扩展标记语言
- 作为传输数据，而非显示数据
- 需要自行定义标签
- 具有自我描述性
XHTML
- 可扩展超文本语言
- 是HTML与XML的结合，包含了所有与XML语法结合的HTML4.01元素
- 语法严格
二、理解 HTML 语义化
- 标签名自带特定含义，（如
<section></section> <artical></artical>），更容易理解 - 有利于SEO，帮助爬虫获取更多有效信息（爬虫是依赖于标签来确定上下文和各个关键字的权重）
- 方便其他设备的解析
- 便于开发维护
三、内容与样式分离的原则
内容放在html，样式放在css，html内不允许出现属性样式，尽量不出现行内样式，使文档清洗易读，易维护
四、常见的meta标签
meta标签提供关于HTML文档的元数据，用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键字），或其他WEB服务
SEO优化
- 页面关键字
不超过874个字
<meta name='keywords' content='your tags' />
- 页面描述
不超过150个字
<meta name='keywords' content='your tags' />
- 搜索引擎索引方式
robotterms是一组使用逗号分隔的值
<meta name='robots' content='index,follow' />
<!--
all: 文件将被检索，且页面上连接可以查询
none: 文件将不被检索，且页面上连接不可以被查询
index: 文件将被检索
follow: 页面上的连接可以被查询
noindex: 文件将不被检索
nofollow: 页面上的连接不可以被查询
-->
- 页面重定向和刷新
content内的数字代表时间（秒），即多久后刷新。如果加url则会重定向到指定网页
<meta http-equiv='refresh' content='0;url=' />
- 其他
<meta name='author' content='author name' />
<meta name='google' content='index,follow' />
<meta name='verify' content='index,follow' />
移动设备
- viewport
优化移动浏览器的显示。如果不是响应式网站，不要使用initil-scale或者禁用缩放。大部分4.7-5寸宽为360px，5.5存为400px，iphone6为375px，iphone6 plus为414px
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum=1.0, user-scalable=no' />
<!--
width: 宽度（数值/device-width），范围200-10000，默认980px
height: 高度（数值/device-height），范围223-10000
initial-scale: 初始的缩放比例0-10
minimum-scale: 允许用户缩放的最小比例
maximum-scale: 允许用户缩放的最大比例
user-scalable: 用户是否可以手动缩
-->
- webApp全屏模式：伪装app，离线应用
<meta name='apple-mobile-web-app-capable' content='yes' />
- 忽略数字自动识别为电话号码
<meta name='format-detection' content='telephone' />
- 忽略识别邮箱
<meta name='format-detection' content='email=no' />
- 其他
<meta name='screen-orientation' content='portrait' />
<!-- qq强制竖屏 -->
<meta name='full-screen' content='yes' />
<!-- qq强制全屏 -->
网页相关
- 编码格式
<meta charset='utf-8' />
- 优先使用ie最新版和chrome
<meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1' />
- 浏览器内核控制：国内浏览器多是双内核（webkit和trident）
<meta name='renderer' content='webit|ie-comp|ie-stand' />
五、文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
文档声明的作用：告诉浏览器html文件的版本，以何种方式渲染
严格模式：标准模式，统一方式渲染页面；
混杂模式：允许浏览器用自己的方式渲染页面
<!doctype html>的作用：告诉浏览器用html5的方式渲染
六、浏览器乱码的原因是什么？如何解决
页面编码方式出错，出现了英文以外的字符不能正确显示。设置<meta charset='utf-8'>
七、常见的浏览器有哪些，什么内核
| 浏览器 | 内核 |
|---|---|
| IE, Maxthon, TT | Trident |
| Firefox | Geckos |
| Opera | Presto |
| Safari, Chrome | Webkit |
| Chrome28+, Opera15+ | Blink |
八、列出常见的标签，并简单介绍这些标签用在什么场景
- h1-h6 标题
<h1></h1> - p 段落。大段文字
<p></p> - a 链接。跳转到其他地址
<a href='http://www.baidu.com' target='_blank' title='百度'>百度一下</a>
<a href='#about'>关于</a>
<a href='/getCourse'>课程</a>
- img 图片。自闭合
<img src='' alt=''> - div 块
<div></div> - ul,li 无序列表
<ul>
<li></li><li></li>
</ul>
- ol,li 有序列表表
<ol>
<li></li><li></li>
</ol>
- dl,dt,dd|定义描述。标题，内容
<dl>
<dt><dt>
<dd></dd>
<dd></dd>
</dl>
- button 按钮
<button></button> - em 强调的内容,斜体
<em></em> - strong 重要强调
<strong></strong> - iframe 嵌入页面。要注意跨域
<iframe></iframe>
- table 用于展示表格，不能用来做布局
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
- i 斜体。表示和正文不同的文本，例如专业术语，外语短语或排版文字
<i></i> - mark 高亮文本
<mark></mark> - section 文档的一个区域
<section></section> - artical 文档，页面，应用或网站中的独立结构，可能是帖子，新闻，博客，评论，交互式组件
<artical></artical>
网友评论