Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【重构前端知识体系之HTML】2022,你还会来看HTML吗?带你重温亦或走进!

【重构前端知识体系之HTML】2022,你还会来看HTML吗?带你重温亦或走进!

原创
作者头像
归子莫
发布于 2022-01-15 08:38:04
发布于 2022-01-15 08:38:04
29300
代码可运行
举报
文章被收录于专栏:归子莫的文章归子莫的文章
运行总次数:0
代码可运行

【重构前端知识体系之HTML】2022,你还会来看HTML吗?带你重温亦或走进!

引言

写些篇文章的时候,自己思考了几个问题。但最终还是下定决心写,写文是为技术,技术传递的过程却不止呼技术。

思索的问题

  • HTML的文章太多了,为什么还要写?
  • HTML的入门谁不会?还要学?
  • HTML的文章基本都是水文,谁会看?

自己的回答

一个知识点的诞生,如果形成了标准的话,那么中心就确定了。再多的文章,其表达的含义是一致的,万变不离其宗!

文章书写的目的不就是为了使其读者能够读懂文章并有所得吗?因此我还是要写,但表达得让你们喜欢(持续追求)!

我相信大多数来看此文章的都知道HTML,或者说都听说过HTML。

但其实总有一些人不明白,总有一些人以为明白(我自己!),因此我将视角转向了你们!我的xdm(1.写代码 2.兄弟们 3.想得美 4.斜对面 5.兄弟萌 ),不要误会,兄弟萌(男女都兄弟哈)!真正以读者的角度来写文章!

文章水不水,其实不是因为同类的文章多了,而是因为同类的文章太像了,审美疲劳了,没有新意了。

那么,来!拿出我的新意,为你而写!

同样的,掏出你的金手指,为我而赞!(出自鬼刀——捡起你的头颅,为我而战!)

什么是HTML

总是逃不开这个话题。抱歉,我再来为你们述说一次!

HTML的英文全称是 Hyper Text Marked Language(超文本标记语言),它于1990年由Web的发明者的Tim Berners-Lee发明。

先说点听不懂的(或者一次听不懂的)

  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签文本内容
  • HTML文档也叫做 web 页面

新手来看(白话)

HTML的页面被称为文档,那么这些文档我想让它长得和我一样帅,但是腿要比我短!

这可怎么办?把它的腿打个标记:不能比我长!是不是就行了!

说到这个标记,HTML笑了笑:不就是我的菜上了吗!

HTML通过标记式的指令,将影像、声音、图片、文字动画、影视等内容显示出来。

如果你刚了解HTML,就记住它是修饰文档的标记。

伟大的作者

HTML的作者是蒂姆·伯纳斯·李。

他发明了世界上第一个浏览器。

第一个服务器

发明了www(万维网)。

同时发明了HTML、HTTP和URL。

以上给我一个,就烫手,不对,就烫死了!

如若不信,可百度百科一下。

是否之前从未想过HTML的作者是谁?这是我回过头来总结的时候,需要特别提出的,在学习HTML的时候,应当还有其作者的名字,这里提出来,是为感谢和致敬!

HTML的演变史

看了作者,那岂能不了解HTML趋于完美的发展历史!

  • HTML 1.0 (HTML/HTML+)超文本标记语言(第一版) ——在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)。
  • HTML 2.0 ——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时。
  • HTML 3.2 ——1996年1月14日,W3C推荐标准。
  • HTML 4.0 ——1997年12月18日,W3C推荐标准。
  • HTML 4.01(微小改进) ——1999年12月24日,W3C推荐标准,编码更加规范。
  • XHTML 1.0 —— 发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布。
  • XHTML 1.1 —— 于2001年5月31日发布,W3C推荐标准。
  • XHTML 2.0 —— 于2002年8月5日发布,W3C草案。
  • HTML5.0 —— 2012年12月17日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。
  • HTML5.1 —— 2013年5月6日,草案公布。

HTML的版本

看了这么多,眼尖的xdm应该发现了,XHTML。这个是什么?讲到这里,就把XML拉过来一起来个桃园三结义!

HTML、XML、XHTML 的区别

  • HTML:超文本标记语言,是语法较为松散的、不严格的Web语言;
  • XML:可扩展的标记语言,主要用于存储数据和结构,可扩展;
  • XHTML:可扩展的超文本标记语言,基于XML,作用与HTML类似,但语法更严格。

得出XHTML是语法严格的HTML。

一个HTML长什么样

讲了这么多,就是没讲HTML!进入正题!

HTML的案例

首先来看看一幅图

这就是一个HTML文档的内容,用代码来翻译

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>我是一个标题</title></head><body>  <h1>我是一个页面内容的标题</h1>  <div>我是一个美男子,你信吗?</div></body></html>

看了图片,看了代码,不看看表现?

![演示效果](https://guizimo.oss-cn-shanghai.aliyuncs.com/img/image-20220115143257935.png)

看了之后是不是发现HTML一套一套的,很符合强迫症患者!那么首先从第一行开始!

<!DOCTYPE> 声明

所有 HTML 文档必须以 <!DOCTYPE> 声明开头。同时是不区分大小写。

来看看一些常用的HTML版本的通用声明。

HTML5

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>

HTML 4.01

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果有人杠,凭什么上面就是常用的HTML版本啊!那好你中计了!

常用HTML版本,一个宝藏网站!地址 可见HTML5的发展还是相当不错的!

因此现在我们的文档声明一般是使用HTML5的<!DOCTYPE html>

HTML标签

在上面的代码案例中出现了很多标签,也就是标记。如html、meta、head、title、body、h1、div等等一些的标签!

新手发言:我记不住啊!

我也记不住!写多了,手记住了!所以不要担心,这里不展开讲HTML标签了。

现在它们的标记作用你应该理解了,吧?

HTML字符集

看到了有一个charset="UTF-8"的代码,是啥意思呢?它是告诉浏览器应该用什么编码去解析你的HTML。

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。 具体为什么是这两种,还是下回一定!

当然,如今的版本用的大部分是HTML5,而HTML5 中的默认字符集为 UTF-8。是不是又少了一个担忧?

总结

本文是第一篇,也是把自己之前的HTML笔记推翻重来的一次文章改造。自己写这篇博客,看了三十几篇博客,感觉这一篇够劲!

重构前端知识体系,你要一起吗?

博客说明与致谢

文章所涉及的部分资料来自互联网整理,其中包含自己个人的总结和看法,分享的目的在于共建社区和巩固自己。 引用的资料如有侵权,请联系本人删除! 感谢万能的网络,W3C,菜鸟教程等! 所属专栏:重构前端知识体系(HTML) 幸好我在,感谢你来!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
XHTML 语法规则以及 HTML/XHTML 文档类型说明小结
可扩展超文本标记语言(英语:eXtensible HyperText Markup Language,XHTML),是一种标记语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。从继承关系上讲,HTML 是一种基于标准通用标记语言(SGML)的应用,是一种非常灵活的置标语言,而 XHTML 则基于可扩展标记语言(XML),XML 是 SGML 的一个子集。XHTML 1.0 在 2000 年 1 月 26 日成为 W3C 的推荐标准。
白鹿第一帅
2021/03/02
8140
XHTML 语法规则以及 HTML/XHTML 文档类型说明小结
1.HTML基础必备知识学习笔记
学习路径 通过前面【全栈之前端前置知识】我们知道,前端开发一般学习路径都是 HTML+CSS+Javascript等
全栈工程师修炼指南
2023/03/19
1.3K0
1.HTML基础必备知识学习笔记
html基础知识
超文本传输协议,Hypertext Transfer Protocol。 这是一个文件的传输协议,我们上网的时候,所有的文件都是通过HTTP这个协议,从服务器上传输到客户的电脑里面的。
Demo_Yang
2018/10/15
5800
HTML基础复习(一)
HTML:超文本标记语言(HyperText Markup Language),不是一种编程语言,是标记语言 HTML元素: <p>段落</p> HTML标签: <p>段落</p> HTML声明:<!DOCTYPE>并不是标签 HTML5:<!DOCTYPE html> HTML4.0.1 strict:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Tr
用户1667431
2018/04/18
1K0
HTML 简介
该文介绍了HTML的基本概念,包括HTML的定义、用途、基本结构、标签和元素等。同时,还介绍了HTML的一些常用属性和标签,以及HTML5的新特性。
静默虚空
2018/01/05
1.2K0
前端知识点系列一:HTML
注意:不同浏览器tab之间(同一个url),不共享sessionStorage,但是,会共享localStorage和cookie。
娜姐
2022/05/13
6030
HTML5学习(三):认识HTML
HTML其实是Hypertext Markup Language的缩写,即超文本标记语言。 HTML的后缀名:.html
孙寅
2020/06/02
9440
XHTML 语法规则及 HTML/XHTML 文档类型说明(XHTML 1.0/XHTML 1.1 和 HTML 4.01/HTML 5)
可扩展超文本标记语言(英语:eXtensible HyperText Markup Language,XHTML),是一种标记语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。从继承关系上讲,HTML 是一种基于标准通用标记语言(SGML)的应用,是一种非常灵活的置标语言,而 XHTML 则基于可扩展标记语言(XML),XML 是 SGML 的一个子集。XHTML 1.0 在 2000 年 1 月 26 日成为 W3C 的推荐标准。
白鹿第一帅
2022/05/08
1.4K0
XHTML 语法规则及 HTML/XHTML 文档类型说明(XHTML 1.0/XHTML 1.1 和 HTML 4.01/HTML 5)
说说html 的<!DOCTYPE>声明&标准模式与兼容模式
我们都知道<!DOCTYPE>声明位于文档的最前面,处于<html>标签之前。 <!DOCTYPE>声明不是html标签,它的作用:告知web浏览界面应该使用哪个html版本。 例如: <!DOCTYPE html>  则是告诉浏览器应使用html5。 建议:总是给html文件加上<!DOCTYPE>声明,确保浏览器能预先知道文档类型。 在html 4.0.1中,<!DOCTYPE>声明需引用DTD(文档类型说明),因为html 4.0.1是基于SGML(Standard Generalized Marku
用户1149564
2018/01/11
2.7K0
w3c标准html5手册_在w3c中规定html决定页面的
下面的图是我在网上看到的一张图,总结的非常好。转: HTML常用标签及其用法
全栈程序员站长
2022/09/30
1.3K0
w3c标准html5手册_在w3c中规定html决定页面的
【网页前端】HTML基础入门以及概述
操作系统默认安装的是 IE 浏览器, win10 操作系统默认安装时 Edge 浏览器,那么还有其他浏览
陶然同学
2023/02/27
4480
【网页前端】HTML基础入门以及概述
HTML5 & CSS3初学者指南(1) – 编写第一行代码
介绍 网络时代已经到来。现在对人们来说,每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址,就像http://www.codeproject.com,等待一下,网页就加载到浏览器窗口中。一个典型的网页是由文本、图像和链接组成的。除去内容上的差异,不同网站的网页也具有不同的外观和感受,以实现在网络上建立自己的身份品牌的目的。 如果你也曾想要了解你屏幕上的这些网页是如何被创建出并以各式各样的方式渲染的,那么这里正是你可以了解到这些知识的地方。让我们一起走进在浏览器中创建了这么多网页的两项核
葡萄城控件
2018/01/10
1.5K0
HTML5 & CSS3初学者指南(1) – 编写第一行代码
初识HTML(超文本标识语言)
HTML(超文本标记语言)是构建网页的基础语言。每个网站都是由 HTML 代码构成的,并且它能够决定网页的结构和内容。在深入学习其他前端技能(如 CSS 和 JavaScript)之前,掌握 HTML 是至关重要的。
一条晒干的咸鱼
2024/11/19
5970
初识HTML(超文本标识语言)
HTML5
HTML指的是HTML 4.01, XHTML是HTML的过渡版本,XHTML是XML风格的HTML 4.01。而HTML 5指的是下一代的HTML,也就是HTML 4.01的升级版。
Qwe7
2022/05/18
1.9K0
<!DOCTYPE> 的理解
     今天被问道“有没有仔细了解过<!DOCTYPE>标签?”,愣了一下,因为一开始在W3cschool上看到过建议使用XHTML Transitional DTD,之后就很听话地把Dreamweaver的HTML文档类型默认设置为XHTML 1.0 Transitional。之后就理所当然地一直用到现在了。人这东西还真是,越长大就越懒了,很多东西都被潜意识地当成了理所当然。既然已经被问及,就去找了找资料,总结了一下,权当做笔记吧~~
书童小二
2018/09/03
6000
HTML5设计原理(上)
本文探讨了W3C的HTML5标准与WHATWG的HTML5标准之间的差异和关系,以及HTML5标准的发展历程和现状。
RP道貌不岸然
2017/11/21
1.5K0
1.HTML基础知识-HTML进阶
HTML,超文本标记语言,是构成网页的主要语言。我们经常所说的HTML,其实指的是HTML 4.01。
见贤思齊
2020/09/24
1K0
前端科普文:为什么&lt;!DOCTYPE&gt; 不可或缺
When question comes 你一定在 HTML 页面最前面看到过这样一行代码(比如 百度): <!DOCTYPE html> 或者说类似这样的(比如 博客园-韩子迟 PS:博客园首页 文档类型声明同百度): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 那么问题来了。 这行代码有什么用? 去掉它会有什
前朝楚水
2018/04/04
9490
HTML的声明标签
我们在书写网页的时,很少关注HTML的声明标签。同时,很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以,如果你不注意设置了错误的DOCYTPE,结果会让你大吃一惊。
OECOM
2020/07/01
1.6K0
WEB入门.五 页面设计简介
在上一阶段我们全面地学习了客户端页面技术的实现——HTML,内容包括:HTML 基本标签、表单和框架的使用、模板的制作和应用以及常用的网页布局特效等。通过学习,我们已经可以使用所学技术完成企业级门户网站的静态页面设计。但在实际应用过程中,设计师设计的页面在不同浏览器中的浏览效果不够一致,将导致页面不能兼容的问题,例如:在页面中定义一个层,使用 width 和 height属性设计层的大小,IE浏览器在解析 width 和 height 属性时将包含边框和内边距的大小,而使用符合 W3C标准的浏览器FireFox 在解析时不包含边框和内边距的大小。为保证设计出符合 Web标准的页面,兼容多种浏览器版本包括信息家电产品,如手机、PDA 、平板电脑等,我们将在本阶段学习 XHTML 的相关知识,以及如何使用 XHTML + DIV + CSS 技术对客户端页面进行重构,从而保证浏览效果完全一致。
张哥编程
2024/12/17
1470
WEB入门.五  页面设计简介
相关推荐
XHTML 语法规则以及 HTML/XHTML 文档类型说明小结
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验