你将通过简洁教程学到Web基础知识。 适合想 了解/踏入 web世界的启航者。 HTML部分教程为免费体验,如果你觉得该教程对你有帮助,你可以花10元购买该教程支持我。 如果你无意购买该教程且觉得本教程很好,也可以推荐给你的好友,支持我的教程。

Web解释

根据百度百科解释:

web(World Wide Web)是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统

从上可以对Web有个大概的了解:
-基于超文本 -基于HTTP

基于超文本

试想一下,你有两个文本文件 现在,你突发奇想,让两个纯文本文件关联在一起 我在阅读
file 1
时,能不能跳到
file 2
里去? 是的,你现在的想法和1960年Ted Nelson的想法类似(下图是Ted Nelson) 1960年,Ted Nelson构思了一种通过计算机处理文本信息的方法,不同空间的电子文档通过超链接组织起来成为一个“网” 这个文档“网”称为“超级文本”,简称“超文本”。

基于HTTP

超文本的一个重要特性就是“关联”,如何实现文档的关联,或者如何实现关联文档的超链接是个难题。 思路是:当我在查看文档
file 1
时,需要查看
file 2
,那就将
file 2
下载并查看。 显然 Ted Nelson 也意识到了这一点,组织协调万维网协会(World Wide Web Consortium)和Internet工作小组(Internet Engineering Task Force)共同合作研究发布了用于超文本传输的协议HTTP

HTTP全称Hyper Text Transfer Protocol(超文本传输协议),经过多年的发展,现在HTTP能够传输图片等多媒体文件,是Web世界的中流砥柱,应用非常广泛

小结

可以简单理解:Web本质是通过HTTP传输协议构建起来的一个超文本网络。

超文本标记语言

你已经理解什么是超文本了 在此基础上,再了解下超文本标记语言(
H
yper
T
ext
M
arkup
L
anguage) 相比超文本,超文本标记语言多了个
标记
。 这个标记,指的是用于标记内容的
标签
为了让你直观的看懂
标签
是什么 现在和我一起打开安装好的代码编辑器:VSCode
独在异乡为异客 每逢佳节倍思亲 遥知兄弟登高处 遍插茱萸少一人
将上面的
九月九日忆山东兄弟
填入到你的VSCode中
ctrl + s
组合键选择一个你喜欢的位置保存文件,后缀名为
.html
找到你保存的文件,用浏览器打开 是的,你通过自己的努力开发了你的第一个网页🎋,虽然没有炫酷的动画也没有生动的交互效果,但你迈出了你的第一步,你在Web世界造出了可以使用的东西。 嗯哼,虽然可喜,但路还有很长,收拾好激动的心灵,我们要继续了。 来看下刚刚的网页,效果并不理想 期待的效果是每一句都换行,而不是连起来。

为什么? 因为浏览器在处理 html 文档时,会自动忽略换行 如何解决? 使用

标签 (p标签是什么?无需感到迷茫,接下来将会和你解释你的迷茫,现在先解决问题)

找到你的VSCode,修改网页内容:

独在异乡为异客

每逢佳节倍思亲

遥知兄弟登高处

遍插茱萸少一人



ctrl + s
保存修改,找到你的浏览器,
F5
刷新页面 嗯~,这才是正确的效果 神奇吗?嗯~,也许对刚踏入Web世界的你来说确实有点神奇。 好了,神奇的事情先放一放,刚刚上面的一系列操作,可能有几个地方让你有点无法理解,现在让我罗列下你有可能不懂的地方吧。
1、为什么需要保存为
.html
后缀

----------------------------------------
就像你经常在Windows上创建的文本文件
.txt
一样,
.html
用来表示 “I'm an HTML document.”。 噢,有个小提示,Windows默认不查看文件后缀,你可以在“查看”->“文件拓展名” 开启
2、

是什么?

----------------------------------------

:是HTML众多标签中的一个,用于说明内容是一个段落。 在HTML中,一个段落就是一行,就像这样 用四个

标签包裹内容时,也就有四个独立的行了

小结
虽然内容有点多且超前,但我让你看到了HTML标签的作用是什么,以及它怎么工作的。 现在去泡杯茶,稍微休息一下,给脑子放松一下吧。 5分钟后去看看HTML是怎么工作的。

HTML如何工作

嗯,你来了,那开始吧🍻 现在,加强下之前的概念
-一个HTML文档 等于 一个网页 -不同的HTML标签有自己不同的功能,但只对包裹的内容有效
一个HTML文档其实是由多个HTML标签组成的 那么HTML是如何工作的呢 首先,你用浏览器打开了电脑上的网页文件 1.浏览器读取你的网页 2.浏览器读取到第一行

独在异乡为异客


3.发现


标签, 4.浏览器知道了这行是一个段落 5.继续读取


后面的内容, 6.浏览器读取到了


7. 呈现效果
https://static.cdnjs.cloud/202098_box/446889bce26fd23fa5a23bfff432b313_video202098159321.mp4_video202098159321.mp4
上面的动画有点简陋,实际上浏览器读取你的HTML文档再呈现出来是个复杂的过程,但这还不是你现在要学习的内容。 你了解HTML了吗?如果你还不理解,没关系,现在是答疑时间。
什么是HTML?

----------------------------------------
HTML是用
内容
+
标签
组成的一个文档(或者叫文件)
什么是HTML标签?

----------------------------------------
HTML标签是包裹内容的特殊符号,当浏览器遇到这个符号时就知道是什么 “类型” 的数据,比如上面的

....

就告诉浏览器,“我里面的诗句是一个段落噢”。

学习什么

任何事都需要一个统一的标准,如果没有一套规范,比如在现实世界中,如果没有法律约束,整个社会将会处于混乱中(你的钱将会被抢、暴力会泛滥.....)。 Web世界也是如此,这个标签有什么功能,如何使用等,都有一个规范。这个规范,也就是你和我熟知的HTML版本,通俗地讲就是
HTML几
(HTML2.0、HTML3.2、HTML4.0等) HTML5 就是新的,新一代的HTML规范。

新技术的出现都是为了解决现有的问题

需要新的HTML规范是因为旧的HTML规范对于现在已经暴露出很多弊端:
各浏览器之间的兼容性问题
嘿嘿,看到这些段子你是不是嘴角微微一撇 确实,有很多前端开发人员是非常痛恨IE浏览器的,因为它很多地方与标准“格格不入”,有点独立独行的味道。 但其实其中是存在 亿点点 误会的。 其实现在的HTML标准大部分都是W3C这个组织制定的,IE在浏览器领域耕耘的时候W3C还是个穿开裆裤不懂事的小屁孩。后来各浏览器厂商联合起来,IE出一套方案,其他几家联合起来出了与之不兼容的另一套方案,并且提交了W3C,让人觉得那才是标准,后来W3C逐渐强大。而微软也忙于修复早期Windows频繁出现的蓝屏、死机等问题。后来的结果你都知道了。 所以不是IE不符合标准,是标准要搞IE。 神仙打架殃及凡人,不同的标准给前端开发带来了额外的工作量,在开发时候需要兼容不同的标准,这也是“天下苦IE久矣”的由来。 对web世界来说,浏览器内斗是web世界发展的阻力。 所以有一套统一的标准是很重要的,这是HTML5在努力办的事情。
Web应用程序的功能被限制
现在,你可以看到许多在线工具网站
-------------------- 视频剪辑 --------------------

bilibili云剪辑

秀展网

-------------------- 动画 --------------------

炫酷动画

可交互动画
这大多依赖一些HTML5特有的标签,如

标签 这些炫酷的功能在HTML5之前,通常需要依赖其他组件来实现,例如
Flash
所以,HTML5让web拥有了超强的能力。

需要注意的是:HTML5还在发展中,还有很大潜力。


----------------------------------------
噢噢,例子举得有点多了,仿佛我是个话痨了。 回归正题,学习HTML5,你需要学习的东西有很多:标签、页面布局、Ajax异步、HTTP协议、主流开发工具和框架 .... 现在你正处于HTML部分教程中,所以,你接下来只需要理解
常用
标签的功能和使用方法就足够了,至于那些让人头大的技术,暂时抛在脑后。

说明

标签是整个文档的

标签,网页中的所有标签都写在 中。
其他标签........

知识点:什么是根标签?

现在,让你的左右手空出来,左手握拳,右手张开,然后用张开的右手抓住你左手的拳头。 你握拳的左手被张开的右手包含着,这是一个包含关系。 HTML标签可以相互包含,例如这样:

Hello

World


当然,套娃也是可以的

Hello

World


把上面的代码可视化一下 这标签之间的包含关系看起来就是一颗倒过来的树呀。 因为在最外层,和树根部在相同位置。 所以你知道为什么叫根标签了吧。

标签属性

《山海经》:
蠃鱼,鱼身而鸟翼,音如鸳鸯,见则其邑大水。
说人话就是:
蠃鱼,长着鱼的身子却有鸟的翅膀,发出的声音像鸳鸯鸟鸣叫,在哪个地方出现那里就会有水灾。
上面的蠃鱼:
-鱼的身子 -鸟的翅膀 -声音像鸳鸯鸟鸣叫
这些就是蠃鱼的属性。 其实标签也有自己的属性,标签的属性以键值对的形式出现,就像下面这样:

举个栗子,用HTML的方式来表示一条蠃鱼:
<蠃鱼 身子="鱼+鸟的翅膀" 声音="鸳鸯鸟">

页面结构(乱入🤪)

Stop! Stop! Stop!
为了防止你头大,在和你介绍的常用属性之前,需要和你稍微说下HTML页面结构,因为在下一节的例子会用到。
文档

I'm a paragraph.

I'm the second paragraph.

I'm the third paragraph.


上面这个例子是一个非常基础的文档,当这个HTML文件被浏览器解析呈现出来的时候,你会看到三个段落: 在上面的例子中,可以分为三个部分:
-HTML版本声明部分 -页面头部部分 -页面主体

-------------------- HTML版本声明 --------------------


上面是一个HTML5声明,用于告诉浏览器
I'm HTML5.
为什么需要“声明”这种东西呢,因为HTML是一直在发展的,到现在的HTML5,出现了多个HTML版本,有HTML4,有HTML3,还有一些古老的网站在使用HTML2(
https://www.instanet.com/
就是其中一个),在浏览器解析这些不同版本的HTML时,需要告诉浏览器文档是那个版本的HTML,浏览器才能正确解析呈现HTML页面。 下面是一些常用的HTML声明:

知识点: 并不是一个标签,它只是用于告诉浏览器该如何解析网页。并且需要在标签前面。 不是标签 不是标签 不是标签


-------------------- 页面头部 --------------------

文档
上面是例子中页面头部部分,这个部分用于标记页面的
元数据

知识点:元数据 说实话,没有什么好的例子可以简单直观的方式解释这个概念。 不过,元数据的定义是“描述数据的数据”。根据这个定义,可以举一反三,列出几个生活中比较常见的例子 领导叫你开会,开会时做的笔记是元数据(因为笔记总结描述了开会的内容) 一本书的目录可以看作是整本书的元数据(目录可以看作是每一章节的一个大致描述)

在HTML中也存在元数据,元数据存放在标签里面。 在之间的内容最终不会显示出来,因为元数据是给浏览器看的
文档
中的和title标签暂时不管,现在只是理解页面的大致结构。
-------------------- 页面主体 --------------------
里面才是真正的显示内容。 在例子中,内的内容是

I'm a paragraph.

I'm the second paragraph.

I'm the third paragraph.


也就是:
-------------------- 总结 --------------------
页面结构大致结构
........ ........

常用属性

主要使用属性是
lang
属性
lang属性用于指定一个元素里面内容所使用的语言。 当使用到根元素中时,代表整个页面所使用的语言。 下面,将用Google自带的页面翻译功能来演示lang属性 1、
en-us
表示英语(美国) 当lang属性为en-us表示当前页面使用的语言是美式英语


文档

I'm a paragraph.

I'm the second paragraph.

I'm the third paragraph.


将上面的代码
ctrl+s
保存并用chrome打开。你会发现,Chrome自动弹出页面翻译按钮,因为你使用的是中文,页面使用的是英语。 2、如果将

修改为

(zh-cn表示中文简体,中国大陆)
文档

I'm a paragraph.

I'm the second paragraph.

I'm the third paragraph.


不管怎么刷新页面,Chrome浏览器都不会提示翻译,因为页面使用的语言和你使用的语言是一样的。 下面是一个国家代码表,你可以将该代码作为
lang
属性的值
国家 | 2位代号 | 3位代号 亚兰群岛 | AX | ALA 阿富汗 | AF | AFG 阿尔巴尼亚 | AL | ALB 阿尔及利亚 | DZ | DZA 美属萨摩亚 | AS | ASM 安道尔 | AD | AND 安哥拉 | AO | AGO 安圭拉 | AI | AIA 南极洲 | AQ | ATA 安提瓜和巴布达 | AG | ATG 阿根廷 | AR | ARG 亚美尼亚 | AM | ARM 阿鲁巴 | AW | ABW 澳大利亚 | AU | AUS 奥地利 | AT | AUT 阿塞拜疆 | AZ | AZE 巴哈马 | BS | BHS 巴林 | BH | BHR 孟加拉国 | BD | BGD 巴巴多斯 | BB | BRB 白俄罗斯 | BY | BLR 比利时 | BE | BEL 相信 | BZ | BLZ 贝宁 | BJ | BEN 百慕大 | BM | BMU 不丹 | BT | BTN 玻利维亚 | BO | BOL 波斯尼亚和黑塞哥维那 | BA | BIH 博茨瓦纳 | BW | BWA 布瓦岛 | BV | BVT 巴西 | BR | BRA 英属印度洋领地 | IO | IOT 文莱达鲁萨兰国 | BN | BRN 保加利亚 | BG | BGR 布基纳法索 | BF | BFA 布隆迪 | BI | BDI 柬埔寨 | KH | KHM 喀麦隆 | CM | CMR 加拿大 | CA | CAN 佛得角 | CV | CPV 开曼群岛 | KY | CYM 中非共和国 | CF | CAF 乍得 | TD | TCD 智利 | CL | CHL 中国 | CN | CHN 圣诞岛 | CX | CXR 科科斯(基林)群岛 | CC | CCK 哥伦比亚 | CO | COL 科摩罗 | KM | COM 刚果民主共和国(曾是扎伊尔) | CD | COD 刚果共和国 | CG | COG 库克群岛 | CK | COK 哥斯达黎加 | CR | CRI 科特迪瓦 | CI | CIV 克罗地亚(本地名称:Hrvatska) | HR | HRV 古巴 | CU | CUB 塞浦路斯 | CY | CYP 捷克共和国 | CZ | CZE 丹麦 | DK | DNK 吉布提 | DJ | DJI 多米尼加 | DM | DMA 多明尼加共和国 | DO | DOM 厄瓜多尔 | EC | ECU 埃及 | EG | EGY 萨尔瓦多 | SV | SLV 赤道几内亚 | GQ | GNQ 厄立特里亚 | ER | ERI 爱沙尼亚 | EE | EST 埃塞俄比亚 | ET | ETH 福克兰群岛(马尔维纳斯) | FK | FLK 法罗群岛 | FO | FRO 斐济 | FJ | FJI 芬兰 | FI | FIN 法国 | FR | FRA 法属圭亚那 | GF | GUF 法属波利尼西亚 | PF | PYF 法国南部地区 | TF | ATF 加蓬 | GA | GAB 冈比亚 | GM | GMB 格鲁吉亚 | GE | GEO 德国 | DE | DEU 加纳 | GH | GHA 吉拉尔塔 | GI | GIB 希腊 | GR | GRC 格陵兰 | GL | GRL 格林纳达 | GD | GRD 瓜德罗普岛 | GP | GLP 关岛 | GU | GUM 危地马拉 | GT | GTM 几内亚 | GN | GIN 几内亚比绍 | GW | GNB 瓜亚那 | GY | GUY 海地 | HT | HTI 希尔德和麦当劳群岛 | HM | HMD 洪都拉斯 | HN | HND 香港 | HK | HKG 匈牙利 | HU | HUN 冰岛 | IS | ISL 印度 | IN | IND 印度尼西亚 | ID | IDN 伊朗(伊斯兰共和国) | IR | IRN 伊拉克 | IQ | IRQ 爱尔兰 | IE | IRL 以色列 | IL | ISR 意大利 | IT | ITA 牙买加 | JM | JAM 日本 | JP | JPN 约旦 | JO | JOR 哈萨克斯坦 | KZ | KAZ 肯尼亚 | KE | KEN 基里巴斯 | KI | KIR 韩国民主人民共和国 | KP | PRK 大韩民国 | KR | KOR 科威特 | KW | KWT 吉尔吉斯斯坦 | KG | KGZ 老挝人民民主共和国 | LA | LAO 拉脱维亚 | LV | LVA 黎巴嫩 | LB | LBN 莱索托 | LS | LSO 利比里亚 | LR | LBR 利比亚·阿拉伯·牙买加 | LY | LBY 列支敦士登 | LI | LIE 立陶宛 | LT | LTU 卢森堡 | LU | LUX 澳门 | MO | MAC 马其顿,前南斯拉夫共和国 | MK | MKD 马达加斯加 | MG | MDG 马拉维 | MW | MWI 马来西亚 | MY | MYS 马尔代夫 | MV | MDV 马里 | ML | MLI 马耳他 | MT | MLT 马绍尔群岛 | MH | MHL 马提尼克 | MQ | MTQ 毛里塔尼亚 | MR | MRT 毛里求斯 | MU | MUS 蛋黄酱 | YT | MYT 墨西哥 | MX | MEX 密克罗尼西亚联邦 | FM | FSM 摩尔多瓦共和国 | MD | MDA 摩纳哥 | MC | MCO 蒙古 | MN | MNG 蒙特塞拉特 | MS | MSR 摩洛哥 | MA | MAR 莫桑比克 | MZ | MOZ 缅甸 | MM | MMR 纳米比亚 | NA | NAM 瑙鲁 | NR | NRU 尼泊尔 | NP | NPL 荷兰 | NL | NLD 荷属安的列斯 | AN | ANT 新喀里多尼亚 | NC | NCL 新西兰 | NZ | NZL 尼加拉瓜 | NI | NIC 尼日尔 | NE | NER 尼日利亚 | NG | NGA 纽埃 | NU | NIU 诺福克岛 | NF | NFK 北马里亚纳群岛 | MP | MNP 挪威 | NO | NOR 阿曼 | OM | OMN 巴基斯坦 | PK | PAK 帕劳 | PW | PLW 巴勒斯坦领土,已占领 | PS | PSE 巴拿马 | PA | PAN 巴布亚新几内亚 | PG | PNG 巴拉圭 | PY | PRY 秘鲁 | PE | PER 菲律宾 | PH | PHL 皮特凯恩 | PN | PCN 波兰 | PL | POL 葡萄牙 | PT | PRT 波多黎各 | PR | PRI 卡塔尔 | QA | QAT 团圆 | RE | REU 罗马尼亚 | RO | ROU 俄罗斯联邦 | RU | RUS 卢旺达 | RW | RWA 圣海伦娜 | SH | SHN 圣基茨和尼维斯 | KN | KNA 圣卢西亚 | LC | LCA 圣皮埃尔和密克隆 | PM | SPM 圣文森特和格林纳丁斯 | VC | VCT 萨摩亚 | WS | WSM 圣马力诺 | SM | SMR 圣多美和普林西比 | ST | STP 沙特阿拉伯 | SA | SAU 塞内加尔 | SN | SEN 塞尔维亚和黑山 | CS | SCG 塞舌尔 | SC | SYC 塞拉利昂 | SL | SLE 新加坡 | SG | SGP 斯洛伐克 | SK | SVK 斯洛文尼亚语 | SI | SVN 所罗门群岛 | SB | SLB 索马里 | SO | SOM 南非 | ZA | ZAF 南乔治亚州和南桑威奇群岛 | GS | SGS 西班牙 | ES | ESP 斯里兰卡 | LK | LKA 苏丹 | SD | SDN 苏里南 | SR | SUR 斯瓦尔巴和扬马延群岛 | SJ | SJM 斯威士兰 | SZ | SWZ 瑞典 | SE | SWE 瑞士 | CH | CHE 阿拉伯叙利亚共和国 | SY | SYR 台湾 | TW | TWN 塔吉克斯坦 | TJ | TJK 坦桑尼亚联合共和国 | TZ | TZA 泰国 | TH | THA 东帝汶 | TL | TLS 多哥 | TG | TGO 托克劳 | TK | TKL 汤加 | TO | TON 特立尼达和多巴哥 | TT | TTO 突尼斯 | TN | TUN 火鸡 | TR | TUR 土库曼斯坦 | TM | TKM 特克斯和凯科斯群岛 | TC | TCA 图瓦卢 | TV | TUV 乌干达 | UG | UGA 乌克兰 | UA | UKR 阿拉伯联合酋长国 | AE | ARE 英国 | GB | GBR 美国 | US | USA 美国离岛偏远地区 | UM | UMI 乌拉圭 | UY | URY 乌兹别克斯坦 | UZ | UZB 瓦努阿图 | VU | VUT 梵蒂冈城邦(圣洁) | VA | VAT 委内瑞拉 | VE | VEN 越南 | VN | VNM 维尔京群岛(英国) | VG | VGB 维尔京群岛(美国) | VI | VIR 瓦利斯和富图纳群岛 | WF | WLF 西撒哈拉 | EH | ESH 也门 | YE | YEM 赞比亚 | ZM | ZMB 津巴布韦 | ZW | ZWE

说明

用于容纳页面元数据

一些简单的例子


知识盒子
例子中,指明了页面的标题为<br />知识盒子<br /> 下面是一些现实中的例子 <img src='https://static.cdnjs.cloud/20200921/image_936647678376.png' /> <img src='https://static.cdnjs.cloud/20200921/image_100245110047.png' /> <h1>疑问解答</h1> <p>不是说<head>中的的内容不会被渲染显示出来,那为什么<title>中的标题会显示?</p> <img src='https://static.cdnjs.cloud/20200921/image_177503994202.png' /> 一般把绿色区域作为渲染显示区,也就是页面内容显示的区域。 黄色区域中的显示的是页面的标题,也就是<title>中的内容,显示页面标题只是为了用户更好的辨认页面,提高用户体验(起码我是这样认为的)。 如果浏览器开发厂商愿意,也可以提取<head>中的作者信息、作者姓名等一起显示到标题栏。 元数据是否显示,这只是浏览器厂商一些用户体验的做法,与元数据不显示是不冲突的。 <h1>露两手?</h1> <br /><head>标签|是页面渲染后的上半部分|!是页面元数据的集合|页面的头发<br /> <br />元数据的作用是什么|也是渲染后页面显示区域的一部分|不显示,也没什么作用|!记录页面信息<br /><br /><h1>说明</h1> 该标签用于表示页面的标题或名称 <h1>例子</h1> 在上一节中你已经看到了<title>的例子,这里就不用再和聪明的你说了,直接去练习吧 <h1>练习</h1> <br />---------- 选择题 ----------<br /> <br />下面那个是正确的<title>标签写法|<title>标题<title>|<title>标题|!<title>标题|<br /> <br />---------- 操作题 ----------<br /> 打开你的 VSCode ,开发你的网页,要求页面标题显示为 <br />Web启航港<br /> <img src='https://static.cdnjs.cloud/20200922/image_583249441303.png' /> <br /><h1>说明</h1> <h4><link>用于链接网页之外的资源。</h4>现在主要用于 <br /> -为页面引入<br />CSS文件<br /> -引入<br />icon图标<br />,或者说指定当前页面的图标 <br /> <br />--------------- <link>常用属性 ---------------<br /> <link> 标签属性属性粗略统计有十几个,其中最常用的属性有以下三个: <h5>1. rel属性</h5>rel属性用于说明链接的资源是哪一种资源,比如图片呀、CSS文件呀 等等,浏览器通过这个属性判断资源类型然后处理,就好像你Windows上的记事本,是用来查看 <br />.txt<br /> 纯文本文件的,如果你用记事本来打开图片,那只能看到乱码。 <img src='https://static.cdnjs.cloud/20200926/image_628966535915.png' /> rel属性常用的值有 <br /> -stylesheet:用于说明引入的是一个样式表文件(也就是将要学习的CSS) -icon:用于说明引入的是一个icon图标 <br /> <h5>2. type属性</h5>type属性用于说明资源的MIME类型。 噢~,忘记了你是Web界的新手,要和你讲解一下上面是MIME类型,先来看看百度百科比较正式的解释: <br><a href='https://baike.baidu.com/item/MIME/2900607?fr=aladdin' rel='nofollow'/>https://baike.baidu.com/item/MIME/2900607?fr=aladdin</a><br> <img src='https://static.cdnjs.cloud/20200926/image_765671883206.png' /> 用大白话说就是 MIME起初是用于邮件服务的协议,后来经过HTTP拓展,成为互联网媒体类型,用于规定文件类型和格式。 MIME一通用格式是:<br />类型/子类型<br /> <br /> 类型|描述|示例 text|表明文件是普通文本,理论上是人类可读|text/html(表示HTML文件), text/css(表示CSS文件) image|表明是某种图像。不包括视频,但是动态图(比如动态gif)也使用image类型|image/gif(表示git图片), image/png(表示png图片), image/x-icon(表示icon图标) audio|表明是某种音频文件|audio/midi(表示midi文件), audio/mpeg(表示MP3文件) video|表明是某种视频文件|video/webm(表示webm文件), video/mp4(表示mp4文件) <br /> 你可以亲自动手验证一下 1. 打开你的Chrome浏览器 2. <br />F12<br /> 进入Chrome浏览器的开发者模式 3. 打开百度 4. 等待百度首页加载完成,查看数据包的 <br />Content-Type<br /> 字段 <br />https://static.cdnjs.cloud/2020926_box/c85cf3b51d412bc9ec26750bb28633e7_2020-09-26-17-09-44.mp4_2020-09-26-17-09-44.mp4<br /> <h5>3. href属性</h5>href属性的值是需要链接的资源的地址,浏览器通过这个地址来获取数据,例如你需要再你的网页中使用<link>标签来引入一个CSS文件,而这个CSS的文件地址是:<br><a href='https://unpkg.com/purecss@2.0.3/build/pure-min.css' rel='nofollow'/>https://unpkg.com/purecss@2.0.3/build/pure-min.css</a><br> 那你的<link>标签应该这样写 <br /> <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.3/build/pure-min.css" type="text/css"> <br /> <br />--------------- 一点小总结 ---------------<br /> rel 和 type 属性配合,指定link标签链接资源的类型格式 href 属性指定资源的具体地址 <h1>例子1 - 引入CSS文件</h1> 为了演示<link>,你需要提前接触下CSS内容了,但不用担心CSS内容难以理解,我会详细的告诉你每一行CSS代码的作用。 现在打开你的VSCode,新建两个文件:<br />index.html<br /> 和 <br />index.css<br /> <img src='https://static.cdnjs.cloud/20200925/image_584829006031.png' /> index.html的内容如下: <br /> <html> <head> <title>Web启航 - link标签演示

九月九日忆山东兄弟

独在异乡为异客,每逢佳节倍思亲

遥知兄弟登高处,遍插茱萸少一人



index.css
内容如下
p { /* 这段是注释(浏览器将会忽略):将p标签中的内容水平居中显示 */ text-align: center; }

不要忘记
ctrl+s
保存两个文件的内容噢

上面两个文件中
index.html
有三个

标签用于显示
九月九日忆山东兄弟

index.css
里面的CSS代码将会让

中的内容水平居中显示 现在使用你的Chrome浏览器打开网页
index.html
但可惜的是CSS代码并没有起到作用,网页中的文字还是没有居中显示。 因为在浏览器看来,
index.html
虽然和
index.css
在同一个文件夹下,但两个文件是没有任何关联的,需要用标签引入
index.css

index.html
中。 修改你的
index.html
中的网页代码,添加一个标签
-rel属性值为
stylesheet
:说明link标签链接的是一个样式表(也就是我们说的CSS了) -href属性值为
index.css
:CSS文件的地址,因为
index.css

index.css
在同一个文件夹下,所以地址直接就是文件名,也就是
index.css
-type属性值为
text/css
:告诉浏览器这个是css文件或者text文件,在某些不支持CSS的浏览器上,将会把
index.css
看作是text文件,也就是纯文本文件而不会报错。

Web启航 - link标签演示

九月九日忆山东兄弟

独在异乡为异客,每逢佳节倍思亲

遥知兄弟登高处,遍插茱萸少一人



ctrl+s
保存后回到Chrome
F5
刷新网页,如果没有错误,你将会看到文字已经居中了。

例子2 - 指定页面图标

不知道你有没有注意到,你浏览的网站,大部分都有一个图标
https://www.baidu.com/

https://zhishihezi.net/

https://cn.bing.com/
这些图标可以通过 来引入 通过引入图标前,你需要一个图标。 选择一张你喜欢或者有代表性的图片,通过下面的网站将其转换未icon格式
http://www.bitbug.net/
在这个例子中,我选择我的头像(原头像是
.png
,转换未
.ico
): 然后将图标复制到网页所在的文件夹中。 准备好icon图标后,通过引入到页面中 在VSCode中修改
index.html
在 中新加一个
-rel属性值为
shortcut icon
-href属性值为
icon.ico
-type属性值为
image/x-icon


Web启航 - link标签演示

九月九日忆山东兄弟

独在异乡为异客,每逢佳节倍思亲

遥知兄弟登高处,遍插茱萸少一人



ctrl+s
保存,切换到Chrome浏览器中,
F5
刷新你的网页。 不出意外的话不起眼的小角落里你的图标已经显示出来了。

露两手

修改你的
index.html
文件,内容如下:
HTML5



ctrl+s
保存修改 然后新建一个CSS文件
style.css
内容如下:
@keyframes background-gradients { 0% {height: 0%;} 50% {height: 100%;} 75% {height: 80%;} 80% {height: 80%;} 100% {height: 100%;} } * { margin: 0px; border: 0px; padding: 0px; } html,body { width: 100%; height: 100%; } body { background-color: #ffffff; } #p { height: 100%; background-color: #1a1c31; display: flex; justify-content: center; align-items: center; animation: background-gradients 1s linear; } #p::after { content: "Stop"; display: flex; justify-content: center; align-items: center; background-color: yellow; color: #c96060; font-size: 1.5em; height: 100px; width: 100px; border-radius: 50%; box-shadow: 0 -1px 0 #616a74 inset, 0 -1px 5px #212528; border: 1px solid #202124; }
上面的CSS内容引入到修改后的
index.html
会实现一个下拉关门的简单效果,如下: 在引入
style.css
之前是没有任何效果的: 现在,你的任务是通过 标签将
style.css
引入到
index.html
中,让CSS生效实现关门效果。 GO!!

说明

标签用于说明其他元数据标签(例如标签、<link>标签)不能说明的元数据。 主要有以下四个属性 <br /> -charset 属性 -name 属性 -http-equiv 属性 -content 属性 <br /> 其中,<br />charset<br /> 属性 一般单独使用,用于表示页面所使用的编码 而 <br />http-equiv<br /> 属性、<br />name<br /> 属性 一般配合 <br />content<br /> 属性来使用 所以<meta>标签的使用格式主要是以下三种 <br /> <meta charset="...."> <meta name="...." content="...."> <meta http-equiv="...." content="...."> <br /> <p> 小提示: 一个页面中可以有多个<meta>标签 </p> <h1>属性说明:charset</h1> charset属性用于指明 <br />页面编码<br /> 说到编码这个东西,对于初学者来说是不友好的(起码对当初的我来说是这样👀)。 但绕过编码这个知识点是不太可能的,还是老老实实学下吧。 对于前端初学者来说,了解编码的基本概念就行了,太难的东西,抛~ 在~ 脑~ 后~。 GO!! 现在,你有一个计算机,它只会使用 <br />0<br /> 和 <br />1<br /> <img src='https://static.cdnjs.cloud/20200928/1_995790537402.png' /> 现在,你得让你的计算机和你交流。 但这里有个问题,你的计算机只会使用 <br />0<br /> 和 <br />1<br />,要是它和你交流,指定是这样的 <img src='https://static.cdnjs.cloud/20200928/2y_339419222432.png' /> 为了你和你计算机能交流,你必须要有一个方法将 <br />1<br /> 和 <br />0<br /> 转换成你能理解的信息,比如 26 个英文字母。 现在来尝试制定一个简单的规则 <p> 规则:用两个 <br />0<br /> 和 <br />1<br /> 数字代表一个字母,两个 <br />0<br /> 和 <br />1<br /> 有四种不同的组合(00, 01, 10, 11),每个组合代表一个字母 <br />0<br /> <br />0<br /> --> a <br />0<br /> <br />1<br /> --> b <br />1<br /> <br />0<br /> --> c <br />1<br /> <br />1<br /> --> d </p> 现在,你电脑的 <br />0<br /> 和 <br />1<br /> 开始变得有意义了,不仅有意义了,还可以管你叫爸爸。 <img src='https://static.cdnjs.cloud/20200928/3_770160842775.png' /> 那要是想计算机能表示更多的字母怎么办呢? 简单粗暴,两个不够,那就三个,再加一个 <br />0<br /> <br />1<br /> 位置。 现在再制定一个升级版的规则来容纳更多的字母 <p> 规则2:用三个 <br />0<br /> 和 <br />1<br /> 数字代表一个字母,三个 <br />0<br /> 和 <br />1<br /> 有八种不同的组合(000, 001, 010, 100, 011, 101, 110, 111),每个组合代表一个字母 <br />0<br /> <br />0<br /> <br />0<br /> --> a <br />0<br /> <br />0<br /> <br />1<br /> --> b <br />0<br /> <br />1<br /> <br />0<br /> --> c <br />1<br /> <br />0<br /> <br />0<br /> --> d <br />0<br /> <br />1<br /> <br />1<br /> --> e <br />1<br /> <br />0<br /> <br />1<br /> --> f <br />1<br /> <br />1<br /> <br />0<br /> --> g <br />1<br /> <br />1<br /> <br />1<br /> --> h </p> 这样,你的计算机就可以表示一些常用的单词了 <img src='https://static.cdnjs.cloud/20200928/4_791131330958.png' /> 如果我想计算机记住我说的单词呢?那就反过来。 在上面的例子中 <br /> -编码:将单词告诉计算机,让计算机记住转换后的 <br />1<br /> 和 <br />0<br /> -解码:将<br />1<br /> 和 <br />0<br /> 输出转换为单词 <br /> 以上这些就是 编码/解码 的一些比较简单笼统的理解了 来看下百度百科比较正式的解释吧。 <br><a href='https://baike.baidu.com/item/%E7%BC%96%E7%A0%81/80092?fr=aladdin' rel='nofollow'/>https://baike.baidu.com/item/%E7%BC%96%E7%A0%81/80092?fr=aladdin</a><br> <img src='https://static.cdnjs.cloud/20200928/image_813633118190.png' /> <br />-------------------- 拓展知识 --------------------<br /> 既然说到编码,那就拓展一下,乱码是怎么回事呢? <br /> 乱码难以解决是怎么回事呢?乱码相信大家都很熟悉,但是乱码难以解决是怎么回事呢,下面就让小编带大家一起了解吧。   乱码难以解决,其实就是编码太多,难以解决,大家可能会很惊讶乱码怎么会难以解决呢?但事实就是这样,小编也感到非常惊讶。   这就是关于乱码难以解决的事情了,大家有什么想法呢,欢迎在评论区告诉小编一起讨论哦! <br /> 娱乐一下,回归正题,在探讨为什么回乱码之前,先到VSCode里面体验一把乱码是什么。 <h5>1</h5>在你的网页 <head> 中添加一个<meta>标签,指定网页使用的编码是 <br />utf-8<br /> 在<body>标签里面加上 <p> 用于显示 <br />你好呀<br /> <br /> <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>文档

你好呀


然后使用Chrome浏览器打开
index.html
没有任何问题
2
修改网页的编码为
gb2312

文档

你好呀


然后刷新 Chrome 浏览器 你的页面回乱码
3
为什么会这样? 因为指定的网页编码与网页实际使用的编码不一样。 使用VSCode打开
index.html
,查看VSCode的右下角,这里显示的是当前文件使用的编码,可以看到,网页的实际编码是
utf-8
而你刚刚将网页编码指定为
gb2312


浏览器看到你将网页编码指定为
gb2312
就傻傻的用
gb2312
去解码
utf-8
页面,所以解码出来后的内容就是错误的了。 如果你用
规则2
去解码
规则1
的数据,那你得到的内容也是错误的。 使用
gb2312
解码
utf-8
也是同一个原理
------------------------------
以上内容让你对 编码/解码 有了一定的了解。

的作用就是用于告诉浏览器当前页面所使用的编码。

属性说明:name + content

name 属性用于表示 作者名称、网页描述、网页关键字、主题颜色等。 该属性有以下值:
name:|对应的content值格式:|说明: author|作者名称|用于指明页面作者 description |一段简短的页面描述|用于简述页面 generator|生成工具名称|指明生成该页面的工具 keywords|页面关键字","隔开|指明页面中一些重点内容 referrer||涉及很多HTTP知识,暂时不学习 theme-color|CSS颜色字符|用于设置主题颜色 color-scheme|dark/light|指明配色方案

---------- 详解 ----------

author
很简单,就是表示网页作者的名字,就像《时间简史》上标注的作者是 斯蒂芬·威廉·霍金 一样。

description
用于表示页面的描述,通常是一段比较简短的话,比如
bilibili

bilibili是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。


天猫

天猫,中国线上购物的地标网站,亚洲超大的综合性购物平台,拥有10万多品牌商家。每日发布大量国内外商品!正品网购,上天猫!天猫千万大牌正品,品类全,一站购,支付安全,退换无忧!理想生活上天猫!


小知识:如果页面被百度收录,这些描述,会出现在百度搜索页面噢

generator
在实际开发中使用很少,一般由网页自动生成工具来自动添加,用于标识网页是用什么工具生成的。 如果网页是开发人员(前端程序员👴)手动敲代码开发的网页无需添加。 这是个使用 Dreamweaver 生成的例子


keywords
用于表示页面的关键字。 细心的你可能已经发现,上面bilibili的截图也包含了
keywords
属性的 标签,

是的,一般
description

keywords
一起使用

这个网页关键字对网页本身的内容没什么影响,主要影响百度、搜狗这些搜索引擎的蜘蛛爬虫,这些爬虫爬取网页后会对网页进行整理归类。爬虫如何归类和处理你的网页就是靠
description

keywords
提供的信息。 比如在百度搜索 bilibili 首页关键字:MAD高燃 一般都会有哔哩哔哩的结果

theme-color
(主题颜色),指定一个颜色,如果浏览器支持,将会将页面周边的用户界面显示为指定的颜色。 但目前支持
theme-color
的浏览器熟练非常稀少,目前只有
Samsung Internet 6.2+

Chrome for android 80+
支持。 下面将使用安卓版本Chrome来演示
theme-color
的使用。

为了方便演示,我使用VSCode的 Live Server 插件作为服务器,用 夜神模拟器 作为安卓模拟器,在模拟器上面跑安卓版 Chrome。


https://static.cdnjs.cloud/2020930_box/8a2f4e02ecd9ffd8bfb50efddb17e279_2020-09-30-11-40-02.mp4_2020-09-30-11-40-02.mp4
如果你够细心,可以发现,Android系统本身的状态栏也在跟随颜色变化 也就是说,除了Chrome本身外,Chrome还会尽可能地去调整可视范围内用户界面的颜色,用于配合页面。
注意点: 现在的手机逐渐适配了暗色模式,如果你的android开启了黑暗模式或者深色模式之类的,那么Chrome可能会忽略
theme-color
而没有任何效果

color-scheme

theme-color
差不多,都是颜色相关的属性值。
color-scheme

CSS加载之前
用于指定网页使用的配色方案,对应的content值有两个:
-dark:深色配色方案 -light:浅色配色方案
如果页面有使用CSS且有相关颜色设置,在CSS加载完成后,将会覆盖
color-scheme
设置。
https://static.cdnjs.cloud/2020102_box/48ab29ba1ba17669d4038d73dbf01104_2020-10-02-16-19-38.mp4_2020-10-02-16-19-38.mp4

注意点: 1、color-scheme只是告知浏览器当前使用的配色方案,具体效果要靠浏览器呈现,不一定像上面的Chrome浏览器一样页面颜色变为何黑色。 2、如果CSS设置了相关颜色(比如例子中使用了CSS设置了页面的颜色),那么color-scheme将会失效。

属性说明:http-equiv + content


http-equiv
从名称上看,就知道是和HTTP内容相关的,事实上,学习该属性值,你需要对HTTP报文、安全策略、跨域请求等有足够的了解。 但目前你只是处于HTML教程阶段,所以暂不学习。

说明

九月九日忆山东兄弟

独在异乡为异客,每逢佳节倍思亲

遥知兄弟登高处,遍插茱萸少一人


还是原来的效果

说明

~

并不是一个元素,只是我个人的简写,它代表的是
-

-

-

-

-

-

这六个元素。 这六个元素用于表示页面内容的
标题

细说

这6个标签都是用于表示内容标题,那么这6个标签有什么不一样呢? 最直观区别就是字体大小不一样 除了在浏览器中表现得大小不一样外,这六个标签得语义(代表什么意思)也不一样

表示网页的主题,比如在你的个人网站或者博客上,可以使用

标签说名:xxx的博客、xxx的个人网站,对于其他类型的网站,一般建议用于显示网站Logo中的文。 例如,如果这篇教程阅读量达到 1W 时,需要制作一个纪念页面纪念,那么页面的Logo可以这么写:

元素用于显示图片,后面章节会讲到

这是腾讯官网的一个例子:
由于

表示的信息比较重要,建议页面中只使用1次

~

一般用于子标题。 例如一篇文章中,有主标题,有副标题,这些都可以用

~

来表示。

~

的使用次数没有限制

~
字体大小其实比页面默认的字体大小是要小的,不仅小,而且还比默认字体粗一些
标签主要用于表示一些边缘但又重要的内容,一般推荐h5与h6只作为免责声明或是版权通告来使用。

说明

标签用于表示一组

~

标签。 其本身是是不会表现出任何效果的,类似一个容器,将

~

装到一起。

例子

例如,可以用于一篇文章的正标题和副标题

思考

为什么需要将

~

分组呢? 也可能是为了页面的语义化:在前面提到了
语义
这个词,在HTML中,每个标签都有自己的表达的意思和用途,这就是一个标签的语义,比如教程中经常用的

标签就就是表示一个段落的 又或者刚刚学的

~

用于表示不同标题的,而HTML5新标签
可能是用于

~

标签之间的联系更紧密,住在同一间屋子里的家人肯定比屋外的陌生人更加亲密了是不是。 优化页面结构:将页面中零散的

~

标签划分为组,使零散的

~

标签变少也是种优化。 但对我和你来说,最大的作用就是操作便捷了,比如上面的例子中,标题和副标题要居中显示,那么以前的方法就是

标签设置居中

标签设置居中 但现在有了
,只需要设置
标签居中就行了
Hello,了解Web,工具,HTML的一点了解,文档标签(),元数据标签(),元数据相关标签(),元数据相关标签(<link>),元数据相关标签(<meta>),元数据相关标签(<style>),内容相关元素(<h1>~<h6>),内容相关元素(<hgroup>),内容相关标签(<section>),内容相关元素(<article>),内容相关元素(<aside>),内容相关元素(<address>),内容相关元素(<header>),内容相关标签(<footer>),知识盒子,知识付费,在线教育 </article> <nav><a href='/box/d44719fdb3540c8d043c95f3ef1b76dc'>做个简单的树洞网站听下别人的心里话吧</a><a href='/box/db1492c74c31f40dd500c078c03ed2e1'>黑客新闻</a><a href='/box/0bc34aed18069718bd4d5d4a583dbd36'>Web 启航港</a><a href='/box/7684eafe7301e20e7351f76668d550f6'>做一个网易云音乐可视化工具</a></nav> <footer> <a href="/">知识盒子官网</a> </footer> </body> </html>