Web前端 | HTML

最新推荐文章于 2024-07-11 22:36:37 发布

本咸鱼也有梦想啦

最新推荐文章于 2024-07-11 22:36:37 发布

阅读量90

点赞数

分类专栏： Web前端文章标签： html

本文链接：https://blog.csdn.net/weixin_44243926/article/details/102410910

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

标签不能随意嵌套，浏览器会自动格式化

div块级元素：自动换行、无限嵌套
p段落标签：自动换行、设置行距
span隔离标签：不换行（用
换行）
br：换行符
hr：水平分割线

b：加粗
i：斜体
big/small：大/小字体
u：下划线
del：删除线
sup/sub：上/下标

ol/ul：有序/无序列表
li 列表项，左侧缩进
dl：自定义列表
dt 列表项
dd 列表项的说明，左侧缩进

a：超链接
href=地址（外网https/本地页面/当前页面某位置#id）
target=_blank 新标签

img：图片
src=地址 alt=加载失败时的提示文字
audio：音频
src=地址 controls
video：视频
src=地址 controls width/height

table：表格
<table border=边框 cellspacing=单元格之间间距 cellpadding=单元格内间距>
tr：表格行
th/td：表头/单元格

form：表单
<form action=提交地址 method=提交方式(get/post)>
name-value是提交给服务器的数据
name必填
需要用户填写的项则无须设置value
<input type="" name="" id="" value="" />
文本框：text
密码框：password
单选框：radio
选择框：checkbox
文件/图片/颜色：file/image/color
复选框：<select name="city">
<option value="bj">北京</option>
大文本框：textarea
rows cols

iframe：框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
		
		<div>块状：换行</div>
		<p>段落：换行、行间距</p>
		<span>间隔</span>
		<br>换行
		<hr>水平分割线
		
		<b>加粗</b>
		<i>斜体</i>
		<big>大字体</big>
		<small>小字体</small>
		<u>下划线</u>
		<del>删除线</del>
		<sub>下标</sub>
		<sup>上标</sup>
		
		<ol>
			<li>有序列表</li>
			<li>左侧缩进</li>
		</ol>
		
		<ul>
			<li>无序列表</li>
			<li>左侧缩进</li>
		</ul>
		
		<dl>
			<dt>自定义列表</dt>
			<dd>列表项的说明</dd>
		</dl>
		
		<a href="task3.html" target="_blank">超链接</a>
		
		<p></p>
		<img src="babeljs.png" alt="图片加载失败">
		<br>
		<audio src="我和我的祖国.mp3" controls></audio>
		<br>
		<video src="我和我的祖国.mp4" width="200px" height="120px" controls></video>
		
		
		<hr >
		<table border="10" cellspacing="5" cellpadding="10">
			<tr>
				<th>Header1</th>
				<th>Header2</th>
				<th>Header3</th>
			</tr>
			<tr>
				<td rowspan="2">Data1</td>
				<td>Data2</td>
				<td>Data3</td>
			</tr>
			<tr>
				<!-- <td>Data1</td> -->
				<td>Data2</td>
				<td>Data3</td>
			</tr>
			<tr>
				<td>Data1</td>
				<td colspan="2">Data2</td>
				<!-- <td>Data3</td> -->
			</tr>
		</table>
			
		<hr>
		<form action="" method="post">
		
			<!-- name和value是向服务器提交的数据 -->

			<p></p>
			用户名：<input type="text" name="username" />
			
			<p></p>

			密码：<input type="password" name="pwd" />
			
			<p></p>
			性别：
			男<input name="sex" type="radio" checked>
			女<input name="sex" type="radio" checked>
			
			<p></p>
			爱好：
			游泳<input type="checkbox" name="" id="" value="swim" />
			唱歌<input type="checkbox" name="" id="" value="sing" />
			跳舞<input type="checkbox" name="" id="" value="dance" />
			
			<p></p>
			现居：
			<select name="city">
				<option value="bj">北京</option>
				<option value="tj">天津</option>
				<option value="zz" selected>郑州</option>
				<option value="km">昆明</option>
			</select>			
			
			<p></p>
			备注：
			<textarea rows="" cols="100px">请输入..</textarea>			
			
			<p></p>
			<input type="submit" name="" id="" value="重置" />
			<!-- <button type="button">登录</button> -->
			<input type="button" name="" id="" value="登录" />
			
			<p></p>
			上传文件：
			<input type="file" name="file" id="" value="" />
			
			<p></p>
			上传图片：
			<input type="image" name="img" id="" value="" />
			
			<p></p>
			选择颜色：
			<input type="color" name="color" id="" value="" />
		</form>
		
		<hr>
		<iframe src="task2_login.html" width="500px" height="200px"></iframe>
		<iframe src="task2_register.html" width="500px" height="200px"></iframe>
		<iframe src="task3.html" width="500px" height="200px"></iframe>

	</body>
</html>

本咸鱼也有梦想啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端 | HTML

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> &lt...
复制链接

扫一扫