HTML与XML与XHTML三者之间的区别
HTML的简介
超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS(层叠样式表)、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页
HTML是一种语法较为松散,不严格的Web语言
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
XML的简介
简单来说,XML是一种可扩展标记语言,主要用于存储数据和结构
- XML 指可扩展标记语言(EXtensible Markup Language)
- XML 是一种标记语言,很类似 HTML
- XML 的设计宗旨是传输数据,而非显示数据
- XML 标签没有被预定义。您需要自行定义标签。
- XML 被设计为具有自我描述性。
- XML 是 W3C 的推荐标准
- XML 不会做任何事情,XML 被设计用来结构化、存储以及传输信息。
HTML与XML的主要差异
- XML 不是 HTML 的替代。
- XML 和 HTML 为不同的目的而设计:
- XML 被设计为传输和存储数据,其焦点是数据的内容。
- HTML 被设计用来显示数据,其焦点是数据的外观。
- HTML 旨在显示信息,而 XML 旨在传输信息。
XHTML的简介
简单来说,XHTML是一种可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格
- XHTML(Extensible Hyper Text Markup Language) 是 HTML 与 XML(扩展标记语言)的结合物。
- XHTML 包含了所有与 XML 语法结合的 HTML 4.01 元素。
与前两者最主要的差异
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素。
语义化HTML
简单来说,语义化HTML是一种编写HTML的方式,需要选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。
编写HTML时,表现内容,样式和行为的分离
- 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去写样式。
- 写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化
- HTML 内不允许出现属性样式,尽量不要出现行内样式
meta标签
- <meta charest="utf-8">:设置当前页面编码格式“utf-8”
- <meta http-equip="X-UA-Compatible" content="IE=edge chrome=1">:针对双核浏览器选择合适的内核来渲染
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">:在移动端合理的展示你的页面
- <meta name="keywords" content="前端 饥人谷">
<meta name="description" content="最有爱的前端学习社区">:通过name的keywords或者description更方便的搜索到当前页面
常见标签
- **
- <!DOCTYPE>:
<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前;<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。- a 定义超链接,用于从一张页面链接到另一张页面;a元素最重要的属性是 href 属性,它指示链接的目标。
- <abbr>:指示简称或缩写,比如 "WWW" 或 "NATO"。
- <acroym>:定义首字母缩写。HTML5 中不支持 <acronym> 标签。请使用 <abbr>标签代替。
- <address>:定义文档或文章的作者/拥有者的联系信息;如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息;如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
- <applet>:定义嵌入的 applet。
- <area>:定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。
area 元素总是嵌套在 <map> 标签中。 - <article>:<article> 规定独立的自包含内容。
- <aside>:定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。 - <audio>:定义声音,比如音乐或其他音频流。
- b: 标签规定粗体文本
- <base>:为页面上的所有链接规定默认地址或默认目标。
- <basefont>:定义基准字体。该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。
- <bdi>:允许您设置一段文本,使其脱离其父元素的文本方向设置。
- <bdo>:可覆盖默认的文本方向。
- big:标签呈现大号字体效果。
- blockquote:定义块引用.
- <body>:定义文档的主体。
- br:可插入一个简单的换行符。
- <button>:定义一个按钮。
- <canvas>:定义图形,比如图表和其他图像。
- caption:定义表格标题。
- <center>:对其所包括的文本进行水平居中。
- col:为表格中一个或多个列定义属性值。
- colgroup:用于对表格中的列进行组合,以便对其进行格式化。
以下都是短语元素,不建议使用,建议使用样式表
- cite:定义引用,通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
- em:把文本定义为强调的内容
- strong:把文本定义为
- dfn:定义一个定义项目
- code:定义计算机代码文本
- samp:定义样本文本
- kbd:定义键盘文本
- var:定义变量
参见标签列表
文档声明的作用
文档声明用来告知浏览器当前文档所使用的HTML或XHTML规范。是用来声明当前文档为html5的方法
严格模式是指按照浏览器所支持的最高版本来实现效果;混杂模式则相反,尽可能向后兼容。使用老版本浏览器的显示模式。
浏览器乱码原因
1、比如网页源代码是gbk的编码,而内容中的中文字是utf-8编码的,这样浏览器打开即会出现html乱码。反之网页是编码utf-8,内容是gbk也会出现乱码。
2、html网页编码是gbk,而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3、浏览器不能自动检测网页编码,造成网页乱码。
常见内核及其对应的浏览器
Trident
大部分人都简称为IE内核。是微软开发的一种排版引擎。
IE、The World
Geckos:
Gecko是套开放源代码的、以C++编写的网页排版引擎。这软件原本是由网景通讯公司开发的,Netcape6开始采用该内核。后来的 Mozilla FireFox也采用了该内核,Geckos的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。Geckos 现在由Mozilla基金会维护。
Firefox
Presto:
Presto是一个由Opera Software开发的浏览器排版引擎,该内核在2003年的Opera7中首次被使用。
Opera
Webkit:
苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。
Safari、Chrome
国内的双核浏览器:
由于IE浏览器在国内的普及率非常高,所以造成了很多网上银行和支付系统只支持IE的Trident内核,其他浏览器访问根本无法进行正常支付和转账等业务。而WebKit内核的非IE浏览器以更高的性能和更好的用户体验拥有了越来越多的用户。于是双核浏览器应运而生。
360、猎豹、搜狗、百度、遨游、QQ