body中的相关标签

body中的相关标签，主要展现在页面的内容区域。

学习`<hx>`标签，为你的网页添加标题

比如打开一个百度新闻的网站，https://baijiahao.baidu.com/s?id=1708258271675469658

如下图所示

描述文章的信息，本文章的名称用又黑又粗的字体来突出中心内容。那么h1定义最大的标题，h6定义最小的标题。

学习`<p>`标签，为你的文章添加段落

p标签，全称paragraph，译：段落

如果想在网页中显示文章，那么文章的段落和段落之间留有一定的空隙，会让用户体验更好，那么就需要p标签了。

比如给你一段文字，让你在网页中显示对应的段落的内容，打开VSCode，将代码复制写入，发现文章的内容，很乱，没有一定的层次结构。

很多情侣或夫妻之所以很难走到最后，有时候是因为他们不懂得好好说话。换句话说，一段感情要想长久地维持下去，需要双方懂得用心交流和沟通。
尤其是当你们生活在同一个屋檐下，低头不见抬头见，你们更要懂得好好说话。你不要小瞧语言的魅力和说话的力量。
有时候，你可能只是随口一说，但是说者无心，听者有意，伴侣听了之后，可能会产生各种各样的联想。

修改代码：

<body><p>很多情侣或夫妻之所以很难走到最后，有时候是因为他们不懂得好好说话。换句话说，一段感情要想长久地维持下去，需要双方懂得用心交流和沟通。</p><p>尤其是当你们生活在同一个屋檐下，低头不见抬头见，你们更要懂得好好说话。你不要小瞧语言的魅力和说话的力量。</p><p>有时候，你可能只是随口一说，但是说者无心，听者有意，伴侣听了之后，可能会产生各种各样的联想。</p>
</body>

效果展示：

注意：<p>标签的默认样式，可以在上图看出来，段前段后都会有空白。

加入强调语气，使用`<strong>`和`<em>`标签

上述文章，我们已经有个标题和段落了，现在如果在一段话中之前强调某几个文字，这个时候可以用<em>或<strong>标签

但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong>用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。

如,网上购物商城中，某产品的价格是强调的。如下图。

再比如修改我们上述代码，将我们制作的网页进行修改，如果对阐述的内容进行分类，我们需要对01和02进行强调，并且我们额外修改点信息，对标题的喜欢你呈现斜体的样式。

<h2>女人越这样和男人说话，他就越<em>喜欢你</em></h2>
<strong>01</strong>
<p>很多情侣或夫妻之所以很难走到最后，有时候是因为他们不懂得好好说话。换句话说，一段感情要想长久地维持下去，需要双方懂得用心交流和沟通。</p>
<p>尤其是当你们生活在同一个屋檐下，低头不见抬头见，你们更要懂得好好说话。你不要小瞧语言的魅力和说话的力量。</p>
<p>有时候，你可能只是随口一说，但是说者无心，听者有意，伴侣听了之后，可能会产生各种各样的联想。</p>
<strong>02</strong>

效果：

使用`<br>`标签分行显示文本

如果我们想在网页中显示一首白居易的诗，那么为了让它美观点，我们想呈现出此效果

怎么才能让每一句诗词后面加入一个折行呢？那么我们可以在每一句的诗词后面加<br />标签，br标签作用相当于word文档中的回车键

代码如下：

<h2>《琵琶行》</h2>
<p>一道残阳铺水中，<br>半江瑟瑟半江红。<br>可怜九月初三夜，<br>露似珍珠月似弓。<br>
</p>

<br>标签与我们刚学过的标签不一样，<br/>标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br/>、<hr/>、<img />。

讲到这里，大家是不是有疑问呢？想折行还不简单呢，就像在word文档或记事本中，在想要折行的前面输入回车不就行了吗？尝试一下效果之后，发现一个问题，在html中是忽略回车和空格的，你输入的再多的回车和空格也是显示不出来的。

总结：空白折叠现象

为网页添加一些空格

在上面的例子中，我们已经讲解过html代码中输入回车、空格都是没有作用的，会被折叠成一个空格，这叫"空白折叠现象"。那么如果我们非得在网页中输入空格，必须写入 

例子：我们让白居易的诗词的名字前后有空格

代码如下

<h2>《&nbsp;琵琶行&nbsp;》</h2>
<p>一道残阳铺水中，<br>半江瑟瑟半江红。<br>可怜九月初三夜，<br>露似珍珠月似弓。<br>
</p>

效果如下：

`<hr>`标签，添加水平横线

在信息展示的时候，有时候需要加一下用于分割的横线，这样会使文章看起来整齐些。如下图所示

代码如下

<p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
<hr><p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p>
<hr>

注意：

<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
<hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

列表标签

ul标签，添加新闻信息列表

在浏览网页中，比如打开百度新闻首页，你会发现网页中很多新闻信息的列表，如新闻列表，图片列表。如下所示

那么这些列表我们可以用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

代码如下：

<ul><li>国家重要部署！2025年要实现规模世界第一</li><li>“我家附近又一家KTV关门，年轻人为何去KTV少</li><li>朋友圈疯转这篇文章，人民日报辟谣！</li><li>镇江三家企业入选省工业互联网发展示范企业</li>
</ul>

效果如下：

我们发现，ul-li默认的样式一般为：每项li前都有一个圆点。

ol 标签，添加热门点击排行榜

如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，百度新闻网的体育热搜词，那么我们就可以使用ol-li标签来制作有序列表，如下图。

举例：

下面是一个前端学习技术栈下载排行榜（只是举例，并不代表真实的排行榜）

<ol><li>vue</li><li>react</li><li>Nodejs</li><li>ES6</li>
</ol>

<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始.

效果展示：

dl标签，定义一个描述列表。

<dl>标签与 <dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

<dl><dt>小明</dt><dd>拥有一个肤白貌美的女朋友</dd><dt>张三</dt><dd>拥有好朋友</dd>
</dl>

效果展示：

div标签

认识div在排版中的作用（放在后面）

在网页制作中，我们可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个<div>标签的作用就相当于一个容器。把我们想要的内容给装起来。

div的意思是division “分割”的意思，span的意思是“范围、跨度”。

首先，在使用div标签的时候，我们要确定哪儿是逻辑部分？

它是页面上相互关联的一组元素。如网页中栏板块，就是一个典型的逻辑部分。如图所示：图中用红线框出的部分就是一个逻辑部分，那么我们就可以使用<div>标签作为容器。

举个栗子

<div><div><h2>热门学科</h2><ul><li>python</li><li>web前端</li><li>linux</li><li>go</li></ul></div><div><h2>学科排名</h2><ol><li>web前端</li><li>python</li><li>go</li><li>linux</li></ol></div>
</div>

效果展示：

会发现，现在编写代码呈现出来的效果与之前的效果没有太大的区别。那么下节课，我们可以给<div>来命名，将我们展现的独立的逻辑部分表示出来，使我们的网页更加有清晰感和层次感。

给div命名，使我们的逻辑更加清晰

在上面的介绍中中，我们把一些标签放进<div>中，划分出一个个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就好比是我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一。

语法：

<div id='板块名字'>.....</div>

修改上节课代码：

<div id='courses'><div id='hot_course'><h2>热门学科</h2><ul><li>python</li><li>web前端</li><li>linux</li><li>go</li></ul></div><div id='sort_course'><h2>学科排名</h2><ol><li>web前端</li><li>python</li><li>go</li><li>linux</li></ol></div>
</div>

上述代码可以很明显的看出，热门学科和学科排名都属于courses的。并且热门学科和学科排名分别用id属性值hot_course和sort_course来表现各自独立的逻辑部分，使得逻辑部分更加有层次感。

table标签

table标签，认识网页中的表格

在网页中，有时候我们需要再网页上展示一些数据，比如某公司想在网页上展示公司的库存清单。如下表

产品名称	品牌	总量	入库时间
电视机	小米	100	2018-09
音响	小米	200	2018-08
电冰箱	海尔	189	2018-12

首先我们观察一下上述表格，我们会发现表格是由行组成，行的出现，才使得列有了存在。此是4行4列的表格

代码如下：

<table><tr><th>产品名称</th><th>品牌</th><th>总量</th><th>入库时间</th></tr><tr><td>电视机</td><td>小米</td><td>100</td><td>2018-09</td></tr><tr><td>音响</td><td>小米</td><td>200</td><td>2018-08</td></tr><tr><td>电冰箱</td><td>海尔</td>s<td>189</td><td>2018-12</td></tr>
</table>

创建表格的四个元素：

table、tr、th、td

<tabel>...</table>:整个表格以<table>标记开始、</table> 标记结束。
<tr>...</tr>：表格的一行，那么以为着有几个tr，表格就有几行。
<td>...</td>:表格的一个单元格，一行中包含几对<td></td>,说明一行中就有几列。
<th></th>:表格的头部的一个单元格，表格表头。
表格中列的个数，取决于一行中数据单元格的个数

效果展示：

总结：

table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
表头，也就是th标签中的文本默认为粗体并且居中显示

给`<table>`添加border属性，为表格添加边框

table表格在没有添加css样式之前，是没有边框的。我们可以给<table>添加一个border属性（在HTML5中已经废弃），并且设置该值为1.

语法：

<table border='1'>....</table>

效果展示：

如果想实现很细的表格边线，

<table cellspacing='0' border='1'>......</table>

展示效果：

caption标签，为表格添加标题

上述的表格我们还需要添加一些标签进行优化，可以添加标题。

代码如下：

<table border="1" cellspacing='0'><caption>商品清单</caption><tr><th>产品名称</th><th>品牌</th><th>总量</th><th>入库时间</th></tr><tr><td>电视机</td><td>小米</td><td>100</td><td>2018-09</td></tr><tr><td>音响</td><td>小米</td><td>200</td><td>2018-08</td></tr><tr><td>电冰箱</td><td>海尔</td><td>189</td><td>2018-12</td></tr>
</table>

效果展示：

标题

用来描述表格内容，标题的显示位置：表格的上方。

语法

<table><caption>标题文本</caption><tr><td>…</td><td>…</td>…</tr>
…
</table>

横向合并、纵向合并单元格

我们上节课的表格，只是我们普通的表格，那么如果我们要想让单元格和单元格发生点什么？比如横向合并或者纵向合并，那么就得借助colspan和rowspan两个属性。

先看横向合并

比如：

那么有此图可以看出。原来表格中第一行中姓名、年龄这两个单元格，我们要对他们横向合并成一个单元格，才能实现我们的效果。

代码如下：

<table border="1" cellspacing="0"><caption>横向合并单元格</caption><!--colspan中必须指定要合并的列数目，是两列还是三列等等--><tr><th colspan="2">姓名和年龄</th><th>电话</th></tr><tr><td>Jack</td><td>24</td><td>1351234567</td></tr><tr><td>Tom</td><td>22</td><td>1351234567</td></tr><tr><td>Rose</td><td>22</td><td>1351234567</td></tr><tr><td>张三</td><td>25</td><td>1351234567</td></tr>
</table>

同理，纵向合并是一个原理的。

比如：

代码如下：

<table border="1" cellspacing="0"><caption>纵向合并单元格</caption><tr><th>班级</th><th>姓名</th><th>年龄</th><th>电话</th></tr><tr><td rowspan="2">601班</td><td>Jack</td><td>24</td><td>1351234567</td></tr><tr><td>Tom</td><td>22</td><td>1351234567</td></tr><!--rowspan中必须指定要合并的列数目，是两行还是三行等等--><tr><td rowspan="3">602班</td><td>Rose</td><td>22</td><td>1351234567</td></tr><tr><td>张三</td><td>25</td><td>1351234567</td></tr><tr><td>李四</td><td>25</td><td>1351234567</td></tr>
</table>

a标签

使用`<a>`标签，链接到另一个页面

网页中<a>标签，全称：anchor、锚点的意思。它在html中称为超链接标签，可以说它在网页中是无处不在的，只要有链接的地方，就有会这个标签。

语法：

<a href='目标地址' title='鼠标滑过显示的文本'>链接显示的文本</a>

举个栗子:

比如我们我们做个效果。点击百度一下,会跳转到百度的首页。

代码如下：

<a href="http://www.baidu.com" title='点击进入百度'>百度一下</a>

href指的是链接指向的页面的地址
title属性的作用，鼠标滑过链接文本时会显示这个属性的文本内容。这个属性在实际网页中开发中作用不大，主要方便搜索引擎了解链接地址的内容

注意：主要给文本加入了a标签后，文字的颜色就会自动变为蓝色（被点击过后的文本颜色为紫色）

在新建浏览器窗口打开新的链接

<a>标签在默认情况下，链接的网页是在当前浏览器窗口打开的，有时候我们需要在新的浏览器窗口打开。

语法：

<a href='目标地址' target='_blank'>点我！</a>

举个栗子：

代码如下

<p>比尔·盖茨 [1]  （Bill Gates），全名威廉·亨利·盖茨三世，简称比尔或盖茨。1955年10月28日出生于<a href="https://baike.baidu.com/item/%E5%8D%8E%E7%9B%9B%E9%A1%BF%E5%B7%9E" target="_blank">美国华盛顿州西雅图</a>，企业家、软件工程师、慈善家、微软公司创始人。曾任微软董事长、CEO和首席软件设计师
</p>

在当前浏览器中进行跳转

举个简单的例子，比如我们在访问博客网页的的时候，通常都会有回到顶部或者向上的箭头，当用户浏览网页内容很长的时候，如果想跳转到顶部，那么可以点击向上的箭头，网页会快速的跳转到顶部区域。这个也是靠我们的<a>标签来实现的。

如果想实现上述描述的效果。

1.现在网页的最顶部编写一个空标签，并且设置该标签的属性name=‘top’,<div name='top'></div>其实这个标签的name属性值，相当于一个锚的名字

2.然后在网页的底部设置超链接，并且设置该<a>标签的href属性值一定为#top。表示点击a标签跳到锚名为top的指定的位置。

3.好像还忘了一件事情，怎么然后网页滚动起来呢？其实这个很简单，当我们的内容大于了浏览器的高度，浏览器就会自动出现滚动条。

代码如下：

  <div name='top'></div><p>my content</p><p>my content</p><p>my content</p>...中间省略30次<p>my content</p><p>my content</p><a href="#top">跳转到顶部</a>

给`<a>`标签添加mailto属性，实现邮件链接

代码举例：

<a href="mailto:maomi@cdtu.cn">联系我们</a>

效果如下：

`<img>`标签，为网页插入美丽的图片

在网页制作中为使网页绚丽美观，尤其是购物商城网站，比如京东、淘宝、小米等，肯定是少不了图片的，那么我们可以使用img标签来插入图片。

语法:

<img src="图片地址" alt="下载失败时的替换文本" title='提示文本'>

举个栗子：

<img src="15026793366951.gif" alt="一个耿直的微笑" title='瞅你的损色'>

效果展示：

src:图片的位置

alt:指定图像的描述性文本，当图像不见时(下载不成功时)，可看到该属性指定的文本。

title:鼠标滑过图片时显示的文本

图像可视GIF,PNG,JPEG格式的图像文件

form表单标签，与用户交互

在网站上，怎样与用户进行交互呢？比如小米商城的登录页面

我们可以使用HTML表单(form)来实现。表单是可以把浏览器输入的数据发送给服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

<form   method="传送方式"   action="服务器文件">

<form>：form标签是成对存在的，以<form>开始，以</form>结束。
action:浏览器输入的数据被传送到的地方，比如一个PHP页面(action.php)
method:数据传送的方式(get(默认)/post)。

举个例子：

  <form action="action.php" method="get"></form>

虽然我们有了form标签，但是用户要想输入内容在哪里，这就引出接下来的内容表单元素

文本输入框、密码输入框

当用户要在表单中输入字母、数字等内容时，就会用到文本输入框和密码输入框。

语法：

<form><!--文本输入框--><input type="text" name="名称" value="文本" palceholder='请输入用户名'/><!--密码输入框--><input type="password" name="名称" value="密码" palceholder='请输入密码'/>
</form>

type:
- 当type为’text‘时，输入框为文本输入框
- 当type为’password‘时，输入框为密码输入框
name: 为文本框命名，后期用来给后台程序Java、PHP使用
value: 为文本输入框设置默认值。(一般起到提示作用)
placeholder：提示用户内容的输入格式

代码如下：

<form action="action.php" method="get"><input type="text" name="username"  placeholder="请输入用户名"><br><input type="password" name="pwd"  placeholder="请输入密码">
</form>

效果展示：

注意：当输入框获取焦点时，提示用户的文本会消失掉

文本域，支持多行文本输入

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

  <textarea name="desc" rows="行数" cols="列数">文本</textarea>

textarea标签是成对存在。
cols:多行输入域的列数，列数可以控制该控件的宽度
rows:多行输入域的行数，行数可以控制该控件的高度
在<textarea></textarea>标签之间可以输入默认值

举个栗子：

<textarea name="desc" rows="5" cols="30" placeholder="请输入个人描述..."></textarea>

效果展示：

使用多选框、复选框、让用户选择

在制作表单设计中，为了减少用户的操作，使用选择框是一个不错的想法，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项，用户只能选择其一，而复选框中用户可以任意选择多个，甚至全选。好比我们做单选题和多选题一样。请看下面的例子：

语法：

单选框：
<input type="radio" value="值"  name="名称" checked='checked'/>
多选框：
<input type="checkbox" value="值"  name="名称" checked='checked'/>

type
- 当type='radio’时，控件为单选框
- 当type='checkbox’时，控件为复选框
value： 提交数据到服务器的值
name： 为控件命名，为后面后台程序使用
checked： 当设置checked=‘checked’时，该选项被默认选中

示例代码：

<form>您的性别是？<br>男:<input type="radio" name="sex" value='0' checked='checked'>女:<input type="radio" name="sex" value='1'><hr>您的爱好是？<br>吃饭<input type="checkbox" name="hobby" value="eat" checked='checked'>睡觉<input type="checkbox" name="hobby" value="sleep" checked='checked'>打豆豆<input type="checkbox" name="hobby" value="love">
</form>

效果展示：

注意：同一组的单选按钮，name的值一定要一致，比如上面的例子为同一个名称’sex’，这样同一组的单选按钮才可以起到单选的作用。

使用下拉列表框，节省空间

下拉列表在网页中也时常用到，它可以有效的节省网页空间。既可以单选、又可以多选。

代码如下：

<form>您要报名的课程?<br><select name="course"><option value="python">python中级</option><option value="go">go精讲</option><option value="web" selected='selected'>web全栈</option><option value="linux">linux深入挖掘</option></select>
</form>

select标签是下拉列表框标签
- name：下拉列表的名字
- value

效果展示：

下拉列表进行多选

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在windows操作系统中，进行多选时按下ctrl键同时进行单击(在Mac下使用Command+单击),可以选择多个选项。

上节课案例修改：

<form>您要报名的课程?<br><select name="course" multiple='multiple'><option value="python">python中级</option><option value="go">go精讲</option><option value="web" selected='selected'>web全栈</option><option value="linux">linux深入挖掘</option></select>
</form>

效果展示：

注意：如果选项内容一多，会出现默认的滚动条

使用提交按钮，提交数据

在表单中有两种按钮可以使用，分别为：提交按钮(submit)和重置按钮(reset)。

当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

<input type='submit' value='提交'>

type:只有当type值设置为submit时，按钮才会有提交作用
value:按钮上显示的文字

例子：

<form method="post" action="active.php"><label for='myName'>姓名:</label><input type="text" value="" id='myName'  name="myName"><input type="submit" value="提交">
</form>

label标签标识用户项目中的标题
- 它通常关联一个控件,label中的for属性，与某表单控件中的id对应。作为label元素的标签控件。
- 另外，当用户单击该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

效果展示：

注意：label标签的for属性中的值一定与相关标签的id属性值要相同

重置按钮也非常简单，当用户在填写表单信息时，发现书写错误，可以使用重置按钮使输入框回到初始化状态。我们只需要把type设置为reset即可。

语法：

<input type='reset' value='重置'>