无序列表
概念：用于垂直一列的显示数据
分类：有序列表、无序列表、自定义列表
无序列表的写法：<ul><li></li></ul>
特点：
1、li 标签一定要写到 ul 标签中
2、无序列表可以进行嵌套
3、无序列表默认的样式：
右边有小黑点 可以使用 list-style: none; 来取消
默认有上下外边距、左内边距
是块级元素
表单
作用：收集用户数据给服务器用
分类：form 表单域；提取信息 label；表单元素
form 表单域：
action：动作，把数据提交给要处理的页面
method：提交数据的方式。如果 form 不写 method 属性，默认就是 get
- GET：把数据拼到 url 的后面。不安全，传输数据有大小限制
- POST：通过二进制流的方式给服务器传数据。数据安全，数据没有大小限制
表单元素
input:
input 中的 type 类型:
- text 单行文本框；
- password 密码输入框；
- radio 单选按钮；
- checkbox 复选框；
- file 文件；
- button 普通按钮；
- submit 提交按钮；
- reset 重置按钮；
- image 图像形式的提交按钮；
必须写在 form 表单标签中，
form 表单中的标签必须添加 name 属性
会把 form 表单中标签的 value 值提交给服务器
name： 给标签设置名称
value：给文本框设置内容
checked：选中点选按钮
disabled：让标签不可用
<select>标签 定义下拉表单元素
option
selected：默认
<textarea>标签 定义多行文本输入框 （文本域）
cols: 宽度
rows：高度
- 练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<h2>注册</h2>
<form action="http://www.baidu.com" method="GET">
<p><label>姓 名：</label><input type="text" value="请输入姓名" name="name"/></p>
密 码：<input type="password" name="pwd"> <br> <br>
性 别：<input type="radio" name="gender" checked="checked" value="0"> 男
<input type="radio" name="gender" value="1"> 女
<input type="radio" name="gender" value="2"> 妖 <br> <br>
爱 好：<input type="checkbox" name="hobby"> 吃饭
<input type="checkbox" checked="checked" name="hobby"> 睡觉
<input type="checkbox" name="hobby"> 打豆豆
<input type="checkbox" checked name="hobby"/> 敲代码 <br><br>
照 片：<input type="file" name="file"> <br><br>
籍 贯：<select name="address" >
<option value="1">北京</option>
<option value="2">陕西</option>
<option value="3">山东</option>
<option selected="selected">山西</option>
</select>
<select name="address">
<option value="1">太原市</option>
<option value="2">大同市</option>
<option>运城市</option>
</select>
<select name="address">
<option value="1">稷山县</option>
<option value="2">河津县</option>
<option selected>永济市</option>
</select>
<br><br>
简 介： <textarea name="js" cols="25" rows="8">
请用简短的话语描述一下自己
</textarea><br><br>
<input type="button" value="普通按钮">
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
选择器
并集选择器
.damao,.ermao,.sanmao {}
把相同的样式写到并集选择器中可以简化代码，提高阅读性
伪类选择器
a:hover
鼠标划过 a 标签会变
盒子模型
border：外边框
border-width:边框大小粗细，单位是 px
border-style: none 无边框；solid 边框我实线；dashed 虚线；datted 点线；double 双实线
border-color：边框颜色
border 连写：border: border-width border-style border-color;
边框清零：border:0;
清除 table 中的单元格之间的间隙：border-collapse:collapse;
outline:none; 清除输入框的高亮边框 input { outline:none;}
padding：内边距
定义：设置盒子边框与内容之间的填充距离
top bottom left right 上下左右
margin：外边距
定义：盒子与盒子之间的距离
top bottom left right 上下左右
清除标签默认的 margin 和 padding： * {margin:0; padding:0;}
外边距实现盒子居中：必须是块级元素，必须指定了宽度。 margin: 0 auto;
一整块居中：使用 margin: 0 auto;
文字居中： text-align: center;
外边距合并：
兄弟标签外边距合并，只取最大值
解决方法：只给一边设置即可
解决父子标签之间的外边距合并问题
- overflow: hidden; 父盒子设置溢出元素会被修剪，并且其余内容是不可见的。
- border: 1px solid blue; 父盒子设置上边框
- padding 给父盒子设置内边距
css显示特性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
- none 元素隐藏且不占位置
- inline 元素以行内元素显示
- block 元素以块元素显示
css 元素溢出：
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow 的设置项：
- visible 默认值：内容不会被修剪，会呈现在元素框之外
- hidden 内容会被修剪，并且其余内容是不可见的
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
浮动
用于图文混排
让块级元素水平一行排列
解决两个行内块级元素之间 1 像素间距问题
- 练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 清除掉默认的外边距 */
body{
margin: 0px;
}
.box{
width: 300px;
height: 300px;
background: hotpink;
/* 这是顶部边框 */
/*
边框的线型：
solid 实线
dashed 虚线
dotted 点线
*/
/* border-top: 10px solid black;
border-left: 10px dashed black;
border-right: 10px dotted black;
border-bottom: 10px solid black; */
border: 10px solid black;
/* 设置内边距 */
/* padding-top: 20px;
padding-left: 40px;
padding-right: 80px;
padding-bottom: 160px; */
/* 分别设置 上边、右边、下边、左边的 padding 值 */
/* padding: 20px 80px 160px 40px; */
/* 分别设置 上边、左右边、下边的padding 值 */
/* padding: 20px 80px 160px; */
/* 分别设置上下边、左右边的padding值 */
/* padding: 20px 80px; */
/* 同时设置四个边的padding的值 */
padding: 20px;
/* 设置外边距 */
/* margin-top: 20px;
margin-left: 40px;
margin-right: 80px;
margin-bottom: 160px; */
/* 分别设置 上边、右边、下边、左边的 margin 值 */
/* margin: 20px 80px 160px 40px; */
/* 分别设置 上边、左右边、下边的margin 值 */
/* margin: 20px 80px 160px; */
/* 分别设置上下边、左右边的margin值 */
/* margin: 20px 80px; */
/* 同时设置四个边的外边距 */
/* margin: 20px; */
}
</style>
</head>
<body>
<div class="box">HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</div>
<div>下面的div</div>
</body>
</html>