HTML—常用标签

常用标签:

标题标签:<h1></h1>......<h6></h6>
段落标签:<p></p>
换行标签:<br/>
列表:无序列表<ul><li></li></ul>

有序列表<ol><li></li></ol>
超链接:<a></a>
图像标签:<img/>

表格:<table></table>

表单:<form></form>

标题标签:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		标题标签
		<!-- 一共六级标签,每一个标签会独占一行,默认左对齐
			align可以控制标签的内容在标签体中的水平对齐方式,
            值有left,right,center,默认是left
			-->
		<h1 align = "left">一级标题</h1>
		<h2 align = "center">二级标题</h2>
		<h3 align = "right">三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	
	</body>
</html>

网页效果

段落标签:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        段落标签

        <!-- 标尺线 -->
		<hr/>

		<p>
			《呐喊》是现代文学家鲁迅的短篇小说集,收录鲁迅于1918年至1922年所作的14篇短篇小说,1923年由北京新潮社出版,现编入《鲁迅全集》第1卷。
			小说集真实地描绘了从辛亥革命到五四运动时期的社会生活,从革命民主主义出发,抱着启蒙主义目的和人道主义精神,揭示了种种深层次的社会矛盾,
			对旧时中国的制度及部分陈腐的传统观念进行了深刻的剖析和比较彻底的否定,表现出对民族生存浓重的忧患意识和对社会变革的强烈希望。
		</p>
		<p>
			《呐喊》是中国现代小说的开端与成熟的标志,开创了现代现实主义文学的先河。作品通过写实主义、象征主义、浪漫主义等多种手法,
			以传神的笔触和"画眼睛"、"写灵魂"的艺术技巧,形象生动地塑造了狂人、孔乙己、阿Q等一批不朽的艺术形象,
			深刻反映了19世纪末到20世纪20年代间中国社会生活的现状,有力揭露和鞭挞了封建旧恶势力,表达了作者渴望变革,为时代呐喊,希望唤醒国民的思想。
			奠定了鲁迅在中国现代文学史和现代文化史上的地位。 1999年6月,《呐喊》被《亚洲周刊》评选为20世纪中文小说100强之首
		</p>
	
	</body>
</html>

网页效果

换行标签:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        换行标签
		换行标签
		<br />
		换行标签
		换行标签
	</body>
</html>

网页效果

列表:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<hr/>
		<!-- 列表 -->
		<!-- 无序列表 -->
		<ul>
			<li>无序列表1</li>
			<li>无序列表2</li>
			<li>无序列表3</li>
			<li>无序列表4</li>
			<li>无序列表5</li>
		</ul>
		
		<!-- 有序列表 -->
		<ol>
			<li>有序列表1</li>
			<li>有序列表2</li>
			<li>有序列表3</li>
			<li>有序列表4</li>
			<li>有序列表5</li>
		</ol>
		
        <!-- 可通过type改变列表序号类型 -->
		<ol type="I">
			<li>有序列表1</li>
			<li>有序列表2</li>
			<li>有序列表3</li>
			<li>有序列表4</li>
			<li>有序列表5</li>
		</ol>
	</body>
</html>

网页效果

超链接+图像:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		超链接
		<!-- href = "网页的地址"
		 target = "_blank" 在新窗口打开网页
		 target = "_self" 在当前窗口打开一个新网页 默认
		 -->
		<a href = "https://www.baidu.com/" target = "_blank">百度</a>
		<a href = "https://www.baidu.com/" target = "_self">百度</a>
		
		<hr />
		
		<!-- 图像也可以是超链接 -->
		<a href = "https://www.baidu.com/" target = "_blank">
			<img src = "img/nike/1.png" width = "100px" height = "100px" />
			
		</a>
		<img src = "img/nike/2.png" border = "1" />
	</body>
</html>

网页效果

表格:

表格用法介绍:

table------------表格标签

tr------------表格行

th------------单元格(表头 居中 加粗)

td------------普通的单元格

表格中的内容只能放在单元格

cellspacing = "0" 取消单元格间的间隔

cellpadding------------设置单元格内容到边框的距离

align = "center"------------居中,水平位置

valign = "top"------------置顶,垂直位置其他值:top,middle,bottom

合并单元格

colspan = "4" ------------跨多列合并,从哪个合并,就在哪个单元格中添加,

删除多余的单元格

rowspan = "2" ------------跨行合并

表格快捷生成方式:

table>tr*4>td*4------------快速生成一个4行4列的表格

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border= "1" width = "400px" cellspacing = "0" cellpadding = "10">
			<tr height = "50px">
				<!-- <th></th>表头标签和td功能相同,区别是加粗中心 -->
				<th>姓名</th>
				<th>语文</th>
				<th>数学</th>
				<th>英语</th>
			</tr>
			<tr>
				<td height = "80" align = "center" valign = "top">张三</td>
				<td>90</td>
				<td>80</td>
				<td>70</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>20</td>
				<td>30</td>
				<td>40</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>60</td>
				<td>70</td>
				<td>80</td>
			</tr>
		</table>
	</body>
</html>

网页效果

合并单元格示例

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border = "1" width = "400px" height = "300px">
			<tr>
				<td colspan = "3"></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td rowspan = "2"></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

网页效果

表单:

表单介绍:

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写 信息,最终

提交表单,把客户端数据提交至服务器.

表单的使用:

<form action="" method = ""></form>

action后端地址;

method提交方式:一般为post或get方式,post的方法比较安全。

input 单行输入框

type = "text"文本

name = "自定义名称" 向后端提交的键

value = "" 向后端提交的值

placeholder = "输入框内的提示信息"

readonly = "readonly" 只读不能修改,但是可以提交

disabled = "disabled" 禁用组件不能修改,也不能提交

type = "password" 密码输入框,会自动隐藏输入的密码

type = "radio" 单择框,当多个框的名字相同时只能选择一个,达成互斥的关系

type = "checkbox"多选框

<select name = "一个名字即可">

<option value = "最终提交到后端的内容">陕西</option>

</select>下拉式选择框

type = "file" 选择文件

<textarea cols = "列数" rows = "行数"></textarea> 文本域输入框

type = "submit" 提交按钮

type = "reset" 重置按钮

type = "button" 普通按钮,需要为该按钮添加事件监听

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action = "" method = "get">
			账号:<input type = "text" name = "account" placeholder="请输入账号" /><br />
			
			密码:<input type = "password" name = "password"/><br />
			
			<input type = "radio" name = "gender" value = "男"/>男
			<input type = "radio" name = "gender" value = "女"/>女<br />
			
			<input type = "checkbox" name = "class" value = "java"/>java
			<input type = "checkbox" name = "class" value = "mysal"/>mysql
			<input type = "checkbox" name = "class" value = "c"/>c
			<input type = "checkbox" name = "class" value = "python"/>python<br />
			
			籍贯:<select name = "province">
				<option value = "101">陕西</option>
				<option value = "101">河南</option>
				<option value = "101">湖南</option>
				<option value = "101">四川</option>
			</select><br />
			
			地址:<textarea cols = "22" rows = "3"></textarea><br />
			
			<input type = "file" name = "file"/><br />
			
			<input type = "submit"/>
			<input type = "reset" />
			<input type = "button" value = "普通按钮" onclick = "alert(12345)"/>
		</form>
	</body>
</html>

网页效果

相关推荐
金灰2 分钟前
HTML5--裸体回顾
java·开发语言·前端·javascript·html·html5
茶卡盐佑星_5 分钟前
说说你对es6中promise的理解?
前端·ecmascript·es6
Манго нектар33 分钟前
JavaScript for循环语句
开发语言·前端·javascript
蒲公英100140 分钟前
vue3学习:axios输入城市名称查询该城市天气
前端·vue.js·学习
天涯学馆1 小时前
Deno与Secure TypeScript:安全的后端开发
前端·typescript·deno
以对_1 小时前
uview表单校验不生效问题
前端·uni-app
Zheng1132 小时前
【可视化大屏】将柱状图引入到html页面中
javascript·ajax·html
程序猿小D2 小时前
第二百六十七节 JPA教程 - JPA查询AND条件示例
java·开发语言·前端·数据库·windows·python·jpa
奔跑吧邓邓子2 小时前
npm包管理深度探索:从基础到进阶全面教程!
前端·npm·node.js
前端李易安3 小时前
ajax的原理,使用场景以及如何实现
前端·ajax·okhttp