html常用标签

最新推荐文章于 2024-09-10 12:43:55 发布

现在不好了

最新推荐文章于 2024-09-10 12:43:55 发布

阅读量301

点赞数 5

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_66102016/article/details/140724644

版权

<title></title>中间写页面标题

<body></body>中间写页面内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面标题</title>
		<style>
		</style>
	</head>
	<body>
        <!-- 页面内容 -->
	</body>
</html>

<h6></h6>定义页面标题，标题大小从h1到h6，1最大，6最小

        <!-- 标题标签 h1-h6 -->
		<h2>凉州词</h2>
		<h4>凉州词</h4>
		<h6>凉州词</h6>

<p></p>中间写段落内容

        <!-- 段落 p -->
		<p>葡萄美酒夜光杯，欲饮琵琶马上催</p>
		<p>醉卧沙场君莫笑，古来征战几人回</p>

<a href="超链接地址">超链接文字或图片</a> <img src="图片地址" alt="图片加载失败时显示文字" />

        <!-- 超链接 -->
		<a href="https://www.baidu.com">链接到百度</a>
		<a href="Easy.html"><img src="图片" alt="图片加载失败" /></a>

<table></table>表格； <tr></tr>表格行； <td></td>表格列；中间写内容

        <table>
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>成绩</td>
			</tr>
			<tr>
				<td>1001</td>
				<td>张三</td>
				<td>100</td>
			</tr>
		</table>

colspan：设置当前单元格横跨的列数；rowspan：实现表格中一列跨越多行；

		<table>
			<tr>
				<td>1-1</td>
				<td colspan="2">1-2</td>
				<!-- <td>1-3</td> -->
				<td>1-4</td>
			</tr>
			<tr>
				<td rowspan="2">2-1</td>
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
			</tr>
			<tr>
				<!-- <td>3-1</td> -->
				<td>3-2</td>
				<td colspan="2"rowspan="2">3-3</td>
				<!-- <td>3-4</td> -->
			</tr>
			<tr>
				<td>4-1</td>
				<td>4-2</td>
				<!-- <td>4-3</td> -->
				<!-- <td>4-4</td> -->
			</tr>

<ol></ol>数字序号；<ul></ul>圆点序号

		<!-- 有序列表  有序号 -->
		<ol>
			<li>苹果</li>
			<li>香蕉</li>
			<li>橙子</li>
		</ol>
		
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>橙子</li>
		</ul>

表单from

		<form action="提交表单的地址" method="提交的方式 get/post">
			<!-- 表单中的组件 -->
			<input type="text" name="username" /><label for="">用户名</label>
			<!-- 密码框 -->
			<input type="password" name="usrpass" id="">
			<input type="text" readonly value="00000000000" name="code" />
			
			<!-- 隐藏域 -->
			<div>
				<input type="hidden" value="1001" name="id" />
			</div>
			
			<!-- 单选框 -->
			<!-- name一样才会有互斥性 -->
			<div>
			<input checked type="radio" value="m" name="sex" id="sexman" /><label for="sexman">男</label>
			<input type="radio" value="w" name="sex" id="sexwoman" /><label for="sexwoman">女</label>
			</div>
			
			<!-- 复选框 -->
			<div>
				<input checked type="checkbox" name="hobby" id="sing" value="sing" /><label for="sing">唱</label>
				<input disabled type="checkbox" name="hobby" id="dance" value="dance" /><label for="dance">跳</label>
				<input type="checkbox" name="hobby" id="rap" value="rap" /><label for="rap">RAP</label>
			</div>
			
			<!-- 下拉框 -->
			<div>
				<label for="province">省份</label>
				<select name="province" id="province">
					<option >山东省</option>
					<option value="AHS">安徽省</option>
					<option value="SXS">陕西省</option>
					<option value="YNS" selected >云南省</option>
					<option value="XJ">新疆</option>
				</select>
			</div>
			
			<!-- 文本域  多行文本框  两个标签当中的内容就是它的值 -->
			<div>
				<textarea name="" id="" cols="30" rows="10"></textarea>
			</div>
			
			<button type="submit">提交按钮</button>
			<button type="button">普通按钮</button>
			<button type="reset">重置按钮</button>
			<input type="button" value="普通按钮Input" />
			<input type="submit" value="提交按钮Input" />
			<input type="reset" value="重置按钮Input" />
			
		</form>

风格设置

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 内部样式 */
			/* 选择器 */
			/* ID选择器 */
			#boxa{
				height: 100px;
				width: 100px;
				background-color: aqua;
				
				/* 字体颜色 */
				color: beige;
				/* 字体大小 */
				font-size: 30px;
				text-align: center;
				
				/* 单行文本垂直居中 行高等于容器高度 */
				line-height: 100px;
				/* 字体加粗 */
				font-weight: bold;
			}
			/* 标签选择器 元素选择器 */
			div{
				height: 100px;
				width: 100px;
			}
			/* 类选择器 class="bgred" */
			.bgred{
				display: none;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<!-- 内联样式 -->
		<div style="width:100px;height: 100px;background-color: pink;"></div>
		<div id="boxa">你好</div>
		<div class="bgred"></div>
		<div class="bgred"></div>
	</body>
</html>