一. 块级元素与行内元素的区别
块级元素
在标准文档流中
- 独占一行，宽度为浏览器的100%
- 支持所有样式，高度、行高、边距都可设置
- 可以容纳内联元素和其它块级元素
- 不设置时默认为父级为100%
- display：block；转化 内联块 inline-block
- 常见块级元素：div p ul ol(有序列表) dl(类似table) dt(标题) dd(默认内容会缩进) li h1-h6 table form pre(源代码呈现内容) hr(分割线)
行内元素
也称内联元素，在标准文档流中
- 可在一行显示
- 不支持宽高，水平方向边距可以设置，垂直不可以，但内边距在ie6只对左右起作用
- 和其他元素可放在一行
- 宽度由内容撑开
- display：inline； 转化 block
- 常见内联元素：span img strong em i a input
二. 常见元素的特点属性
url、href、src的区别
- url（Uniform Resource Locators）是统一资源定位符，是一个网页地址，web浏览器通过url向服务器来获取数据；
- href（Hypertext Reference）是超文本引用，用来建立当前元素和文档间的连接，在a、link标签使用；
- 浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。
- src（source） src是source的缩写，src的内容是页面必不可少的一部分，是引入src指向的内容会嵌入到文档中当前标签所在的位置，在img、script、iframe标签使用；
- 当浏览器解析到该元素时，会暂停浏览器的渲染，等待该资源加载完毕在继续执行。
附： 若将js放在头部，必须是使用src引入外部js文件，使用defer=“defer”属性，会先等待html文档加载完再执行js代码，但defer属性只能用于IE浏览器中。
alt、title区别
- alt：作为浏览器识别和爬虫的一串字符；图片属性，在图片不显示时的替代文本，用于img、input、textarea；在旧版本IE中，忽略了title属性，而使用alt属性作为提示文本，IE8以后不会有这种现象产生。
- title：标签属性：所有元素都可使用，起到补充说明和提示的效果，title属性优先级高于alt属性；HTML标签，标签内所写内容为浏览器的标题栏内容。
三. html语义化
定义
- HTML提供网页文档内容上下文结构和含义，是页面的骨架。
- html的很多标签都是有语义的，根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和维护的同时让浏览器的爬虫和机器更好的解析。
原因
- 为了在没有css的情况下可以很好的展示页面内容和代码结构
- 有利于SEO，和搜素引擎建立良好沟通，有利于爬虫抓取更多有用信息，爬虫依赖于标签来确定上下文和各个关键字的权重
- 有利于其他设备解析（屏幕阅读器、PDA、手机等对css的支持较低），使设备以一种有意义的凡是来渲染网页
- 便于团队开发和维护，减少差异化，提高开发效率，实现模块开发
注意事项
- 尽可能少的使用无语义的标签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关联起来。
四. SEO原理
定义
- seo（Search Engine Optimization）,即搜索引擎优化，利用关键字在搜索引擎使网站得到潜在客户的网络营销方式。
优化原理
- 有一位广州seo顾问：利用外链吸引用户，利用内容吸引用户，持续更新内容留住老用户，同时做好网站基础优化，提升用户体验，一切以用户为住。
- 具体过程f分为三步，网页搜索+ 参照SEO工作原理，讲得比较详细
- 抓取信息时公共部分，面包屑导航（来自童话故事， 汉塞尔和格莱特）
五. 爬虫
也称为网路蜘蛛，搜索引擎通过关键字，在互联网中解析响应，一方面从响应中查找出带有关键字的数据，另一方面通过响应找寻网页链接
- 从首先要访问的url（称为种子）的初始列表开始
- 在一个互联网访问不同网站的各个页面的互联网软件或机器人
- robots.txt 是爬虫在抓取你的网站时寻找的一种非常特殊的文件
怎么写一个爬虫（ python）
http://www.knowsky.com/971618.html
六. 文档模式
!Doctype的作用
<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。
严格模式和混杂模式的区别
浏览器会默认以严格模式的形式渲染页面,不同文档模式主要影响css内容的呈现，尤其是对盒模型的理解，某些情况也会影响javascript的解析。
- 严格模式，又称标准模式，是指按W3C来标准解析代码
- 混杂模式，又称怪异或兼容模式，是浏览器用自己的标准解析，并且向后兼容
如何触发两种模式
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
- 触发严格模式
<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- xhtml 1.0 严格型>
<1DCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Script//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 触发混杂模式
<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
3856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
