HTML、XML、XHTML的区别
定义
HTML(HyperText Markup Language)
超文本标记语言，是语法较为松散的、不严格的web语言；
XML（EXtensible Markup Language）
可扩展标记语言，主要用于储存数据和结构，而非现实数据；
XHTML（EXtensible Markup Language）
可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更为严格
XML与HTML、XHTML的区别
- XML被设计为传输和储存数据，其焦点是数据的内容，旨在传输数据。
- HTML、XHTML被设计用来显示数据，其焦点是数据的外观，旨在显示信息。
HTML与XHTML的区别
- HTML语法较为松散，存在即使代码没有遵守HTML规则但还可以工作的很好的情况。
- XHTML是更为严格的HTML版本：
- XHTML元素必须被正确的嵌套。
- XHTML元素必须关闭。
- 标签名必须用小写字母。
- XHTML文档必须有根元素。
怎样理解 HTML 语义化
HTML语义化是一种编写HTML的方式。
HTML语义化的好处
1. 更少的HTML代码。
2. 更清晰的DOM结构，有利于书写css和js
3. 便于团队开发和维护。
4. 对搜索引擎友好。
5. 去除样式或者丢失样式的时候有清晰的结构。
怎样理解内容与样式分离的原则
- 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去写样式。
- 写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化
- HTML 内不允许出现属性样式，尽量不要出现行内样式
这样做的好处是方面代码的后期维护调整和代码阅读
有哪些常见的meta标签
1. <meta charset='xxx'>
<meta charset='xxx'>
告诉浏览器，我这个页面的代码是用的xxx编码方式。（用xxx来解码）
2. <meta http-equiv='参数' content='参数变量值'>
<meta http-equiv='参数' content='参数变量值'>
浏览器读到这些代码时，可以得到一些页面信息，更好的显示网页内容。
meta http-equiv='expires' content='时间' ：【expires期限】，告诉浏览器到了某个时间就重新传输一次页面。
meta http-equic='refresh' content='数字;url=一个网址' ：【refresh刷新】，告诉浏览器在【数字】秒后跳转到【一个网址】
meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' :强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是ie浏览器就用最新的ie渲染，如果是双核浏览器就用chrome内核。
3. <meta name='参数' content='具体的参数值'>
主要用于描述网页，更便于搜索机器人读取代码。
meta name='viewport' content='width=xxx等等' ：让移动端能够以更合理的比例显示网页
meta name='keywords' content='xxxx' ：告诉搜索引擎，当前页面的关键字
meta name='dscription' content='xxx' ：告诉搜索引擎，当前页面的主要内容是xxx
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
1. 文档声明的作用
文档声明是为了告诉浏览器，你的 HTML 文档是用的什么版本的 HTML 来写的，这样浏览器才能按照你声明的版本来正确的解析你的 HTML 文档。
2. 严格模式和混杂模式
严格模式：是指浏览器按照 W3C 标准解析代码。
** 混杂模式：**是指浏览器用自己的方式解析代码。
3. <!doctype html> 的作用
<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们要避免的。
浏览器乱码的原因是什么？如何解决
当浏览器解析HTML页面时的编码与实际页面编码不一致时就会产生乱码，主要有两种情况：
1.页面没有设置chartset
如果页面没有设置chartset，那么浏览器解析时就会自动选择一种编码，若选择的编码与页面实际编码不一致时就会产生乱码。此时，在页面中添加meta信息将页面chartset设置为合适的编码就可以了。
2. 页面设置了chartset，但与实际使用的编码不一致
这种情况也会导致编码错位的情况，这时只要修改相应的chartset值就可以了。
常见的浏览器有哪些，什么内核
IE内核 Trident
谷歌内核 WebKit / Blink
火狐内核 Gecko
Safarri内核 WebKit
欧朋内核 Presto
列出常见的标签，并简单介绍这些标签用在什么场景
* <a> 用于超链接。<a href="">some text</a>
* <article> 用于一篇文章。<article>a self-contained article</article>
* <aside> 用于页面的侧边栏。<aside>some content</aside>
* <blockquote> 用于大段的引用内容。<blockquote>some big texts</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> 用于制作一个无序列表
网友评论