HTML相关知识点

1. HTML, XML, XHTML 有什么区别？

HTML (HyperText Markup Language), 直译过来即 超文本| 标记| 语言。

• Hyper Text “超文本”，就是指页面内可以包含图片、链接、音乐、程序等 非文字元素。
• Markup “标记” ，就是指用特定的标记符号要标记要显示的内容的各个部分，如标题。
• 超文本标记语言，是标准通用语言下的一种应用，也是一种规范、标准，被设计出来用来显示数据。
  是语法松散的，不严格的web语言
• HTML文本就是我们通常所说的网页，扩展名可以是html或者htm。

XML(Extensible Markup Language), 直译过来即 可扩展| 标记| 语言。

• XML是标准通用标记语言的子集，是一种用于标记电子文件使其 具有结构性的标记语言，它被设计用来传输和存储数据，是对超文本标记语言的补充。
• 它能够更精确地声明内容，方便跨越多种平台的更有意义的搜索结果。它提供了一种描述结构数据的格式，简化了网络中数据交换和表示，使得代码、数据和表示分离，并作为数据交换的标准格式，因此它常被称为智能数据文档，文件扩展名为xml。

XHTML(Extensible HyperText Markup Language), 直译过来即 可扩展| 超文本| 标记| 语言。

• XHTML 是基于可扩展标记语言(XML)，作用与HTML类似，但语法更严格。
• XHTML就是一个扮演着类似HTML的角色的可扩展标记语言（XML），所以XHTML结合了XML数据转化特性及大多数HTML 的简单特性。

总结

HTML、XML和XHTML都是标准通用标记语言的一个子集。HTML被设计用来显示数据，其焦点是数据的外观；XML被设计用来传输和存储数据，其焦点是数据的内容；XHTML是更严格更纯净的 HTML 版本，是作为一种 XML 应用被重新定义的 HTML，设计的目的是为了取代HTML以适应未来网络更多的需求。它们都可以用来开发网页，但就目前来看，网页开发中HTML还是占绝对的主流

2. 怎么理解HTML语义化

裸奔的时候也能理解网页的内容，就算是盲人也可以通过读屏器理解网页的内容。

• 什么是HTML语义化？

  根据内容的结构化（内容的语义化），选择合适的标签（代码语义化）便于开发者阅读，同时让游览器的爬虫和机器很好的解析。用正确的标签做正确的事情。

• 为什么要HTML语义化？

  为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

  用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

  有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

  方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页，就算是盲人也可以
  通过读屏器理解网页的内容；

  便于团队开发和维护，语义化更具可读性，遵循W3C标准，可以减少差异化。

• HTML语义化很重要，写代码的时候要注意什么？

  尽可能少的使用无语义的标签div和span；

  在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

  不要使用纯样式标签，如：b、font、u等，改用css设置；

  需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

  使用表格时，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

  每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

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

• 理解了HTML语义化，所以我们要内容与样式分离，整套文档就变得清晰易读、易维护！不管页面多么复杂，页面就是HTML， JS， CSS。

• 写HTML的时候先不管样式，终点放在结构和语义化上，让HTML能体现页面结构或者内容。之后再去写样式。尽可能少的使用无语义的标签，如div和span。

• 写JavaScript的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化。

• HTML内不允许出现属性样式，尽量不要出现行内样式。

4. 有哪些常见的meta标签

什么是meta标签？通常所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新，编码格式等。

常见的meta标签

• ， 声明编码格式。

• ，优先使用IE最新版本和Chrome(双核）。注解：http-equiv，超文本传输协议标题信息。

• ， 页面关键词（搜索引擎优化）。

• ， 页面描述内容（搜索引擎优化）。

• ， 搜索引擎索引方式。
  1. all：文件将被检索，且页面上的链接可以被查询；
  2. none：文件将不被检索，且页面上的链接不可以被查询；
  3. index：文件将被检索；
  4. follow：页面上的链接可以被查询；
  5. noindex：文件将不被检索；
  6. nofollow：页面上的链接不可以被查询。

5. 文档声明的作用?严格模式和混杂模式指什么? 的作用?

• 就是告诉游览器用什么标准来解析渲染页面。

• 严格模式，页面添加了，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
  混杂模式，页面不添加, 就是浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样子。

• <！DOCTYPE html>就是告诉游览器，用html5标准解析渲染页面。

6. 浏览器乱码的原因是什么？如何解决？

产生乱码的原因一般是文档没有声明自身的编码格式，导致浏览器错误地使用了与文档不同的解码方式，从而导致内容无法正常显示一定要清楚文件保存时的编码方式并在文件内声明。

如何解决游览器乱码。1， 在中声明编码格式。2， 在所用游览器中设置编码格式。

常见的编码格式有：ASCII、ISO-8859-1、GB2312、GBK、UTF-8、UTF-16。
接触较多常用的编码格式 UTF-8， 用在网页上可以统一页面显示中文简体繁体及其它语言。

7. 常见的浏览器有哪些，什么内核

• Trident， IE 游览器内核。
• Gecko，Mozilla Firefox火狐游览器内核。
• Webkit，苹果的safari和Google游览器的内核。
• Presto, Opera游览器内核。

8.列出常见的标签，并简单介绍这些标签用在什么场景

• 文本样式相关标签
  

  ,
  ,
  ,
  ,
  ,
  , 标题。
  
  , 段落。
  , ，强调。

• 分区元素
  

  , 给页面划分区块，让结构更清晰。
  .

• 在页面中显示图片
  

• 链接元素
  ，链接。

• 列表元素
  ul（unordered list）无序列表，直接子元素为 li, 可以嵌套，显示并列的内容。
  ol(ordered list ) 有序列表, 直接子元素为 li, 可以嵌套，显示带步骤或编号的并列内容。
  dl (definition list)定义列表 ， 子元素为dt, dd, 展示一系列“标题：内容”的场景。

• 表单元素
  

  ,
  和 配合使用。

• 表格
  

  用来展示表格，不要用来做布局，thead、tbody，tfoot可省略。

• 按钮元素
  , 按钮；
  确认 ；
  重置；
  图片按钮。