HTML知识点

2017-02-27 本文已影响0人荣_Rong

HTML、XML、XHTML 有什么区别

HTML全名是“超文本标记语言”，是语法较为松散的、不严格的Web语言。
XML全名是“可扩展标记语言”，主要用于存储数据和结构参考。
XHTML全名是“可扩展超文本置标语言”，基于XML，作用与HTML类似，和HTML最大的区别就在于它更严谨而且语义化更强。</p>

怎样理解 HTML 语义化

语义化HTML是一种编写HTML的方式。选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器很好地解析。

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

写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化。
HTML 内不允许出现属性样式，尽量不要出现行内样式。

有哪些常见的meta标签

（1）<meta charset="utf-8">：保存当前页面为utf-8的编码格式。
（2）<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">：对于双核浏览器可以以IE模式渲染页面，也可以以chrome模式渲染页面。
（3） <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">：在移动端能合理展示页面。
（4） <meta name="keywords" content="前端饥人谷">：向搜索引擎说明当前网页的关键词。
（5） <meta name="description" content="最有爱的前端学习社区">：告诉搜索引擎当前站点的主要内容

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

文档声明作用是告诉浏览器文档中包含的内容属于什么类型，以便用相应的规则来解释和处理各种标记。若使用了不正确的文档声明，浏览器会按自己的方式进行解析，可能导致页面乱码。因此一个标准的HTML文档必须包含相应的文档类型声明，它位于文档的最开始处。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：严格模式和混杂模式
在严格模式中，浏览器以其支持的最高标准呈现页面，不允许使用任何表现层的语法。
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
<!doctype html>声明文档的解析类型为HTML，告知浏览器文档使用HTML规范解析。

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

浏览器乱码产生的原因是html文档的编码和浏览器编码方式不同，导致浏览器解析出来的是乱码。
解决方法：首先要知道html文件的编码方式，然后在html文件中设置例如<meta charset=“utf-8”>这种样式，让浏览器用相同的编码方式打开文件。

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

IE：Trident内核，又称其为IE内核。
Chrome：WebKit内核。
Safari：WebKit内核。
Firefox：Gecko内核。

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

<!DOCTYPE>: 定义文档类型。
<html></html> 创建一个HTML文档。

<head></head>: 定义文档的头部。
(1). <meta>: 定义元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta name="keywords" content="前端 饥人谷">
     <meta name="description" content="最有爱的前端学习社区">
(2). <title></title>: 定义文档的标题。

<body></body>：定义文档的主体。
(1). <h1>—<h6>：定义 HTML 标题。
(2). <p></p>： 定义段落。
(3). <a></a>： 定义超链接。最重要的属性是 href 属性。
     <a href="http://jirengu.com" target="_blank" title="饥人谷">饥人谷.com</a>
     <a href="#">饥人谷.com</a>
     <a href="#about">饥人谷.com</a>
     <a href="/getCourse">饥人谷.com</a>
(4). 强调
     <em></em>:定义强调文本。（斜体）
     <strong></strong>：定义语气更为强烈的强调文本。（加粗）
     <span></span>：没有语义的，它的作用就是为了设置单独的样式用的。
(5). <img>：定义图片    ![](定义.png)
(6). <div></div>：定义块级元素。
(7). <br>:定义换行。
(8). <table></table>:定义表格。
     <th>:定义表头.
     <tr>:定义一行.
     <td>:定义单元格.
(9).  <ul></ul>无序列表。子元素为li 。
(10). <ol></ol>有序列表。子元素为li 。
(11). <dl></dl>:定义自定义列表。
      <dt></dt>:定义自定义列表项。
      <dd></dd>:定义自定义的描述。
(12). <button></button>：定义按钮。
(13). <iframe></iframe>内嵌框架。注意跨域操作问题。
      <iframe src="http://jirengu.com" name="myPage"></iframe>
      <p><a href="http://www.baidu.com" target="myPage">百度</a></p>