HTML、XML、XHTML 有什么区别
什么是HTML
HTML 是用来描述网页的一种语言
- HTML 指的是超文本标记语言（hyper text Markup Language）
- HTML 不是一门编程语言， 而是一中标记语言（markup language）
- 标记语言是一套标记标签 （markup tag）
- HTML 使用标记标签 来描述网页
总结：HTML 是一个超文本标记语言，并不是编程语言，他有一套标记标签，可以使用这些标记标签来描述网页
什么是XML
XML 被设计用来传输和存储数据
- XML是可扩展标记语言（Extensible Markup Language）
- Xml 是一种标记语言，很类似HTML
- XML 的设计宗旨是传输数据， 而非显示数据
- XML 标签没有被预定义。 你需要自定义标签
- XML 被设计为具有 自我描述性
- XML 是W3C 的推荐标准
解释：
自定义标签： XML 就是纯文本，标签是根据自己的数据内容可以自定义。不像 HTML 标签 有个预定义的意思 比如 h1~h6 代表标题等等
** 自我描述性** XML标签往往对标签内的数据有所解释
<note>
<to>George</to> // 去George那
<from>John</from> // 来自 John
<heading>Reminder</heading>// 信息头
<body>Don't forget the meeting!</body>// 信息体
</note>
总结：
XML 是一个可扩张标记语言，类似HTML；设计宗旨是传输数据，它没有预定义标签，全部都要自定义标签，自定义的标签应当定义为对自己数据具有自我描述性，XML也只是个纯文本，想解析XML信息还需自己编辑软件或程序解析。XML是为了数据更加明确。能够读懂 XML 的应用程序可以有针对性地处理 XML 的标签。标签的功能性意义依赖于应用程序的特性。XML 是独立于软件和硬件的信息传输工具
什么是 XHTML
XHTML (extensible HyperText Markup language) 可扩展超文本标记语言
XHTML 是一种 html 4.0 基础上优化和改进的新语言，目的是基于XML应用，XHTML是一种增强了的HTML， 他的可扩展性和灵活性将适应未来网络应用更多的需求
- XHTML 元素必须被正确的嵌套
- XHTML 元素必须被关闭
- 标签必须用小写字母
- XHTML 文档必须有根元素
怎样理解 HTML 语义化
** 1. 什么是HTML语义化**
根据内容的结构化（内容语义化），选择合适的标签（代表语义化）便于开发者阅读和写出优雅的代码的同事让浏览器的爬虫 和 机器很好的解析
2. 为什么要语义化
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看
- 用户体验：例如title, alt 用于解释名词或解释图片信息，
- HTML 是一门计算机程序语言,和c,c++,java,go,php,lua,python等一样.
写HTML的人要以写程序的角度去写,去评判,
语义化的含义就是用正确的标签做正确的事情.
你要写的是程序, 不仅仅是视觉显示. - 更好看懂 更好维护 记单词一样 有逻辑关系的单词 可以记一串 零散的看都不想看
参考链接
关于语义化 HTML 以及前端架构的一点思考
如何理解 web 语义化
怎么理解内容与样式分离原则
1.内容
内容就是页面实际要传达的真正信息，包括数据、文档或者图片等。这里强调”真正“，指的是纯粹的数据信息本身，导航菜单，装饰性图片都不算的
2.结构（Structure）
真正信息想让展现给大家，一定其看懂。没结构的话会混乱不堪，难以阅读和理解，所以需要格式化，结构化。
比如分成标题 作者 章 节 段落 和列表等等（语义化使用html标签，使得传达的信息结构化）结构使内容更加具有逻辑性，易用性
3.表现
结构化可以让人看得懂，但是我们还应当让人看得舒服
虽然定义了结构，但是字体大小，正文的颜色 字体样式 所处位置 背景什么都没有修饰，所有来改变内容（结构化后真正的数据信息）外观的东西，我们称为 表现
4.总之
内容是模特， 结构表明头 和 四肢等各个部位，表现则是服装，化妆品，将模特更光彩照人
** 5. 行为（Behacior）**
即对内容的交互及操作效果
这些是现代网页必须存在的东西，表现层 和 结构层 内容层 行为都可以写在一起，一些简单的页面没关系，如果发布大量页面 问题就来了
- 如何改版 背景改成黑的 文字改成白的 一个页面一个页面改 有css表 的话 直接改样式表 样式就批量改了
- 数据的利用 结构清晰化，将内容、结构与表现相分离。使用模板为类似的内容搭个结构，将请求回来的数据嵌入或隐藏（根据业务）这样也可以达到批量修改结构 去除模板的一个解构 渲染出来的页面就会都会修改，等等 解构化更有利于浏览器搜索
常见的meta标签
<meta charset="utf-8">：编码方式 大部分都是utf-8格式
<meta http-equiv="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="前端 饥人谷">网页关键字，利于搜索 优化SEO
<meta name="description" content="最有爱的前端学习社区">
搜索引擎优化
<meta name="keywords" content=""> //向搜索引擎说明你的网页的关键词
<meta name="description" content=""> //告诉搜索引擎你的站点的主要内容
<meta name="author" content="你的姓名"> //告诉搜索引擎你的站点的制作的作者
<meta http-equiv="Content-Type" content="text/html";charset=utf-8"> //指定字符集
<meta http-equiv="refresh" content="n;url="> //定时让网页在指定的时间n内跳转
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> //可以用于
设定网
页的到期时间，
一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
<meta http-equiv="pragma" content="no-cache"> //禁用缓存
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT"> //cookie设定，
如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式
文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
** 文档声明 **
为了浏览器按照你给的版本进行解析你的HTML文档
严格模式 ， 混杂模式
严格模式：浏览器按照HTML 和 CSS标准来解析，渲染你的文档
混杂模式：浏览器会模拟网景浏览器 和 ie5 的非标准行为来解析渲染页面 ，这样做为了兼容W3C标准没出来之前的页面 ，（我猜这些页面早见鬼去了吧）
<!doctype html> 的作用
html5 文档声明 让浏览器进入 W3C HTML5标准模式解析渲染页面，不写进入混杂模式，准备踩坑吧
浏览器乱码的原因是什么？如何解决
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- 文件存储格式 与 这个meta标签指定格式不同 导致乱码
解决： 存储格式 与 meta指定格式一样 - 不合理的字符串截取造成个别字符乱码，
解决 规范截取字符串函数 - 数据库编码与meta设定不一致
解决 保持一致 - ajax传递中文编码导致的
解决将传递的参数转码成utf-8模式 - 网站中毒导致
解决“网站安全”相关处理
常见的浏览器有哪些，什么内核
chrome safari opera 现在都是使用WebKit内核
Firefox 内核 Gecko
IE 内核 Trident
猎豹安全浏览器：1.0-4.2版本为Trident+Webkit，4.3版本为 Trident+Blink；
360安全浏览器 ：1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink；
360极速浏览器：7.5之前为Trident+Webkit,7.5为Trident+Blink；
傲游浏览器 ：傲游1.x、2.x为IE内核，3.x为IE与Webkit双核；
搜狗高速浏览器：1.x为Trident，2.0及以后版本为Trident+Webkit；
QQ浏览器开始使用Webkit和Trident双内核
微信内置浏览器 腾讯自己X5内核
列出常见的标签，并简单介绍这些标签用在什么场景
* <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> 用于制作一个无序列表
以上
*** 谢谢观赏，点赞 ***
网友评论