HTML知识点
2017-07-18 本文已影响0人
饥人谷_Peggy
HTML、XML、XHTML的区别
- HTML(HyperText Markup Language)超文本标记语言：是语法较为松散的、不严格的Web语言。
- XML (eXtensible Markup Language)可扩展标记语言:主要用于存储数据和结构参考。
- XHTML (eXtensible HyperText Markup Language)可扩展超文本标记语言:基于XML，作用与HTML类似，但语法更严格参考。
HTML语义化
选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好地解析。
内容与样式分离原则
我的理解是：
- HTML写结构，CSS写样式，JavaScript写事件动画等各种交互事件，三者相互分离，尽量不要把样式或者事件写到HTML里去，便于后期维护修改。
- 写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化。
meta标签
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
常见<meta>标签
- 告诉浏览器解码方式：
<meta charset="UTF-8">
- IE=edge告诉浏览器若是IE内核使用IE=edge最新的引擎渲染网页，chrome=1则可以激活Chrome Frame，采用谷歌浏览器内核去渲染页面：
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
- 告诉爬虫、搜索引擎关键字，你快来找我：
<meta name="keywords" content="前端学习">
<meta name="description" content="前端学习网站">
//搜索引擎：好的好的，我知道你是谁了。
- 告诉手机移动端页面正常的显示页面，别缩放啦，啥年代啦:
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1">
文档声明
DOCTYPE是用来声明文档类型和DTD（document type definition，文档类型定义）规范的，一个主要的用途便是文件的合法性验证。 如果文件代码不合法，那么浏览器解析时便会出一些差错。 。
文档声明的作用就在于告诉浏览器你是用什么类型的文档，然后浏览器就能按照你的文档类型进行解析，不然浏览器就会用混杂模式解析文档，不同的浏览器显示的效果都不太一样。
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
严格模式和混杂模式
- 严格模式即标准模式，是指浏览器按照 W3C 标准解析代码。
- 混杂模式又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
但是HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
关于浏览器乱码
浏览器乱码的原因很可能是在<meta>里没有指定编码方式，或者编码方式指定错误，浏览器就解析时就会乱码。一般都以"UTF-8"方式编码。
常见浏览器内核
- Trident：IE内核
- Webkit：chrome、safari内核
- Gecko：firefox内核
- 关于移动端：大多都是Webkit内核
常见标签
- h1~h6
- h1代表页面最大的标题
- h2二级标题
- h3... 更弱的标题
- p 段落，表示大段文字
- a 链接，链到一个地址
- img 展示一张图片
- div 语义为“一大块”，用于给页面划分区块，让结构更清晰
- ul li 无序列表
- ol li有序列表
- button 按钮
- iframe 用于嵌入一个页面 注意跨域操作问题
- table 用于展示表格，不要用来做布局 thead tbody tfoot可省略，浏览器会自动添加 border-collapse: collapse;用于合并边框
