一、html文档中常用的标签
1、标题与段落：标题标签共有6级: h1 ~ h6, 大多只用到h1~h3。
2、文本修饰：
<p>这是<strong style="background: black;color:white">文本加粗</strong>了哦！</p> <p>这是<span style="color:green">文本颜色</span>修改了。</p> <p>这是<em style="color:red">文本斜体</em>哈哈哈~</p>
运行实例 »
3、列表
① 无序列表 <ul> <li>苹果</li> <li>雪梨</li> </ul> ② 有序列表 <ol> <li>苹果</li> <li>雪梨</li> </ol> ③ 定义列表 <dl> <dt>淘宝网</dt> <dd>这是一个购物网站</dd> <dt>优酷网</dt> <dd>这是一个视频网站</dd> </dl>
运行实例 »
4、表格
<table> <caption>表格名称</caption> <thead> <tr> <th>序号</th> <th>名称</th> </tr> </thead> <tr> <td>1</td> <td>苹果</td> </tr> <tr> <td>2</td> <td>西瓜</td> </tr> </table>
运行实例 »
5、表单
<form action="" method="GET"> <div> <label for="username">用户名:</label> <input type="text" id="username" name="username" value="" placeholder="不少于6位"> </div> <div> <label> 密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <label> 确认密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"><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="smoke"><label for="smoke">抽烟</label> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">撸代码</label> </div> <div> <label for="edu">学历:</label> <select name="" id="edu" value=""> <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="20" rows="3" placeholder="不超过50字" value=""></textarea> </div> <input type="submit" value="提交"> <input type="reset" value="重置"> <button type="button">注册</button> </form>
运行实例 »
6、图片与媒体
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo图片" width="200"> <video src="http://www.runoob.com/try/demo_source/movie.mp4" controls="controls" width="400"></video>
运行实例 »
7、布局标签
8、其它
设置当前页面中的文本采用的默认编码字符集为utf8
<meta charset="UTF-8">
引用外部样式表,应该写到<head>标签中, 通过href属性引入
<link rel="stylesheet" href="static/css/style01.css">
引用外部js脚本，使用双标签,但标签中间必须为空,通过src属性引入
<script src="static/js/js01.js"></script>
二、css常用选择器与优先级
h1{ } //标签选择器
.aa{ } //class类选择器
#bb{ } //id选择器
*{ } //所有元素
<p style="color:red;">段落一</p> //添加style属性
优选级：标签 < class类 < id < style属性 < JavaScript代码
三、盒模型
1、盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
2、盒子默认都是块级元素: 独占一行,支持宽度设置
3、盒子模型分为三个层级：
内容级：宽高和背景三个属性
width、height、background-color (默认透明)
元素级(可视范围)
(1)包括内容级(width + height + background)
(2)内边距: padding
(3)边框: border
位置级：margin，决定当前盒子与其它盒子之间的位置与关系。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style>
.box1{
background-color: red;
width: 300px;
height: 200px;
padding: 10px;
padding：10px 20px;
padding：10px 20px 30px;
padding：10px 20px 30px 40px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
border-width: 10px 20px 30px;
border-style: solid;
border-color: blue red;
border-top-width: 10px;
border-right-style: solid;
border-bottom-color: red;
border: 10px solid red;
}
#aa{
background-color: yellow;
width: 100px;
height: 150px;
}
</style>
</head>
<body>
<div class="box1">
<div id="aa">这是盒子内的内容</div>
</div>
</body>
</html>运行实例 »
