块级元素、行内元素、内联元素的特点
块级元素：block element
① 独占一行；支持所有样式
② 不设置宽高时宽度为父元素宽度
③ 换行符不解析
④ margin和padding的上下左右均对其有效
典型元素有：div，ul，ol，dl，li，p，h1~h6，table，form，pre（用源代码的效果呈现内容）
行内元素：inline element
① 设置宽高无效
② margin和padding上下无效，左右有效
③ 宽度由内容撑开
④ 不会自动进行换行，会在同一行显示
⑤ 换行符会被解析
典型元素有：span，a，strong，em，i，img，input
3、内联块级元素：inline-block element
① 不自动换行
② 能够识别宽高；
常见的元素的特点属性：href、src的区别，alt和title的区别
href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：
<link href="reset.css" rel=”stylesheet“/>
浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。
src是source的缩写，指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如:
<script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部的原因。
alt是html标签的属性，而title既是html标签，又是html属性。title标签这个不用多说，网页的标题就是写在<title></title>这对标签之内的。title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。而alt属性则是用来指定替换文字，只能用在img、area（带有可点击区域的图像映射）和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
HTML语义化的优点
1、当失去样式时，页面结构清晰
2、便于团队的开发和维护
3、有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息
4、屏幕阅读器会完全根据你的标记来“读”你的网页
SEO的原理
SEO（Search Engine Optimization）：汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。
对于任何一家网站来说，要想在网站推广中取得成功，搜索引擎优化是最为关键的一项任务。同时，随着搜索引擎不断变换它们的排名算法规则，每次算法上的改变都可能会大幅度改变网站的排名，而排名不理想的后果就是失去了网站固有的访问量。
我们可以说，搜索引擎优化也成了一个愈来愈复杂的任务。
SEO 包括六个环节:
1、关键词分析（也叫关键词定位）
这是进行SEO 最重要的一环，关键词分析包括：关键词关注量分析、竞争对手分析、关键词与网站相关性分析、关键词布置、关键词排名预测。
2、网站架构分析
网站结构符合搜索引擎的爬虫喜好则有利于SEO。网站架构分析包括：剔除网站架构不良设计、实现树状目录结构、网站导航与链接优化。
3、网站目录和页面优化
SEO不止是让网站首页在搜索引擎有好的排名，更重要的是让网站的每个页面都带来流量。
4、内容发布和链接布置
搜索引擎喜欢有规律的网站内容更新，所以合理安排网站内容发布日程是SEO 的重要技巧之一。链接布置则把整个网站有机地串联起来，让搜索引擎明白每个网页的重要性和关键词，实施的参考是第一点的关键词布置。友情链接战役也是这个时候展开。
5、与搜索引擎对话
在搜索引擎看SEO 的效果，通过site:你的域名，知道站点的收录和更新情况。更好的实现与搜索引擎对话，建议采用Google 网站管理员工具。
6、网站流量分析
网站流量分析从SEO 结果上指导下一步的SEO 策略，同时对网站的用户体验优化也有指导意义。流量分析工具，建议采用Google 流量分析。
SEO是这六个环节循环进行的过程，只有不断的进行以上六个环节才能保证让你的站点在搜索引擎有良好的表现。
什么是爬虫、怎么去写一个爬虫
爬虫就是一种完成发送网络请求，接受返回数据然后分析文本，收集需要的数据的工具，从上面的作用就能知道写一个爬虫就需要发送网络的操作，接受返回数据的操作，分析文本的操作。
!Doctype的作用、严格模式和混杂模式的区别、以及如何触发两种模式
首先Doctype是document type的简写，意思为文档类型，用来声明你用的XHTML或者HTML是什么版本。确定了正确的Doctype，xhtml里面的标识和css才能正常生效(也就是说它会告诉浏览器怎么解释你的这个标签和你写的css)，一般放置在html网页代码最顶部，处于 <html> 标签之前。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//CN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果是html5版本的，就写成这样
<!DOCTYPE html>
xhtml 1.0中有3种dtd声明可以选择，过渡性的(Transitional)、严格的(Strict)、框架的(Frameset)。
1、过渡的：一种要求不很严格的，允许在html中使用html 4.01的标识(符合xhtml语法标准)，过渡的dtd写法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2、严格的：一种要求严格的dtd，不允许使用任何表现层的标识和属性，严格的dtd写法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3、框架的：一种专门针对框架页面所使用的dtd，当页面中含有框架元素时，就要采用这种dtd，写法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如< br/>；混杂模式是以一种向后兼容的方式去显示，通常模拟老式浏览器的行为，以防止老站点无法工作。浏览器根据doctype是否存在和使用的是那种dtd来决定触发哪种模式。
如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
区别：
① 在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right；
在混杂模式中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding-left + padding-right + border-left-width + border-right-width)
② 可以设置行内元素的高宽，在标准模式下，给span等行内元素设置wdith和height都不会生效，而在混杂模式下，则会生效。
③ 可设置百分比的高度：在严格模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
④ 用margin:0 auto设置水平居中在IE下会失效：使用margin:0 auto在严格模式下可以使元素水平居中，但在混杂模式下却会失效，混杂模式下的解决办法，用text-align属性
body{
text-align:center;
}
#content{
text-align:left;
}
⑤ 混杂模式下设置图片的padding会失效
⑥ 混杂模式下Table中的字体属性不能继承上层的设置
用JS判断浏览器当前的模式：
document.write(document.compatMode == "CSS1Compat" ? "当前处于标准模式" : "当前处于混杂模式");
网友评论