JavaWeb之HTML标签那些事
一、文件标签
<!--
1.文件标签：构成html最基本的标签(保证了html的整体框架)
*<html>:根标签，格式：<html></html>
*<head>:头标签，指定文本一些属性，也可用于引入外部资源文件(CSS中详细介绍)，格式：<head></head>
*<title>:标题标签，格式：<title></title>
*<body>:体标签，文本内容写在此标签里，格式：<body></body>
*<!DOCTYPE html>:html5中定义的html文档
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
我爱html
</body>
</html>
二、文本标签
<!DOCTYPE html>
<!--
2.文本标签：构成文本的标签
*<p>:段落标签，格式:<p>段落内容</p>
*<h1>到<h6>:标题标签，格式：<h1>标题</h1>
<h1>到<h6>字号逐渐减小
*<br/>:换行标签
*<hr>:一条水平线，可以定义属性，格式:<hr color="颜色种类" width="宽度" size="高度" align="对齐方式"/>
*color:颜色(如color="yellow")
*width:宽度(如width="100",单位为px(像素))
*size:高度(如size="50",单位为px(像素))
*align:对齐方式(left,center,right)
注意：最新html5中已经不支持这些属性，但是浏览仍旧支持
*<b>:对文本文字进行加粗，格式:<b>文字</b>
*<i>:斜体，格式：<i>文本文字</i> -->
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!-- <p>:段落标签，格式:<p>段落内容</p> -->
<p>我爱html</p>
<!-- <h1>到<h6>:标题标签，-->
<h1>我爱html</h1>
<h2>我爱html</h2>
<h3>我爱html</h3>
<h4>我爱html</h4>
<h5>我爱html</h5>
<h6>我爱html</h6>
<!-- <br/>:换行标签 -->
我爱中国
我爱html
我爱中国<br>
我爱html
<!-- <hr>:一条水平线 -->
<hr color="yellow" width="20px" size="20" align="center">
<!-- <b>:对文本文字进行加粗 -->
<b>我爱中国 </b>
<!-- <i>:斜体 -->
<i>我爱中国</i>
</body>
</html>
三、图片标签
<!DOCTYPE html>
<!-- <img>:展示图片，格式：<img src="文件路径" alt="图像展示的代替文字"/>
常用属性：
*src:指定图片的指定位置，很多情况下使用相对路径
相对路径：
*./:代表当前路径（默认路径）例：<img src="./图片/图片3" alt="图像展示的代替文字"/>
*../代表上一级目录 例:<img src="../图片/图片3" alt="图像展示的代替文字"/> -->
<html>
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!-- <img>:展示图片-->
<img src="./images/clock.png" alt="时钟"/>
<img src="../images01/pic1.jpg" alt="jpg"/>
</body>
</html>
四、列表标签
<!DOCTYPE html>
<!--
列表标签：
1.<ol>:有序列表，格式：<ol type="选择样式" start="从哪个位置开始(数字表示)"><li>每一项内容</li></ol>
*type有如下几种：
*1
*A
*a
*I
*i
2.<ul>:无序列表，格式：<ul type="选择样式" ><li>每一项内容</li></ul>
*type有如下几种：
*disc:圆点
*square：方框
*circle：圆圈
注意：属性可以根据需要进行选择写几个，也可以不写
-->
<html>
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!-- 有序<ol>:有序列表 (无属性)-->
<ol>
<li>课前预习</li>
<li>课上听讲</li>
<li>课下复习</li>
</ol>
<!-- 有序<ol>:有序列表 (有属性)-->
<ol type="A" start="2">
<li>课前预习</li>
<li>课上听讲</li>
<li>课下复习</li>
</ol>
<!-- <ul>:无序列表 (无属性)-->
<ul>
<li>课前预习</li>
<li>课上听讲</li>
<li>课下复习</li>
</ul>
<!-- 有序<ol>:有序列表 (有属性)-->
<ul type="disc">
<li>课前预习</li>
<li>课上听讲</li>
<li>课下复习</li>
</ul>
<ul type="square">
<li>课前预习</li>
<li>课上听讲</li>
<li>课下复习</li>
</ul>
<ul type="circle">
<li>课前预习</li>
<li>课上听讲</li>
<li>课下复习</li>
</ul>
</body>
</html>
五、链接标签
<!DOCTYPE html>
<!--
链接标签：
*<a>:超链接，格式：<a href="位置" target="打开方式">文字信息</a>
属性：
*href:定义资源的访问位置(不仅可以访问网络资源，还可以访问本地的一些资源，如图片,邮件)
*target:指定打开方式
*_self:在本页面打开
*_blank:新打开一个选项卡展示页面
-->
<html>
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!-- <a>:超链接 访问网络资源 -->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<!-- <a>:超链接 访问本地图片资源 -->
<a href="./images/clock.png">百度</a>
<!-- <a>:超链接 访问本地邮件 -->
<a href="maioto:邮箱地址">我的邮箱</a>
<!-- 图片链接 -->
<a href="http://www.baidu.com"> <img src="./images/clock.png" alt="时钟"/></a>
</body>
</html>
六、表格标签
<!DOCTYPE html>
<!--
表格标签：
*<table>:定义一个表格，格式：<table></table>
*属性：
*width:宽度
*border:边框
*cellpadding:内容和单元格间的距离
*cellspacing:单元格之间的距离，如果为0，单元格线会合为一条
*bgcolor:背景色
*align:对齐方式
*<tr>:定义行，格式：<tr></tr>
属性：
*bgcolor:背景色
*align:对齐方式
*<td>:定义单元格，格式：<td></td>
属性：
*colspan:合并列
*rowspan:合并行
*<th>:定义表头单元格，格式：<th></th>
*<caption>:表格标题,格式：<caption>表格标题</caption>
*<thead>:表格头部分
*<tbody>:表格体部分
*<tfoot>:表格脚部分
-->
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!-- table 无属性 -->
<table>
<tr>
<th>身份</th>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>群众</td>
<td>王小二</td>
<td>15</td>
</tr>
<tr>
<td>共青团员</td>
<td>周小三</td>
<td>18</td>
</tr>
</table>
<!-- table 有属性 -->
<table border="1" width="400" bgcolor="yellow">
<tr>
<th>身份</th>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>群众</td>
<td>王小二</td>
<td>15</td>
</tr>
<tr>
<td>共青团员</td>
<td>周小三</td>
<td>18</td>
</tr>
<tr>
<td colspan="2">共青团员</td>
<td>18</td>
</tr>
</table>
</body>
</html>
八、表单标签
<!DOCTYPE html>
<!--
表单标签：
*表单：用于采集用户输入数据的。用于和服务器进行交互
*标签：form:用于定义表单，可以定义一个范围，可以采集用户数据的一个范围
*action:指定提交数据的URL
*method:指定提交方式
*表单项数据如果想要被提交，必须指定name属性
*分类：一共7种，常用的2种
get:
1.请求的参数会在地址栏中显示
2.请求参数的大小有限制
3.不太安全
post:
1.请求的参数不会在地址栏中显示，会封装在请求协议中(http协议)
2.请求参数的大小无限制
3.较为安全
例子：<form action="#" method="get">
<label>用户名</label> <input type="text" name="username" placeholder="请输入用户名"><br>
<label>密码</label> <input type="password" name="password" placeholder="请输入密码"><br>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女<br>
<input type="checkbox" name="interest" value="game" checked>打游戏
<input type="checkbox" name="interest" value="mobile">玩手机
<input type="checkbox" name="interest" value="readbook">看书<br>
<input type="submit" value="登录">
<input type="submit" value="取消">
<input type="file" value="file">
*表单项标签:
*input:可以通过type属性值展示不同元素的样式
*type属性：
*text：文本输入框，默认值
*placeholder:指定输入框的提示信息，当输入框信息发生改变，会自动清空提示信息
*password：密码输入框
*radio：单选框
注意：1.要想让多个单选框实现单选的值，必须使name值一样
2.一般会给每个单选框提供value值指定
3.checked属性，可以指定默认值
*checkbox：复选框
1.一般会给每个单选框提供value值指定
2.checked属性，可以指定默认值
*file：文件选择框
*hidden：隐藏域，用于提交一些隐藏信息
*按钮:
*submit:用于提交数据
*button:普通按钮
*image:图片按钮
*src指定图片位置
*label标签：指定输入项的文字描述信息
*label的for属性一般会和input的id的属性值对应，如果对应，点击label区域，会让input输入框获取焦点
*select：下拉列表
*子元素：option指定元素值，默认值selected
*textarea：文本域
*col:指定列数，每一行有多少个字符
*rows：默认多少行
-->
<html>
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form action="#" method="post">
<label>用户名</label>
<input type="Text" name="username"><br>
<label>密码</label>
<input type="password" name="password"><br>
<!--图片属性-->
<input type="file" name="file"><br>
<!--调色器-->
<input type="color" name="color"><br>
<!--生日日期-->
<input type="date" name="birthday"><br>
<!--生日日期-->
<input type="datetime-local" name="birthday"><br>
<!--邮箱-->
<input type="email" name="email"><br>
<!--年龄-->
<input type="number" name="age"><br>
<!--省份-->
<select name="province">
<option value="">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3" selected>潢川</option>
</select><br>
<!--自我描述-->
<textarea cols="20" rows="5" name="des"></textarea><br>
<!--确认按钮-->
<input type="submit" name="submit" value="确定"><br>
<!--取消按钮-->
<input type="reset" name="reset" value="取消"><br>
<!--图片按钮-->
<input type="image" src="./images/pic.jpg"><br>
<!--取消按钮-->
<input type="submit" name="submit" value="确定"><br>
<!-- 文本域 -->
<textarea row="5" col="15"></textarea>
</form>
</body>
</html>
总结
JavaWeb中的HTML标签除上述外还有很多，上面只是列出常用的一些标签，一些标签或者属性虽然已经不被html5支持，但是浏览器中向下兼容，还可以使用，仅供学习使用。如有不足，敬请指正！
扫一扫
825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
