HTML知识点1

2017-06-05 本文已影响0人 QQQQQCY

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 服务。

<meta charset="utf-8">
申明编码，避免网页内的汉字变成乱码
<meta name="Keyword" content="关键字">
描述网页关键字，用于搜索引擎搜索
<meta name="Description" content="网页内容">
不超过150字，且能准确描述网页内容的标签
<meta name="robots" content="index,flow">
robot terms是使用一组用","分开的值

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
根据不同设备，以及窗口大小调整内容
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
选择浏览器内核，优先选择chrome内核，如果不支持，则优先选择edge版的IE内核

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

web中有许多的文档类型，就算是html，也有不同的版本，所以需要文档开头说明文档类型，让浏览器能正确显示文档
<!doctype html> 处于<html>标签之前，告知浏览器以何种形式渲染文档
严格排版模式会使浏览器用支持的最高web标准来解析页面，是一种严格要求的DTD(Document Type Definition)不允许使用任何表现层的标识和属性
混杂模式是一种向后兼容的解析方法，通常模拟老式浏览器的行为，以防止老站点无法工作

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

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

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.列出常见的标签，并简单介绍这些标签用在什么场景

<html>    开始标签
  <head>    网页上的控制信息
      <title>  页面标题  </title>
  </head>

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

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

      <div></div>    层标签（默认占一行）

      <span></span>    层标签（默认用多大空间占多大空间）

      <ol>    有序列表
        <li>内容</li>
        <li>内容</li>
      </ol>

      <ul>    无序列表
        <li>内容</li>
        <li>内容</li>
      </ul>

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

      <a href="http://xxxx.com" target="_blank" title="xxx">xxx.com</a>    超链接

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

      <button>点我</button>    按钮

      <iframe src="http://jirengu.com" name="myPage"></iframe>    嵌入页面

  </body>
</html>    结束标签