实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
<title>Document</title>
<style>
.box{
border: solid 1px rgb(216, 213, 213);
}
</style>
</head>
<body>
作业内容 <br>
1. 将html常用标签全部写一遍(按视频中的推荐的) <br>
1标题与段落
<div class="box">
<h1>我是标题</h1>
<p>我是段落</p>
</div>
2.文本修饰<br>
<div class="box">
<strong>加粗</strong>
<em>倾斜</em>
</div>
3.列表
<div class="box">
无序列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
定义列表
<dl>
<dt>列表标题</dt>
<dd>列表分类1</dd>
<dd>列表分类2</dd>
<dd>列表分类3</dd>
</dl>
</div>
4.表格
<div class="box">
<table border="1" cellpadding ="5" cellspacing="0">
<caption>我是表格标题</caption>
<thead>
<tr >
<th>班级</th>
<th>姓名</th>
<th>学号</th>
<th>***</th>
</tr>
</thead>
<tbody>
<tr>
<td>一年级</td>
<td>王小二 </td>
<td>1</td>
<td>11111111111111</td>
</tr>
<tr>
<td>一年级</td>
<td>李三</td>
<td>2</td>
<td>22222222222222</td>
</tr>
<tr>
<td>一年级</td>
<td>张四</td>
<td>3</td>
<td>33333333333333</td>
</tr>
</tbody>
</table>
</div>
5.表单
<div class="box">
<h2>用户注册</h2>
<form action=""//指向 method="GET"//提交方式>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" value="" placeholder="请输入用户名">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" size="22" >
</div>
<div>
<label for="password">确认密码:</label>
<input type="password" id="password" name="password">
</div>
<!-- 单选 -->
<div>
<!-- 单选按钮，每一组的name属性值必须相同，才会只返回唯一的值，checked 设置默认值 -->
<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="famale" id="famale" checked><label for="famale">女</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="smoke"><label for="smoke">抽烟</label>
<input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label>
</div>
<!-- 下拉标签 -->
<div>
<label for="edu">您的学历：</label>
<select name="edu" id="edu">
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
<option value="4">大学</option>
</select>
</div>
<!-- 文本框 -->
<div>
<label for="common">留言</label>
<textarea name="common" id="common" cols="30" rows="10" placeholder="默认提示内容"></textarea>
</div>
提交按钮
<div>
<input type="submit" value="注册">
<input type="reset" value="重置">
<button>提交</button>
</div>
<!-- input 的输入类型要学习一下 -->
<!-- http://www.w3school.com.cn/html/html_form_input_types.asp -->
</form>
</div>
6.图片与媒体
<div class="box">
<img src="../static/images/zly.jpg" alt="图片" width="100">
<video src="../static/images/demo.mp4" controls="controls" width="250"></video>
</div>
7.布局标签
<div class="box">
</div>
8.其他
<div class="box">
</div>
2.练习css常用选择与优先级<br>
<style>
/* 标签选择器 */
h3{
background-color:brown;color:#fff;
}
/* 类选择器 */
.bg-red{
background-color:red;color:#333;
}
/* id选择器 */
#bg-balck{
background-color:black;color:#fff !important//css 最优先级;
}
</style>
<div class="box">
<h3>样式规则 = 选择器 + 声明</h3>
<h3 class="bg-red">样式规则 = 选择器 + 声明</h3>
<h3 id="bg-balck">样式规则 = 选择器 + 声明</h3>
<h3 style="background-color:skyblue;color:#fff;">样式规则 = 选择器 + 声明</h3>
</div>
<!-- 优先级 ，标签 《 类 《 id 《 JS -->
标签
3.将盒模型内容全部掌握,特别是padding与简写,border的设置
<style>
h3{
margin: ;//外边距
padding: ;//内边距
border: ;//框
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例