初识HTML

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • HTML、XML、XHTML 有什么区别 1.HTML 是用来描述网页的一种语言,指的是超文本标记语言 (Hype...
    饥人谷_牛牛阅读 678评论 0 2
  • 1.html、xml、xhtml HTML HTML(Hyper Text Mark-up Language)即超...
    饥人谷_小侯阅读 436评论 0 1
  • 一、HTML、XML、XHTML 有什么区别 HTML: 超级文本标记语言是标准通用标记语言下的一个应用,也是一种...
    淡然7698阅读 236评论 0 1
  • 一、HTML、XML、XHTML有什么区别? 首先我们先来简略了解这三种语言是什么。HTML:超文本标记语言(英语...
    青鸣阅读 342评论 0 1
  • 1.HTML、XML、XHTML 有什么区别 HTML: 超文本标记语言,是语法较为松散的、不严格的Web语言 对...
    饥人谷_米弥轮阅读 433评论 0 1