HTML论述
HTML论述
HTML的简介
超文本标记语言（英语：HyperText Markup Language，简称：HTML）被用于作为网页创建的标准语言。和CSS和JavaScript被用来作为是前端创建的三大基础语言。是作为前端工作人员的必修语言。
1. 历史介绍
HTML的发明是一种偶然，并且发明者并非是专业的程序员工作，1980年，物理学家
蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为了方便工程人员的共享使用文档，所以提出了所以提出了创建原型系统ENQUIRE.最终在1990年的时候通过规定HTML写出了浏览器和服务器。
2. HTML、XML、XHTML 有什么区别
三者全称和具体名称
- HTML：HyperText Markup Language / 超文本标记语言
- XML: Extensible Markup Language / 可扩展标记语言
- XHTML: Extensible Hypertext Markup Language / 可扩展超文本标记语
什么是HTML
HTML 是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。
所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片，链接，音频，视频等。
它的作用就是一个规范，告诉所有浏览器都统一标准，比如我给这段文字加个 <p> 标签，那就是告诉浏览器：这是一个段落。我加个 <img> 标签：这是一张图片，别弄错了。浏览器看到后，就会正确解析，产生相应的行为。
然后说一下 XML
它的表现形式就是给一个文档加一堆标签，说明每段文字是干什么的，有什么意义。这样做的目的是方便存储、传输、分享数据，人和机器都可以很方便的阅读。XML 和 HTML 有一个明显的区别就是：HTML 的标签都是预定义的，你不可以自己随便增加，比如你不能自造一个标签叫 <nihao>, 但是 XML 可以，你可以自己“发明”标签————这也是“可扩展的”一个含义。
什么是XHTML
XHTML 就是以 XML 的语法形式来写 HTML.
XHTML 出现的原因是：HTML 是一种语法形式比较松散的标记语言，语法要求也不严格。比如大小可以混用，属性值随便你加不加引号，单引号还是双引号也随便你，标签也可以不闭合。HTML 标准的制定者 W3C 一看这样下去不行，所谓无规矩不成方圆，所以就把 XML 的语法形式往 HTML 上一套，出现了 XHTML，所以你也可以把 XHTML 理解为 HTML 的严格语法形式，除此之外，其它方面基本一样。
比如 XHTML 有一些强制的要求，如下：
- 必须包含一个文件头声明
<!DOCTYPE> - 所有元素名必须小写
- 所有空元素必须关闭
- 所有属性名必须小写
- 所有属性值必须加引号
- 所有布尔值属性必须加上属性值。.
3. 怎么理解HTML的语义化
什么是语义化
李爵士 Tim Berners-Lee（万维网发明者）最早提出了语义网（Semantic Web）的概念，而语义网的核心是通过给万维网上的文档（如HTML）添加能够被计算机所理解的元数据（Meta data），从而使整个互联网成为一个通用的信息交换媒介。
简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
随着互联网的发展，WEB也承载越来越多的信息（图片，声音，视频等），人们开始用机器来处理网络信息，就此诞生了搜索引擎。如次庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要
所以我们得到的最重要的结论：
语义网的基础必然是语义化的结构网页。
下面介绍语义化的好处：
- 页面的结构会更加的清晰 对于页面的可读性和可修改性会进一步增强
- 支持更多的设备 我们可以通过设备的各种情况 进行怎删改查 最大限度的增加设备可实用性
- 有利于SEO 可以通过跟浏览器的良好沟通 有利于爬虫抓取到更多的信息 对于界面的SEO优化提升速度有着不可忽视的作用
- 便于团队维护 因为使用了可视化 我们可以使用模块化进行编程 这样的话我们就可以进行模块化任务整合 更有利于任务的分配和写作
4. 有哪些常见的meta标签
常见的meta标签根据查询MDN和相关资料主要有以下这些
- 编码格式
<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="社会主义24字核心价值观"> - 指定字符集
<meta http-equiv="Content-Type" content="text/html";charset=utf-8"> - 定时让网页在指定的时间n内跳转
<meta http-equiv="refresh" content="n;url="> - 可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> - 禁用缓存
<meta http-equiv="pragma" content="no-cache"> - cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">
5. 文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
文档声明的作用
文档声明是为了告诉浏览器，你的 HTML 文档是用的什么版本的 HTML 来写的，这样浏览器才能按照你声明的版本来正确的解析你的 HTML 文档。
严格模式和混杂模式指什么
-
严格模式（推荐）现在也称为标准模式，在该模式下，浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。
-
混杂模式（不推荐）的由来是一个历史问题。在互联网早期，网页一般写成两个版本：一个写给网景公司的 Navigator浏览器，一个写给微软公司的IE浏览器。当W3C制定了 Web 标准后，这两个浏览器不能马上开始按标准来解析渲染页面，因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式，在该模式下，浏览器会模拟Navigator 4和IE5的非标准行为来解析渲染页面，这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。
<!doctype html> 的作用
<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们要避免的。
6. 浏览器乱码的原因是什么？如何解决?
根据资料的查询我们可以得出乱码产生的原因主要有以下两个部分
- 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
- 乱码一般是英文以外的字符才会出现
主要的解决的方式是
首先，在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，目的就是让浏览器直接使用utf-8去解码。同理状态下如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。
7. 常见的浏览器内核有哪些
| 常见的浏览器 | 对应使用的内核是 |
|---|---|
| IE | Trident |
| Mozilla Firefox | Gecko |
| Opera | Presto |
| Safari | Webkit |
| 搜狗浏览器 | 使用高速（webkit）和兼容（Trident）双浏览模式 |
| QQ浏览器 | 使用极速（Webkit）和普通（Trident）双浏览模式 |
8.列出常见的标签，并简单介绍这些标签用在什么场景
-
<a>用于超链接。<a href="">some text</a> -
<article>用于一篇文章。<article>a self-contained article</article> -
<aside>用于页面的侧边栏。<aside>some content</aside> -
<blockquote>用于大段的引用内容。<blockquote>some big te xts</blockquote> -
<body>页面上显示的所有内容都被包含在<body></body>里 -
<br>用于显示一个换行 -
<button>用于显示一个按钮 -
<code>用于一包裹一段代码内容 -
<dd>用于一个dl列表的某个dt名词的描述 -
<del>用于删除一些不需要的文字 -
<div>用于包裹住一些其他的标签，制造一个容器 -
<dl>用于制作一个名词和对应解释的列表 -
<dt>用于一个dl列表的某个dt名词 -
<em>用于强调一些文本内容 -
<figcaption>用于一张图表的说明文字 -
<figure>用于一张图表 -
<footer>用于包裹页面的底部内容 -
<form>用于制作一个表单 -
<h1>-<h6>用于标记标题，从h1到h6重要性依次递减 -
<head>用于包裹页面的元数据，如<meta>, <link>, <title>等 -
<header>用于包裹页面的头部内容 -
<hr>用于制造出一条分隔线 -
<html>整个 HTML 文档的根元素，包裹住其他所有的元素 -
<iframe>用于嵌入另一个小页面到一个页面中 -
<img>用于显示一张图片 -
<input>用于显示一个表格输入控件 -
<label>用于给一个表格输入控件打上一个标签，说明输入控件的作用 -
<li>用于<ul>和<ol>标签，代表一个列表项 -
<link>用于链接外部CSS文件 -
<mark>用于高亮显示某些文本 -
<meta>用于下达一些元数据指令，或者对页面进行说明 -
<nav>用于包裹住一个导航条的内容 -
<ol>用于制作一个有序列表 -
<p>用于显示一个段落 -
<q>用于一小段引用文字 -
<script>用于一段JavaScript脚本代码，或者引入一个外部JavaScript脚本文件 -
<section>用于包裹一部分有逻辑关第的页面内容 -
<select>用于制作一个下拉列表选框 -
<span>用于包裹住一小段文字，作为一个容器 -
<strong>用于着重强调重要的文本内容 -
<style>用于给页面元素加上样式 -
<sub>用于下标文本 -
<sup>用于上标文本 -
<table>用于制作一个表格 -
<tbody>用于表格里的主体部分 -
<td>用于表格里的某一个单元格 -
<textarea>用于制作一大块文本输入框 -
<tfoot>用于表格里的底部 -
<th>用于表格里的表头的单元格 -
<thead>用于表格里的表头 -
<time>用于页面内容中的时间 -
<title>用于显示整个页面的标题（显示在浏览器的tab上） -
<tr>用于标记表格里的一行 -
<ul>用于制作一个无序列表
9. 怎样理解内容与样式分离的原则？
- 网页分离
一个网页分为三个部分：Html——结构，css——样式，javascrip——行为。内容也就是html，样式也就是css。所以内容和样式的分离，就是指在网页编码的过程中，要将html和css两大部分分开。
- 如何实现
一般来说是写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能提现页面结构或者内容,，然后进行 css 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离） ，写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。
- 分离的优点
- 浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
- 网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。
典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。- 更好地被搜索引擎收录。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
- css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。
