目录
超链接标签
a 标签属性:
href:指定访问资源的URL
target:指定打开资源的方式 _self:默认值,在当前页面打开 _blank:在空白页面打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签演示</title>
</head>
<body>
<a href="http://baidu.com " target="_blank"> 点我跳转</a>
</body>
</html>
列表标签
有序列表中的 type 属性用来指定标记的标号的类型(数字、字母、罗马数字等)
无序列表中的 type 属性用来指定标记的形状
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签演示</title>
</head>
<body>
<ol>
<li> java</li>
<li> C</li>
<li> go</li>
</ol>
<ul>
<li> java</li>
<li> C</li>
<li> go</li>
</ul>
</body>
</html>
效果
表格标签
table :定义表格
border:规定表格边框的宽度
width :规定表格的宽度
cellspacing:规定单元格之间的空白
tr :定义行
align:定义表格行的内容对齐方式
td :定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
th:定义表头单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签演示</title>
</head>
<body>
<table border="1" cellspacing="0" width="500">
<tr align="center">
<th>学号</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>30</td>
<td>40</td>
</tr >
<tr align="center">
<td>2</td>
<td>李四</td>
<td>50</td>
<td>60</td>
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>70</td>
<td>80</td>
</tr>
</table>
</body>
</html>
效果
布局标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局标签演示</title>
</head>
<body>
<div>我是div标签</div>
<div>我是div标签</div>
<span>我是span标签</span>
<span>我是span标签</span>
</body>
</html>
效果
表单标签
表单:在网页中主要负责数据采集功能,使用 表单项(元素):不同类型的 input 元素、下拉列表、文本域
form 是表单标签,它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。如下图就是不同的表单项 标签展示出来的效果。
form标签属性
action:规定当提交表单时向何处发送表单数据,该属性值就是URL 以后会将数据提交到服务端,该属性需要书写服务端的URL。而今天我们可以书写 #
method :规定用于发送表单数据的方式 method取值有如下两种:
get:默认值。如果不设置method属性则默认就是该值 请求参数会拼接在URL后边 url的长度有限制 4KB
当使用get方式,输入aaa提交时
post: 浏览器会将数据放到http请求消息体中 请求参数无限制的
打开开发者工具 输入信心提价-->Network-->payload-->Form data下就会有显示
表单项标签
表单项标签有很多,不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个:表单项,通过type属性控制输入形式 input 标签有个 type 属性。 type 属性的取值不同,展示的效果也不一样
select:定义下拉列表,定义列表项
textarea:文本域 如下图就是文本域效果。它可以输入多行文本,而 input 数据框只能输入一行文本。
注意: 以上标签项的内容要想提交,必须得定义 name 属性。 每一个标签都有id属性,id属性值是唯一的标识。 单选框、复选框、下拉列表需要使用 value 属性指定提交的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项标签演示</title>
</head>
<body>
<form>
<input type="hidden" name="id" value="123">
<label for="username"> 用户名:</label>
<!-- label标签可以扩大选择的范围,比如用户点用户名就可以直接进行输入了-->
<input type="text" name="userName" id="username"> <br>
<label for="password">密码:</label>
<input type="password" name="password" id="password"><br>
<input type="radio" value="1" name="gender"> 男
<!-- value 的值是向服务器提交的值,不写默认就是on后端到时候无法区分, name 设置一样了才能是单选按钮,产生互斥效果-->
<input type="radio" value="2" name="gender"> 女
<br>
爱好:<input type="checkbox" value="1" name="hobby"> 打游戏
<input type="checkbox" value="2" name="hobby"> 吃饭
<input type="checkbox" value="3" name="hobby"> 睡觉
<br>
城市:<select name="city">
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">河北</option>
</select>
<br>
头像:<input type="file">
<br>
个人描述:<textarea cols="20" rows="5" name="desc"></textarea>
<br>
<br>
<input type="submit" value="点击登录">
<input type="button" value="普通的按钮">
<input type="reset" value="重置按钮">
</form>
</body>
</html>