上一篇文章大概介绍了一下html的一些知识，这一篇打算开始正式介绍html里面的一些标签结构了。
• html中的标签数量是很多的，据人统计大概有300个左右，并且每年都会以20-30个的速度增加着，但是这么多的标签我们不必都去记住，因为很多标签都是不常用的或者可以用基础的标签搭配组合，实际上我们需要掌握的大概在30个左右。
• 在前端开发中我们要知道，并不是你用的技术多么先进就显得多么厉害，我们要考虑到代码的可读性以及后期的可维护性，用常见的标签来写才会让其他人都能读懂你的代码。
• 代码中还有一点很重要的就是要勤写注释哟~ 顺便一提在html中的注释形式是<! – – your code – – >
好了前言说完了，我们正式开始介绍一些标签吧！
（这里的标签都是属于html4中的内容，html5会有新的标签和新的内容，我在后面的文章中再介绍。）
几个基础的标签
• p标签
<p></p>是段落标签，在<p></p>中间写的内容会当做一个段落来处理。
p标签的特点是独占一行，并且段落上下都会有一定的间隔距离。
• 标题标签 h1-h6
标题标签的作用是着重显示文字，一般用在标题上，它会将里面的文字加粗放大并且独占一行。其中h4的默认大小是正常的文字大小，不过是加粗的。
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
• strong标签
<strong></strong>标签的作用是将里面的文字加粗处理。
• em标签
<em></em>的作用是将里面的文字变成斜体。
• del标签
<del></del>是删除标签，它会在里面的文字的中间画一条横线，一般在打折的时候使用。
• address 标签
<address></address>是地址标签，它会将里面的内容变成斜体并且独占一行。
这六个是很基础很简单的标签，作用也是显而易见，还有另外一种结构化标签，它们没有特殊的效果，而是用来当做容器来盛放其他的标签，这有点类似于每个家庭中都会单独分出来厨房卧室大厅等区域，然后每个区域中还有各种各样的设备，这里的家庭中的区域就是我们的结构化标签的作用。
结构化标签还有另外一个作用就是用来为里面的子元素设置样式。一般的元素如果某一条属性没有被开发者设置样式的话，它会自动继承父级元素的相应属性的样式。
比如我们现在有三个p标签，我们想让三个p标签里面的文字都变成红色，给三个p标签都写上color:red 是非常麻烦的，最简单的方法是将三个p标签都放到一个结构化标签里面，给这个结构化标签一个color:red的样式，这样里面的三个p标签就都会有这个样式了。
这两点作用是最常见的，因此我们在写一个页面之前，最先考虑的就是结构问题，因此一般先写结构化标签。
下面我们就介绍最常见的两个结构化标签。
• div
<div></div>标签可以说是我们在前端开发中用的最多的标签了。
• span
<span></span>标签里面多数情况下盛放文字或者小icon之类的小物件。
我们现在为div标签设置一下样式，并且在中间加一些文字。
<div style=”width: 100px; height:100px; background-color: red”>这是一个实例的结构化标签，一切正常</div>
我们发现文字会在这个div标签的边界处自动换行，也就是说这个div标签圈定了一个范围，里面的文字或者其他标签都默认在这个范围里面显示。
但是当我们在中间书写的不是中文而是一串英文字符的时候，我们会发现这一串英文字符在div的边界处并没有换行，而是一直显示下去，这是为什么呢？
文字分隔符与编码集
• 这是因为我们的每一个汉字，计算机都会认出来是一个单独的单词，每一个汉字都会默认地和其他汉字分隔开，但是英文字母却不会默认地分隔开，因为计算机不知道多少个英文字母才算是一个单词，因此我们需要手动为其添加分隔符。
而这个分隔符我们也不陌生，就是我们常用的空格，只要我们在这一串字符中间加几个空格，那么被空格隔开的字符就会被当做是一个单词从而与其他的单词分隔开。
那么现在问题来了，空格的作用是当做分隔符来使用，并不是我们所想的那种空白的一个格，那么我们怎么在html中写空白格呢？
• 这里我们就要提到一个名词叫做编码集了。我们在书写html的时候，很多特殊的符号是无法写出来的，这个时候我们只能用编码来让浏览器识别我们所想的符号。编码的格式是&编码; 千万不能忘记后面的分号哟~
• 空格的编码就是 当我们写多个 的时候，在页面中我们也就可以看到多个空白格了。
• 其次，用来当做标签的尖括号<>也是无法正常通过符号来显示出来的，我们同样需要用编码集让浏览器识别出来。< 小于号的编码是< less than的意思，同理，> 大于号的编码时> great than的意思。我们只要在html中写这两个编码，那么大于号和小于号就可以正常显示出来了哟~我记得有一个表情是 >_<~
• 同样的，回车也是属于分隔符，在html中回车是没有作用的，我们想要在网页上让文字显示出回车换行的效果的话，编码同样也是没有办法实现的，我们需要一个标签叫做<br>标签，这个标签的作用就是换行。w3c标准中提到：<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。
一些重要的标签
• ol li
<ol><li></li></ol>这是一组标签，它们二者都是成对出现的，每一个标签单独出现都是没有意义的事情。
这一组标签叫做有序列表，ol是外面的列表框，li是里面的子项，并且每一个li子项的前面都会带有序号。
• ol有一个属性叫做type属性，这个属性的作用是用来设置每一个子项前面的显示内容的。默认情况下按照数字来排序的，我们可以改成type=”a” ，这样前面序号是按照小写字母来排序的。
同样的，type的属性值还可以设置成A–>按照大写字母来排序；i—>按照i的个数来排序（罗马数字？）；I—>大写I的个数来排序，除此之外，设置成其他的属性都是错误的，而错误的情况下ol会按照默认的数字来排序，2和b等都算是错误的值哟~
• ol的第二个属性叫做reversed属性，当我们给ol加上reversed=”reversed”的时候，子项就会变成倒序来排列。这个属性直接写reversed也是可以的，不过我同样认为reversed=”reversed”才是规范的写法。
• ol的第三个属性叫做start属性，这个属性的意思是我们让子项从第几个序号开始显示，当我们写start=”2″的时候，前面的序号就会变成2、3、4 而不是默认的1、2、3，字母也是同样的道理。
但是有一个很重要的问题就是，我们在哪个网页看到文字前面有这些什么数字啊字母啊的序号吗？
所以最后的结果就是，我们基本很少用到ol、li标签哟~
• ul li
<ul><li></li></ul>
这一组标签是无序列表，除了前面的序号都变成了点（• ）之外，其他的和有序列表基本一样。
• ul同样有一个type属性，这个属性的值设置的是每一个子项前面显示的符号的形式，默认的值是disc圆点，当值是square的时候，前面显示的就是小方块，值是circle 的时候前面显示的就是空心圆圈。
但是同样的道理，我们也没有在哪个网页上看到文字前面带有这些恶心的圆点方块之类的，因此我们在使用ul、li标签的时候，都会先把ul的默认样式list-style改成none，list-style: none;不过这已经属于css的部分了~
无序列表一般用来当做导航栏之类的，里面的结构样式都一样的部分，像淘宝什么的网页的导航栏就都是用ul、li来写的。
• a
<a></a>标签是一个非常重要的标签，它有一个必须写的属性叫做href —> hyperText reference 超文本链接，里面写的是地址。
a的英文单词是anchor锚点的意思，因此这个标签的作用主要有两点：
1.定点跳转我们指定的id的元素位置。这个用法需要我们在href中写上id的值 <a href=”#clickme”>点击我跳转</a>这样就会跳转到那个id是clickme的元素的位置
2.超链接。我们自href中写一个本地的或者网上的链接，比如www.baidu.com ，这样我们点击的时候就会跳转到这个网页上去了。
3.协议限定符。在href中我们可以写javascript代码，比如href=”javascript:while(1){alert(‘你中毒了’)}”，当我们写上这行代码的时候，我们点击这个a标签之后浏览器就会一直弹出对话框。
通常在移动端我们都用a标签来调用接口，比如：href=”phoneto:12234512345″ 调用手机的拨号功能来拨打电话，像美团外卖之类的就是用的这个功能。
• a标签默认的是蓝色的字体并且带有下划线，我们在页面初始化的时候通常也习惯与将a标签的颜色和下划线的默认属性都去掉。
• img
<img></img>标签是image图片的意思，它有一个必备的属性叫做src –->source，这个src属性的值就是我们的图片的地址。一般来说我们给src填写两种值：
1.网上的链接
2.本地的链接
说道本地的链接就不得不提到本地链接的书写形式。本地链接分为两种：相对地址和绝对地址。而绝对地址我们通常是不用的，因为当文件上传到服务器上的时候，凡是用绝对地址写的链接统统都会失效的，因此我们都要选择相对地址。
相对地址中 ../的意思是返回当前文件的上一层目录 ，./的意思是当前文件所在的目录，比如说我们有一张图片和这个html文件在同一个文件夹下面，那么我们就可以写<img src=”./tupian.png”></img>
同时这个图片标签还有两个属性。
1.alt属性。这个属性是为其设置图片占位符，也就是说当图片因为网速或者链接错误等原因加载不出来的时候，就会显示alt里面我们设置的值。
2.title属性。图片提示符。当我们鼠标移入图片的时候，在鼠标旁边会出现一个黄色的小方块来显示这个title属性里面设置的值。
以上就是几个比较重要的标签的介绍了，还有一个不太常见也不太重要但是需要了解的标签，table标签。
• table
<table></table>是一个三级结构标签，它要搭配<tr><td></td></tr>这两个标签一起使用才可以。
table是表格的意思，<table><table>这个标签就是设置外层的表格，然后tr是表格的行，td是表格的数据单元，我们可以理解为列。
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table标签的大概结构是这个样子的，同时td还有几个属性。
1.cellpadding内边距属性，我们可以为每一个单元格都设置内边距 cellpadding=”10px”;
2.cellspacing 属性，这个属性的作用规定单元之间的空间，当我们设置为0的时候就可以去掉边线了。
3.colspan属性，这个属性规定了这一个td占了几个单位，默认的一个td占一个单位，类似于excel中的合并单元格的作用。
我们现在一般都不用table标签了，这是一个结构化标签，以前用这个标签来给页面进行布局，但是现在我们直接用div + css来对页面进行布局。
那么为什么我们要弃用table标签呢？
说道这里我们就不得不提一下异步和同步的概念。
在生活中，我们常说的异步是指顺序的干两件事情，比如先吃饭，再玩游戏；同步的意思是同时干，一边吃饭一边打游戏。
但是在计算机领域中，异步指的是生活中的同步，同时加载的意思，同步则是生活中的顺序加载的意思。
这个概念一定要搞清楚。
table的缺点在于服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是table标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。以前的手机网速慢，厂家重视内容的展现而不是样式的展现，所以那个时候用table，而现在网速很快，大家都重视用户体验，当我们浏览淘宝店铺的时候，如果要等到所有的图片全都加载完之后才显示出来的话那也太蠢了，所以table标签现在我们基本放弃使用了。
但是基本不使用不代表不使用，有些情况下还是可以用table标签的哟~
最后我们再来介绍一个非常重要的标签——表单
<form></form>表单元素，这个元素可以让我们实现前端和后台的数据交互。
我们通过form表单向后台发送数据，数据都是由两部分组成的：数据名+数据内容。
表单都是成组出现的，里面有各种各样的元素。
我们先介绍一下form表单元素拥有的属性：
1.action属性 填写服务器地址，这个属性的意思是我们把数据传递到那个服务器。
2.method属性 传输方法，我们在这里填写通过什么方式来传输数据，一般填写的都是POST/GET这两种中的一个，虽然有其他的方式但是用的韩少，而post和get的区别我们在网络篇会有介绍，这里我们暂时都先写get方法吧。
介绍完属性之后，我们再介绍一下表单拥有的子元素：
• input标签 这个标签是一个单标签，不需要闭合。
这个标签有一个type属性，而这个属性的值决定了这个input标签的类型是什么。
1.text 如果type=”text”的话，这个input标签就是一个输入框，我们可以在里面输入文字信息。
2.password 如果type=”password “的话，这个input标签就是一个密码框，我们在里面输入的文字信息都会以隐藏的形式展现出来。
3.submit 如果type=”submit “的话，这个input标签就是一个提交按钮，我们点击这个提交按钮之后就会把整个表单的数据发送到后台服务器上了。
我们刚才提到了发送数据一定要有数据名和数据内容，数据内容就是我们给input标签设置的value属性的值，而数据名我们就需要在input标签里面写一个name属性来告诉浏览器我们这个数据的名字是什么了。
这里我们写一个简单的用户提交的表单：
在浏览器上的显示内容是这个样子的：
当我们随便写一个用户名和密码之后点击提交按钮，我们会发现我们的网页地址上后面出现了我们所传递的数据的信息。
?username=123&password=123 这里我们很容易就可以看出来数据的名字和数据的内容了。
同时，input还有其他的数据形式：
• type=”radio”
• type=”checkbox”
radio是单选框的意思，当我们给一个input设置radio的type之后，它就会变成一个圆点，我们可以选择这个圆点，但是我们写很多的单选框的时候，他们似乎都可以被选中，并没有单选的作用。这里是因为我们还没有为这一组单选框设置名字，当我们给几个radio都设置了同一个name的时候，它们就会变得只能选择一个了的单选框了。
checkbox是复选框的意思，当input的type值设置成这个之后，和radio一样的道理，设置好数据的名字，我们可以同时选择很多的选项。
• 当我们开发的时候，我们其实是需要为每一项属性都设置一个默认的值的，像sex这种单选框，我们设置一个默认值之后，就会有一半的用户不需要去更改这个选项，会极大地提高用户体验。
• 设置这个默认的值的方法就是添加一个checked=”checked”属性，我们在哪一个input标签里面设置了这个属性，那么哪一个选项就是默认被选择的状态
最后我们还有一个下拉列表的标签<select></select>
<select>
<option>山东</option>
<option>黑龙江</option>
<option>北京</option>
</select>
下拉列表的name属性是写在<select>标签上的，里面option中间填写的内容就是默认的数据值，但是如果我们给每一个option都加一个value属性的话，那么option中间添加的文字则不作为传递的数据的值，value的值作为传递的数据的值，同时下拉列表的默认选中的是第一个选项，如果我们要改变默认选项的话，要添加的属性是selected=”selected”而不是上面的checked。
那么我所总结的比较常用的重要的标签主要就有以上几种了，希望对大家有帮助哟~
标签的分类
html的标签主要分为两类：
1.行级/内联/行内元素 display: inline;
这一类元素的特点是：
• 不沾满整行，元素所占空间完全由内容所控制
• 不可以改变宽高
标签代表有：a em br select span strong
2.块级元素 display: block;
这一类元素的特点是：
• 占满整行，无论内容多还是少
• 可以改变宽高
标签代表有：address div form h1-h6 p ul ol li table
其实还有第三种标签，这一类标签既不属于行级元素也不属于块级元素，它们既不独占一行，又可以随意改变宽高，比如<img><input >标签。