超文本标记语言——HTML,顾名思义，是一种标记语言，也就是采用一系列标签将网页设计成人们心中最美观的形式的语言。HTML又分为多个版本，现在用的最多的是HTML5，相比其他版本，HTML5的功能就明显强大了许多，例如HTML5 规定了一种通过 video 元素来包含视频的标准方法、语义化标签的使用等等。通过这两天学习，了解了一些HTML标签的使用，和大家分享一下。
1、常见的标签
<!DOCTYPE html>：<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<html>标签将标签分为两部分，一部分用<head>标签标记，另一部分用<body>标签标记，什么是<head>标签？第一反应是头？也差不多，<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。另外<head>标签中的<title>标签是来为我们网页的标题备注。而<body>标签则是我们用户可见的部分，我们打开一个网页所看到的图片，文字，视频，以及听到的声音等等都是在<body>标签的内部完成的。
<p>标签，完成的单词是paragraph，段落的意思，它的作用就是将所标记的部分单独呈现为一行并且与前文和后文隔开，承载所标记的段落。
<br>标签，和<p>标签类似，但是<br>标签只是用于换行，并不会将上下文隔开
<hn>标签，这里的n不是字母中的n，这里的n意思是数字1到6，也就是标题的等级，比如h1就是一级标题，表示最大的标题，h6是最小的标题，一般用不着
<i><b><u>这三个标签都是用于标记字体，作用分别是倾斜，加粗，加下划线
<hr>标签，分割线标签，自动生成一个分割线
2、标签的分类
HTML所有的标签分为两类，一类是块标签，另一类是行内标签。块标签必须占满一行，即便是没有数据，它也不让，比如：h1 h2 h6 p div li ul ol hr br等等。行内标签则是内容有多少，则占据多少，例如u、strong、b、del、em、span等。div是使用最多的块标签之一，它是一个标准的块标签。span是标准的行内标签。
3、其他常用特殊标签
语义化标签
什么是语义化标签？简单来说。正确的标签干正确的事，见名即可思意。例如页面布局标签，<header><section><footer>这三个标签，程序员看到立马就懂这些标签所标记的内容是用来显示上中下三部分的。
除了布局的语义化标签，还有很多其他的语义化标签,例如<small><article><aside><cite>等，相信不用解释大家也能大概猜出这些标签的含义
多媒体标签
多媒体标签分为三种。图片，视频和音频。
图片标签为<img src="" alt="">，src为图片标签一个非常重要的属性，意为源位置，即图片的来源地址，可以是电脑的本地路径，也可以是网络路径。alt的作用是当图片加载错误的时候给用户一些提示。网络路径应该都知道，就是网址。本地路径又可以分为绝对路径和相对路径，绝对路径就是指该图片具体的位置，例如c/desktop/Myphoto/123.jpg这样。不过，在开发中不建议使用绝对路径，因为网页的制作完成之后不可能只在一台电脑中使用，因此其他的电脑无法访问。而相对路径则简便的多，因为html代码默认访问的是当前的文件夹，只需要把图片保存在当前文件夹，就可以正常访问。但是，将来的前端开发人员，大多数还是使用的网络路径，我们只需要把我们需要访问的图片放入数据库中，然后大家都可以共同访问这个图片。
视频标签为<video src="" controls=“”>，src不用说大家也知道，和图片标签一样，为视频来源位置。controls的为展示组件，包括视频的播放，下载等等。controls的值可以是任意值，包括它本身，但是在HTML5中，controls的值可以省略不写。另外，视频标签还有autoplay属性，意思为自动播放，不过在谷歌浏览器不支持这个功能，因为用户友好度不够好，用户大多不太喜欢打开网页自动播放的视频。如果一定要自动播放，可以用mute，静音播放。视频的格式建议用mp4。
音频标签<audio src="">，和视频标签差不多，视频和音频标签都有一个loop属性，作用是循环播放。
表格标签的基本使用
表格标签<table>的作用很显然是创建一个表格，相比于电脑中的word excel这些软件而言，在网页中制作表格略显麻烦。表格标签有两个子标签，<tr>标签为行标签，作用是每输入一个<tr>标签则代表有一行的表格。而<td>标签是<tr>的子标签，需要在<tr>标签内使用，<td>标签的内容就是每一个单元格的内容。表格刚创建时没有边线，可以在标签中加入属性border="",但是默认的表格边线有两层，一层是整个表格，还有一层是每个单元格的边线，可以使用另外两个属性cellspacing=""和cellpadding=""，使它们的值都等于0即可使两条边线重叠。
举个例子，我们创一个普通的表格
这加入了属性cellspacing=""和cellpadding=""之后，表格如下
这就是表格的简单创建。（注：表格标签属性中的width和height不用带单位，其他标签需要）另外，表格中单元格的合并属性为rowspan和colspan，分别代表合并行和列，它们的值代表合并单元格的个数。
表格还有个作用：表格布局。
表格不仅仅能展示数据，符合人们的审美，也可以用作布局，但是现在用的不多，因此我这里省略。
超链接标签<a>
<a>标签是网页中使用最多的标签之一，它的作用是链接不同页面，让不同页面之间有关联。超链接标签<a>有个非常重要的属性叫href，并且这个属性必须要给值，如果不给其赋值，默认只在本页面，不能跳转。href属性的值表示需要跳转的地址，可以是本地路径也可以使网络路径。另外属性，target决定页面的打开方式，默认值是_self，表示使用当前选项卡，打开新的页面。如果要用新的选项卡打开，将其值改为_blank即可。
锚点功能：<a>标签中的href属性的值为#加所跳转部分的id的值，即可直接到达这个部分。例如
<div>
<a href="#footer">回到底部</a>
</div>
<div id="footer">
</div>
此时在开头会出现一个回到底部的类似链接的四个字：回到底部
列表标签
列表标签有三种，有序列表ol,无序列表ul,数据列表dl。有序列表是按数字顺序一个个排列，无序列表前面没有序号。有序列表和无序列表的子标签是li，是list的缩写。
表单标签
首先先解释一下表单标签的作用，上文提到的所有内容都是网页的展示功能，但是我们在日常生活中使用浏览器上网的时候，除了浏览，还有一个很重要的过程，就是交互。比如我们想注册，登录一些账号，淘宝上购买一些物品，因此我们需要一种非常重要的标签，这就是表单标签。表单标签就是用来提供用户和服务器之间的数据交互。
常见的表单标签有三个：输入框input 选择框select 文本域textarea
表单标签必须包含在form标签内，form是一个行内标签。form有一个属性叫 action，它的值是将数据提交的地址。还有一个很重要的属性method，提交方式属性，常用的值有两种，get和post
input的常见类型：input的常见类型有很多，这里只展示一部分。
text大家应该都知道是文本的意思，在这里可以表示为文本类型
password类型是密码的类型，输入的时候会加密，显示黑点或者*
radio类型是单选的类型，一般用于选择性别，年龄等等
checkbox类型是多选，可以选择兴趣爱好，也用来可以提交购物车等等
number类型是只能填数字的文本
好了，我的第一次博客分享完了，拜拜啦~
640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
