HTML5是网页制作的基础，咱们今天来说说它都有哪些构成部分，怎么用，还有几点小提示。看完这篇文章，相信你会对HTML5更加熟悉！
HTML标签的基本概念
咱们先说说啥叫HTML标签？它就好比是包装网页内容的小盒子，每个盒子都有自己的开头和结尾标签。你看，像这样：
`是开始标签，`
`是结束标签，它们中间的内容就是一个段落。
HTML标签多得你数不完，每个都有对应的用处！像是` ` 就是标题，字号越小，越重要呢；而 ` `则是超级链接，点开就能去别的页面喽；还有 ` ` 这个，是用来放图片的，让网页变得更美观。
HTML元素的定义和特点
HTML元素就是从开头到结尾那块儿的代码！内容，就是中间那段。比如说，像这样：
这是一个段落
`，元素的内容就是“这是一个段落”。
咱们聊聊HTML元素吧!首先,它们都能相互嵌套哟(试想一下,一个元素里头还能放一个元素)。其次呢,你看HTML文档,都是这些嵌套在一起的元素搭建成的。再说第三件事儿，别忘了给所有外层和内层元素加上对应的结束标签，否则可能会影响到以后新的HTML版本的兼容性哟。最后,让我们来认识下什么叫空元素，比如说`
`这个元素就是没有内容的哟。
`标签，它没有内容，只在开始标签中关闭。
空元素与空内容的区别
空元素和空白内容挺像，容易混淆。理解起来，就是空元素的起始标签和终止标签都是一样的，比如`
你知道那个“标签吗？啥也没放就直接关门了。然后，有那么几个元素也空得很，比如说这个“标记，闭合的前后什么都没有。
HTML基本结构
了解下HTML文档！主要就四部分，首先是“声明”，这就是告诉浏览器我们正在看的是HTML5文件哦；然后是“标签”，它就像是整个HTML元素的装潢，每一个元素都得放在这个容器里呢；再往后是“属性”，这里是定义文档的标题啦、编码啦等等数据信息的地方；最后讲到的就是“文本”了，就是你编写网页时用到的文字内容咯。
HTML头部元素
HTML头里有很多东西，比如说“、“和“这些标签。“就像个大袋子，把整个页面的元数据都包进去；而“就是网页的大名了，会出现在浏览器的标题栏或者标签页上；`>`也是个有用的家伙，告诉你HTML文件的各种信息，比如代码是用什么编的，谁写的，大概内容等等。
HTML主体元素
HTML主体元素包括“标签、`
那什么标签？有 “ 标签，还有 “ 标签等等。“ 标签就是装所有能看见的内容的，也包括文章主要的内容~
“标签就是段落，“是标题，“就表示有超链接，“的作用就是放图。
HTML标签的属性和值
HTML标签上可以加各种特性（属性），告诉我们这个元素有些啥特点。这个设定通常放在起始标签里头，看着像这样：属性名就等于属性值。比如说，“这是一个链接”中的href就是个例子，它代表的是链接的链接地址，比如 `http://www.example.com` 这样的。
HTML注释
在HTML中，~`标签就是代码讲解，页面是看不到滴～格式就像这样~`,比如这行代码虽然看不见，却能帮助你更好地了解和修改~
HTML表单元素
HTML的表格元素，就是指`<form>`标签啦、还有后面跟着的`<input>`标签比如说单选按钮或者复合选择框这些。再后来，就是有`<textarea>`标签，它主要是用来做多行文本输入用的。最后再说下那个`
HTML列表元素
说起列表元素，你得知道
标签、
标签和
标签这些东西。用
标签做无序列表，每个列表项前都会有个小圆圈；要是用
标签来做有序列表，那每个列表项前就会出现一个数字或者字母。最后那个
标签，就是用来定义列表项的，当然也得放在
或
标签里面。
HTML表格元素
表格里的标签有很多，比如，
标签就是用来表示整个表格的，
标签是用来描述每一行内容的，
标签是用来定义每个单元格的，
标签就是让表格带有标题的那个标签。
HTML框架元素
HTML里，框架元素就像“标签这样滴。它能在网页上嵌套一段别的文档，让你在自己网站上展示别人的内容，比如“，这么一弄，就能把`http://www.example.com`的页面展示到网页上去。
HTML多媒体元素
HTML的多媒体元素就是“和“这两个标签！“是用来放声音的，而“则能播视频。
HTML图形元素
HTML的图像元素包括“和“之类的标签。懂吗？这些标签就像是画板，让你在网页上随心所欲地涂鸦。举个例子，“，这行Python代码就打造好了一块画板，然后我们就可以用JavaScript在上面乱涂了！
HTML语义元素
HTML语义元素里面有这些常见的
标签呀：
标签表示一段独立的内容，就像一篇文章或者一个博客帖子之类的；
标签就像是文档的各个章节啦；
标签就是用来定义导航链接部分的；“`标签用来定位文档或章节的头部和尾部。
HTML全局属性
HTML里有很多元素可用到的全局属性，比如`id`啦、`class`啦、`style`啦、`title`啦等等。首先说说`id`属性，它能帮你给每个元素定下专属标签；再看看`class`属性，它可是一把分类利器呢；`style`就不用说了，控制元素外观；至于`title`，就是在每个元素上加上一些额外的说明咯。
HTML事件属性
HTML的一些动态属性就是来对付你的鼠标和键盘的，比如说 `onclick `, `onmouseover`，还有 `onkeydown`。这几个玩意儿的用处可大了，就是告诉浏览器，当它遇到这些情况时要做点什么。拿 `onclick`来说，当你点到一个元素上时，就会运行里面预设好的程序代码；再看 `onmouseover`，如果鼠标停在某个元素上方，这时候也会照着预定方向走；最后说说 `onkeydown`，这个更牛，是你按下任意按键时都跑不掉的。记住，这些东东都是 HTML 的神奇魔法棒！
HTML颜色
html颜色的设置方式有三种！第一个是直接用名字，如`red`就是红色；第二个是用 RGB 数值表示，`rgb(255,0,0)`也是红的；最后，用十六进制表示就可以是`#FF0000`~
HTML链接
HTML链接就是用那个小括号 “ 标记出来的，`href`属性就是告诉浏览器要去哪儿。比方说，”这就是个链接啦”,点它就能直接跳去 `http://www.example.com` 喽。
HTML图像
咱们网页上的小图就是用`<img>`标签来定义的，贴个地址就行~比如说，`<img src=”image.jpg”>`,就能让网页里出现同名的图片咯。
HTML表单
HTML里那个”…”就是咱说的表单，简单说来，这就像个小盒子，能装下各种东西，比如啥？对了，文字框、复选框、单选按钮等等。例如，“这个段代码，就是定义了一个这样子的表单，让大家把想说的话写进去，然后一点提交，就能搞定！
HTML列表
像做菜炒菜那样，HTML列表要用到标签、标签、标签来搞定！凌乱的堆叠用标签标记，整齐排列就用标签，细节要填补用标签来完成。大约就是这样，像‘列表项1列表项2’这样的字样，就能搞出个杂乱无章的无序列表，还能加俩子项！
HTML表格
html表格就是用这些标签画出来的~ `TagName` 用来画出表格，`RowTagName` 画出表格里的行， `CellTagName` 画出单元格， `TitleCellTagName`就是标题单元格！举个例子，像 `title1 title2 cell1 cell2` 的代码就画出了一个简单的表格，包括两个标题单元格和两个单元格。
HTML框架
HTML框架就是用“这玩意儿定义出来的，能嵌套其他文件到网页里头去。
HTML多媒体
HTML5多媒体就是用“和“这两个标签搞定的，你就能在网页上看电影听歌了。比如说，“，这么简单一输，就能让网页放`audio.mp3`这首歌给你听！
HTML图形
HTML图形是通过`<canvas>`标签定义的，可以在网页上绘制图形。
HTML语义
HTML语意就是用一些特定的标签如 “ 什么的来设定网页的结构，使页面更整洁点。比如说，“文章标题”这个就可以这么搞。
文章内容
这部分代码就是给我们创建了一个新的段落，里面有个标题和正文。
HTML全局
HTML里的东西，都是靠着`id`啊、`class`呀、`style`之类的属性设定滴~它们能让元素有自己独一无二的身份象征、类别名称以及各种样式啥的！比如说，像这个，“，它就是定义了一个名叫div的元素，同时还附带了id、class、style和title这些属性。
HTML事件
在 HTML 中，你可以用 `onclick`、`onmouseover` 和 `onkeydown` 这些属性为网页添加各种事件处理程序。比如说，你看这个 `点击我` 的例子，它就是一个普通的按钮，可是当你按下去时，就会出现一个窗口并提示”Hello, world!” 这个信息！
给元素换个颜色，就得用那些颜色名、RGB值和十六进制数~比如说这句，
这是一段红色的文字
`，这段代码定义了一个段落，文字颜色为红色。
链接就用那个”href=”” 标签搞定，你想把用户带到哪个页面或者资源都行。比如，“这就是一个链接”，就让它引导咱们去 `http:// www.example.com` 看看。
HTML图像是通过`<img>`标签定义的，可以在网页上显示图像。
HTML里，表单就是用`<form>`标签弄出来的玩意儿，用来让你输入信息。
HTML的列表就是用这些奇怪的标签弄出来的，可以搞出无序或者有序的样子。
HTML表格就靠这几个标签来搞定的，包括 `table` `tr` `td` 一套下来就能轻松搞定表格的创建！
评论0