1. DOCTYPE 有什么作用？怎么写？
1.它不是html标签，没有结束标签，是一种标记语言的文档类型声明，即告诉浏览器当前
的html使用什么版本编写的，DOCTYPE的声明必须是HTML文档的第一行，位于html
标签之前，
2.DOCTYPE可声明三种DTD类型:严格，过渡以及框架集的HTML文档
3.标准模式(CSS1Compat)：浏览器使用W3C标准解析渲染页面，在标准模式中，浏览器以其支持的最高标准呈现页面
怪异模式(BackCompat):浏览器使用自己的怪异模式渲染页面，在怪异模式中，页面以一种比较宽松的向后兼容的方式显示
怪异模式通常模拟老式浏览器的行为以防止老站点无法工作
4.如果页面没有DOCTYPE声明那么默认就是怪异模式，浏览器按照自己的方式解析渲染页面，不同的浏览器就会显示不同的样式
DTD(Document Type Definition)是文档类型定义，是一套为了进行程序间的数据交换而建立的关于标记符的语法规则
2.列出常见的标签，并简单介绍这些标签用在什么场景
<a> 用于超链接。<a href="">some text</a>
<article> 用于一篇文章。<article>a self-contained article</article>
<aside> 用于页面的侧边栏。<aside>some content</aside>
<blockquote> 用于大段的引用内容。<blockquote>some big texts</blockquote>
<body> 页面上显示的所有内容都被包含在<body></body>里
<br> 用于显示一个换行
<button> 用于显示一个按钮
<code> 用于一包裹一段代码内容
<dd> 用于一个dl列表的某个dt名词的描述
<del> 用于删除一些不需要的文字
<div> 用于包裹住一些其他的标签，制造一个容器
<dl> 用于制作一个名词和对应解释的列表
<dt> 用于一个dl列表的某个dt名词
<em> 用于强调一些文本内容
<figcaption> 用于一张图表的说明文字
<figure> 用于一张图表
<footer> 用于包裹页面的底部内容
<form> 用于制作一个表单
<h1>-<h6> 用于标记标题，从h1到h6重要性依次递减
<head> 用于包裹页面的元数据，如<meta>, <link>, <title>等
<header> 用于包裹页面的头部内容
<hr> 用于制造出一条分隔线
<html> 整个 HTML 文档的根元素，包裹住其他所有的元素
<iframe> 用于嵌入另一个小页面到一个页面中
<img> 用于显示一张图片
<input> 用于显示一个表格输入控件
<label> 用于给一个表格输入控件打上一个标签，说明输入控件的作用
<li> 用于<ul>和<ol>标签，代表一个列表项
<link> 用于链接外部CSS文件
<mark> 用于高亮显示某些文本
<meta> 用于下达一些元数据指令，或者对页面进行说明
<nav> 用于包裹住一个导航条的内容
<ol> 用于制作一个有序列表
<p> 用于显示一个段落
<q> 用于一小段引用文字
<script> 用于一段JavaScript脚本代码，或者引入一个外部JavaScript脚本文件
<section> 用于包裹一部分有逻辑关第的页面内容
<select> 用于制作一个下拉列表选框
<span> 用于包裹住一小段文字，作为一个容器
<strong> 用于着重强调重要的文本内容
<style> 用于给页面元素加上样式
<sub> 用于下标文本
<sup> 用于上标文本
<table> 用于制作一个表格
<tbody> 用于表格里的主体部分
<td> 用于表格里的某一个单元格
<textarea> 用于制作一大块文本输入框
<tfoot> 用于表格里的底部
<th> 用于表格里的表头的单元格
<thead> 用于表格里的表头
<time> 用于页面内容中的时间
<title> 用于显示整个页面的标题（显示在浏览器的tab上）
<tr> 用于标记表格里的一行
<ul> 用于制作一个无序列表
3. 页面出现了乱码，是怎么回事？如何解决？
原因：网页开发者没有按照规范来设置网页编码，浏览器这是自动按照默认的编码来打开导致的，
解决方法：把文件保存成utf-8的编码，
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
4. title 属性和 alt 属性分别有什么作用？
alt是img标签的属性，当图片加载出错，无法显示图像时，显示的替代文本，
title属性适用于所有标签，规定关于元素的额外信息，通常鼠标移到元素上，是显示一段提示文本
alt属性是搜索引擎唯一能识别的图片信息，因此alt属性应与图片主题内容相关在优化网站时，尽可能利用alt属性阐述图片的主题内容，
该图片属性作用也不仅仅告诉搜索引擎图片的主要信息，另外在图片出现加载失败时，还能够让访客理解图片所阐述的内容！
alt标签在html语言中的写法是这样的：< img src=“图片路径” alt=“图片描述”/>图片描述最好是用简短的语句，描述这张图片的内容，如果是链接，则描述链接的作用，并带上关键词。
5. HTML 的注释怎样写？
<!-- html注释内容 -->
6. HTML5 为什么只写 <!DOCTYPE html>？
html5不基于SGML，因此不需要对DTD进行引用，
但是需要doctype来规范浏览器的行为(让浏览器按照他们应该的方式来运行),
而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
SGML：标准通用标记语言，
DTD：文档类型定义
7. data- 属性的作用？
他是自定义属性，用于存储页面或应用程序的私有自定义数据，然后可以用js取出数据
8.<img> 的 title 和 alt 有什么区别？
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的,本意是用于图像不显示替换图像。
title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title,title属性的优先级高于alt
9.Web 标准以及 W3C 标准是什么？
web标准可以分为结构，表现和行为
结构:主要有html标签组成
表现:指css样式表
行为:主要有js，dom组成
web:标准一般是将三部分独立分开，使其更具有模块化。
w3c标准：
1.标签属性名要小写
2.标签要闭合
3.标签不允许随意嵌套
4.尽量使用外联css样式表，让结构，表现，行为分为三块，提高页面渲染速度，提高用户体验
5.样式尽量少用行间样式表，式结构与表现分离
6.标签的id和class等属性命名要见闻知义，更seo，代码便于维护
10.严格模式与混杂模式如何区分？它们有何意义？
严格模式又称标准模式，是指浏览器按照w3c标准解析代码
混杂模式:又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码
如何区分：
1.如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。**（严格 DTD ——严格模式）**
2.包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
3.DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现
4.HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。
11.HTML 全局属性（Global Attribute）有哪些？
accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素
class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素
data-*: 为元素增加自定义属性
id: 元素id，文档内唯一
lang: 元素内容的语言
hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
style: 行内css样式
title: 元素相关的建议信息
contenteditable: 指定元素内容是否可编辑
contextmenu: 自定义鼠标右键弹出菜单内容
dir: 设置元素文本方向
tabindex: 设置元素可以获得焦点，通过tab可以导航
translate: 元素和子孙节点内容是否需要本地化
dropzone: 设置元素拖放类型： copy, move, link
draggable: 设置元素是否可拖拽
12. meta 有哪些常见的值, meta viewport 是做什么用的，怎么写？？
1.charset：charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，
值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。
2.viewport:viewport主要是影响移动端页面布局的
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
content 参数：
width： viewport 宽度(数值/device-width)
height： viewport 高度(数值/device-height)
initial-scale： 初始缩放比例
maximum-scale： 最大缩放比例
minimum-scale： 最小缩放比例
user-scalable： 是否允许用户缩放(yes/no)
-->
百度会自动对网页进行转码，这个标签是禁止百度的自动转码
<meta http-equiv=“Cache-Control” content=“no-siteapp” />
13.如何在 HTML 页面上展示这几个字符？
用转义符号,<代替<, >代替>
<div> </div>
14你是如何理解 HTML 语义化的？
1.用正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析
2.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
15前端需要注意哪些 SEO?
1.合理的title，description，keyswords ,搜索引擎对这三项的权重逐个减小，
title 值强调重点即可，重要的关键词出现不要超过两次，而且要靠前
2.不同页面的tilte要有所不同,description有所不同；desctipyion长度要合适，不能堆叠关键字，keyswords列举出重要的关键词
3.语义化的HTML代码，符合W3C 规范
4.重要的内容HTML代码放在前面
5.重要的内容不要用js输出
6.非装饰的图片必须加alt
7.提高网站速度
16.POST 和 GET 方式提交数据有什么区别？
1.get参数显示在浏览器地址栏中，post参数不会显示在浏览器地址栏中
2.使用post提交的页面再点击刷新按钮是，浏览器一般会提示是否重新提交
3.get页面可以被搜索引擎抓取，而post则不可以
4.用post可以提交的数据量非常大，而get可以提交的数据量则非常小，
受限于网页地址的长度
5.用post可以进行文件的提交，get则不可以
6.get产生一个TCP数据包，POST产生两个TCP数据包,并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次
7.对于get方式的请求，浏览器会把http header和data一并发送出去，服务器响应200(返回数据)
对于post，浏览器先发送header，服务器响应100，continue，浏览器在发送data，服务器响应200(返回数据);
17. 在 input 里，name 有什么作用？
1.作为可与服务器交互数据的html元素的服务器端的标示，我们可以
在服务器端根据其name取得元素提交的值
2.在Input标签的属性 type='radio'分组，就是根据相同的Name属性来实现的
