HTML小记

1.HTML、XML、XHTML 有什么区别

HTML——超文本标记语言，是语法较为松散的、不严格的Web语言
HTML 被设计用来显示数据，其焦点是数据的外观，旨在显示信息
XML——可扩展标记语言，主要用于存储数据和结构参考
XML 不是 HTML 的替代，是HTML的补充，被设计为传输和存储数据，其焦点是数据的内容；
XML 不会做任何事情。XML 被设计用来结构化、存储以及传输信息。

下面是 John 写给 George 的便签，存储为 XML：
```
George
John
Reminder
Don't forget the meeting!
```
上面的这条便签具有自我描述性。它拥有标题以及留言，同时包含了发送者和接受者的信息。
但是，这个 XML 文档仍然没有做任何事情。它仅仅是包装在 XML 标签中的纯粹的信息。我们需要编写软件或者程序，才能传送、接收和显示出这个文档。
以上引用自w3school_XML 简介
XHTML——可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格参考
XHTML，是更严格更纯净的 HTML 版本，是作为一种 XML 应用被重新定义的 HTML，其目的是取代HTML；
以上引用自w3school_XHTML 简介

2. HTML 语义化

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

3.内容与样式分离的原则

当一个网页呈现在面前时，是结构，样式，行为这三部分共同作用的结果。
结构，HTML决定了网页要展示的内容；
样式，CSS确定了网页的外观风格；
行为，JS保证了网页的交互效果。

我们一再强调的内容与样式分离，主要是针对之前在HTML标签中混杂着样式和行为的使用方法而言；
理想的状态，网页源代码由三部分组成：.html文件、.css文件和.js文件；或者妥协一点，样式和行为放在html文件中，也要将样式和行为从标签中分离出来，分成各自的区域实现；

通过结构，样式，行为分离，可以让这三部分代码各司其职，不仅保证了各自部分代码的清晰简洁，同时也有利用代码的维护和复用，提高页面加载、被搜索、以及修改时的效率
参考:
1.2 Web标准—结构、样式和行为的分离
怎样理解结构与样式的彻底分离

4.常见的meta标签

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。
必须的属性

属性	值	描述
content	some_text	定义与 http-equiv 或 name 属性相关的元信息

可选的属性

属性	值	描述
http-equiv	content-type expires refresh set-cookie	定义与 http-equiv 或 name 属性相关的元信息
name	author description keywords generator revised others	把 content 属性关联到一个名称
scheme	some_text	定义用于翻译 content 属性值的格式。

引自HTML 标签

常用meta举例说明：

通知浏览器用编码方式，页面代码保存时，也要注意编码格式的选择
X-UA-Compatible是IE8的一个专有属性，它告诉IE8采用何种IE版本去渲染网页，在html的标签中使用
content="IE=edge"，告诉 IE 以最高级模式渲染文档；
content="chrome=1"，强制 IE 使用 Chrome Frame 渲染
content="IE=edge,chrome=1"，最佳兼容模式方案
引自< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />的意义
用于页面在移动端进行展示，使页面适合在移动端上展示
对搜索引擎的优化，可以通过keyword和description找到页面

5.文档声明

声明必须是 HTML 文档的第一行，位于标签之前。
声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，告知浏览器如何渲染页面
，声明使用HTML5编写

混杂模式：不加文档声明，让浏览器按照自己方式渲染；
标准模式：按照使用的HTML版本，加上对应声明，告知浏览器如何渲染

6.浏览器出现乱码原因

浏览器出现乱码的原因在于浏览器解析文件所用的编码方式与文件被保存时的编码方式不一致；
通常在编写HTML文件时，可利用meta来指定浏览器的解码方式，如
或者在浏览器的设置中对编码方式进行选择，保证解码方式与文件保存时的编码方式一致

7.各浏览器使用内核

Trident内核：
又称为IE内核，由微软开发，使用该内核的浏览器有：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8等。
Gecko内核：
Gecko是最流行的排版引擎之一，使用它的最著名浏览器有Firefox、Netscape6至9。
WebKit内核：
该内核特点在于源码结构清晰、渲染速度极快。缺点是对网页代码兼容性不高，主要代表作品有Safari和Google的浏览器Chrome。
Presto内核：
代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。

8.常见HTML标签

h1~h6

标题，按照数值增大，层级递减

段落，用于大段文字

链接，锚点，可作为跳转到其他页面或本页面指定位置使用；
例如：

a)  饥人谷.com
target设为_blank，点链接时会在新窗口打开，如果没有target设置，会在当前页面刷新打开
title是当鼠标悬停在链接上时，显示的文字，在不点击的情况下，了解链接指向

b)  xxx.com
写#，页面不会跳转和刷新

c)  xxx.com
当点击时，会跳转到当前页面id为about的内容上

d)  xxx.com
如果在网站上，/getCourse相当于根路径下

Src为图片地址，alt为对图片的说明文字，当图片展示不出来时，可显示这个文字，对于视力有障碍的人，可以说明图片内容，另外alt对于搜索引擎优化有作用，添加了图片说明，便于引擎查找
添加图片，只闭合标签，不需要加/
Div
块，用于给页面划分区块，使结构清晰

...

...

...

Id给元素唯一的标识，class是给一类元素划分
ul li
ul: unsort list 无序列表，用于表示并列的内容
ul的直接子元素是li，可以嵌套
ol li
ol: order list 有序序列表用于表示带步骤或者编号的并列内容
ol的直接子元素只能是li，可以嵌套
dl dt dd
用于展示一系列 “标题:内容... ”的场景


  商品名称:
  青花瓷
  特征:
  白色
  圆口
  商品介绍
  这是一个年代久远的瓷器，很贵，易碎

效果如下：

商品名称:: 青花瓷
特征:: 白色; 圆口
商品介绍: 这是一个年代久远的瓷器，很贵，易碎

button 按钮

em strong span
em强调，效果为斜体
strong强调效果更强，效果为加粗
span标签，可以标注一些行内元素，进行包裹，用于添加样式
iframe
用于嵌入一个页面注意跨域操作问题


W3Cschool.cc

这里target指向了myPage，所以点击链接时，会在iframe里打开链接
可以用iframe来复用图表之类
跨域问题：如果iframe中引用的页面地址，与当前的域名是同样的域名，是同一个域名下，不同页面，那可以用JS获取到iframe中的元素进行操作，如果域名不同，那只能展示，不能操作

table
table用于表格，不能用于布局
thead tbody tfoot可省略，浏览器会自动添加
border-collapse: collapse;用于合并边框

     ——th是表头
                      ——tr是行
         ——td是列
      
  
    
      姓名 年纪
    
  
  
    小明 18
    
    
      小花
      20

姓名	年纪
小明	18
小花	20

html
页面的根节点，所有内容包含在html标签内
Html里面子节点只有head和body
举例：

告诉浏览器当前页面使用的语言是中文，zh代表中文
head
当前页面的头信息，和内容展示无关，一般包含meta，title，引入样式表css
title

内容显示在页面顶端
body

元素中所有内容都会显示在浏览器窗口中