一、html常用标签
标题：有<h1>-<h6>的标签，表现为加粗，size从大变小
实例
<h1>我是标题</h1> <h2>我是标题</h2> <h3>我是标题</h3> <h4>我是标题</h4> <h5>我是标题</h5> <h6>我是标题</h6>
运行实例 »
点击 "运行实例" 按钮查看在线实
2.段落
用<p>标签表示，是一个块级元素，独占一行
3.列表
<ol></o>创建一个有序列表(如在列表前有1，2，3的数字排列)
<ul></ul>创建一个无序列表(列表前没有数字/字母排列，默认为一个黑点)
<li>定义列表项目，在<ol>和<ul>列表中使用
实例
<ol> <li>我是有序</li> <li>我是有序</li> <li>我是有序</li> <li>我是有序</li> </ol> <ul> <li>我是无序</li> <li>我是无序</li> <li>我是无序</li> <li>我是无序</li> </ul>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4.文本
<b></b>粗体字
<strong></strong>强调(粗体)
<i></i>斜体
<em></em>斜体（强调）
<center></center>居中文本
<br>换行符
<a href=""></a>超链接>
实例
<b>我是粗体</b> <strong>我是粗体（强调）</strong> <i>我是斜体</i> <em>我是斜体（强调）</em> <center>我是居中文本</center>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5.图像
<img src="">导入图像 src内指向图像地址
<video src="">导入视频
<hr>水平分割线
<del>删除线
实例
<img src="
运行实例 »
点击 "运行实例" 按钮查看在线实例
6.表格
用table建立
caption表格标题
<th>表头
<tr>
<td></td>
</tr>建立一行的表格
表格边框用cellspaccing,cellpadding 来取消（html）
css样式用 border-collapse:collapse
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table,tr,td,th{
border: 1px solid red;
border-collapse: collapse;
width: 250px;
height: 50px;
}
table{
margin:0 auto;
}
td:nth-child(1),th:nth-child(1){
background-color: pink;
width: 30px;
}
td:nth-child(2),th:nth-child(2){
width: 195px;
}
</style>
</head>
<body>
<table ce>
<caption>成绩表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>1</td>
<td>miss li</td>
<td>75</td>
</tr>
<tr>
<td>2</td>
<td>Mr mo</td>
<td>66</td>
</tr>
<tr>
<td>3</td>
<td>Miss lu</td>
<td>88</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
7.表单form
(1) 表单是最重要的交互工具,用户可以通过表单,将数据提交到后端服务器上进行处理
(2) 表单涉及:form,label,input,select,textarea,button标签
(3) 表单form标签中的元素,又称为表单控件,每个控件除了部分公共属性外,还有一些特殊属性
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <form action=""> <label for="username">用户名</label> <input type="text" name="username" placeholder= "请输入正确的用户名"> </form> </div> <div> <form action=""> <label for="password">密码</label> <input type="password" name="password" placeholder="请输入正确的密码"> </form> </div> <div> <!-- 单选按钮,每一组的name属性值必须相同,才会只返回唯一值,可以设置checked属性-默认选择 --> <input type="radio" name="gender" id="male" value="male" ><label for="male">男</label> <input type="radio" name="gender" id="women" value="women" ><label for="women">女</label> </div> <div> <!-- 复选框 将提示文本全部放在label标签中,确保点击标签文本,也可以选中对应的复选框 --> <!-- 一组复选框的name属性必须是相同的, 应该使用数组的语法,因为可以同时选择多个 --> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">van游戏</label> <input type="checkbox" name="hobby[]" value="ball" id="ball"><label for="ball">打球</label> <input type="checkbox" name="hobby[]" value="liao" id="liao"><label for="liao">liaomei</label> </div> <div> <label for="edu">学历</label> <select name="" id="edu" value="2333"> <option value="1">xiaoxue</option> <option value="2">chuzhong</option> <option value="3">benke</option> </select> </div> <div> <label for="common"> <textarea name="" id="common" cols="30" rows="10" placeholder="buchao100"></textarea> </label> </div> <input type="submit" value="tijiao"> <input type="submit" value="CHONGZHI "> <input type="submit" value="zuce"> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
二、CSS选择器和优先级
*{ } 通配符选择器，可以选择所有的标签
p{}、div{} 标签选择器，可以选到指定的标签
#id{} id选择器，id命名必须以字母开头，可包括数字、字母、下划线、连接符‘-’
.class{} class 类选择器
ul>li 子元素选择器
img[alt] 属性选择器
ul li 后代选择器
a:hover 伪类选择器
优选级：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
三、盒模型
盒模型div 有内容（content）、边框（border）、间隙（padding）、间隔（margin）组成。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale= ">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 250px;
height: 250px;
background-color: aquamarine;
border: 1px solid red;
padding: 25px;
margin-left: 100px;
}
.box2{
width: 250px;
height: 250px;
background-color:blueviolet;
border: 1px solid red;
padding: 25px;
margin-left: 100px;
}
.box3{
width: 250px;
height: 250px;
background-color:cyan;
border: 1px solid red;
padding: 25px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、浮动
float，主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动）
1.文档流: html元素默认按照书写的顺序在浏览器中,遵循先从左到右,再从上到下进行排列
2.布局前提: 通常先将元素从文档流中脱离,这样才能随心所欲的操作
3.元素脱离文档流的手段: 浮动和绝对定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale= ">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>folat浮动</title>
<style>
.box1{
width: 250px;
height: 250px;
background-color: aquamarine;
border: 1px solid red;
float: left;
}
.box2{
width: 250px;
height: 250px;
background-color:blueviolet;
border: 1px solid red;
float: left;
}
.box3{
width: 250px;
height: 250px;
background-color:cyan;
border: 1px solid red;
float: left;
}
.box4{
width: 250px;
height: 450px;
background-color:darkkhaki;
border: 1px solid red;
/* 浮动脱离文档流 box4自动补上空缺得位置*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、定位
定位有四类：
1、静态定位：浏览器默认方式
2、相对定位：元素未脱离文档流，与它原来的位置做相对运动
3、绝对定位：元素脱离文档流重新排列，把之前的元素全部转为块元素
4、固定定位：始终相对浏览器的窗口为定位父级进行定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale= ">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位-相对定位案例</title>
<style>
.box1{
width: 250px;
height: 250px;
background-color: aquamarine;
border: 1px solid red;
position:relative;/*相对之前的位置做了一个定位*/
left: 250px;/*相对之前位置左边移动250px*/
}
.box2{
width: 250px;
height: 250px;
background-color:blueviolet;
border: 1px solid red;
}
.box3{
width: 250px;
height: 250px;
background-color:cyan;
border: 1px solid red;
position: relative;
left: 250px;
bottom:250px;
}
.box4{
width: 250px;
height: 250px;
background-color:darkkhaki;
border: 1px solid red;
position: relative;
left:250px;
bottom: 250px;
}
.box5{
width: 250px;
height: 250px;
background-color:darkorange;
border: 1px solid red;
position: relative;
left: 500px;
bottom:750px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale= ">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位绝对定位</title>
<style>
.parent{
width: 750px;
height: 750px;
position: relative;
/*绝对定位需要给一个父级元素做一个相对定位*/
}
.box1{
width: 250px;
height: 250px;
background-color: aquamarine;
/* border: 1px solid red; */
position:absolute;
left: 250px;/*相对之前父元素位置左边移动250px 并脱离文档流，下方元素补上空缺位置*/
}
.box2{
width: 250px;
height: 250px;
background-color:blueviolet;
/* border: 1px solid red; */
position: absolute;
/* left: 250px; */
top: 250px;
}
.box3{
width: 250px;
height: 250px;
background-color:cyan;
/* border: 1px solid red; */
position: absolute;
left: 250px;
top: 250px;
}
.box4{
width: 250px;
height: 250px;
background-color:darkkhaki;
/* border: 1px solid red; */
position: absolute;
left: 250px;
top: 500px;
}
.box5{
width: 250px;
height: 250px;
background-color:darkorange;
position: absolute;
left: 500px;
top: 250px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例