文章目录
1.列表标签
- 无序列表
- 有序列表
- 定义列表
-
嵌套列表
列表之间可以相互嵌套形成多层级列表
2.表格标签
< table>:表格的最外层容器
< tr>:定义表格行
< th>:定义表头
< td>:定义表格单元
< caption>:定义表格标题
注：之间有嵌套关系
语义化标签：tHead、tBody、tFoot
在一个table中，tBody可以出现好几次，tHead、tFoot只可以出现一次
3.表格属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式(left center right)
valign:上下对齐方式(top middle bottom)
4.表单标签
-
< form>:表单的最外层容器
< input>:单标签，用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
-
< textarea>:多行文本框
< select>、< option>:下拉菜单
< label>:辅助表单
selectde首个，disable禁用，multiple多选，用于option中；
id与for用于label中
5.表单表格组合
6.< div>和< span>
- div:div全称为division，“分区，分割”的意思，< div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中多数标签可以嵌套在< div>标签中，< div >中也可以嵌套多个 < div>，用来将网页分割成不同的独立的部分，来实现网页的规划和布局。双标签。
-
span:
用来修饰文字的，< div>、 < span>无任何默认样式，需要配合CSS。
7.CSS基础语法
格式：选择器 { 属性1：值1；属性2：值2}
长度单位：px→像素、%→百分比（ 外容器→600px，当前容器 50%→300px）
基本样式：width、height、background-color
CSS注释：/
CSS注释的内容
/
8.CSS样式引入方式
-
内联样式：在HTML标签上添加style属性来实现的
-
内部样式：在< style>标签内添加的样式
好处：可以复用代码
-
外部样式
引入一个单独的CSS文件：name.css
通过link标签引入外部资源，rel属性指定资源和页面的关系，herl 属性资源的地址。
通过@import方式引入外部样式（这种方法有问题，使用时要注意）
9.CSS的颜色表示法
- 单词表示法：red、yellow······
- 十六进制表示法：由0~9与 a~f组成的六位数
-
rgb三原色表示法：rgb（）；取值范围0~255
10.CSS背景样式
- background-color:背景色
-
background-image:背景图
url（背景地址）
默认：会水平竖直都铺满背景图 -
background-repeat:平铺方式
repeat-x：x轴平铺
repeat-y：y轴平铺
repeat：默认值，x、y轴都平铺
no-repeat：都不平铺 -
background-position:背景位置
改变大小方式：数字（px、%）单词
x：left、right、center
y：top、center、bottom -
background-attachment:背景图随滚动条移动的方式
scroll：默认值（背景位置是按当前元素进行偏移的）
fixed：背景位置是按照浏览器位置进行偏移的
11.CSS边框样式
-
border-style:边框样式
solid：实线
dashed：虚线
dotted：点线 - border-width:边框大小（px、%······）
-
border-color:边框颜色red、#000000、（0，0，0）、transparent透明色
11.CSS文字样式
-
font-family:文字类型
中文和英文：中文（微软雅黑、宋体）；英文（Arial、“Times new roman”)
衬线体与非衬线体
多字体类型的设置目的：只能显示电脑本身拥有的字体，所以需要设置多个。
引号的添加：若字体中有“空格”则需要添加引号。
中文字体的英文名称：
微软雅黑：” Microsoft Yahei ”
宋体：SimSun
-
font-size:字体大小
默认：16px
写法：px、单词（不推荐）
-
font-weight：字体粗细
模式：正常（normal）、加粗（bold）
写法：单词、数字(100-500正常；600-900加粗） -
font-style：字体样式
模式：正常（normal）、斜体（italic、oblique）
写法：单词
斜体的区别：italic 带有属性倾斜字体的才可以设置；oblique 没有倾斜属性的也可以设置倾斜操作。 -
color：字体颜色（red，#000000（0，0，0））
12.CSS段落样式
-
text-decoration ：文本装饰
下划线：underline
上划线：overline
删除线：line-through
不添加任何装饰：none
添加多个文本修饰：line-through、underline、overline -
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize -
text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远和字体大小相同 -
text-align：文本对齐方式
对齐方式：left 、right center 、justify(两端点对齐） -
line-height:定义行高
行高：一行文字的高度，上边距和下边距的距离
默认行高：不是固定值，而是变化的。根据当前的字体大小在不断变化。
取值：数字（px）、比例值（scale 是跟文字大小成比例的）
-
letter-spacing:定义字间距
-
word-spacing:定义词间距（针对英文）
强制折行：（针对英文）
word-break:bread\k-all;(非常强烈的折行）
word-wrap:break-word;(不是很强烈的折行） -
练习：个人简介
13.CSS符合样式
- 一个CSS属性只控制一种样式，叫单一样式；一个CSS属性控制多种样式，叫做复合样式
-
复合样式：
写法：通过空格实现
background:color 、url() 、repeat(不需要关注顺序）
border:style width color(不需要关注顺序）
font：style、weight、size/line-height、family(size family必须放在最后，且他俩顺序不能换） -
注：尽量不要混写，若非要混写，那一定要先写复合样式再写单一样式。
14.CSS选择器
-
id选择器：
#elem{}、id=“elem”
注：
id值为一，一个页面只能出现一次
规范：由下划线、中划线、字母组成（第一个不能是数字）
驼峰写法：searchButton（小驼峰）、SearchButton（大驼峰）
短线写法：search-small-button
下划线写法：search_small_button -
CLASS选择器
.elem{}、class=“elem”
注：
class选择器是可以复用的
可以添加多个class样式
多个样式的时候，样式的优先级由CSS决定，而不是class属性中的顺序
标签+class的写法
网址