复习：
1. 列表
1.1 无序列表 ul-li
ul中只能嵌套li标签，li和div一样，可以作为容器嵌套任何标签和文本
属性type属性值：
disc 实心圆
circle 空心圆
square 实心方块
1.2 有序列表 ol – li
属性:
type 设置列表项目符号的类型，默认阿拉伯数字
有且只有五个： 1 a a i i
reversed h5中属性，倒叙，布尔型属性写法有以下几种：
reversed
reversed = reversed
reversed=true
注意：ie浏览器不兼容
start 从第几个开始排序，属性值是数字
1.3 自定义列表 dl-dt-dd
<dl>
<dt>定义项1</dt>
<dd>描述项11</dd>
<dd>描述项12</dd>
<dd>描述项1n</dd>
<dt>定义项m</dt>
<dd>描述项m1</dd>
<dd>描述项m2</dd>
<dd>描述项mn</dd>
</dl>
2. 表格table
三个划分区域：thead àtfootàtbody
表格的标题：caption 注意浏览器差异性
注意：一个表格只建议加一个caption，且位置紧跟在table开始标签后面
tr表示行 td(th)表示单元格，th默认加粗居中
table中属性：
border / bordercolor 设置边框和边框颜色
cellpadding 设置内容与边框之间的距离
cellspacing 设置边框之间的距离
width/height 设置宽高
bgcolor/background 设置背景颜色/背景图片
align 设置表格的整体水平对齐方式 left right center
summary 表格描述
tr中属性：
bgcolor/background / height
align 设置文本的水平对齐方式
valign 设置文本垂直对齐方式 top middle(默认) bottom
td中属性：
bgcolor/background / height/width/ align/ valign
rowspan 行合并；上下合并；
colspan 列合并；左右合并
3. 表单form
用来收集用户数据，并将其提交到对应地址。
属性：action 数据提交的地址
method 数据提交的方式 两种方式get和post
target 页面打开方式 _self _blank
三个控件：input textarea select
input控件中type类型：
text 单行文本框
password 密码输入框
radio 单选框
checkbox 复选框
单选和复选name值要一致
属性 checked 默认被选中
file 文件域
image 图像域
button 普通按钮
submit 提交按钮
reset 重置按钮
hidden 隐藏
textarea 文本域控件
rows 设置行高
cols 设置列宽
注意：浏览器差异性
select下拉菜单控件
select-option
<select multiple size=”2”>
<option>选项1</option>
<option seclected>选项2</option>
<option>选项m</option>
</select>
属性：
multiple 可以设置多选，按住ctrl + 鼠标点击
size 设置下拉列表在页面中显示的项数
selected 默认被选中的项
label标签用来和控件进行关联：
1 ...
2 <tr>
3 <!-- label用来和控件进行关联，获取焦点，有以下两种使用方式 -->
4 <td><label for="username">*姓名</label></td>
5 <td><input type="text" id="username" placeholder="请输入姓名" /></td>
6 <td>*性别</td>
7 <td>
8 <label><input type="radio" name="sex" value="male" checked="checked" />男</label>
9 <input type="radio" id="female" name="sex" value="female" /><label for="female">女</label>
10 </td>
11 </tr>
12 ...
一、 CSS基础知识介绍
1.1 CSS介绍
CSS：Cacading Style Sheet 层叠样式表
引入CSS的目的：达到结构和样式的分离
引入CSS的好处：
结构与样式分离；
可以提供更多的样式；
减少html结构体量，可以提升加载速度；
便于后期的维护
提高SEO
1 <head>
2 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
3 <title>Document</title>
4 <style type="text/css">
5 ul{
6 /*设置列表的项目符号 属性值 dsic circle square decimal(1,2,3...) upper-alpha/lower-alpha(大小写英文字母)
7 upper-roman/lower-roman(大小写罗马数字) lower-greek(希腊) decimal-leading-zero(01,02,03...)
8 none(清除项目符号)
9 */
10 /*list-style-type: none;*/
11
12 /*设置项目列表符号为 图片*/
13 /*list-style-image: url(./images/111.ico);*/
14
15 /*清除列表项目符号*/
16 list-style:none;
17 }
18
19 a{
20 color: yellowgreen;
21 /*去除下划线*/
22 text-decoration: none;
23 }
24 </style>
25 </head>
26 <body>
27 <ul>
28 <li><a href=""><font color="red">新闻 1</font></a></li>
29 <li><a href="">新闻 2</a></li>
30 <li><a href="">新闻 3</a></li>
31 <li><a href="">新闻 4</a></li>
32 </ul>
33 </body>
1.2一些样式回顾：
CSS组成：选择符 与 声明，声明又包括 多个 样式 与 属样式值 的集合
语法格式：
选择符{
样式:样式值;
}
样式可以有多个，样式之间使用 分号 隔开。
1 p{
2 /*设置文本样式*/
3 /*设置文本的颜色*/
4 color: orange;
5 /*设置文本字体的大小*/
6 font-size:20px;
7 /*设置文本的字体*/
8 font-family: Arial,"Mrcrosoft Yahei";
9 /*文本加粗效果 属性值100-900整百数 bold bolder lighter normal*/
10 font-weight: 600;
11 /*倾斜，斜体字 italic normal*/
12 font-style: italic;
13 /*设置文本修饰*/
14 text-decoration: underline line-through overline none;
15 /*首行缩进*/
16 text-indent: 2em;
17 /*设置行高*/
18 line-height: 40px;
19 /*设置文本水平对齐方式 属性值 left right center justify(分散对齐)*/
20 text-align: left;
21 }
二、 CSS的引入方式
2.1 行内样式
在html开始标签中，通过style属性写入css文本
1 <ul style="list-style: none;color: blue;font-family: '楷体';">
2 <li>列表项1</li>
3 <li>列表项2</li>
4 </ul>
这种方式，css文本全部写入到了标签中，会影响页面的加载速度；html代码看起来特别不清爽；耦合性高
2.2 内嵌式
在head标签内，通过style标签的方式添加css文本
1 <!-- 嵌入式：在head标签内，使用style标签添加css文本 -->
2 <style type="text/css">
3 /*ul：标签选择器 {属性:属性值;}*/
4 ul{
5 /*清除列表项目符号*/
6 list-style: none;
7 /*改变字体的大小为20个像素*/
8 font-size: 20px;
9 /*字体加粗*/
10 font-weight: 600;
11 }
12 </style>
这种方式，虽然解决了不再标签中写样式的问题，耦合性也降低；但是还是没有完全达到结构和样式的分离
2.3 外链式
在head标签内，使用link标签引入外部独立的CSS文件
1 <head>
2 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
3 <title>Document</title>
4 <!-- 链接式：使用link标签引入外部的独立的CSS文件 -->
5 <link rel="stylesheet" type="text/css" href="./css/linkCss.css" />
6 </head>
Css文件：
1 /*CSS组成：选择器 和 声明组成 声明包括 样式 和 样式值*/
2 /* 语法 选择器{样式:样式值;} */
3 /*换行、空格存在的目的是为了提高代码的可读性*/
4 ul{
5 /*清除默认的外边距*/
6 margin:0;
7 /*清除默认的内边距*/
8 padding: 0;
9 }
10
11 li{
12 /*设置列表项目符号为方块*/
13 list-style: square;
14 }
这种方式解决了上面的所有问题，工作中也是使用这种方式。
2.4 导入式
在head标签中，在style标签中，使用@import url();导入外部的css文件
1 <!-- 导入式:在style标签中，使用@import导入外部的样式CSS文件 -->
2 <style type="text/css">
3 /*@import url('./css/importCss.css');*/
4 @import './css/importCss.css';
5 </style>
导入式和外链式极为相似，都是引入外部的独立css文件；但是，导入式会影响页面的加载速度，页面加载是会先闪一下，再正常，所以在工作中为了提高用户体验，一般不使用这种方式。
2.5 几种引入方式的优先级：就近原则（所写的选择器和样式一致的情况下，谁离着文本近，显示谁的样式值）
三、 选择器
语法：
选择器{
样式:样式值;
}
3.1 基本选择器
标签选择器:
直接使用标签名来匹配元素
一般情况下，会使用标签选择器来清除一些默认的样式
1 /*标签选择器p.会匹配页面中所有的p标签元素*/
2 p{
3 margin: 0;
4 }
类选择器：
使用 .className(.类名)来匹配对应的元素
类名命名：一般由字母、_、数字、- 组成，数字不能开头
可以用来给部分标签，设置相同的属性（应用：设置公共<原子>类）
一个类可以有多个类名，多个类名之间使用空格隔开
一个类可以给多个元素添加
一个类可以给不同的标签使用
1 <head>
2 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
3 <title>Document</title>
4 <style type="text/css">
5 /*类选择器：.类名*/
6 .kt{
7 font-family: "楷体";
8 }
9
10 .orange{
11 color: orange;
12 }
13
14 .size30{
15 font-size: 30px;
16 }
17
18 /*注意：类名的命名不能以数字开头*/
19 /*.123abc{
20 font-weight: bolder;
21 }*/
22
23 /*注意：不建议使用汉字命名类名，不标准*/
24 /*.宋体{
25 font-family: "宋体";
26 }*/
27
28 /*类名命名：一般由字母、_、数字、- 组成，数字不能开头*/
29
30 /*.-haha{
31 /*设置字体风格为斜体字
32 font-style: italic;
33 }*/
34 </style>
35 </head>
36 <body>
37 <h3>类选择器演示</h3>
38 <p>p标签本身具有默认的格式，段落之间的间距比较大</p>
39 <p>p标签本身具有默认的格式，段落之间的间距比较大</p>
40 <p class="orange size30 kt">p标签本身具有默认的格式，段落之间的间距比较大</p>
41 <p>p标签本身具有默认的格式，段落之间的间距比较大p标签本身具有默认的格式，段落之间的间距比较大p标签本身具有默认的格式，段落之间的间距比较大p标签本身具有默认的格式，段落之间的间距比较大p标签本身具有默认的格式，段落之间的间距比较大p标签本身具有默认的格式，段落之间的间距比较大p标签本身具有默认的格式，段落之间的间距比较大p标签本身具有默认的格式，段落之间的间距比较大p标签本身具有默认的格式，段落之间的间距比较大p标签本身具有默认的格式，段落之间的间距比较大</p>
42 <p>p标签本身具有默认的格式，段落之间的间距比较大</p>
43 <p class="宋体">p标签本身具有默认的格式，段落之间的间距比较大</p>
44 </body>
ID选择器
使用 #id名 来匹配对应的元素
id命名和组成同 class
ID具有唯一性，也就是说一个标签只能有一个属于自己的id识别
一个id只能设置一个值
1 <head>
2 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
3 <title>Document</title>
4 <style type="text/css">
5 /*id选择器： #id名*/
6 #kt{
7 /*设置字体为楷体*/
8 font-family: "楷体";
9 }
10
11 #red{
12 color: red;
13 }
14 </style>
15 </head>
16 <body>
17 <h3 id="kt">类选择器演示</h3>
18 </body>
通配符（全局选择器）
*｛样式:样式值;｝
通配符可以匹配包括body在内的所有的标签
一般情况下，使用通配符来清除一个全局的样式
1 *{
2 /*清除默认外边距*/
3 margin: 0;
4 /*清除默认内边距*/
5 padding: 0;
6 }
样式的层叠性：给同一个标签设置id、class，然后给它选择器 （id、class、标签）设置同样的一个样式，
那么他们就层叠
关注VX公众号“icketang” 免费领取华为荣耀商城项目实战视频教程
网友评论