归子莫_个人页_阿里云开发者社区

【重构前端知识体系之HTML】带你重忆HTML那些记忆模糊的标签

【重构前端知识体系之HTML】带你重忆HTML那些记忆模糊的标签引言上节，说了HTML是标记语言，那么最重要的就是标记，也就是标签。那标签那么多？要在这里全部写出来？当然否。这里会讲解常用的标签。（常用达到70%）希望在各种前端框架频出的年代，HTML依然牢记于心。回顾在刚开始介绍的时候，讲了一个简单的demo，这里贴出来。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个标题</title></head><body> <h1>我是一个页面内容的标题</h1> <div>我是一个美男子，你信吗？</div></body></html>HTML元素什么是HTML元素？HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。具体什么意思呢<div>我是一个美男子，你信吗？</div>像上述代码就是一个div元素，它包含了div开始标签，div元素内容，div结束标签，它们一起组合成为了一个div元素。<body> <h1>我是一个页面内容的标题</h1> <div>我是一个美男子，你信吗？</div></body>同样的以上的代码描述了一个body元素。空HTML元素在之后的标签学习中，有那么一个标签<br>， 这个标签定义换行。像这种HTML 元素被称为空元素，它是在开始标签中关闭的。但！为了以后版本迭代和规划，在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。未来的 HTML 版本不允许省略结束标签！HTML标签这里按照功能分类讲解基础标签列表1、<!DOCTYPE> 定义文档类型。2、<html> 定义 HTML 文档。3、<head>定义关于文档的信息。4、<title>定义文档的标题。5、<body>定义文档的主体。6、<br>定义换行。7、<h1> - <h6>定义 HTML 标题。8、<p>定义段落。9、定义注释。示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个标题</title></head><body> <h1>我是一个页面内容的标题h1</h1> <p>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落</p> </body></html>效果看起来，学会了这些基础标签，就可以在网上发一篇小作文啦。实现文字自由？单独的文本未免太过于单调，来点修饰修饰文本（格式化）列表1、<abbr> 定义文档类型。最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。<abbr title="ni shi zui hao de">nszhd</abbr>2、<i> 显示斜体文本效果。3、<b>呈现粗体文本效果。4、<em>定义强调文本。5、<strong>把文本定义为语气更强的强调的内容6、<u>定义下划线文本。示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个标题</title></head><body> <p><i>我是一个i段落</i></p> <p><u>我是一个u段落</u></p> <p><em>我是一个em段落</em></p> <p><strong>我是一个strong段落</strong></p> <p><b>我是一个b段落</b></p></body></html>效果表单列表1、<form> 定义供用户输入的 HTML 表单。2、<input> 定义输入控件。3、<textarea> 定义多行的文本输入控件。4、<button>定义按钮。5、<select>定义选择列表（下拉列表）。6、<option>定义选择列表中的选项。示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个标题</title></head><body> <form action="form_action.asp" method="get"> <p>name: <input type="text" name="name" /></p> <p>password: <input type="password" name="password" /></p> <p><textarea>请填写简介</textarea></p> <p>select： <select> <option value="wo">我</option> <option value="zui">最</option> <option value="shuai">帅</option> </select> </p> <input type="submit" value="Submit" /> </form></body></html>效果图像、音频与视频列表1、<img> 定义图像。2、<canvas> 定义图形。3、<svg>定义 SVG 图形的容器。4、<audio> 定义声音内容。5、<video>定义视频。6、<source>定义媒介源。示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个标题</title></head><body> <p> img: <img src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/baidu.9627e61f.png" /> </p> <p> canvas: <canvas id="myCanvas"></canvas> </p> <p> svg: <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </p> <p>audio: <audio src="http://96.ierge.cn/15/235/471737.mp3" controls="controls"></audio> </p> <p> video: <video src="https://vd3.bdstatic.com/mda-kiq250jsxvmh23gu/hd/cae_h264_nowatermark/mda-kiq250jsxvmh23gu.mp4"></video> </p></body><script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#FF0000'; ctx.fillRect(0, 0, 80, 100);</script></html>效果链接列表1、<a> 定义锚。<a href="https://www.baidu.com">我是百度</a>2、<link> 定义文档与外部资源的关系。<link rel="stylesheet" type="text/css" href="demo.css" />列表类型列表1、<ul> 定义无序列表。2、<ol> 定义有序列表。3、<li> 定义列表的项目。4、<dl>定义定义列表。5、<dd>定义定义列表中项目的描述。6、<dl>定义定义列表中的项目。示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个标题</title></head><body> <ul> <li>我是第一</li> <li>我是第二</li> <li>我是第三</li> </ul> <ol> <li>我是第一</li> <li>我是第二</li> <li>我是第三</li> </ol> <dl> <dt>我</dt> <dd>很帅</dd> <dt>你</dt> <dd>帅吗</dd> </dl></body></html>效果表格列表1、<table> 定义表格2、<caption> 定义表格标题。3、<th>定义表格中的表头单元格。4、<tr> 定义表格中的行。5、<td>定义表格中的单元。6、<thead> 定义表格中的表头内容。7、<tbody>定义表格中的主体内容。8、<tfoot>定义表格中的表注内容（脚注）。示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我是一个标题</title></head><body> <table border="1"> <thead> <tr> <th>姓名</th> </th> <th>分数</th> </tr> </thead> <tfoot> <tr> <td>小明</td> <td>100</td> </tr> </tfoot> <tbody> <tr> <td>小红</td> <td>70</td> </tr> <tr> <td>小东</td> <td>80</td> </tr> </tbody> </table></body></html>效果其他列表1、<script> 定义客户端脚本。<script type="text/javascript">document.write("Hello World!")</script>2、<object> 定义嵌入的对象。3、<embed> 为外部应用程序（非 HTML）定义容器。<embed src="test.png" />4、<head>定义关于文档的信息。5、<meta> 定义关于 HTML 文档的元信息。6、<base>定义页面中所有链接的默认地址或默认目标。总结HTML的标签很多，相信大多数的xdm都了解。但并非都能记得。告诉你们一件事，我在做HTML的面试题集，准确率竟然只有60%多。这也是我写本篇文章的目的。查漏补缺。重构前端知识体系，你要一起吗？博客说明与致谢文章所涉及的部分资料来自互联网整理，其中包含自己个人的总结和看法，分享的目的在于共建社区和巩固自己。引用的资料如有侵权，请联系本人删除！感谢万能的网络，W3C，菜鸟教程等！感谢勤劳的自己，个人博客，GitHub学习，GitHub公众号【归子莫】，小程序【子莫说】如果你感觉对你有帮助的话，不妨给我点赞鼓励一下，好文记得收藏哟！关注我一起成长！所属专栏：重构前端知识体系（HTML）幸好我在，感谢你来！

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

【重构前端知识体系之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文档的内容，用代码来翻译<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我是一个标题</title> </head> <body> <h1>我是一个页面内容的标题</h1> <div>我是一个美男子，你信吗？</div> </body> </html>看了图片，看了代码，不看看表现？看了之后是不是发现HTML一套一套的，很符合强迫症患者！那么首先从第一行开始！<!DOCTYPE> 声明所有 HTML 文档必须以 <!DOCTYPE> 声明开头。同时是不区分大小写。来看看一些常用的HTML版本的通用声明。HTML5<!DOCTYPE html>HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0<!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，菜鸟教程等！感谢勤劳的自己，个人博客，GitHub学习，GitHub公众号【归子莫】，小程序【子莫说】如果你感觉对你有帮助的话，不妨给我点赞鼓励一下，好文记得收藏哟！关注我一起成长！所属专栏：重构前端知识体系（HTML）幸好我在，感谢你来！

归子莫_个人页

个人介绍

擅长的技术

乘风者计划还能参加吗

【重构前端知识体系之HTML】带你重忆HTML那些记忆模糊的标签

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

乘风者计划还能参加吗

【重构前端知识体系之HTML】带你重忆HTML那些记忆模糊的标签

【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解

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

【算法-初级-数组】删除排序数组中的重复项（多语言版实现）

【重构前端知识体系之HTML】带你重忆HTML那些记忆模糊的标签

【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解

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

【算法-初级-数组】删除排序数组中的重复项（多语言版实现）

乘风者计划还能参加吗