HTML知识点1

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

HTML被设计用来显示数据，焦点是数据的外观
XML被设计用来描述数据，焦点是数据的内容，并且标签没有自定义，全部需要自己定义
XHTML是居于可扩展标记语言的标记语言，也是HTML的一个子集，格式比HTML更加严谨

2. 怎样理解HTML的语义化

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

语义化的目的是

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构（为了裸奔时好看）
• 提升用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用
• 有利于SEO「Search Engine Optimization」：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
• 便于团队开发和维护，语义化更具可读性，是下一步网页设计的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

如何语义化

• 尽可能少的使用无语义的标签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关联起来。

扩展阅读
HTML 5的革新——语义化标签(一)
HTML 5的革新——语义化标签(二)

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

指的的HTML上只应该设置内容与结构，不使设置具体样式

这样的做的好处是

• 利用CSS中的重用、组合、继承等特性减少样式的代码量，样式结构上非常清晰；
• 页面视觉有变动只需要修改相应的CSS文件，不用或者基本上不用改动html文档中的标签结构；
• 方便JavaScript脚本编写，比如用js控制标签的className来方便的、动态的改变元素的样式，而不是直接修改其具体样式
• 适合产品级、模块化的开发
• 提高可读性，方便后续维护、修改和替换

样式应该单独在CSS中设置，在html中引用
使用JavaScript的地方，同样应当如此

4. 有哪些常见的meta标签

meta的官方定义:
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

• 
  申明编码，避免网页内的汉字变成乱码

• 
  描述网页关键字，用于搜索引擎搜索

• 
  不超过150字，且能准确描述网页内容的标签

• 
  robot terms是使用一组用","分开的值

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

• 
  根据不同设备，以及窗口大小调整内容

• 
  选择浏览器内核，优先选择chrome内核，如果不支持，则优先选择edge版的IE内核

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

• web中有许多的文档类型，就算是html，也有不同的版本，所以需要文档开头说明文档类型，让浏览器能正确显示文档
  处于标签之前，告知浏览器以何种形式渲染文档

• 严格排版模式会使浏览器用支持的最高web标准来解析页面，是一种严格要求的DTD(Document Type Definition)不允许使用任何表现层的标识和属性

• 混杂模式是一种向后兼容的解析方法，通常模拟老式浏览器的行为，以防止老站点无法工作

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

• 造成浏览器乱码的主要是由于，html源代码中的文字内容与html编码不同造成的
• 加入编码标签规定好编码可以避免此种原因造成的乱码

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

Trident内核 ： IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核   ： Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核  ： Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核  ： Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

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

    开始标签
      网页上的控制信息
      
  

      包括所有 页面显示的内容
           页面标题，1~6重要程度依次递减

      
    段落，前后若有其他，执行前后换行，并空开一行，保证自身是一个整体

      
    层标签（默认占一行）

          层标签（默认用多大空间占多大空间）

      
    有序列表
        
内容
        
内容
      

      
    无序列表
        
内容
        
内容
      

      ![](图片地址)    图片标签，图片无法加载时会显示alt中文字

      xxx.com    超链接

      
    用于展示一系列 “标题:内容... ”的场景
        
商品名称:
        
青花瓷
        
特征:
        
白色
        
圆口
        
商品介绍
        
这是一个年代久远的瓷器，很贵，易碎
      

      点我    按钮

          嵌入页面

  
    结束标签