1.HTML、XML、XHTML有什么区别？
- HTML，超文本标记语言（HyperText Markup Language），是语法较为松散的、不严格的Web语言。
- XML，可扩展标记语言（Extensible Markup Language），主要用于存储数据和结构，一种类似HTML的标记语言，标签多为自定义，多用于传输/存储数据，而不是显示数据。
- XHTML 可扩展的超文本标记语言（Extensible Hyper Text Markup Language）,语法更严格，更纯净的HTML版本。
我们来详细了解一下它们具体区别在哪。
HTML
- HTML 是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。
- 所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片，链接，音频，视频等。
- 它的作用就是一个规范，告诉所有浏览器都统一标准，比如我给这段文字加个
<p> 标签，那就是告诉浏览器：这是一个段落。我加个 <a> 标签：这是一个链接。
- 浏览器看到后，就会正确解析，产生相应的行为。
XML
- XML的表现形式是给一个文档加一些标签，说明每段文字是干什么的，有什么意义。这样做的目的是方便存储、传输、分享数据。
- XML 和 HTML 有一个明显的区别就是：HTML 的标签都是预定义的，你不可以自己随便增加，比如你不能自己创建一个标签叫
<abc>, 但是 XML 可以，你可以自己定义标签——这也是“可扩展的”一个含义。
XHTML
- XHTML 就是以 XML 的语法形式来写 HTML.
- XHTML 为什么会出现：HTML 是一种语法形式比较松散的标记语言，语法要求也不严格。比如大小可以混用，属性值单引号还是双引号也混用，标签也可以不闭合。W3C 认为这样不够严谨，所以就把 XML 的语法形式加到了 HTML 上，就出现了 XHTML，所以可以把 XHTML 理解为 HTML 的严格语法形式，除此之外，其它方面基本一样。
但是 XHTML 有一些强制的要求，例如：
1.必须包含一个文件头声明 <!DOCTYPE>
2.所有元素名必须小写
3.所有空元素必须关闭
4.所有属性名必须小写
5.所有属性值必须加引号
6.所有布尔值属性必须加上属性值
……
2.怎样理解 HTML 语义化
HTML 语义化是在 HTML5 里加入的一个概念。在之前的HTML版本中，文档的结构不够清晰、明确。例如，为了要表示“标题”，“正文”，“页脚”，之前一般都使用<div id="XXXX">元素。但是，严格来说，<div>元素不是一个能把文档结构表达得很清楚的元素,当你使用了过多的<div>元素的文章，阅读是不仔细研究，是很难看出文档结构的。所以这时候语义化就显得十分重要了。
我们来看一下H5中新增的 结构元素 与对应的旧版本元素
| 新增元素 |
表示 |
旧版本 |
<section> |
内容区块 |
<div> |
<article> |
与上下文不相关的独立内容 |
<div> |
<aside> |
<article>内容之外的、与<article>相关的辅助信息 |
<div> |
<header> |
一个内容区或整个页面的标题 |
<div> |
<footer> |
脚注 |
<div> |
<nav> |
导航链接部分 |
<ul> |
<figure> |
独立的流内容 |
<dl> |
<main> |
主要内容 |
<div> |
那这样的改动有什么好处呢？
- 在没有 CSS 的情况下，页面也能呈现出很好的内容结构、代码结构，祼奔时好看
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），以有意义的方式来渲染网页
- 便于团队开发和维护。语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化
3.怎样理解内容与样式分离的原则
- HTML（内容），CSS（样式），JS（行为）
- 正确做法是写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能提现页面结构或者内容,，然后进行 css 样式设置，减少 HTML 与 CSS 契合度（即内容与样式分离） ，写JS的时候，尽量不要用JS去直接操作样式，而是通过-
- 给元素添加删除class来控制样式变化（即行为分离）。
- 为什么要这样做，优势在哪里
1.浏览器加载网页页面速度变快。分离原则下，大部分页面代码写在了CSS当中，页面体积容量变得更小。
2.网页修改设计时，效率、省时。根据html标签内ID或class的标记，到CSS里找到相应的ID或class，可以快速替换指定位置的样式，不会破坏页面架构和其他部分的样式。典型的应用就是网页换肤，使用相同的 html 结构，不同的 css 样式。
3.更好地被搜索引擎收录。基于内容与样式分离的原则，网页中语义化的标签代码就会更加适合搜索引擎。
4.css样式的分离，它可以根据不同的浏览器，达到显示效果的统一。保证网页架构不变形的前提下，放心在不同浏览器渲染显示样式。
简而言之，HTML就是骨骼，而CSS是皮肉，JS则是大脑。这样以来分工更为 明确，效率更高，更新维护更加方便。
4.有哪些常见的meta标签
| 编码 |
含义 |
<meta charset='utf-8' /> |
声明文件的编码 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
优先使用IE的最新版本和Chrome |
<meta name="renderer" content="webkit"> |
浏览器的内核控制 |
<meta name="keywords" content="your tags" /> |
页面的关键词 |
<meta name="description" content="150 words" /> |
页面的描述 |
5.文档声明的作用?严格模式和混杂模式指什么? <!doctype html>的作用?
-
<!doctype>标签用来声明文档对象模型，用来告诉浏览器应该使用哪种方式来解析渲染页面。严格模式就是使用<!doctype>标签来显式声明该用哪种方式来渲染页面，混杂模式即不加<!doctype>标签，允许浏览器使用自己的方式来渲染页面。
<!doctype html>即就是声明使用HTML5来解析渲染页面。
6.浏览器乱码的原因是什么？如何解决
- 浏览器出现乱码一般是由于在制作页面时使用非英文字符时，保存的编码格式与浏览器解析时的解码格式不匹配。
- 为了解决这个问题，就要在页面保存时就在HTML的
<head>里添加<meta charset="">来声明编码格式，来告诉浏览器应该用什么解码格式来解码，例如使用UTF-8来编码的页面，添加<meta charset="UTF-8">来告诉浏览器使用UTF-8格式来解码，就不会出现乱码了。
7.常见的浏览器有哪些，常见的内核有哪些？
- 常见浏览器有IE、Google Chrome、Safari、opera、Firefox等，还有世界之窗、傲游、360、搜狗、QQ、猎豹浏览器等。
- Trident(IE内核)：IE浏览器，很多国内浏览器，以及很多双核浏览器的其中“一核”都是Trident。
- Gecko：FireFox浏览器等。
- Webkit：Chrome浏览器，Safari浏览器等。
- Chromium/Blink：Chromium fork 自开源引擎 WebKit，却把 WebKit 的代码梳理得可读性提高很多，Chrome浏览器就使用Chromium内核，搜狗、360、QQ浏览器等等双核浏览器的一核都是Chromium。2013年谷歌宣布 Chromium 项目中研发 Blink 渲染引擎，内置于 Chrome 浏览器之中。
8.常见的HTML标签有哪些，并简单介绍这些标签用在什么场景
| 标签 |
使用场景 |
<html>...</html> |
将所有HTML内容都包含在这个标签内 |
<head>...</head> |
用于定义文档的头部，它是所有头部元素的容器。 |
<title>...</title> |
文档的标题 |
<meta>...</meta> |
提供有关页面的元信息 |
<body>...</body> |
文档的内容 |
<h1>...</h1> |
一级标题，h1h6分别对应六级标题，从16标题一次减小 |
<p>...</p> |
整段文字 |
<a>...</a> |
定义锚，即在页面插入链接 |
<img> |
图片 |
<ul>...</ul> |
无序列表 |
<ol>...</ol> |
有序列表 |
<li>...</li> |
列表项 |
<br /> |
换行 |
<div>...</div> |
定义文档中的节，默认表现为块元素 |
<span>...</span> |
定义定义文档中的节，默认表现为行内元素 |
<em>...</em> |
定义强调文本 |
<i>...</i> |
定义斜体字 |
<strong>...</strong> |
定义强调文本 |
网友评论