HTML入门知识小结

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

1. 三者基本特征

• HTML，超文本标记语言（Hyper Text Markup Language），是语法较为松散的、不严格的Web语言；
• XML，可扩展标记语言（Extensible Markup Language），主要用于存储数据和结构，可扩展；
• XHTML，可扩展超文本标记语言（Extensible Hyper Text Markup Language），基于XML，作用与HTML类似，但语法更严格。

2. HTML与XHTML区别

(1). xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：a、元素必须要有结束标签；b、元素必须嵌套；
(2). 对于html的元素和属性，xhtml必须小写，因为xml是严格区分大小写的，< li >和< LI >是不同的标签；
(3). xhtml的属性值必须在引号之中；
(4). xhtml不支持属性最小化;
　　正确:非最小化属性(unminimized attributes)
　　
　　不正确:最小化属性(minimized attributes)
　　
(5). 在xhtml中，name属性是不赞成使用的，在以后的版本中将被删除。

3. HTML与XML区别

(1). XML不是HTML的替代；
(2). XML和HTML为不同的目的而设置：XML被设计为传输和存储数据，其焦点是数据的内容；HTML被设计用来显示数据，其焦点是数据的外观；
(3). HTML旨在显示信息，而XML旨在传输信息。

二. 怎样理解HTML语义化

语义化是一种编写HTML的方式，就是让标签和其所包裹的内容的意思相吻合。编写代码时明显区分，标题是标题，段落是段落。方便做能带来三点好处：
(1). 机器理解代码,利于SEO；
(2). 代码更简洁，复用性更高；
(3). 访问性更好，对读屏器或者其他一些对CSS理解不好的浏览器很友好，语义化的HTML可以做到脱离CSS还能看。

三. 怎样理解内容与样式分离的原则

先看个简单的例子，QQ都用过，QQ面板的变更皮肤就是内容不变，外观表现样式在变化，这就是利用内容与样式分离的原则实现的。web页面要做到内容与样式分离，需注意以下两点：

• 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
• HTML 内不允许出现属性样式，尽量不要出现行内样式。

这样做的好处有：
1.数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关
2.保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版;
3.由于结构清晰，数据的集成、更新和处理更加方便灵活；
4.更有意义的搜索。

四. 有哪些常见的meta标签

meta元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

1. 基本语法。keywords标签作用是告诉搜索引擎网站的内容的是关于那些方面的内容,方便搜索引擎对网站的定义和索引.关键字和关键字之间使用英文输入法下的逗号隔开,关键字的长度一般不超过100个字符.
   
2. meta标签设定描述。网页的描述很重要,直接能够在搜索引擎中得到体现.
   
3. meta标签设定字符集。常见的编码格式有中文编码(gbk2312)和国际编码(UTF-8) ,gbk2312是中文编码,如果你的网站内容都是中文的就使用gbk2312 UTF-8是国际编码左右的文字通用(包括中文和英文). 它们的主要区别是gbk2312是专门为中文打造的,一个汉字占2个字符. UTF-8是通用的一个汉字占3个字节。
   我们在浏览网页的时候,大多数人都碰到过乱码的页面把. 编码格式是让浏览器以设定的编辑格式进行解析,如果编码格式不正确就会用出现乱码. 所以我建议使用通用的UTF-8编码,这样全球所有的浏览器访问我们的网页都能正常显示。
   
4. meta标签设定禁用缓存。我们知道浏览器都有个缓存机制,就是打开一个网页会自动保存在本地，这样做的目的在一定的时间内再次访问会直接调用缓存中的文件提高访问速度。 但是像论坛这种时时变化的页面我们不希望浏览器保存缓存文件可以加上这句代码。 在程序开发中还有一个用途，程序调试要时时查看代码修改后的效果可以使用此代码禁用浏览器缓存。
   

五. DOCTYPE声明

• DOCTYPE声明的作用
  DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。DOCTYPE声明的作用是指出阅读程序应该用什么规则集来解释文档中的标记。不正确的doctype声明经常导致网页不正确显示，或者导致它们根本不能显示。Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

• 严格模式和混杂模式
  当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式
  (1). 在标准模式中，浏览器以其支持的最高标准呈现页面；
  (2). 在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

• 触发机制
  (1). 浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
  (2). html5既然没有DTD，也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。

• 的作用
  是用来声明当前文档为html5的方法.

六. 浏览器乱码的原因及解决方法

页面编码方式与浏览器解码方式不匹配会导致浏览器乱码。在meta标签中指定charset为页面编码的方式，这样浏览器就能自动读取，从而采用正确的解码方式。

七. 常见的浏览器及其内核

• 常见的浏览器：
  IE、Chrome、Opera、Firefox、Safari、The World、360（安全、急速）、猎豹、百度
• 常见的内核有四种：

(1). Trident（对应浏览器IE、The World）
大部分人都简称为IE内核。是微软开发的一种排版引擎。

(2). Geckos（对应浏览器Firefox）
Gecko是套开放源代码的、以C++编写的网页排版引擎。这软件原本是由网景通讯公司开发的，Netcape6开始采用该内核。后来的 Mozilla FireFox也采用了该内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。Geckos 现在由Mozilla基金会维护。

(3). Presto（对应浏览器Opera）
Presto是一个由Opera Software开发的浏览器排版引擎，该内核在2003年的Opera7中首次被使用。

(4). Webkit（对应浏览器Safari、Chrome）
苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。

(5). 国内的双核浏览器Trident & WebKit(对应浏览器360、猎豹、搜狗、百度、遨游、QQ)
由于IE浏览器在国内的普及率非常高，所以造成了很多网上银行和支付系统只支持IE的Trident内核，其他浏览器访问根本无法进行正常支付和转账等业务。而WebKit内核的非IE浏览器以更高的性能和更好的用户体验拥有了越来越多的用户。于是双核浏览器应运而生。

八. 常见标签及使用场景

1. head标签
   下面在写标签可以用在head部分
   
   
   
   
   
   
   
   标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
2. body标签
   标签，网页上显示的内容放在这里.里面可以嵌入标题标签（h1~h6）、段落标签（p）、列表标签（ul/ol）等等。
3. h1~h6 标题标签
   hx标签用来制作网站上各栏目的标题。标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。
4. strong和em标签，加入强调语气
   如果想在一段话中特别强调某几个文字，这时候就可以用到em或strong标签。em 表示强调，strong表示更强烈的强调。并且在浏览器中em默认用斜体表示，strong 用粗体表示。

5. img标签
   img标签为网页插入图片，其语法如下：

   
   
   
   

   其中，
   src：标识图像的位置；
   alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
   title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)。

6. a标签
   使用a标签可实现超链接，链接到另一个页面。语法如下：
   链接显示的文本
   例如：
   click here!
   上面例子作用是单击链接显示的文本，网页链接到目标网址。title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。
   a标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开，则加上target=“-blank”，代码如下：
   click here!
7. ul/ol标签
   网页上的列表可以用这两个标签来完成，ul-li标签表示没有前后顺序的列表，ol-li表示有序列表。
8. div标签
   用于给页面分层，把一些独立的逻辑部分划分出来，放在一个div标签中，可以结构化页面。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为div提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
9. table标签
   用于在网页上制作表格。语法如下：
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   上列代码在网页中表形式如下;

   班级	学生数	平均成绩
   一班	30	89
   二班	35	85

   班级	学生数	平均成绩
   一班	30	89
   二班	35	85

   （注：table表格在没有添加css样式之前，在浏览器中显示是没有表格线的）
   创建表格的四个元素：table、tbody、tr、th、td
   (1).

   …：整个表格以标记开始、标记结束。
   (2). …：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
   (3). …：表格的一行，所以有几对tr 表格就有几行。
   (4). …：表格的一个单元格，一行中包含几对...，说明一行中就有几列。
   (5). …：表格的头部的一个单元格，表格表头。
   (6). 表格中列的个数，取决于一行中数据单元格的个数。