HTML基础-认识HTML

通过以下几个问题来认识HTML

一.什么是HTML

二.HTML的作用

三.HTML的发展史

        IETF简介

        W3C简介

四.HTML结构

    html标签

    head标签

    titile标签

    body标签

    head内部标签

    mate标签

五.HTML标签

    HTML标签分类

    HTML标签关系分类

六.DTD文档声明

七.HTML和HTML5的区别

    XHTML和HTML的区别

八.htm和.html扩展名的区别


一.什么是HTML

HTML其实是HyperText Markup Language的缩写,  超文本标记语言

二.HTML的作用

HTML就只有一个作用,它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.

这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的

所以正是因为HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"

注意事项:

HTML只有一个作用, 它是专门用来给文本添加语义的, 而不是用来修改文本样式的

H1标签它的作用是什么?

错误: H1标签可以用来修改文字的大小, 并且还可以将文字加粗

正确: H1标签的作用是用来告诉浏览器, 哪些文字是标题. 也就是H1标签是专门用于给指定的文字添加标题语义

三.HTML发展史

1993年IETF发布HTML1.0,后更加权威的W3C在1995年发布HTML2.0,一直到1999年发布HTML4.01,老大做久了就是想搞事情,2000年W3C发布XHTML1.0,XHTML1.0更加严格,这意味着在93到99年间所开发的所有网页都不能支持XHTML1继续.0版本,但是W3C不听取民意,一意孤行发布了XHML1.0、1.1、2.0,终于哪里有压迫哪里既有反抗,2004年五大厂商联合发布HTML5草案,即解决了低版本不支持高版本的问题,以前开发的网页仍然可以正常使用,W3C一看情况不妙再继续下去就太没面子了,于是在2008年合并发布了HTML5正式版,延用至今。

IETF简介

IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是"互联网工程任务组"

IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统(DNS)、用于发送邮件的简单邮件传输协议(SMTP)等

W3C简介

W3C是英文World Wide Web Consortium的缩写, 翻译过来就是W3C理事会或万维网联盟,  W3C是全球互联网最具权威的技术标准化组织.

W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee

W3C负责web方面标准的制定,像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。

Tim Berners-Lee(蒂姆·伯纳斯-李),万维网之父、html设计者、w3c创始人

百度百科


四.HTML结构

1.编写网页和写信一样都有一套规范和要求,  这套规范和要求中规定了写信的固定格式

2.写信基本结构

敬爱的江哥: 

        您好!     

正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文      

        此致

敬礼!                                                                                                                你的朋友 伊健                                                                                                                                               2066年6月6日

3.网页基本结构:

<html>

        <head>

                <title></title>

        </head>

        <body>

        </body>

</html>

4.通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签

4.1.html标签

作用:

用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档

注意点:

其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

4.2.head标签

作用:用于给网站添加一些配置信息

例如:指定网站的标题 / 指定网站的小图片

        添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)

        外挂一些外部的css/js文件

        添加一些浏览器适配相关的内容

注意点:

一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到

4.3.title标签

作用:专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题

注意点:

        title标签必须写在head标签里面

4.4.body标签

作用:专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)

注意点:

        虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中

        一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

4.5.meta标签

4.5.1为什么会有乱码现象?

因为我们在编写网页的时候没有指定字符集

4.5.2.如何解决乱码现象?

在head标签中添加<meta charset="GBK" />, 指定字符集

4.5.3.什么是字符集

字符集就是字符的集合, 也就是很多字符堆在一起. 很像我们古代的"活字印刷术", 在活字印刷术中就是将很多刻有汉字的小章放到一个盒子中, 然后需要印刷文字的时候再去盒子中取这个小章出来用, 正是因为如此, 才导致了乱码问题。如字符集A第666位为字符“李”,而字符集B第666位为字符“王”。

所以在网页中指定字符集的意义就在于告诉浏览器我用的是哪个盒子, 你应该如何去查找才能找到对应的正确的内容

4.5.4.GBK(GB2312)和UTF-8区别

GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文,体积比较小

UTF-8里面存储的世界上所有的文字,体积比较大

4.5.5.那么在企业开发中我们应该使用GBK(GB2312)还是UTF-8呢?

如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快

如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8

懒人推荐: 不管三七二十一, 一律写UTF-8即可

4.5.6.注意点:

在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码

所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

五、HTML标签

HTML标签分类

个数分为单标签和双标签

关系分为并列标签和父子标签

单标签

只有开始标签没有结束标签, 也就是由一个<>组成的

<metacharset="UTF-8"/>

双标签

有开始标签和结束标签, 也就是由一个<>和一个</>组成的

<html></html>

HTML标签关系分类

并列关系(兄弟/平级)

<head>

</head>

<body>

</body>

嵌套关系(父子/上下级)

<head>

        <metacharset="UTF-8"/>

        <title>百度一下,你就知道123</title>

</head>

六.DTD文档声明

什么是DTD文档声明?

DTD文档声明是用来告诉浏览器,该网页是使用哪一版本的HTML编写的,方便浏览器正确渲染编译网页

DTD文档声明格式:

每一个不同版本的规范都有不同的DTD文档声明

HTML5文档规范声明:<!DOCTYPE html> ,该版本上下兼容

注意事项:

DTD文档声明必须在 HTML 文档的第一行

DTD文档声明不是 HTML 标签

DTD文档声明没有结束标签

DTD文档声明对大小写不敏感

浏览器并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制,不写也能运行

七.XHTML、HTML、HTML5的区别

HTML语法非常松散容错性强

XHTML更为严格,它要求标签必须小写,必须成对,属性必须使用引号

HTML5是HTML的下一版本,相较于HTML增加了许多新的功能

八.  .htm和.html的区别

DOS操作系统下只支持htm

windows操作系统下两者都支持

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

推荐阅读更多精彩内容

  • 什么是HTML HTML其实是HyperText Markup Language的缩写, 超文本标记语言 HTML...
    魏皇子阅读 348评论 0 2
  • 什么是HTML HTML其实是HyperText Markup Language的缩写, 超文本标记语言 HTML...
    cheney0217阅读 419评论 0 1
  • 什么是HTML HTML其实是HyperText Markup Language的缩写, 超文本标记语言 HTM...
    极客江南阅读 21,880评论 29 196
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,101评论 0 0