HTML的一些知识点

2017-03-13 本文已影响74人萧雪圣

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'>

告诉浏览器，我这个页面的代码是用的xxx编码方式。（用xxx来解码）

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