body中的主要标签
行内元素
- a标签： 超链接标签，双标签。
常用标签属性：
①href：指定打开的页面。
②target：用于指定在哪个窗口打开href标签属性指定的页面，常用属性值有_self （在本页面窗口中打开）、_blank（在新窗口中打开）。 - img标签： 图片标签，单标签。
①src：设置图片路径。
②alt：设置图片不存在时的替代文本。
③height和width：设置图片的高度和宽度，单位为像素或%。
④title：设定鼠标移到该元素上时显示的信息。 - span标签： 常用于组合文档中的行内元素，双标签。
①span标签没有固定的格式表现，只有对它应用CSS样式时才会产生视觉上的变化。
②span标签的定义方便了通过CSS样式格式化标签内的内容。
块级元素
- div标签： 常用于文档中分区，双标签。
- p标签： 段落标签，双标签。
可以通过该标签中的text-align样式属性设置样式，其属性值有： - hn标签： 标题标签，双标签，n的值为1~6。
跟p标签一样，也可以用text-align属性设置样式。 - ol标签： 有序列表标签，双标签。
①type：指定ol子标签li的编号类型，其属性值有：
②start：指定ol子标签li序号起始点，默认为1，必须为整形数字。
③reversed：HTML5新增标签属性，用于设定列表顺序为降序，其属性值为reversed。 - ul标签： 无序列表标签，双标签。
①type：指定ul子标签li的编号类型，其属性值有：
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
table{/*为所有table标签添加样式*/
width: 720px;/*设置table宽度*/
margin: 0 auto;/*设置table水平居中*/
border: black 1px solid;/*添加边框*/
border-spacing: 0px;/*去掉table标签以及其子标签边框之间的空隙*/
border-collapse: collapse;/*去掉重合线*/
}
th{/*为所有th标签添加样式*/
border: black 1px solid;/*添加边框*/
}
td{/*为所有td标签添加样式*/
border: black 1px solid;/*添加边框*/
}
</style>
</head>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>手机号</th>
<th>家庭地址</th>
</tr>
<tr style="text-align: center;"><!--一行数据都水平居中-->
<td>001</td>
<td>Jim</td>
<td>13527685948</td>
<td>河南省郑州市</td>
</tr>
<tr style="height: 100px;"><!--一行数据高度均为100px-->
<td style="vertical-align: top;">002</td><!--某一个数据垂直居中-->
<td>Kate</td>
<td style="text-align: center;">18328574678</td><!--某一个数据水平居中-->
<td>北京市朝阳区</td>
</tr>
</table>
</body>
</html>表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
action：指定表单数据的目的地
method：设置使用哪个方法处理请求get-doGet；post-doPost
get：地址栏显示数据，导致数据不安全；post：地址栏不会显示数据，安全，量可以很大
enctype：默认为application/x-www-form-urlencoded，若要上传文件则需改成multipart/form-data
-->
<form action="" method="" enctype="multipart/form-data">
<!--
hidden：设置隐藏框，页面不显示，主要用于向服务器端传递隐含数据
name：设置隐藏框的name值，将来Servlet用于获取该框的数据
value：用于设置默认值
id：用于唯一标识该隐藏框，整个页面不唯一，不允许重复；在确保唯一的前提下，常与name的属性值相同
-->
<input type="hidden" name="id" value="000001" id="id"/>
<!--
text：默认值，设置文本框
name：用于Servlet获取该框的数据
placeholder：设置提示信息
value：用于设置默认值，此时placeholder不再显示
id：用于唯一标识该文本框，整个页面不唯一，不允许重复；在确保唯一的前提下，常与name的属性值相同
maxlength：设置可以输入的最长字符个数
readonly：设置文本框只读，但是数据仍可以被Servlet获取
disabled：禁用文本框，数据不能被Servlet获取
-->
<input type="text" name="user_name" placeholder="请输入数据" value="damin" id="user_name" maxlength="5" readonly="readonly" disabled="disabled"/>
<!--
password：设置密码框
name：用于Servlet获取该框的数据
placeholder：设置提示信息
value：用于设置默认值，此时placeholder不再显示
id：用于唯一标识该密码框，整个页面不唯一，不允许重复；在确保唯一的前提下，常与name的属性值相同
maxlength：设置可以输入的最长字符个数
readonly：设置密码框只读，但是数据仍可以被Servlet获取
disabled：禁用密码框，数据不能被Servlet获取
-->
<input type="password" name="password" placeholder="请输入数据" value="123456" id="password" maxlength="6" readonly="readonly" disabled="disabled" />
<!--
name：用于Servlet获取该框的数据
id：用于唯一标识该下拉列表，整个页面不唯一，不允许重复；在确保唯一的前提下，常与name的属性值相同
mutiple：设置下拉列表多选，此时Servlet应调用request.getParameterValues()来获取数据
-->
<select name="province" id="province" multiple="multiple">
<option>---请选择---</option>
<!--
value：设置选项值，将来该值被Servlet获取
disable：禁用下拉项，使其不能被选择
selected用于设置默认选择项
-->
<option value="henan" disabled="disabled">河南省</option>
<option value="beijing" selected="selected">北京市</option>
<option value="chongqing">重庆市</option>
</select>
</form>
</body>
</html>单选框和复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
radio：设置单选框
name：用于Servlet获取该框的数据
value：用于设置选项值，此值会被Servlet获取
id：用于唯一标识该单选框
disabled：禁用单选框，数据不能被Servlet获取
checked：用于设置默认选中项
-->
<input type="radio" name="sex" value="0" id="female" disabled="disabled" /><label for="female">女</label>
<input type="radio" name="sex" value="1" id="male" checked="checked" /><label for="male">男</label>
<!--
checkbox：设置单选框
name：用于Servlet获取该框的数据
value：用于设置选项值，此值会被Servlet获取
id：用于唯一标识该单选框
disabled：禁用单选框，数据不能被Servlet获取
checked：用于设置默认选中项
-->
<input type="checkbox" name="hobby" value="0" id="basketball" disabled="disabled" /><label for="basketball">篮球</label>
<input type="checkbox" name="hobby" value="1" id="pingpang" /><label for="pingpang">乒乓球</label>
<input type="checkbox" name="hobby" value="2" id="football" checked="checked" /><label for="football">足球</label>
</body>
</html>文件框
<!--
file：设置文件框
name：用于Servlet获取该框的数据
id：用于唯一标识该密码框，整个页面不唯一，不允许重复；在确保唯一的前提下，常与name的属性值相同
disabled：禁用文件框，数据不能被Servlet获取
multiple：用于设置文件多选
-->
<input type="file" name="" id="" multiple="multiple" />文本域
<!--
textarea：文本域
name：用于Servlet获取该框的数据，request.getParameter()
id：用于唯一标识该文本框，整个页面不唯一，不允许重复；在确保唯一的前提下，常与name的属性值相同
resize：CSS样式属性，用于设置是否禁止调整文本域大小
readonly：设置文本域只读，但是数据仍可以被Servlet获取
disabled：禁用文本域，数据不能被Servlet获取
-->
<textarea name="" id="" cols="120" rows="30" style="resize: none;">郑州大学</textarea>提交按钮、重置按钮、普通按钮
<!--
submit：提交表单
value：设置提交按钮信息
id：用于唯一标识该按钮
disabled：禁用提交按钮
-->
<input type="submit" value="提交" id="" disabled="disabled" />
<!--
reset：重置表单
value：设置重置按钮信息
id：用于唯一标识该按钮
disabled：禁用重置按钮
-->
<input type="reset" value="重置" id="" />
<!--
button：按钮
value：设置按钮信息
id：用于唯一标识该按钮
disabled：禁用按钮
-->
<input type="button" value="按钮" id="" />fieldset和legend
当表单信息很多时，可以使用fieldset和legend来对表单内容进行分类：
<form action="" method="post">
<!--基本信息-->
<fieldset>
<legend>基本信息</legend>
<input type="text"/> <br />
<input type="text"/> <br />
<input type="text"/> <br />
</fieldset>
<!--问卷调查-->
<fieldset>
<legend>问卷调查</legend>
<input type="radio" /><input type="radio" /><input type="radio" /><br />
<input type="radio" /><input type="radio" /><input type="radio" /><br />
<input type="radio" /><input type="radio" /><input type="radio" /><br />
<input type="radio" /><input type="radio" /><input type="radio" /><br />
</fieldset>
<input type="submit" value="提交"/>
</form>框架
三个分页面：
头部页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>top</title>
<style>
body{
background-color: yellowgreen;
}
span{
font-size: 36px;
color: red;
font-family: 宋体;
}
</style>
</head>
<body>
<span>头部</span>
</body>
</html>左边页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
<style>
body{
background-color: black;
}
span{
font-size: 36px;
color: white;
font-family: 华文行楷;
}
</style>
</head>
<body>
<span>左边</span>
<a href="http://www.baidu.com" target="right">百度一下，你就知道</a>
<!--在name为right的页面打开链接-->
</body>
</html>右边页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>right</title>
<style>
body{
background-color: firebrick;
}
span{
font-size: 36px;
color: green;
font-family: 宋体;
}
</style>
</head>
<body>
<span>右边</span>
</body>
</html>总页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<!--框架-->
<frameset rows="20%,*"><!--上方占比20%，下方为剩下的-->
<frame src="top.html" />
<frameset cols="20%,*"><!---->
<frame src="left.html" />
<frame src="right.html" name="right"/>
</frameset>
</frameset>
</html>结果：
iframe：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--将页面插入网页-->
<iframe src="http://www.baidu.com"></iframe>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
