我们在前端（1）中介绍了 html 的基本语法框架，并引入了标签这一重要的概念。在 html 中书写的代码最终会渲染到网页上，正是通过标签的分类管理，将书写的代码加以分类渲染，在网页上得到不同的效果，以达到我们制作网页的目的。接下来我们将详细了解一些常用标签的使用方法。
想要获得 html 更多的标签使用介绍以及 html 的文档帮助可以参考如下网站：
https://www.w3cschool.cn/htmltags/ref-byfunc.html
1、<p>标签----创建段落
在上一篇文章中，我们提到过<p>标签，它是一个段落标签。通过<p>标签，我们可以创建一个文本段落，这里再次提到<p>标签，是要介绍它的属性。
我们之前说过，标签是用来管理文本内容的，文本内容是放置在开始标签和结束标间之间的，例如下面这行代码：
<p>文本内容放在这里</p>那么什么是属性呢？我们把标签想象成老板，我们作为员工就是文本内容。老板就是来指导我们的，那么属性就是老板的秘书，是协助老板对我们进行指导的。首先明白一个点，属性不是被指导的对象，所以属性不会被作为文本内容放置在开始标签和结束标签之间，既然属性是协助标签管理文本内容的，那么属性应该放在标签里面，就像这样：
<p align="属性值">文本内容放在这里</p>align是一个英文单词，翻译成中文为：对齐方式。看到这里相信同学们就应该理解了，既然段落里有内容，那么段落内容是怎么排列的呢？这就需要用到 align 属性：
<p align="属性值">文本内容放在这里</p>
<!-- left:左对齐 -->
<!-- right:右对齐 -->
<!-- center:居中对齐 -->
<!-- justify:两端对齐 -->align 的属性值有四种，可依据想要的布局方式进行选择书写。需要注意的是：align 属性在HTML5中已经不支持了，事实上文本的显示操作我们一般是通过css进行调整。这里讲述align属性是为了告诉大家属性的概念，以及它的作用。下面我们分别针对不同属性值进行渲染，看一看渲染后的结果有什么不同。
ps：使用快捷键对代码进行复制。选中需要复制的某一行，通过快捷键 Ctrl + d 即可快速将此行复制到下一行。这种方法只能复制一行内容。
首先看一下不设置对齐方式时渲染的结果：
<p >
《静夜思》<br>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。
</p>
再看一下设置为左对齐时的渲染结果：
<p align="left">
《静夜思》<br>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。
</p>
我们发现设置左对齐好像和不设置对齐方式的没什么区别，让我们再来看一下右对齐方式的渲染结果：
<p align="right">
《静夜思》<br>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。
</p>
这次看到明显的不同了，设置属性为右对齐时，文本内容跑到最右边去了。接下来再看看居中对齐的渲染结果：
<p align="center">
《静夜思》<br>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。
</p>
通过上述的小例子我们可以发现，标签的属性确实是用来协助标签更加精准的管理文本内容的。正确理解属性的概念，有助于我们充分发挥标签的功能，构建更加完美的网页框架。
2、<input>标签----创建交互式控件
在 PyCharm 中输入 input 然后按下 Tab 键会自动补全 <input> 标签的内容如下：
<input type="text">需要注意的是，除非是必要的属性，否则 PyCharm 不会进行自动补充，同学们在了解了属性的作用之后可查阅我在本篇文章开头分享的网站，那里对每一个标签的属性都进行了介绍。本篇文章仅会介绍一下常用的属性，事实上作为初学者也无需掌握全部属性的意义，难度太大，用时进行查找即可。
<input type="text" placeholder=""><!-- placeholder="属性值" :用于input输入的提示信息-->
<!-- button:按钮 -->
<!-- checkbox:复选框 ；需要为同组的选项都设置一个相同的属性，例如：name='check'(属性值随意拟定)-->
<!-- number:数字 -->
<!-- password:密码 -->
<!-- radio:单选框 ；需要为同组的选项都设置一个相同的属性，例如：name='rad'(属性值随意拟定)-->
<!-- text:文本 -->我们在这里介绍一下 <input>标签的两种属性， type 和 placeholder。
（1）type 属性----定义输入的类型
所谓的输入，就是用户在网页进行操作，进而产生了操作数据。这些操作数据是很重要的，这是人机交互的重要纽带，我们将在后面的文章进行讨论。我们下面进行演示按钮输入：
<input type="button" >
红色箭头所指的地方就是我们刚才代码运行时渲染出来的一个按钮，好像不太明显，接下来我们做一些改动：
<input type="button" >这是一个按钮标签
我们在<input>标签后面写了一句话“这是一个按钮标签”，需要明白的是，我们写的这句话和<input>标签是平级的，他们两个都是被<body>标签所控制的。渲染的结果依然很奇怪，按钮和文本内容是脱离的。为了让输入标签好看一些，我们介绍一下 placeholder 属性。
（2）placeholder属性----书写提示信息
我们将上面的代码再次进行修改，增加上 placeholder 属性：
<input type="text" placeholder="这是一个文本输入标签">
这时我们可以看到，提示信息就在文本输入框之中，起到了文本提示的作用。为了加以区别，我们更改一下代码：
<input type="text">这是一个文本输入标签
通过对比就能看出，属性管理的作用。使用 placeholder 书写的提示信息是在 <input> 标签内部的，它和<input> 标签是一体的。但是第二种书写方式中，提示文档的<input> 标签是平级的，它们是两个东西。
好啦，有同学可能发现了，当我使用 placeholder 属性时，更换了<input> 标签的类型为文本输入，而没有在使用按钮输入，为什么呢？因为在<input> 标签中选择按钮输入时是无法显示提示信息的。那按钮就不能显示提示信息了吗？当然不是的，按钮也是可以显示提示信息的，只是需要换个方法，接下来我们就介绍一下这种方法。
3、<button>标签----定义按钮
<button> 标签的属性有很多，我们只介绍其中的一个属性 disabled 。<button> 标签是用来定义一个按钮的，而 disabled 属性就是用来控制这个按钮是不是可以被按下，不设置属性时默认是可以按下的，我们用代码渲染一下：
<button>这是一个按钮标签</button>
这就是我们刚才定义的一个按钮渲染到网页上的样子，它现在是可以被按下的。现在我们加上 disabled 属性值再次渲染一下。 disabled 是一个英语单词，翻译为中文意思是：使无效，顾名思义就是这个属性可以使按钮无效。到底怎么才能让他无效呢？
<button disabled>这是一个按钮标签</button>
渲染之后能够发现按钮无法被点击了，与上一张图片相比也能看的出来，按钮的外观发生了一些变化。心系的同学可能发现了一个不通点，那就是之前的属性是有属性值的，而 disabled 这个属性没有属性值，只需要写上 disabled 就可以了，这样的属性还有很多，我们以后用到的话会具体分析。
4、<a>标签----定义超链接
相信很多同学在浏览网页时都会遇到超链接，点击一下就可以跳转到别的网页，这种超链接是如何制作的呢？下面让我们来看一下<a>标签：
<a href=""></a>在PyCharm 中键入 a 按下 Tab 键就会自动补齐 <a> 标签如上所示，我们会发现自动补齐了一个属性叫作 href ，并且它需要属性值等待我们填写。我们之前就说过，这是一个超链接标签，同学们可以猜一猜它的属性值应该是什么？href 是一个英文单词，翻译成中文为：超链接指向地址。那就是说，我们需要填写一个超链接的跳转地址也就是需要跳转的网址。我们填写上百度的网址，渲染一下看看效果：
<a href="https://www.baidu.com/?tn=25017023_13_dg&ch=1"></a>
渲染之后啥都没有！我们应该点击哪里呢？我们知道，属性就相当于秘书，它是不会被标签所控制的，而是协助标签控制开始标签和结束标签之间的文本，那也就是说，<a>标签和定义链接地址的属性都作用在了文本上，而我们刚才没有书写文本。到底是不是这个原因呢，我们把文本写上再次渲染一下看看：
<a href="https://www.baidu.com/?tn=25017023_13_dg&ch=1">点击此处跳转百度官网</a>
果然，渲染之后的网页出现了我们刚才协商的文本内容，并且这个文本内容似乎和之前的不太一样。颜色变了，并且还出现了一个下划线，鼠标的箭头放上去变成了一个小手手，似乎可以点击了，我们点一下看看：
非常好，成功的跳转到了百度的官网。但是有一个问题不知道大家发现没有，虽然成功的跳转了网页，但是是在我们刚才渲染的网页上进行跳转的，把我们刚才的网页覆盖了。如何保留我们的原网页，让它在一个新的网页上打开超链接呢？这就需要使用<a>标签的另一个属性 target 。target 是一个英文单词，翻译为中文表示目标。也就是超链接打来在哪里。
<a href="https://www.baidu.com/?tn=25017023_13_dg&ch=1" target="_blank">点击此处跳转百度官网</a>
<!-- _blank:在空白网页进行打开 -->再次渲染一下，点击超链接就会发现，超链接是在一个新的空白页进行打开的，原网页仍然被保留着。当然啦，它还有别的属性值，但是作为入门完全没必要都学一遍，在我们搞明白了基础概念之后，以后依据个人需求在进行查找设置，不要指望一下子就都学明白了，毕竟博主本人还没都搞明白呢------
5、<li>标签----定义列表项
li 是 list 的缩写，翻译成中文为：列表。什么是列表呢？列表就是一行一行的文字，它和表格是有一定的差距的，后续提到表格时在做对比。
<li>定义列表标签一</li>
<li>定义列表标签二</li>
<li>定义列表标签三</li>
<li>定义列表标签四</li>我们把它渲染一下看看：
可以看到，定义的四个列表都出现了，这种列表相信同学们平常浏览网站的时候都见到过，比如新闻网页上的热门头条。每一个列表的前面都有一个黑点，这种列表是没有序号的，称之为无序列表。可以通过type属性进行更改列表项前面的符号样式：
<li type="square">定义列表标签一</li>
<li type="circle">定义列表标签二</li>
<li type="i">定义列表标签三</li>
<li type="l">定义列表标签四</li>我们设定了四个不同的 type 属性值，渲染一下看看效果：
能够看到，列表前面的符号变了，我们可以通过这种方式设置喜欢的符号。但是，type 属性在HTML5中已经不被支持了，所以我们不支持这种方式进行设置。
6、<ul>标签----定义无序列表
ul 是 unordered 的缩写，翻译成中文表示无序的。事实上，对于无序列表是有一个专门的 <ul> 标签来定义无序列表的，让我们来看看它是怎么一回事。要说明的一点是 <ul> 标签必须和 <li> 标签共同使用， <li> 标签是定义列表项的，<ul> 是控制着这些列表项，让他们成为无序的列表。
有的同学会好奇了，直接用 <li> 定义的列表项本来就是一些没有序号的列表项，为啥还要用<ul>呢？这不是多此一举吗？我们先提一下块级标签和行内标签，所谓块就是划定一个区域，所谓行就是只能在规定区域进行操作。这两个概念我准备稍后再和大家一起讨论，现在我想说的是，如果在一个区域内，我们设定一个列表，不使用 <ul> 标签把它们约束起来，那么这些列表项都是自由的，如果我想设置它们的格式就需要一个一个的进行设置，而使用了 <ul> 标签对他们进行设置，就只需要在 <ul> 标签里面进行设置即可。可以先理解为方便列表项的管理。先看一下它是怎么使用的吧：
<ul type="square">
<li >定义列表标签一</li>
<li >定义列表标签二</li>
<li >定义列表标签三</li>
<li >定义列表标签四</li>
</ul>渲染一下：
我们在<ul> 标签内设置了属性 type ，事实上 type 属性在HTML5中也不被支持了，不推荐使用这一属性。在这里进行设置，只是想让同学们看到统一管理的好处，只需要在上级标签进行属性设置，就可以控制着下级标签。在 html 中标签是可以互相嵌套的，块级标签可以嵌套块级标签或者行内标签。行内标签可以嵌套行内标签。我们在随后的应用中会再次提到。
7、<ol>标签----定义一个有序列表
ol 是 ordered lists，中文意思为有序的列表，就是有序号的列表。与 <ul>标签的使用方法相同，让我们来看一下：
<ol>
<li >定义列表标签一</li>
<li >定义列表标签二</li>
<li >定义列表标签三</li>
<li >定义列表标签四</li>
</ol>渲染一下：
从渲染结果能够看到，所有的列表项都拥有了编号，编号是按照代码的先后顺序排列的。
不管是<ul>标签还是<ol>标签，它们本身并不能够创建列表，必须配合<li> 标签使用。
8、<div>标签----定义区域
同学们浏览网页时应该能够发现，网页上的信息是划分板块的，一整个网页可能划分为几个不同的板块，显示不同的信息。这些板块是如何划分的呢？
<div>
<h1>div标签的使用</h1>
划分板块
</div>上面这段代码使用了<div>标签划定了一个区域，并在这个区域里设置了一个一级标题，我们渲染依稀看看效果吧：
好像看不出有什么不同，这是因为我们没有使用css代码进行修饰，我先用css修饰一下，同学们大可不用管我是怎么做的，后面会介绍的。
好啦，我将<div> 标签的区域大小设定为 300px * 300px ；背景颜色设置为粉色；字体设置为楷体，显示结果如图。划定了区域，我们可以在这个区域进行操作显示内容。所有在<div>标签内的其他标签都会接受<div>设置的属性，可以设置标题，设置段落，设置列表等，这就是标签之间的嵌套，并不难理解。上层标签总是控制着下层标签的，这个同学们需要注意。
今天就先介绍这些吧，希望同学们可以跟随着代码进行操作一下。新手初学，难免有错漏，欢迎留言指正-----初阳
1590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
