HTML 代码举例

最新推荐文章于 2024-08-01 15:05:06 发布
最新推荐文章于 2024-08-01 15:05:06 发布
阅读量3.9k 收藏 32
点赞数 9
分类专栏： html 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43563187/article/details/118977300
版权

1. 标题标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<!-- h1------h6 -->
		<h1 align="leff">一级标题</h1>
		<h2 align="center">二级标题</h2>
		<h3 align="right">
			<font color="red">三级标题</font>
		</h3>
	</body>
</html>

2. 文本的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本标签</title>
	</head>
	<body>
		<b>加粗文字</b>
		<br>
		<i>斜体文字</i>
		<br>
		<s>带有删除线的文字</s>
		<br>
		<u>带有下划线的文字</u>
		<br>
		<h1>一行标题</h1>
		<!-- 下划线  -->
		<hr color="aqua" width="80%" align="left" size="1">
	</body>
</html>

3. 文本标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本标签</title>
	</head>
	<body>
		<font size="" color="">默认的文字显示</font>
		<kbd>用粗体等宽字体显示文字</kbd>
		<var>用较小的固定宽度显示字体</var>
		<dfn>用于名词解释，斜体显示</dfn>
		<em>强调文字</em>
		<address>模拟信封上的字体</address>
		<strong>加强文字</strong>
		<font size="" color="">默认的文字大小</font>
		<big>比默认字号大一号</big>
		<small>比默认字号小一号</small>
		<code>以等宽字体显示计算机程序代码
		    int a=100;
			int b=200;
		</code>
		<br>
		<font size="7" color="blue">
			
			CO<sub>2</sub>
			<br>
			2<sup>3</sup>
		</font>
		
		<hr >
		
		 <b>长恨歌</b>
		 <br>
		作者：白居易
		<br>
		汉皇重色思倾国，御宇多年求不得。<br>
		杨家有女初长成，养在深闺人未识。<br>
		天生丽质难自弃，一朝选在君王侧。<br>
		回眸一笑百媚生，六宫粉黛无颜色。<br>
		
		<hr >
		<!-- pre 保持我原来的排版 -->
		<pre>
		 长恨歌_百度汉语
		
		作者：白居易
		汉皇重色思倾国，御宇多年求不得。
		杨家有女初长成，养在深闺人未识。
		天生丽质难自弃，一朝选在君王侧。
		回眸一笑百媚生，六宫粉黛无颜色。
		春寒赐浴华清池，温泉水滑洗凝脂。
		侍儿扶起娇无力，始是新承恩泽时。
		云鬓花颜金步摇，芙蓉帐暖度春宵。
		春宵苦短日高起，从此君王不早朝。
		承欢侍宴无闲暇，春从春游夜专夜。 
		</pre>
		
	</body>
</html>

4. 背景标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--bgcolor="aquamarine" 页面的背景颜色  
		background="img/coder10.jpeg" 设置页面的背景的图片
		绝对路径：带有盘符号的详细路径
		相对路径：不带有盘符号，彼此相对来说
	
	-->
	<body bgcolor="aquamarine" background="img/coder10.jpeg">
		
	</body>
</html>

5. 图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>插入图片</h1>
		<!--
		src="img/2.jpg"  图片的路径
		width="200px"  图片的宽
		height="200px" 图片的高
		border="2" 边框
		alt="图片加载失败" 图片加载失败时的文字提示
		title="美女"  鼠标移动上图片有个提示
		-->
		<img src="img/2.jpg" width="200px" height="200px" border="2" alt="图片加载失败" title="美女">
		<br>
		<img src="img/10.jpg" >
		<img src="http://www.westos.org/img/1.png" width="100px" height="200px" >
	</body>
</html>

6. 列表标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>Html学习大纲</h1>
		<!-- 无序列表 type="square" 可以设置列表项前面的几何图形-->
		<ul type="square">
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
		</ul>

		<!-- 有序列表 -->
		<h1>Html学习大纲2</h1>
		<!-- type="A" 有序列表的序号类型，可以取数组，字母 -->
		<ol type="1" start="1">
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
		</ol>

		<!-- 自定义列表 -->
		<dl>
			<dt>什么是喜欢</dt>
			<dd>喜欢就是比爱少一点点</dd>
			<dt>什么是爱</dt>
			<dd>爱是比喜欢多一点点</dd>
		</dl>
		<h1>Html学习大纲</h1>
		<!-- 无序列表 type="square" 可以设置列表项前面的几何图形-->
		<ul type="square">
			<li>Html 概念的介绍
				<ol type="1" start="1">
					<li>Html 概念的介绍</li>
					<li>Html 概念的介绍</li>
					<li>Html 概念的介绍</li>
					<li>Html 概念的介绍</li>
					<li>Html 概念的介绍</li>
					<li>Html 概念的介绍</li>
				</ol>
			</li>
			<li>Html 概念的介绍
				<ul>
					<li>Html 概念的介绍</li>
					<li>Html 概念的介绍</li>
					<li>Html 概念的介绍</li>
					<li>Html 概念的介绍</li>
					<li>Html 概念的介绍</li>
					<li>Html 概念的介绍</li>
				</ul>
			</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
			<li>Html 概念的介绍</li>
		</ul>
	</body>
</html>

7. 段落标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>xxxxxxxxxxx</h1>
		<hr >
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		
		
		<img src="https://...." >
		
	<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
	<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
	<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
	<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
	
	</body>
</html>

8. 转义字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>这是&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&gt;一个标题文字</h1>
		<h1>&yen;</h1>
		<img src="img/zhuanyi.png" >
	</body>
</html>

9. 超链接标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
	</head>
	<body>
		<!-- 超链接标签可以进行页面之间的跳转 -->
		<!-- 跳到别的网站 -->
		<a href="https://www.baidu.com">进入百度</a>
		<a href="https://www.163.com">进入网易</a>
		<!-- 自己网站的页面跳转
		 href="index.html" 链接的地址
		 target="_blank" 新建一个窗口打开 默认值
		 target="_self"  在自身窗口打开
		 -->
		<a href="index.html" target="_blank">进入我们自己的首页</a>
		<a href="2.文本的标签.html" target="_self">进入我们自己网站的页面</a>
		<a href="#">空链接</a>
		
	</body>
</html>

10. 锚点标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 定义一个锚点 -->
		<a name="top"></a> 
		<h1>xxxxxxxxx</h1>
			<hr >
			<p>
				<a href="#dibu">跳到底部</a>
			</p>
			<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			
			<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			
			<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			<img src="https://..." >
			
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			
			<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			
			<p align="left">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			
			<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			
			<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<hr >
			
			<img src="https://..." >
			
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			
			
			<img src="https://..." >
			
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			<p align="left">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
			
			
			<!-- 锚点，给锚点起个名字 -->
			<a name="dibu"></a> 
			
			<!--跳到顶部的锚点  -->
			<p>
				<a href="#top">跳到顶部</a> 
			</p>
	</body>
</html>

11. 表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<!-- 表格标签最早用于页面布局 
		table 表格
		tr 表示行
		td 单元格
		-->
		<!-- 
		 align="center" 表格的对齐方式，左中右
		 border="1" 表格的边框粗细
		 bordercolor="red"  边框颜色
		 cellspacing="0" 边框的间隙 不要间隙给成0
		 cellpadding="0" 单元格里面的容和单元格的内间距
		 width="800px" 表格宽 可以给百分比
		 height="400px" 表格高 可以给百分比
		 background="img/coder8.jpg8" 背景图片
		 bgcolor="antiquewhite" 背景颜色
		 
		 -->
		<h1 align="center">学生信息表</h1>
		<table background="img/coder8.jpg8" bgcolor="antiquewhite" align="center" border="1" bordercolor="red" cellspacing="0" cellpadding="0" width="800px" height="400px">

			<!-- <caption>
				<h3>学生信息表</h3>
			</caption> -->

			<tr height="30px">
				<!-- <th> 作为表头单元格 可以让内容加黑加粗，并居中对齐-->
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
				<th width="400px">手机</th>
			</tr>
			<!--align="center" 可以使用在行上，也可以使用在单元格  -->
			<tr  align="center" bgcolor="yellowgreen">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>13999996666</td>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>13999996666</td>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>13999996666</td>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td bgcolor="blueviolet">男</td>
				<td>13999996666</td>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>13999996666</td>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td align="left">13999996666</td>
			</tr>

		</table>

	</body>
</html>

12. 合并单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table align="center" border="1" bordercolor="red" cellspacing="0" width="50%" height="500px">

			<tr>
				<!-- colspan="2" 左右合并 -->
				<td colspan="2">Data</td>
				
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td colspan="3">Data</td>
			
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<!-- rowspan="2" 上下合并 -->
				<td rowspan="2">Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td rowspan="2">Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</table>
	</body>
</html>

13. 合并的单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table align="center" border="1" bordercolor="blue" cellspacing="0" width="500px" height="300px">

			<tr>
				<td>Data</td>
				<td colspan="3">Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td rowspan="2">Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td colspan="2">Data</td>
			</tr>
		</table>
		<hr>
		<br>
		<br>
		<br>
		<table align="center" border="1" bordercolor="red" cellspacing="0" cellpadding="0" width="500px" height="600px">

			<tr>
				<td rowspan="5" width="200px" height="500px">
					<img  height="500px" width="200px" src="img/u1096790207581763790fm11gp0.jpg" >
				</td>
				<td width="300px">商品名称:手机</td>
			</tr>
			<tr>

				<td>
					<font color="blue">商品价格</font>
				</td>
			</tr>
			<tr>

				<td>Data</td>
			</tr>
			<tr>

				<td>Data</td>
			</tr>
			<tr>

				<td>Data</td>
			</tr>
			<tr height="100px">
				<td colspan="2" align="right">
					<button type="button">加入购物车</button>
				</td>
			</tr>
		</table>
	</body>
</html>

14.可以采用表格来布局但是现在不推荐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 0;
			}
		</style>
	</head>
	<body>
		<table border="0" cellspacing="0" width="100%" height="120px">

			<tr>
				<td width="200px"></td>
				<td width="80px">
					<img src="img/logo.png">
				</td>
				<td>

				</td>
				<td width="600px">
					<font size="5">西部开源欢迎你!</font>
				</td>
				<td width="50px"><img src="img/phone1.png" width="50px" height="50px"></td>
				<td>
					<font size="5" color="">029-86699937 88262419</font>
				</td>
				<td width="200px"></td>
			</tr>
		</table>
		<table bgcolor="#3E89FC" border="0" cellspacing="0" width="100%" height="100px">

			<tr>
				<td>
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					&nbsp;
					<font size="4" color="white">
						首页
						&nbsp;
						&nbsp;
						&nbsp;
						课程中心
						&nbsp;
						&nbsp;
						&nbsp;
						教育体系
						&nbsp;
						&nbsp;
						&nbsp;
						新闻资讯
						&nbsp;
						&nbsp;
						&nbsp;
						学习资料
						&nbsp;
						&nbsp;
						&nbsp;
						Linux企业化</font>
				</td>
			</tr>
		</table>
		<table border="0" width="100%" height="650px">
			<tr>
				<td><img height="650px" src="img/banner4.jpg" width="100%"></td>
			</tr>
		</table>
	</body>
</html>

15. 表格嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table align="center" border="1" cellspacing="0" bordercolor="red" width="500px" height="600px">

			<tr height="100px">
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr height="400px">
				<!-- 在单元格里面，嵌套表格 -->
				<td width="100px">
					<table height="100%" width="100%" border="0" cellspacing="" cellpadding="0">
						<tr>
							<td>1.Data</td>
						</tr>
						<tr>
							<td>2.Data</td>
						</tr>
						<tr>
							<td>3.Data</td>
						</tr>
						<tr>
							<td>4.Data</td>
						</tr>
						<tr>
							<td>5.Data</td>
						</tr>
						<tr>
							<td>6.Data</td>
						</tr>
						<tr>
							<td>7.Data</td>
						</tr>

					</table>
				</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>

		</table>
	</body>
</html>

16. 表单标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 align="center">注册用户</h1>
		<!-- 表单就是让用户和服务器进行数据的交互 -->
		<!-- 
		 action="#"  表单提交的后台地址 
		 method="get" 提交方式 get post
		 
		 -->

		<!--input 表单项，必须要提供 name属性 作为键 value 作为值 
		 type="text" 表单项的的类型，比如是文本框，密码框，单选框
		  给后台提交时，就会以键值的形式来提交 
		  例如： username=zhangsan&password=123456
		  placeholder="请输入用户名" 输入框默认的提示内容
		  
		  required="required" 输入框必须填写内容
		  maxlength="10" 内容长度最大10个字符
		  -->
		<center>
			<form action="#" method="get">
				用户名：<input type="text" name="username" value="" placeholder="请输入用户名" required="required" maxlength="10" />
				<br>
				密码：<input type="password" name="password" value="" placeholder="请输入密码" required="required" maxlength="10" />
				<br>
				<!-- 
		几个单选框作为一组，要互斥，你必须把name属性值设置为一样，这样的话一次只能选一个
		checked="checked" 默认选中
		 -->
				性别:<input type="radio" name="sex" value="1" checked="checked" />男 <input type="radio" name="sex" value="0" />女
				<!-- 你可以点击字，也可以勾选上 -->
				<input id="yao" type="radio" name="sex" value="2" />
				<label for="yao">妖</label>
				<br>

				生日：<input type="date" value="" />
				<br>
				<!-- 多个复选框name属性值要一样，作为一组
		 checked="checked"默认选中项
		 -->
				爱好:<input type="checkbox" name="hobby" value="lanqiu" checked="checked" /> 篮球
				<input type="checkbox" name="hobby" value="zuqiu" checked="checked" /> 足球
				<input type="checkbox" name="hobby" value="ppq" id="pp" />
				<label for="pp">乒乓球</label>

				<br>
				<!-- 
		 selected="selected" 默认选中项
		 -->
				学历：<select name="xueli">
					<option value="">--请选择你学历--</option>
					<option value="youeryuan">幼儿园</option>
					<option value="xiaoxue">小学</option>
					<option value="zhongxue">中学</option>
					<option value="daxue" selected="selected">大学</option>
				</select>
				<br>
				个人描述：
				<textarea rows="5" cols="30" name="desc">
			请输入备注内容
		</textarea>

				<br>
				数量:<input type="number" name="count" id="" value="1" min="1" max="10" />
				<br>
				上传文件：<input type="file" name="photo" />
				<br>
				<!-- 提交按钮和重置按钮，不需要写name属性
		input 表单项
		 type="submit" 表单项的类型 submit 就是提交按钮类型，你一点击，就会往后台提交表单
		 -->

				<!--  -->
				<input type="submit" value="注册" />
				<input type="reset" value="重置" />
			</form>
		</center>

	</body>
</html>

17. 框架标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 框架标签，可以将页面切割成独立的几部分，每一部分，可以引用单独一个HTML页面
	 注意：框架标签不能和body同时使用
	 
	 
	 rows="25%,*" 上下分割
	 -->
	<frameset rows="25%,*" border="1" bordercolor="red">
		<!-- 上面的一部分 -->
		<!-- noresize="noresize" 不要让用户能够拖动框架 -->
		<frame src="top.html" noresize="noresize"/>
		<!-- 下面的一部分 -->
		<!-- <frame src=""/> -->
		<frameset cols="25%,*">
			<!-- 左边的连接 -->
			<frame src="left.html" noresize="noresize"/> 
			<!-- 右边主体部分 给主体部分的框架，起个名字
			 scrolling="auto" 滚动条的设置 auto yes no
			 -->
			<frame name="content" src="http://www.westos.org" noresize="noresize" scrolling="auto"/> 
		</frameset>
	</frameset>
</html>

18. 画中画标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 使用iframe标签在页面嵌入视频 -->
		<iframe 
		width="500px"
		height="500px"
		src="//player.bilibili.com/player.html?aid=886410537&bvid=BV1KK4y1p7M4&cid=288792143&page=1" 
		scrolling="no" 
		border="0" 
		frameborder="no" 
		framespacing="0" 
		allowfullscreen="true"> 
		</iframe>
		
		<iframe src="//player.bilibili.com/player.html?aid=13248989&bvid=BV1ox411n7eY&cid=21802553&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
	</body>
</html>

19. 音视频标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- html4提供的 -->
		<embed src="mp3/怨苍天变了心%20方季惟.mp3" autostart="true" loop="true"  height="120px" width="600px">
		
		<embed src="mp4/video.mp4" autostart="true" loop="true"  height="600px" width="600px">
		<hr >
		<!-- html5提供的音视频标签 -->
		<audio src="mp3/怨苍天变了心%20方季惟.mp3" loop="loop" autoplay="autoplay" controls="controls">
			当前浏览器不支持audio
		</audio>
		<hr >
		<video src="mp4/video.mp4" width="800" height="800" autoplay="autoplay" controls="controls">
			
		</video>
		<video src="mp4/mi.mp4" width="800" height="800" autoplay="autoplay" controls="controls">
			
		</video>
	</body>
</html>

20. 行标签和块标签以及行内块标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 行标签：标签，不会默认占据一行的位置，他的内容实际有多宽就占据多宽 b s i a font 
		 块标签：标签，会占据一整行的位置 h1--h6  ul li 
		 行内块标签：不会默认占据一整行，但是他可以使用块标签CSS属性。
		 
		 -->
		 <b>文本加粗的标签，他是一个行标签</b> <b>文本加粗的标签，他是一个行标签</b> <b>文本加粗的标签，他是一个行标签</b>
		 <h1>abc</h1>
		 <font size="7" color="red">font 标签也是行标签</font> <font size="7" color="red">font 标签也是行标签</font>
		 <ul>
		 	<li>asdfasdf </li>
			<li>asdfasdf </li>
		 </ul>
		 
		 <button type="button">一个按钮</button>
		  <button type="button">一个按钮</button>
		   <button type="button">一个按钮</button>
	</body>
</html>

21. 行标签块标签行内跨标签的特点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*CSS 对 行标签进行宽高的设置不起作用 ，对上下间距设置不起作用*/
			font{
				height: 500px;
				width: 500px;
				margin-top: 300px;
				/* 行标签设置左右间距时生效的 */
				margin-left: 500px;
			}
			/* CSS 设置宽高，和上下左右间距，都生效 */
			h1{
				margin-top: 1000px;
				width: 500px;
				height: 500px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<font>行标签</font><font>行标签</font>
		<h1>块标签</h1>
	</body>
</html>

22. 行内块的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
			img{
				height: 600px;
				width: 500px;
				margin-top: 50px;
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<!-- button 属于行内块标签，不会占据一整行，但是会对设置宽高，上下左右间距，都会生效 -->

		<img src="img/1.jpg" > <img src="img/1.jpg" >
	</body>
	</body>
</html>

23. 行内块标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*  */
			button{
				height: 200px;
				width: 300px;
				margin-top: 50px;
				margin-left: 50px;
			}
			img{
				height: 600px;
				width: 200px;
				margin-top: 150px;
				margin-left: 250px;
			}
		</style>
	</head>
	<body>
		<!-- button 属于行内块标签，不会占据一整行，但是会对设置宽高，上下左右间距，都会生效 -->
		<button type="button">一个按钮</button><button type="button">一个按钮</button>
		<img src="img/1.jpg" > <img src="img/1.jpg" >
	</body>
	</body>
</html>

24. 纯净的块标签和行标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		<!-- 所谓的不纯净，就是指这个标签会默认自带一些样式，比h1 你会对文字加黑加粗字号变大 -->
		<h1>不是一个纯净的块标签</h1>
		
		<ul>
			<li>asdfasdfasdf</li>
			<li>asdfasdfasdf</li>
		</ul>
		<!-- 有一个纯净的块标签 div 他的样式由我们使用CSS来控制 -->
		<div id="">
			abc
		</div>
		<div id="">
			abc
		</div>
		
		<b>不纯净的行标签</b>
		
		<hr >
		<b>asdfasdfsd</b>
		<s>阿斯顿发送到发斯蒂芬</s><s>阿斯顿发送到发斯蒂芬</s>
		
		<!-- 一个纯净的行标签span -->
		<span>纯净的行标签</span><span>纯净的行标签</span>
		
	</body>
</html>
Hoooooope!
关注
  • 9
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML简单代码示例
weixin_45082954的博客
11-06 5728
乘法口诀表HTML代码 运行样式： 代码如下： <!DOCTYPE html> <html> <head> <title>九九乘法口诀表</title> </head> <meta charset="utf-8"> <body bgcolor="white"> <h1 alig...
jquery 中加入html代码,jquery实现动态添加html代码
weixin_30630377的博客
05-30 5554
先看下思导图，整体了解下，然后我们再来学习。现在我们来看一下几段代码，然后根据这几段代码我们来学习一下如何正确的学习动态添加html。一.html()方法html函数的作用原理首先是移除目标元素内部的html代码，然后将新代码添加到目标元素。第一段代码：function CommentBubble(){var w1 = '' +' ' +'' +'' + '' +'' +'' +' ' +'...
HTML代码示例和介绍
weixin_45568391的博客
10-22 4558
HTML基本的格式 <!DOCTYPE html> <!-- 声明文档。定义html --> <html lang="en"> <!-- 元素是页面的根元素 --> <head> <!-- 元素包含文档的元数据 --> <meta charset="UTF-8"> <!-- 定义网页编码格式 --> <title&gt
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
网页设计与制作 | HTML+CSS+JS
06-12 1029
精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Websto
网页html代码大全
热门推荐
alashan007的博客
02-23 10万+
常用HTML代码解释 一、文字1.标题文字&lt;h#&gt;..........&lt;/h#&gt; #=1~6；h1为最大字，h6为最小字 2.字体变化&lt;font&gt;..........&lt;/font&gt; 【1】字体大小&lt;font size=#&gt;..........&lt;/font&gt; #=1~7；数字愈大字也愈大【2】指定字型&lt;font face=...
html静态网页实例二（附完整代码）
全栈川川
10-31 3万+
这个例子是一个旅游网页，参考别人模板修改的 效果图： 参考代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""&gt
html游走字幕代码大全,html 滚动字幕代码
weixin_29775951的博客
05-30 812
基本语法：举例：啦啦啦，我会移动耶！文字移动属性的设置：方向#=left,right举例：啦啦啦，我从右向左移！啦啦啦，我从左向右移！方式：#=scroll,slide,alternate举例：啦啦啦，我一圈一圈绕着走！啦啦啦，我只走一次就歇了！啦啦啦，我来回走耶！循环：#=次数；若未指定则循环不止(infinite)举例：啦啦啦，我只走3趟哟！啦啦啦，我只走3趟...
html静态网页实例一（附完整代码）
全栈川川
10-31 6万+
这个例子我们做一个游戏静态页面，自动跳转到我们想要玩的游戏或者视频等网站 大家也可以根绝我的代码，适当修改一些信息，但是套用我的这个模板请注释下来自我这，我也是初学者，辛辛苦苦写了几个小时，尊重下劳动成果 先看效果图：我以张杰为背景图，里面是各种网站跳转，比如我点击：冰火人，他就会跳转到4399的冰火人游戏界面。 ok,上代码，我觉得比较简单，就没注释，希望能看懂： <!DOCTYPE html> <html> <head lang="en"> <meta cha
html5页面头部代码,HTML5标签：header元素的使用方法及作用
weixin_39710361的博客
06-04 1689
html代码的标签是html5新增标签，通常用于放置介绍性或引导性的内容，也可以作为导航栏目链接的容器，下面，就一起学习r标签的用法及作用: 标签定义 标签定义整个页面或者页面某一个内容区块的头部信息。 标签定义的通常是介绍性、引导性的内容，或作为导航链接的容器！ 标签可以包含标题标签 h1 ~ h6或hgroup，也可以包含其他的内容，比如导航链接栏、logo、搜索表单等靠近头部区域的内容。 标...
html页面引入其他html页面代码
zhaohanqq的博客
05-07 1万+
{include file="/course/common/footer.html"} //注意路径书写方式 用该语法可以引入公共html模板代码 举例： //header.html 公共页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--...
html中代码注释符号,注释html和javascript代码的符号及方法
weixin_42360977的博客
06-07 3354
每种程序开发语言都有注释符，主要用于给代码添加注释便于阅读理解，尤其在复杂的程序中。html代码相对来说简单一些，但也有注释符，虽然不会经常用到，但有时也会使用，所以应该知道怎么使用。在html文件中，经常会见到用html注释符括起来的javascript代码，这是否是把javascript代码注释掉了呢？当然不是，否则还留着javascript干什么，不如直接删除；据说用html注释符括起的ja...
html css js全套学习笔记＋举例
04-16
ES6（ECMAScript 6）版本引入了许多新特性，如let和const变量声明、模板字符串、箭头函数、Promise等，提升了代码的可读性和效率。 在学习过程中，跟随课程进行系统学习是非常有效的。尚硅谷的课程可能涵盖了HTML的...
exemplos:举例说明平台使用的代码
05-12
HTML代码通常遵循W3C标准，以确保在不同浏览器上的一致性。 在"exemplos-master"这个项目中，我们可能会看到上述各种HTML元素的应用实例，帮助学习者理解如何在实际的Web开发项目中使用HTML。通过查看这些示例，你...
Html中JS脚本执行顺序简单举例说明
01-19
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head&...
ajax应用举例
12-05
Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的...现在，你可以查看名为“gj”的压缩包文件中的代码，进一步学习和实践这些Ajax知识。
前端代码规范.docx
08-13
1. 标签套用：优先复用案列中提供的 HTML 模版（包括其中的 class），以确保代码的一致性和可读性。 2. 功能注释：每个功能之间添加单行注释，以便于代码的维护和 debug。 3. 输入提示：每个 input/textArea 等标签...
使用hutool工具判断字符串是否全部是字母(包括大小写)，java判断字符串是否全部是字母(包括大小写)
qq_43700885的博客
07-29 576
1.导入hutool的maven依赖。2.复制一下代码执行。
社区养老服务小程序的设计
Karen198的博客
07-31 482
管理员账户功能包括：系统首页，个人中心，用户管理，服务人员管理，服务产品管理，服务预约管理，服务状态管理，服务退订管理，活动管理，视频管理。主要技术：Java,Spring,mybatis,mysql,jquery,html。服务器：SpringBoot自带 apache tomcat。微信端账号功能包括：系统首页，服务产品，活动，视频，我的。JDK版本：Java JDK1.8。数据库可视化工具： navicat。数据库版本： mysql5.7。开发工具：IDEA(推荐)开发系统：Windows。
深入理解Java注解
最新发布
weixin_55745942的博客
08-01 512
Java注解是用来描述程序元素（如类、方法、变量等）的一种机制。它们可以提供关于程序的补充信息，帮助编译器、框架或其他工具更好地理解和处理代码。注解通常以符号开头，后跟注解名称和可能的参数。要创建自定义注解，需要使用@interface关键字定义一个接口，并在接口中声明注解的属性。这个注解名为，可以被用来标记方法。它有一个名为value的属性，具有默认值"default"。
python传递参数到html代码举例
04-24
当使用Python编写基于Web的应用程序时，将数据传递到HTML代码是非常常见的需求。以下是一个简单的例子： 假设你有一个Python函数，它会返回一组数据，这些数据将在Web页面中显示。这个函数可能看起来像这样： ```python def get_data(): data = {'name': 'John', 'age': 30} return data ``` 为了将这些数据呈现到一个HTML页面上，你需要创建一个HTML模板，使用特定的模板语言（如Jinja2），你可以将Python代码和HTML代码混合在一起。在这个HTML模板中，你可以使用Python变量和Python的控制流程来动态生成HTML代码。下面是一个基本示例： ```html <!DOCTYPE html> <html> <head> <title>My Web Page</title> </head> <body> <h1>Hello {{ name }}!</h1> <p>You are {{ age }} years old.</p> </body> </html> ``` 在这个HTML文件中，你可以看到两个占位符，分别用于显示名称和年龄。通过使用Jinja2，你可以将这些占位符替换为Python变量。下面是一个快速示例： ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): data = {'name': 'John', 'age': 30} return render_template('index.html', **data) if __name__ == '__main__': app.run(debug=True) ``` 在这个例子中，Python代码首先将数据返回给一个变量data中。然后，调用用于呈现模板的函数render_template。render_template函数将HTML模板和data参数一起传递，用于替换HTML模板中的变量。 最后，Flask应用程序将HTML代码返回到浏览器进行显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值