html中body内标签
目录
body内标签
基本标签
特殊符号
常用标签
列表标签
表格标签
form表单(********):前后端数据交互
基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线--><hr>
<p>段落标签</p>
加粗 | 斜体 | 下划线 | 删除线 | h1~h6标题 | 换行 | 水平线
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
1、你是无意穿堂风，偏偏孤踞引山洪 <!--正常文本-->
<b>2、你是无意穿堂风，偏偏孤踞引山洪</b> <!--加粗-->
<i>3、你是无意穿堂风，偏偏孤踞引山洪</i> <!--斜体-->
<br> <!--这是换行符-->
<u>4、你是无意穿堂风，偏偏孤踞引山洪</u> <!--下划线-->
<br> <!--这是换行符-->
<s>5、你是无意穿堂风，偏偏孤踞引山洪</s> <!--删除线-->
<hr> <!--这是水平线-->
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>
</body>
</html>
段落标签
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<p>
1、你是无意穿堂风，偏偏孤踞引山洪 <!--正常文本-->
</p>
<p>
<b>2、你是无意穿堂风，偏偏孤踞引山洪</b> <!--加粗-->
</p>
<p>
<i>3、你是无意穿堂风，偏偏孤踞引山洪</i> <!--斜体-->
</p>
</body>
</html>
可以看到各个段落间是有分隔空间的
特殊符号
特殊符号 对应表 （代码后都应以 ; 结尾）
| 内容 | 对应代码 |
|---|---|
| 空格 |   |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| 版权 | © |
| 注册 | ® |
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<p>
©®你是 无意>穿堂风，偏偏<孤踞&引山洪¥
</p>
</body>
</html>
常用标签
div标签 和 span标签
div标签用来定义一个块元素，并无实际的意义，主要通过CSS样式为其赋予不同的表现
span标签用来定义内联（行内）元素，并无实际的意义，主要通过CSS样式为其赋予不同的表现
标签分类（1）
双标签 h1~h6, p, a
<h1></h1>
自闭合标签 img br hr # 自动闭合
<br> | <hr> | <img>
标签分类（2）
块儿级标签 div h1~h6 p hr br
独占一行
块儿级标签能够嵌套块儿级标签和行内标签
p标签虽然是块儿级标签但是它不能嵌套任何的块儿级标签
块儿级标签能够设置长宽
行内标签 span a img i s b u
自身的内容有多大就占多大
行内标签不能设置长宽
块级元素与行内元素的区别：
块元素，是以另起一行开始渲染的元素
行内元素,则不需另起一行。
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
注意：关于标签嵌套
通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签可以被其他块标签所包含，但是p标签不能包含其他块标签，p标签也不能包含p标签
a 标签：超连接 标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
URL：统一资源定位符
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
href属性指定目标网页地址时，该地址可以有以下几种类型：
1、绝对URL - 指向另一个站点 （比如 href="http://www.jd.com")
2、相对URL - 指向当前站点中确切的路径 （href="index.htm")
3、锚URL - 指向当前页面中的锚 （href="#top")
<!--可以通过href跳转到指定网站-->
<a href="http://www.baidu.com"</a>
<!--默认在当前页面打开指定网站-->
<a href="http://www.baidu.com" target="_self">click me</a>
<!--更改'tatget'参数值为 _blank 可以使其 新建页面 打开指定网站-->
<a href="http://www.baidu.com" target="_blank">click me</a>
<!--导入外部文件中的a标签指定网站-->
？？？？
<!--
target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
-->
<!--锚点功能-->
<!--回到顶部-->
<a href="" id="a1">top</a> <!--这里是创建锚点位置-->
<a href="#a1">回到顶部</a> <!--这里是创建回到锚点位置按钮位置-->
所有的html标签都应该有一个id属性，用来唯一标识当前标签，为后续的DOM操作提供基础，也就意味着同一份html中标签的id不能重复，不过不写id属性也是可以的
img标签
<img src="图片的路径" alt="图片加载失败时的提示信息" title="鼠标悬浮时提示信息" whdth="宽" height="高（宽高属性只要定义一个即可，会自动等比缩放的）">
列表标签
无序列表
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>
<ul type="circle">
<li>第一项</li>
<li>第二项</li>
</ul>
<ul type="square">
<li>第一项</li>
<li>第二项</li>
</ul>
<ul type="none">
<li>第一项</li>
<li>第二项</li>
</ul>
</body>
</html>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
有序列表
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<ol type="1">
<li>第一项</li>
<li>第二项</li>
</ol>
<ol type="a">
<li>第一项</li>
<li>第二项</li>
</ol>
<ol type="A">
<li>第一项</li>
<li>第二项</li>
</ol>
<ol type="i">
<li>第一项</li>
<li>第二项</li>
</ol>
<ol type="I">
<li>第一项</li>
<li>第二项</li>
</ol>
</body>
</html>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>输诚</title>
</head>
<body>
<table border=1 cellpadding=1 cellspacing=1>
<thead>
<!--一个tr表示一行-->
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>egon</td>
<td >18</td>
<td rowspan="2">read</td>
</tr>
<tr>
<td>owen</td>
<td>21</td>
<!--<td>read</td>-->
</tr>
<tr>
<td>tank</td>
<td colspan="2">22</td>
<!--<td>eat</td>-->
</tr>
</tbody>
</table>
</body>
</html>
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
form表单
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列的表现，比如 文本字段，复选框，单选框，提交按钮等等
表单还可以包含textarea, select, fieldset, label标签
表单属性表
| 属性 | 描述 |
|---|---|
| accept_charset | 规定在被提交表单中的字符集（默认：页面字符集） |
| action | 规定向何处提交表单的地址（URL）（提交页面） |
| autocomplete | 规定浏览器应该自动完成表单 |
| enctype | 规定提交的数据的编码（默认：url-encode) |
| mothod | 规定在提交表单是所用的HTTP方法（默认：GET） |
| name | 规定识别表单的名称（对于DOM使用：document.forms.name) |
| novalidate | 规定浏览器不验证表单 |
| target | 规定action属性中地址的目标（默认：_self） |
表单元素
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合、因此它是制作动态网站很重要的内容
表单工作原理：
访问者在浏览有表单的网页是，可填写必须的信息，然后按某个按钮提交，这些信息通过internet传送到服务器上
服务器上专门有程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误，当数据完整无误后服务器反馈一个输入完成的信息
input标签的属性表
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | |
| password | 密文密码输入框 | |
| date | 日历选择框 | |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 隐藏输入框 | |
| file | 文本选择框 |
属性说明：
name：表单提交时的"键"，注意和id的区别
value：表单提交时对应项的值
type="button","reset","submit",为按钮上显示的文本内容
type="text","password","hidden",为输入框的初始值
type="checkbox","radio","file",为输入相关联的值
check：设定radio和checkbox默认被选中的项
readonly:text和password设置为只读
disabled:所有的input均适用
input各属性
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<tltle>输诚</tltle>
</head>
<body>
<form action="127.0.0.1" method="post" enctype="multipart/form-data">
<p>username:
<input type="text" name="username" value="zdc">
</p>
<p>password:
<input type="password" name="password">
</p>
<p>birth:
<input type="date" name="birthaday">
</p>
<p>gender:
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1">
其他<input type="radio" name="gender" value="2">
</p>
<p>hobby:
唱<input type="checkbox" name="hobby" value="sing">
跳<input type="checkbox" name="hobby" value="dump">
rap<input type="checkbox" name="hobby" value="rap">
篮球<input type="checkbox" name="hobby" value="baskertball">
</p>
<p>file:
<input type="file" name="filename" value="aaa ">
</p>
<input type="submit" value="提交按钮">
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<button> <!--此按钮与submit功能相同-->
按钮
</button>
</form>
</body>
</html
label 标签
定义：<label>标签为input元素定义标注（标记）
说明：
1、label元素不会向用户呈现任何特殊效果
2、<label>标签的for属性值应当与相关元素的id属性值相同
<form action="127.0.0.1" method="post" enctype="multipart/form-data">
<label for="i1">
username:<input type="text" id="i1" name="username" value="zdc">
</label>
</form>
select标签
<!--select标签默认是单选的-->
<form action="" method="post">
<P>选择城市
<select name="city1" id="city1">
<option value="1">北京</option>
<option selected value="2">上海</option>
<option value="3">深圳</option>
</select>
</P>
</form>
<!--多选select标签则是加上multiple参数-->
<form action="" method="post">
<p>选择城市
<select name="city2" id="city2" multiple>
<option value="1">北京</option>
<option selected value="2">上海</option>
<option value="3">深圳</option>
</select>
</p>
</form>
<form action="" method="post">
<p>选择城市
<select name="city3" id="city3">
<optgroup label="北京">
<option value="1">朝阳区</option>
<option value="2">海淀区</option>
</optgroup>
<optgroup label="上海">
<option value="3">静安区</option>
<option value="4">徐汇区</option>
</optgroup>
<optgroup label="深圳">
<option value="5">南山区</option>
<option value="6">宝安区</option>
</optgroup>
</select>
</p>
</form>
属性说明：
multiple: 布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时字典中的选项值
textarea多行文本
<textarea name="info" id="info" cols="40" rows="10">
# 请输入个人信息
</textarea>
属性说明：
name：名称
rows：输入框y轴方向的长度（宽）|行数
cols：输入框x轴方向的长度（长）|列数
dicabled：禁用
