meta标签、文档声明

2017-10-14 本文已影响0人 cctosuper

HTML、XML、XHTML 有什么区别

xml的解析语法非常苛刻，只要网页出现一处错误，则浏览器停止解析。主要用于存储数据和结构。
xhtml具有良好完整的排版，对于html的元素和属性，xhtml必须小写，因为xhtml严格区分大小写，xhtml的属性值必须在引号之中；xhtml不支持属性最小化，且不赞成name的使用。
html语法松散编码不够规范，结构混乱不利于开发维护

- 怎样理解 HTML 语义化

语义化HTML是一种编写HTML的方式，就是根据内容选择合适的标签，根据内容选择合理的代码结构，便于开发者阅读，便于浏览器及机器的解析。

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

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

- 有哪些常见的meta标签

meta标签永远位于head元素内部

<meta charset='xxx'>:告诉浏览器页面代码的编码方式

name属性：

<meta name='viewort' content='width=devicewidth, initial-scale=1, maximum-scale=1, user-scalable=no'>: 在移动设备浏览器上，禁止缩放功能，用户只能滚动屏幕

<meta name='decription' content=''>:告诉搜索引擎当前页面的主意内容
<meta name='keywords' content=''>:告诉搜素引擎当前页面的关键字
<meta name='author' content=''>:作者
<meta name='copyright' content=''>:标注网站的版权信息

http-equiv属性：

 <meta http-equiv='X-UA-Compatble' content='IE=edge chrome=1'>:强制浏览器按指定版本进行渲染（不支持ie7以下版本）。如果是i.e.浏览器按最新版本渲染，如果是双核浏览器按chrome内核渲染。

 <meta http-equiv='Set-Cookie' content='cookie value=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/”>:如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。
 <meta http-equiv='expires' content='时间' >：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
 <meta http-equiv=”Refresh” content=”5;URL”>：告诉浏览器在【数字】秒后跳转到【一个网址】
 <meta http-equiv=”content-Type” content=”text/html; charset=utf-8″>：设定页面使用的字符集。
 <meta http-equiv=”Pragma” content=”no-cache”>：禁止浏览器从本地计算机的缓存中访问页面内容。访问者将无法脱机浏览。
 <meta http-equiv=”Window-target” content=”_top”>：用来防止别人在iframe(框架)里调用自己的页面，这也算是一个非常实用的属性。

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

作用？
浏览器分为两种模式，严格模式和混杂模式，这两种模式就是通过doctype的定义来区分。doctype是一种通用标记语言的文档类型声明（文件类型定义DTD），为了告诉浏览器使用什么样的文档类型来解析文档。
严格模式和混杂模式
doctype在HTML中的作用是触发浏览器的标准模式（严格模式），如果省略doctype，即进入混杂模式也称之为兼容模式。这种模式下有些样式会和标准模式存在差异。严格模式是浏览器按照W3C标准进行解析；混杂模式是指浏览器用自己的方式进行解析。
区分
1 文档包含严格的DOCTYPE，则以严格模式呈现
2 文档包含过渡DTD和URl的DOCTYPE，也以严格模式呈现，但有过渡DTD而没有UPI，则以兼容模式呈现
3 DOCTYPE不存在或写法错误会导致文章以混杂模式呈现
<!doctype html 的作用?
<!doctype html是HTML5 的文档声明，浏览器解析到底使用严格模式还是混杂模式与DTD有关，而HTML5没有了DTD，所以两者没有了区别，文档声明简化成了<!doctype html。
HTML5没有严格和混杂之分，HTML5有相对宽松的语法，实现时，已经尽可能大的实习了向后兼容

严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

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

从写入文件到显示文件有3个方面涉及编码：
1 HTML文档中的<meta charset=''>指定的字符集
2 文档编辑器保存使用的字符集
3 浏览器解析文档使用的字符集
浏览器出现乱码的原因出现在2、3步，若两种字符集不一样，就会出现乱码。而第三部使用的字符集依据<meta charset=''>指定的字符集；如果文档没有指定的话，浏览器会按照自己的方式去猜测使用哪种字符集进行解析，就可能会发生错误。
解决方法：
HTML文档一定要指定字符集为utf-8，它几乎包括了世界上所有的文字；编辑器保存文档使用的字符集一定要与HTML指定的字符集一致。

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

IE，Mozilla FireFox，Safari，Chrome ；Trident，Gecko，Webkit，Chromium/Bink

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

* <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> 用于制作一个无序列表