HTML常用标签

最新推荐文章于 2023-05-18 18:41:03 发布

_水果先生

最新推荐文章于 2023-05-18 18:41:03 发布

阅读量982

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/hcwdd/article/details/90645523

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML常用标签

清单列表标签
表格标记
表单标签

清单列表标签

清单列表标签
有序清单标签为<ol></ol>，无序清单标签为<ul></ul>
清单之间还需要嵌套清单列表项<li>
可以为有序清单的序号指定字母或罗马数字，需要在标签中增加对应的属性和属性值<ol type="A"> 、<ol type="a">、<ol type="I">、<ol type="i">
也可以为无序清单增加属性值，显示对应的样式
<ul type="cricle"> 空心圆、<ul type="square"> 实心方形
也可以听过CSS样式定义将清单的样式设置为不显示

li{
	list-style:none;
	}

表格标记

表格标记在开发中用于显示一个集合数据（一组数据），比如员工表
标签定义

<table>:定义表格
<tr>:定义表格的行
<td>:定义表格的列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<center>
			<table border=1>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>职位</th>
					<th>薪资</th>
					<th>入职日期</th>
				</tr>	
				<tr>
					<td>1001</td>
					<td>张三</td>
					<td>清洁工</td>
					<td>1000</td>
					<td>2019-09-09</td>
				</tr>		
				<tr>
					<td>1001</td>
					<td>李四</td>
					<td>清洁工</td>
					<td>1000</td>
					<td>2019-09-09</td>
				</tr>		
				<tr>
					<td>1001</td>
					<td>王五</td>
					<td>清洁工</td>
					<td>1000</td>
					<td>2019-09-09</td>
				</tr>		
				<tr>
					<td>1001</td>
					<td>赵六</td>
					<td>清洁工</td>
					<td>1000</td>
					<td>2019-09-09</td>
				</tr>
			</table>
		</center>
	</body>
</html>

显示效果：（注意上述代码有<center></center> 标签，表格会显示在浏览器左右方向的中间位置，如果没有此标签，表格会显示在靠左位置）
在这里插入图片描述
可以在表格增加一列显示操作，并在内容行增加删除按钮，方便用户操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<center>
			<table border=1>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>职位</th>
					<th>薪资</th>
					<th>入职日期</th>
					<th>操作</th>
				</tr>	
				<tr>
					<td>1001</td>
					<td>张三</td>
					<td>清洁工</td>
					<td>1000</td>
					<td>2019-09-09</td>
					<td>
						<button>删除</button>
					</td>
				</tr>
				...

显示结果：
在这里插入图片描述
总结：

表格使用到的标签有：<table>、<tr>、<th>、<td>
让内容居中的标签是：<center>
按钮标签：<button>
html的标签一般都是成对出现的（有开始有完结），但是存在一些单标签只有开始没有结束，如<img>
在以前表格不仅仅是显示数据这么简单，而是用来实现整个页面布局操作，现在逐渐使用<div>布局代替了

表单标签

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站</title>
	</head>
	<style>
	</style>
	<body>
		<form action="login" method="post" enctype="multipart/form-data">
			<fieldset>
				<legend>请登录</legend>
				用户名:<input type="text" name="username"> <br><br>
				密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"><br><br>
				照&nbsp;&nbsp;&nbsp;片:<input type="file" name="picture"><br><br>
				爱&nbsp;&nbsp;&nbsp;好:
					<input type="checkbox" name="hobby" value="smoke">抽烟
					<input type="checkbox" name="hobby" value="drink">喝酒
					<input type="checkbox" name="hobby" value="perm">烫头<br><br>
				性&nbsp;&nbsp;&nbsp;别:
					<input type="radio" name="sex" value="male">男
					<input type="radio" name="sex" value="female">女
					<br><br>
				描&nbsp;&nbsp;&nbsp;述:<br>
					<textarea name="note" clos="30" rows="5">
					</textarea><br><br>
				城&nbsp;&nbsp;&nbsp;市:
					<select>
						<option>请选择</option>
						<option value="bj">北京</option>
						<option value="sh">上海</option>
						<option value="gz">广州</option>
					</select>
					<br><br>
				<input type="submit" value="登录">&nbsp;&nbsp;&nbsp;
				<input type="reset" value="重置">
			</fieldset>
		</form>
	</body>
</html>

总结：

表单的属性：action（提交的地址）、method（提交方式）
- get类型请求会在浏览器地址栏看到提交的参数
- psot请求看不到提交的参数
- 每对参数之间使用&隔开的
如果要上传文件，那么input的type值应是指为file
要实现文件的上传必须为表单增加属性enctype = "multipart/form-data"
复选框：标签就是<input> type = "checkbox"
单选按钮：标签就是<input> type = "radio"
文本域：标签是<textarea> clos 控制宽度 rows 控制行数

_水果先生

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签

HTML常用标签清单列表标签表格标记表单标签清单列表标签清单列表标签有序清单标签为<ol></ol>，无序清单标签为<ul></ul>清单之间还需要嵌套清单列表项<li>可以为有序清单的序号指定字母或罗马数字，需要在标签中增加对应的属性和属性值<ol type="A"> 、<ol type="a">、&...
复制链接

扫一扫