HTML的BODY内标签介绍

一、基本标签

<body>
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
    
    <!--p段落标签独占一行-->
    <p>段落标签</p>
    
    <h1>标题1格式</h1>
    <h2>标题1格式</h2>
    <h3>标题1格式</h3>
    <h4>标题1格式</h4>
    <h5>标题1格式</h5>
    <h6>标题1格式</h6>
    
    <!--换行br标签-->
    <br>

    <!--水平线hr标签，独占一行-->
    <hr>
</body>

二、特殊字符

<body>
    <!-- 空格 -->&nbsp;
    <!-- > -->&gt;
    <!-- < -->&lt;
    <!-- & -->&amp;
    <!-- ￥ -->&yen;
    <!-- 版权商标 -->&copy;
    <!-- 注册商标 -->&reg;
</body>

三、div和span标签

<div></div> 没有默认的样式，独占一行，属与块级标签，方便后续使用css调整样式

<span></span> 没有默认的样式，span不换行，属于行内标签（内联标签），默认在一行显示，方便后续使用css调整样式

块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

标签支持嵌套：

① 块级标签可以包含内联标签

② p标签不能包含p标签，浏览器会自动补全p标签

③ p标签不能包含div标签，浏览器会自动补全p标签

块级标签（独占一行）：p/div/h1~h6/hr/li/tr

行内标签（内联标签）：（默认都在一行显示,宽度由内容决定的）

四、img标签

<body>
<!--src=图片路径，alt=图片未加载成功时的提示，title=鼠标悬浮时提示信息，width=宽，height=高（宽和高只能用一个自动等比缩放）-->
<img src="./zhouyu.jpg" alt="周瑜加载失败" title="周瑜" width="225">
</body>

五、a标签

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

href属性指定目标网页地址。该地址可以有几种类型：

绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）

target：

_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

<body>
<!--绝对URL,点击后在新页面打开相应的网站-->
<a href="http://www.google.com.hk" target="_blank">谷歌</a>

<!--相对URL，点击后在当前页打开网站目录的路径-->
<a href="index.html">首页</a>

<!--锚URL，指向当前页面中的锚-->
<a href="#a1">锚点</a>
<h1 id = a1></h1>
</body>

六、列表

① 无序列表

<ul></ul> 标签

<!--无序列表要用ul标签，type=disc实心圆点，默认值，circle空心圆，square实心方块，none无样式-->
<ul type="circle">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

② 有序列表

<ol></ol>标签

type属性：

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

<!--有序列表用ol标签表示，type=1数字列表（默认值），A 大写字母，a 小写字母，I 大写罗马字母， i 小写罗马字母-->
<!--start 表示从第三个字母开始-->
<ol type="A" start="3">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

③ 标题列表

<!--用dl表示标题列表-->
<dl>
    <dt>标题</dt>
    <dd>内容1</dd>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容1</dd>
</dl>

七、表格

<!--表格格式设置，border表格边框，cellpadding内边距，cellspacing外边距-->
<table border="1" cellpadding="1" cellspacing="1">
    <!--表头-->
    <thead>
    <tr>
        <th>序号</th>
        <th>水果</th>
        <th>产地</th>
    </tr>
    </thead>
    <!--表格-->
    <tbody>
    <tr>
        <td>1</td>
        <td>苹果</td>
        <td>广西</td>
    </tr>
    <tr>
        <td>2</td>
        <td>香蕉</td>
        <td>海南</td>
    </tr>
    </tbody>
</table>

属性:

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

八、form

功能：

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

① label标签（与input配合使用）

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

label 元素不会向用户呈现任何特殊效果。

<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

方式一：

<!--label for的属性值指向input对应id-->
<label for="user">用户名：
    <input id="user" type="text" name="username">
</label>

方式二：

<!--label与input配合，不需使用id-->
<label>密码：
    <input type="password" name="pwd">
</label>

② input标签

<!--form表单，向网站已post的形式提交数据，multipart/form-data是post的一种提交方式-->
<form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
<!--text 单行输入文本-->
<div>
<label >用户名
    <input type="text" name="username">
</label>
</div>

<!--password 密码输入框-->
<div>
    <p>
    <label >密码
        <input type="password" name="pwd">
    </label>
    </p>
</div>

<!--date 日期输入框-->
<div>
    <p>
    <label >生日
        <input type="date" name="birthday">
    </label>
    </p>
</div>

<!--radio 单选框-->
<div>
    <p>
    <label >性别
        <!--显示的与input无关联，定义值，checked设置默认值-->
        <input type="checkbox" name="sex" value="male" checked="checked">男
        <input type="checkbox" name="sex" value="female">女
    </label>
    </p>
</div>

<!--checkbox 复选框 checked

设置默认值

--> <div> <p> <label >爱好 <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="volleyball">排球 </label> </p> </div> <div> <!--button普通按钮一般用于JS；submit提交按钮，可以提交当前表单；reset 重置按钮--> <p> <input type="button" value="按钮"> </p> <p> <input type="submit" value="提交"> </p> <p> <input type="reset" value="重置"> </p> </div> </form>

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

③ select标签

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

<form action="" method="post">
    <!--单选下拉框-->
    <select name="city" id="city">
        <option value="beijing">北京</option>
        <!--selected设置为默认值-->
        <option value="shenzhen" selected="selected">深圳</option>
        <option value="shanghai">上海</option>
        <option value="guagnzhou">广州</option>
    </select>

    <!--复选下拉框-->
    <select name="city2" id="city2" multiple>
        <option value="beijing">北京</option>
        <!--selected设置为默认值-->
        <option value="shenzhen" selected="selected">深圳</option>
        <option value="shanghai">上海</option>
        <option value="guagnzhou">广州</option>
    </select>
</form>

④ textarea多行文本

属性说明：

name：名称
rows：行数
cols：列数
disabled：禁用

<!--textarea 多行文本框-->
<label>自我介绍
<textarea name="self_introduction" id="self_introduction" cols="30" rows="10">
</textarea>
</label>