Python全栈 Web(HTML标签大全)

<!-- H5的声明方式 -->
<!DOCTYPE html>



<br><br><br>

<h4>
	<p>©ParisGabriel  </p>
	<dir>
		2018/9/1<br>
		QQ:1546079656  <br>
		Eminl:1546079656@qq.com  <br>
	</dir>
	<br><br><br><br><br>
</h4>





<!-- 文档的结束标记 -->
	<html>

	<!-- 网页的头部信息 -->
	<!-- 标题、选项卡图标、关键字、作者、描述等 -->
	<head>
		<!-- 网页标题 -->
		<title>首页</title>
		<!-- 字符编码 -->
		<meta charset="utf-8">
		<!-- 选项卡图标 -->
		<link rel="shortcut icon" href="web.ico" type="image/x-icon">
	</head>

		<p>
			<img src="./color.jpg">
		</p>
	<!-- 网页的主体信息 -->
	<!-- 网页所呈现的内容等 -->
	<body>
        <!-- 空格:&nbsp;<br>
		换行:<br>
		小于:&lt;<br>
		大于:&gt;<br>
		版权符号:&copy;<br>
		人民币:&yen;<br> -->
      
		空格: <br>
		换行:<br>
		小于:<<br>
		大于:><br>
		版权符号:©<br>
		人民币:¥<br>
		斜体显示:<i>斜体</i><br>
		下划线:<u>下划线</u><br>
		文本加粗:<b>加粗</b><br>
		删除线:<s>删除</s><br>
		上标记:<sup>上标</sup><br>
		下标记:<sub>下标</sub><br>
		标题:
			<h1>一级标题</h1>
			<h2>二级标题</h2>
			<h3>三级标题</h3>
			<h4>四级标题</h4>
			<h5>五级标题</h5>
			<h6>六级标题</h6>
		水平对其方式:
			<h4 align="left">默认居右</h4>
			<h4 align="center">设置居中</h4>
			<h4 align="right">设置居左</h4>
		水平线:<hr>
		段落:<p></p>
		分块:
			<div>
				这是<br>
				一块<br>
				元素<br>
			</div>
		分区:这是<span>绿色</span>、<span>黄色</span>、<span>红色的字体</span>
		有序列表:
			<!-- type 属性:1、a、A、i -->
			<!-- start属性:开始位置 -->
			<ol type="1" start="10">
				<li>有序列表列表项一</li>
				<li>有序列表列表项二</li>
				<li>有序列表列表项三</li>
			</ol>
			<!-- type属性:disc(实心圆)、circle(空心圆)、square(实心方框)、none(不显示) -->
		无序列表:
			<ul type="square">
				<li>无序列表列表项一</li>
				<li>无序列表列表项二</li>
				<li>无序列表列表项三</li>
			</ul>
			<!-- 有序列表无序列表可以任意嵌套 -->

		图像标签:
			<!-- 属性:src(路径)、width、height、title(鼠标悬停标题)、alt(错误提示) -->
			<p>绝对路径:</p>
			<img src="C:\Users\Administrator\Desktop\HTML标签\501018476.jpg" width="800px" height="430px">
			<p>相对路径:</p>
			<img src="项目.jpg" alt="文件路径不存在 项目.jpg" title="项目开发流程">
			<p>
				超链接:
					<!-- target属性:_self(默认窗口打开)、_blank(新建窗口打开)-->
					<a href="https://www.baidu.com" target="_blank">百度</a>
					<a href="C:\Users\Administrator\Desktop\HTML标签\bgvideo-720-2.mp4">视频</a>
					<a href="图片.zip">下载</a>
					<a name="bottom">设置锚点</a>
					<a href="#bottom">链接锚点</a>
			</p>
				<!-- 表格:<table> -->
				<!-- 行标签:<tr> -->
				<!-- 单元格:<td> -->
			<br>
			表格:
			<!-- 属性:border(边框)、width、height、align(水平对齐) -->
			<!-- cellpadding(内边距)、cellspacing(外边距)、bgcolor(背景色) -->
				<table border="1px" width="200px" height="200px" cellspacing="10px" cellpadding="10px">
					<!-- 属性:bgcolor、align(水平)、valign(垂直对齐):top、middle、bottom -->
					<tr>
						<!-- 属性:width、height、align、valign、bgcolor -->
						<!-- colspan(跨行合并单元格)、rowspan(跨列) -->
						<td align="center">单元格</td>
						<td align="center">单元格</td>
					</tr>
					<tr>

						<td align="center">单元格</td>
						<td align="center">单元格</td>
					</tr>
				</table>
			<br>
			行分组:
				<table border="1px" width="300px" height="300px" cellspacing="10px" cellpadding="10px">
					<thead>
						<tr>
							<td>表头</td>
							<td>表头</td>
							<td>表头</td>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<td>表尾</td>
							<td>表尾</td>
							<td>表尾</td>
						</tr>
					</tfoot>
					<tbody>
						<tr>
							<td>表主体</td>
							<td>表主体</td>
							<td>表主体</td>
						</tr>
					</tbody>
				</table>
			<br>
			合并单元格:
				<table border="1px" width="300px" height="300px" cellspacing="10px" cellpadding="10px">
					<tr>
						<td colspan="2">跨列合并</td>
						<td>单元格</td>
					</tr>
					<tr>
						<td>单元格</td>
						<td rowspan="2">跨行合并</td>
						<td>单元格</td>
					</tr>
					<tr>
						<td>单元格</td>
						<td>单元格</td>
					</tr>
				</table>
			<br>
			表单控件:
				<!-- 属性:action(指定数据提交地址)、method(请求方式) -->
				<form>表单控件</form>
			<br>
			表单控件:
				<form>
					<!-- 属性:name(必填自定义名称)、value(控件上的默认值) -->
					<!-- maxlength(字符限制)、placeholder(文本框提示文本) -->
					文本框:<input type="text" name="utext" placeholder="username"><br>
					密码框:<input type="password" name="upaddeord">
				</form>
			<br>
			选择框:
				<form>
					<!-- 属性:name(用来同名分组)、value(控件代表的值)、checked(默认选择) -->
					单选框:<input type="radio" name="radio">
					单选框:<input type="radio" name="radio" checked><br>
					多选框:<input type="checkbox" name="checkbox">
					多选框:<input type="checkbox" name="checkbox">
				</form>
			<br>
			隐藏域:
				<frame>
					<!-- 属性:name(控件名)、value(控件值) -->
					<input type="hidden" name="uname" value="张三"><br>
					<!-- 属性:name(控件名称) -->
					<br>
					文件选择框:<input type="file" name="图谱"><br>
				</frame>
			<br>
			下拉菜单:
				<frame>
					<!-- 属性:name(URL后拼接数、value(选项值) -->
					<select name="province">
						<option value="山东">山东省</option>
						<option value="山西">山西省</option>
					</select>
				</frame>
			<br><br>
			文本域:
				<p>
					<!-- 属性:name(控件名)、cols(列数)、rows(行数) -->
					<textarea name="个性签名" cols="50" rows="10"></textarea>
				</p>
			按钮:
				<p>
					<form>
						<!-- 属性:value(按钮名) -->
						<input type="submit" name="提交按钮" value="提交按钮">
						<input type="reset" name="重置按钮" value="重置按钮">
						<input type="button" name="普通按钮" value="普通按钮">
					</form>
				</p>
				<!-- 在form外是普通按钮form内默认是提交 -->
				<!-- 可以添加属性type:submit、reset、button -->
				<p>
					<button>
						普通按钮
					</button>
				</p>
			点击块:
				<form>
					<!-- 将文字和单选框之类的小按钮合并 点击文字也能选择 -->
					<label for="male">男</label>
					<input type="radio" name="gender" value="男" id="male">
					<label for="female">女</label>
					<input type="radio" name="gender" value="女" id="female">
				</form>


	</body>
 
<!-- 文档的结束标记 -->
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值