JavaWeb - HTML 常用标签
HTML 参考手册 ：https://www.w3school.com.cn/tags/index.asp
JavaWeb - 学习笔记
文件标签
<!DOCTYPE html>
<html lang="en">
<head>
<!--指定字符集-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<!--指定字符集-->
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<h1>Max_n</h1>
<p>Nothing is impossible!</p>
<p>Nothing is impossible!</p>
<p>Nothing is impossible!</p>
<hr color="black" width="1000px" size="2px" align="left">
<b>Nothing is impossible!</b><br>
<i>Nothing is impossible!</i><br>
<font color="blue" size="10" face="Source Code Pro">Nothing is impossible!</font><br>
<font color="#FFFFRE" size="10" face="Source Code Pro">Nothing is impossible!</font>
<hr color="black" width="50%" size="2px" align="left">
<center>Nothing is impossible!</center>
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!-- alt图片加载失败,显示文字信息 -->
<img src="https://img2020.cnblogs.com/blog/1615081/202003/1615081-20200309131510966-2084031494.jpg"
alt="图片加载失败" align="right" width="50%" height="50%">
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<ol type="A" start="5">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<ul type="disc">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul type="square">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul type="circle">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<a href="https://blog.csdn.net/qq_42217376" target="_blank">点击开一个新标签进入博客</a>
<a href="https://blog.csdn.net/qq_42217376" target="_self">点击进入博客</a>
<br>
<a href="./列表标签.html">进入列表标签</a>
<a href="https://blog.csdn.net/qq_42217376"><img src="https://img2020.cnblogs.com/blog/1615081/202004/1615081-20200425193820974-1953411320.jpg" alt=""></a>
</body>
</html>
块标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<!-- 文本信息在一行展示,行内标签,内联标签(不会换行)-->
<span>zut</span>
<span>zut1</span>
<span>zut2</span>
<span>zut3</span>
<!-- 每一个都占满一行,块级标签-->
<div>zut</div>
<div>zut</div>
<div>zut</div>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!-- 只有行的概念-->
<!-- 取出表格线之间的间距 cellpadding cellspacing -->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<caption>学生信息表</caption>
<thead>
<tr bgcolor="#7fffd4" align="center">
<!-- <td>编号</td>-->
<!-- <td>姓名</td>-->
<!-- <td>成绩</td>-->
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>xxxxxxxx</td>
<td>syp</td>
<td>100</td>
</tr>
</tbody>
<!--不管放在那里都展示在最下面-->
<tfoot align="center">
<tr>
<td>xxxxxxxx</td>
<td>syp</td>
<td>100</td>
</tr>
</tfoot>
</table>
<br>
<br>
<!-- 只有行的概念-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr bgcolor="#7fffd4" align="center">
<!--合并行-->
<th rowspan="2">学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>syp</td>
<td>100</td>
</tr>
<tr align="center">
<td>1</td>
<!--合并列-->
<td colspan="2">syp</td>
</tr>
</table>
</body>
</html>
语义化标签
没有效果的改变，方便阅读代码。
表单与表单项标签
- get 、 post 、form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--用于采集用户输入的数据的:用户名和密码 form-->
<!--用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围,也就是用户提交数据的范围-->
<!--只有有name属性的时候才能被提交-->
<!--form中的数据才会被提交-->
<!--地址栏有username和password-->
<form action="#" method="get">
用户名:<input name="username"><br>
密码:<input name="password"><br>
<input type="submit" value="登录">
</form>
<!--F12->Network->Headers->Form Data中有username和password-->
<form action="#" method="post">
用户名:<input name="username"><br>
密码:<input name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
- 表单项标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项标签</title>
</head>
<body>
<!--type改变元素展示样式-->
<!--https://www.w3school.com.cn/tags/att_input_type.asp-->
<!--不指定默认是text-->
<form action="#" method="get">
<!--value默认值-->
<!--placeholder提示信息-->
<!--for对应id,点击用户名以后光标指向用户名(文字)的输入框-->
<label for="username">用户名:</label> <input type="text" name="username" placeholder="username" id="username"><br>
密码:<input type="password" name="password" placeholder="password"><br>
<!--单选的时候name属性值应该是一样的-->
<!--value表示提交后性别所显示的值,如果没有那么选中就是on,不选中什么都不提交-->
<!--checked默认选中-->
<!--单选-->
性别:<input type="radio" name="gender" value="male" checked="checked"> 男
<input type="radio" name="gender" value="female"> 女
<br>
<!--复选-->
爱好:<input type="checkbox" name="hobby" value="basketball" checked="checked"> 篮球
<input type="checkbox" name="hobby" value="soccer"> 足球
<input type="checkbox" name="hobby" value="table tennis"> 乒乓球
<input type="checkbox" name="hobby" value="badminton"> 羽毛球
<br>
<!--文件选择框-->
图片:<input type="file" name="file"><br>
<!--看不到但是值会被提交,提交隐藏的数据-->
隐藏域:<input type="hidden" name="id" value="aaa">
<!--取色器-->
取色器:<input type="color" name="color"><br>
<!--日期-->
生日:<input type="date" name="birthday"><br>
生日1:<input type="datetime-local" name="birthday"><br>
<!--邮箱:自动验证邮箱是否正确-->
邮箱:<input type="email" name="email"><br>
<!--只能输入数字-->
年龄:<input type="number" name="age"><br>
<!--select下拉列表-->
<!--option列表项-->
省份: <select name="province">
<option>请选择</option>
<option value="1">河南</option>
<option value="2">河北</option>
<option value="3">福建</option>
</select><br>
<!--textarea 行数不够会自动扩容-->
自我描述:<textarea cols="20" rows="5" name="des">
</textarea><br>
<!--提交按钮-->
<input type="submit" value="登录">
<!--只是一个按钮,将来和js结合使用实现动态效果-->
<input type="button" value="一个按钮"><br>
<!--图片按钮,可以提交表单-->
<input type="image" src="img/register.jpg">
</form>
</body>
</html>
