块标签：div
标题段落标签：h1-h6、p
文本标签：strong、em
列表标签：ul、ol、dl、li、dt、dd
表格标签：table、caption、thead、tbody、tr、th、td
表格属性：cellpadding（添加表格内边距）、cellspacing（设置表格边框距离）
表单标签：from、input、label、select、option、textarea
图片与媒体：img、video
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用标签练习</title>
<style>
body {
height: 5000px;
}
</style>
</head>
<body>
<!-- 1.标题段落 -->
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是标题6</h6>
<p>这是段落标签</p>
<hr>
<!-- 2.文本修饰 -->
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<h3>这是标题3</h3>
<h4>这是标题4</h4>
<h5>这是标题5</h5>
<h6>这是<strong style="background-color:black; color:white">标题6</strong></h6>
<p>这是段落<em style="color:red">标签</em></p>
<hr>
<!-- 3.列表 -->
<h3>购物清单</h3>
<!-- 无序列表 -->
<ul>
<li>1.暖手宝，30元，被窝太冷</li>
<li>2.笔记本电脑，5000元，学习php</li>
<li>3.水果，50元，吃</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>暖手宝，30元，被窝太冷</li>
<li>笔记本电脑，5000元，学习php</li>
<li>水果，50元，吃</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>知识</dt>
<dd>知识改变命运给</dd>
<dt>学习</dt>
<dd>学习是最好的投资</dd>
</dl>
<hr>
<!-- 4.表格 -->
<table border="1" cellpadding="5" cellspacing="0" width="500px" heigth="150px" >
<caption style="font-size:1.2rem;margin-bottom: 15px">购物车</caption>
<thead>
<tr bgcolor="lightblue">
<th>序号</th>
<th>名称</th>
<th>价格</th>
<th>用途</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>暖手宝</td>
<td>30元</td>
<td>被窝太冷</td>
</tr>
<tr align="center">
<td>2</td>
<td>笔记本电脑</td>
<td>5000元</td>
<td>学习php</td>
</tr>
<tr align="center">
<td>3</td>
<td>水果</td>
<td>50元</td>
<td>吃</td>
</tr>
</tbody>
</table>
<hr>
<!-- 5.表单 -->
<h2>用户注册</h2>
<form action="" method="GET">
<div>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" placeholder="用户名不能少于6位">
</div>
<div>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="密码包含数字和字面" size="30">
</div>
<div>
<label for="password">确认密码</label>
<input type="password" name="password" id="password" placeholder="密码包含数字和字面" size="30">
</div>
<div>
<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female" checked><label for="female">女</label>
</div>
<div>
<input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label>
<input type="checkbox" name="hobby[]" value="smoke" id="game"><label for="smoke">抽烟</label>
<input type="checkbox" name="hobby[]" value="programme" id="game" checked><label for="programme">编程</label>
</div>
<div>
<label for="edu">你的学历</label>
<select name="edu" id="edu">
<option value="1">幼儿园</option>
<option value="2" selected>小学</option>
<option value="3">初中</option>
</select>
</div>
<div>
<label for="common">留言</label>
<textarea name="" id="common" cols="30" rows="10" placeholder="不超过100个字"></textarea>
</div>
<input type="submit" value="注册">
</form>
<hr>
<!-- 6.图片与媒体 -->
<img src="static/images/timg.jpg" alt="">
<video src="static/images/demo.mp4" controls></video>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：css常用选择器：
标签选择器：标签名
类选择器：.名
id选择器：id名
css优先级:行内样式>内部样式>外部样式
css样式优先级：js样式>内部样式>id样式>class样式>标签样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用选择器与优先级</title>
<link rel="stylesheet" href="static/css/style.css">
<style>
h3 {
background-color: black;
}
.bg-blue {
background-color: lightblue;
}
#bg-yellow {
background-color: yellow;
color: black
}
</style>
<title>常用选择器和优先级</title>
</head>
<body>
<h3>样式规则 = 选择器 + 声明</h3>
<h3 class="bg-blue">样式规则 = 选择器 + 声明</h3>
<h3 class="bg-blue" id="bg-yellow">样式规则 = 选择器 + 声明</h3>
<h3 class="bg-blue" id="bg-yellow" style="background-color:red">样式规则 = 选择器 + 声明</h3>
</body>
</html>点击 "运行实例" 按钮查看在线实例
div模型总结：
padding和margin编写格式（上，右，下，左）、（上，左右，下）（上下，左右）（上下左右）一共四中书写格式
border的设置（线条类型，线条颜色，线条宽度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div模型</title>
<style>
div {
width: 200px;
height: 200px;
border: solid red 5px;
padding: 20px;
margin: 20px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
