一、HTML语义化
（一）对语义化的理解（优点）
1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
(二)具体怎么使用（举例说明）
1.标题语义化：
hn：h1~h6分级标题，用于创建页面信息的层级关系。
2.图片语义化：
img标签的两个重要属性：alt title
- alt：用于图片描述，这个描述是给搜索引擎看的。并且当图片无法显示时，页面会显示alt中的文字
- title：用于图片描述，这个描述是给用户看得，当鼠标移动到图片上时，会显示title中的内容
对于img标签，一定要添加alt属性，以便搜索引擎识别图片的内容
请一定要注意：alt标签是img标签的必须属性，一定要添加，title是img标签的可选属性，可以添加也可以不添加
对于img标签，要在alt属性中添加必要的描述信息；
3.其他语义化：
- header：页眉通常包括网站标志、主导航、全站链接以及搜索框。
- nav：标记导航，仅对文档中重要的链接群使用。
- article：包含像报纸一样的内容= =||是这么理解的，表示文档、页面、应用或一个独立的容器。
- footer：页脚，只有当父级是body时，才是整个页面的页脚。
二、!DOCTYPE
(一)作用：
（1）、!DOCTYPE 声明位于文档中的最前面，处于 html标签之前。告知浏览器以何种模式来渲染文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
(二)、文档类型
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
- HTML 4.01 规定了三种文档类型：Strict（严格）、Transitional(过渡) 以及 Frameset（框架）。
- XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
三、XHTML和HTML的区别(共八条)
1.所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如和li而不一定写对应的
和/li来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。
2.所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，title和TITLE是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：BODY必须写成body 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字”onMouseOver”也必须修改成”onmouseover”。
3.所有的XML标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序， 就是说，一层一层的嵌套必须是严格对称。
4.所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。
5.把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
注：以上字符之间无空格。
6.给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<input type="checkbox" name="shirt" value="medium" checked>
必须修改为：
<input type="checkbox" name="shirt" value="medium" checked="checked">
7.不要在注释内容中使“--”
“–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:
<!--这里是注释-----------这里是注释-->
用等号或者空格替换内部的虚线。
<!--这里是注释============这里是注释-->
以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。
8.图片必须有说明文字
每个图片标签都必须有ALT说明文字。
<img src="ball.jpg" alt="large red ball" />
四、文本框禁止用户输入的方法
1.设置readonly属性为true。
<input type="text" value="readonly" readonly> 2.设置disabled属性为true。
<input type="text" value="disabled" disabled> 3.在对象focus时立刻让它blur，使它无法获得焦点。
<input type="text" value="οnfοcus=this.blur()" οnfοcus="this.blur()"> 几个特殊事件的应用
onfocus当对象获得焦点时触发。
focus使对象得到焦点。
onblur在对象失去输入焦点时触发。
blur模糊对象的内容以便使其看起来失去焦点。
disabled和readonly属性的区别
- 如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。
- 而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。
五、块状元素、内联元素和空元素
（一）块状元素
1.特点：
- 独占一行
- 默认情况下，其宽度自动填满其父元素宽度
- display属性为block
- 换行符不解析
2.具体元素
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
form – 交互表单
hn– 标题
hr – 水平分隔线
ol – 有序表单
p – 段落
table – 表格
ul – 无序列表
(二)内联（行内）元素
1.特点：
- 可以在一行显示
- 换行符会被解析
- 宽/高/内外边距不可设置，默认就是文字或者图片的高度和宽度
2.具体元素
a – 锚点
b – 粗体(不推荐)
br – 换行
em – 强调
i – 斜体
img – 图片
input – 输入框
span – 常用内联容器，定义文本内区块
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
(三)空元素
1.特点：没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
2.具体元素
br、meta、hr、link、input、img
（四）行内元素与块级元素有什么不同？
区别一：
块级：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
区别二：
块级：块级元素可以设置宽高
行内：行内元素不可以设置宽高
区别三：
块级：块级元素可以设置margin，padding
行内：行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
区别四：
块级：display:block;
行内：display:inline;
可以通过修改display属性来切换块级元素和行内元素
(五)display常见属性
display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
display:block;转换为块级元素。
display:inline;转换为行内元素。
display:inline-block;转换为行内块级元素。
六、Cookie和session localstorage sessionstorage的区别
Cookie和session的区别
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
6、session保存在服务器，客户端不知道其中的信息；cookie保存在客户端，服务器能够知道其中的信息。
7、session中保存的是对象，cookie中保存的是字符串。
8、session不能区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到。而cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是访问不到的。
cookies，sessionStorage 和 localStorage 的区别
相同点：都存储在客户端
不同点：
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
cookie在浏览器和服务器之间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
4.sessionStorage和localStorage有更丰富易用的接口
5..sessionStorage和localStorage有各自独立的存储空间
6.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
八、H5为何只写<!DOCTYPE HTML>
1.HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为，而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所用的文档类型。
2.文档类型定义是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。
