HTML、XML、XHTML 有什么区别
- HTML,超文本标记语言,是语法较为松散的、不严格的Web语言
- XML,可扩展标记语言,主要用于存储数据和结构
- XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格
怎样理解 HTML 语义化
语义化HTML是一种编写HTML的方式。
选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。
怎样理解内容与样式分离的原则
写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去写样式。
写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化
HTML 内不允许出现属性样式,尽量不要出现行内样式
有哪些常见的meta标签
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
文档声明的作用
文档声明是为了告诉浏览器,你的 HTML 文档是用的什么版本的 HTML 来写的,这样浏览器才能按照你声明的版本来正确的解析你的 HTML 文档。
严格模式和混杂模式指什么
严格模式(推荐)现在也称为标准模式,在该模式下,浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。
混杂模式(不推荐)的由来是一个历史问题。在互联网早期,网页一般写成两个版本:一个写给网景公司的 Navigator浏览器,一个写给微软公司的IE浏览器。当W3C制定了 Web 标准后,这两个浏览器不能马上开始按标准来解析渲染页面,因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式,在该模式下,浏览器会模拟Navigator 4和IE5的非标准行为来解析渲染页面,这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。
<!doctype html> 的作用
<!doctype html> 的作用就是让浏览器进入标准模式,使用最新的 HTML5标准来解析渲染页面;如果不写,浏览器就会进入混杂模式,而这是我们要避免的。
浏览器乱码的原因是什么,如何解决?
下面这个流程是我们写入文件到展示文件的简单描述:
- 我们使用编辑器编写 HTML 文件
- 保存编写的 HTML 文件
- 使用浏览器打开 HTML 文件
- HTML文件在浏览器展示
- 我们编写 HTML 文件时,如果在<html>中指定了<meta charset="gbk">,设定字符集为gbk
- 然后保存 HTML 文件时,编辑器用 utf-8 字符集保存
- 接着浏览器打开 HTML 文件时,它看到<meta charset="gbk">,这时候它就会用gbk字符集来解码你的 HTML 文档
- 由于utf-8和gbk对中文的编码方式不一样,那么HTML文件在浏览器中显示示出来肯定是乱码。
所以这里关于编码涉及到3个方面:
HTML 文档中的<meta charset=""> 指定的字符集
编辑器保存文档使用的字符集
浏览器解析 HTML 文档使用的字符集
这里的关键在于2和3步,如果这两步的字符集不一样,那么英文以外的文字就会出现乱码。英文不会出现乱码是因为一般主流的字符集对英文使用的编码方式都是一样的,可以互相兼容。
而第3步浏览器解析 HTML 文档使用的字符集依赖于第1步 HTML 文档中的<meta charset=""> 指定的字符
那如果 HTML 文档没指定呢?那浏览器就会用自己的方式去猜要用哪个字符集来解析 HTML 文档,这里就可能会发生错误。
总结下如何解决浏览器乱码:
- HTML 文档一定要指定字符集为utf-8,因为这个字符集包括了世界上几乎所有的文字,没有理由不用它。<meta charset="utf-8">
- 编辑器保存文档使用的字符集一定要跟 HTML 文档指定的字符集匹配,也就是 utf-8
常见的浏览器有哪些?有哪些浏览器内核?
一、常见的浏览器
全球排行榜,IE占第一位,老牌浏览器,不过市场占有率逐步下滑, 第二是Mozilla Firefox,非IE内核的它迅速占有着IE的市场份额,强大无比的扩展插件是它一大特色。第三是Google Chrome,包含普通版还有极速版等,窗口较为简洁清爽,实际使用效果还是可以的。 还有像opera还是相当实用的 360,TT,搜狗,遨游,瑞影,hotbrowser,等等
二、浏览器内核
Trident:
IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的IE8。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等)。此外,为了方便也有很多人直接简称其为IE内核(当然也不排除有部分人是因为不知道内核名称而只好如此说)。
Gecko:
Netscape6开始采用的内核,后来的Mozilla FireFox也采用了该内核,Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。因为这是个开源内核,因此受到许多人的青睐,Gecko内核的浏览器也很多,这也是Geckos内核虽然年轻但市场占有率能够迅速提高的重要原因。
Presto:
目前Opera采用的内核,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。
Webkit:
苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以Safari浏览器在国内还是很安全的。
KHTML:
KHTML,是HTML网页排版引擎之一,由KDE所开发。KDE系统自KDE2版起,在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写,并以LGPL授权,支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高,不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法,为了使KHTML引擎可呈现的网页达到最多,部分IE专属的语法也一并支援。KHTML拥有速度快捷的优点,但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。
列出常见的标签,并简单介绍这些标签用在什么场景
- h1~h6: 标题
- h1代表页面最大的标题
- h2二级标题
- h3... 更弱的标题
- p: 表示大段文字
- a: 链接,链到一个地址
- img: 展示一张图片
- div: 语义为“一大块”,用于给页面划分区块,让结构更清晰
- ul li
- ul: unsort list 无序列表
- 用于表示并列的内容
- ul的直接子元素是li
- 可以嵌套
- ol li: order list, 有序序列表, 用于表示带步骤或者编号的并列内容, ol的直接子元素只能是li 可以嵌套。
- dl dt dd: 用于展示一系列 “标题:内容... ”的场景
- button: 按钮
- strong em:
- em 需要强调一下
- strong 很重要、强调性更强
- iframe: 用于嵌入一个页面 注意跨域操作问题
- table: 用于展示表格,不要用来做布局。 thead tbody tfoot可省略,浏览器会自动添加。 border-collapse: collapse;用于合并边框