HTML、XML、XHTML 有什么区别
- HTML:超文本标记语言 (Hyper Text Markup Language)，用来描述网页的一种语言。不是一种编程语言，而是一种标记语言 (markup language)，即一套标记标签 (markup tag) ，用来描述网页。
- XML：可扩展标记语言（EXtensible Markup Language），用来传输和存储数据。 XML 很类似 HTML，是一种必须正确标记且格式良好的标记语言，它用于传输数据，而非显示数据。XML标签没有被预定义，需要自行定义标签。
- XHTML：可扩展超文本标签语言（EXtensible HyperText Markup Language），基于XML，作用与HTML类似，但语法更严格。
三者区别
- 比较xhtml和html
很多页面包含了“糟糕”的 HTML：编码不规范，结构混乱臃肿；表现和结构混乱；不能使用更多的网络设备，比如手机、PDA等，所以 ，W3C制定了XHTML，通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML。有以下区别：
1、文档结构
- XHTML DOCTYPE 是强制性的，即<!DOCTYPE ....> 是必须有
- <html> 中的 XML namespace 属性是必须的
- <html>、<head>、<title> 以及 <body> 也是必须的
2、 元素语法
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
3、 属性语法
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的 <input checked="checked">是可以的，而<input checked>是不可以的
- xml和html区别：XML 用来描述数据，其标签没有被预定义，需要自行定义标签，而 HTML 则用来显示数据，标签已定义好。
怎样理解 HTML 语义化
-
HTML语义化是什么？
语义化HTML就是选择合适的标签、使用合理的代码结构来编写HTML的方式，使代码更具可读性，也使得浏览器的爬虫和机器能对代码更好的解析。 -
为什么要语义话？
- 有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。
- 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构，清晰的页面结构，使页面可读性更强。
- 方便其他设备的解析
- 便于团队开发和维护
怎样理解内容与样式分离的原则
- 为何要分离
最初主流浏览器为了显示更丰富的web文档，不断地将新的标签和属性添加到HTML标签中。随着页面内容的丰富，浏览器性能的提高，内容和样式的耦合使得HTML文件难以理解和维护。为了解决这个问题，万维网联盟在 HTML 4.0 之外提出层叠样式表（CSS），使用CSS完成样式与内容的分离。 - 怎么做到分离
- 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
- 写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化。
- HTML 内不允许出现属性样式，尽量不要出现行内样式。
- 分离的好处
- 数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关
- 保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版;
- 由于结构清晰，数据的集成、更新和处理更加方便灵活；
- 更好地被搜索引擎收录，基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。
有哪些常见的meta标签
- meta是什么
metadata，中文名叫元数据，是用于描述数据的数据。它不会显示在页面上，但是机器却可以识别。 - 作用
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services
meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。
- 组成
meta标签共有两个属性，分别是http-equiv属性和name属性。- name属性
name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。meta标签中name属性语法格式是：
- name属性
<meta name="参数" content="具体的描述">。
其中name属性共有以下几种参数。
- keywords(关键字)
说明：用于告诉搜索引擎，你网页的关键字。举例：
<meta name="keywords" content="前端,饥人谷">
- description(网站内容的描述)
说明：用于告诉搜索引擎，你网站的主要内容。举例：
<meta name="description" content="课程 PPT">
- viewport(移动端的窗口)
说明：这个属性常用于设计移动端网页。在用bootstrap等框架时候都有用过viewport。下次博客上具体写该内容。举例：
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- renderer(双核浏览器渲染方式)
说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例：
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
- robots(定义搜索引擎爬虫的索引方式)
说明：robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例：
- http-equiv属性
equiv的全称是"equivalent"意思是相等，相当于。http-equiv可以理解为相当于HTTP的作用，比如说定义些HTTP参数。语法格式：
<meta http-equiv="参数" content="具体的描述">
- content-Type(设定网页字符集)
说明：用于设定网页字符集，便于浏览器解析与渲染页面举例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐
<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8
- X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）举例：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
- cache-control(指定请求和响应遵循的缓存机制)
说明：指导浏览器如何缓存某个响应以及缓存多长时间。
<meta http-equiv="cache-control" content="no-cache">
其中还有几种用法
no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
参考 HTTP缓存
- expires(网页到期时间)
说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。举例：
<meta http-equiv="expires" content="Tuesday 22 May 2017 01:00 GMT" />
- refresh(自动刷新并指向某页面)
说明：网页将在设定的时间内，自动刷新并调向设定的网址。举例:
<meta http-equiv="refresh" content="2；URL=https://jirengu.com/">
- Set-Cookie(cookie设定)
说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
- 文档声明的作用是告知浏览器页面使用的HTML版本；
- 严格模式又叫标准模式，使页面按照 HTML 与 CSS 的定义渲染。
混杂模式，又叫怪异模式，以比较宽松的向后兼容的方式呈现，模拟老式浏览器以兼容老的站点； - <!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们要避免的。
浏览器乱码的原因是什么？如何解决
乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
- 比如网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
- html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
- 浏览器不能自动检测网页编码，造成网页乱码。
解决方案：首先，在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了，直接用utf-8去解码。 同理，如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。
常见的浏览器有哪些，什么内核
- 常见的浏览器有IE、Mozilla Firefox、Google Chrome、Safari、opera、360，搜狗，遨游等浏览器。
- 所谓的“浏览器内核”指的是一个浏览器最核心的部分——“Rendering Engine”，叫做“渲染引擎”,也常称其为“排版引擎”、“解释引擎”。这个引擎的作用是帮助浏览器来渲染网页的内容，将页面内容和排版代码转换为用户所见的视图。
| 浏览器 | 内核 |
|---|---|
| IE、傲游、世界之窗浏览器 | IE内核 |
| Firefox | Mozilla |
| Safari | WebKit |
| Chrome | WebKit |
| OperaPresto | Presto |
| 搜狗、qq、傲游 | WebKit与IE双核 |
列出常见的标签，并简单介绍这些标签用在什么场景
- h1-h6 标题标签
- p 段落标签
- a 链接标签
- href="#about" 跳转到id为about的位置
- href="/demo" 跳转至完整域名+demo
- img 图片链接
- alt 图片无法展示时，显示内容，便于视力障碍人士使用
- div 块标签
- button 按钮标签
- strong 强调元素
- em 中层强调元素
- span 标记一段行内元素
- iframe 在当前页面嵌入一个页面
- ul 无序列表
- li ul的子标签，ul下的直接元素必须是li
- ol 有序列表
- li ol的子元素
- dl 展示有标题和内容的自定义表格
- dt 定义项目
- dd 定义的描述
- table 用于展示表格，不要用来做布局
- thead、tbody、tfoot 一般不用写
- tr 代表表格的一行
- th 代表表格第一行的列内容
- td 代表表格的一列
网友评论