HTML初学第二周

⒀.嵌套列表

列表之间可以相互嵌套形成列表。

⒁.表格标签

<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题
注意：之前有嵌套关系的，要符合嵌套规范。
语义化标签：<tHead> <tBody>、<tFood>

⒂.表格属性

<border>：表格边框
<cellpadding>：单元格内的空间
<cellspacing>：单元格之间的空间
<rowspan>：合并行
<colspan>：合并列
<align>：左右对齐方式
<valign>：上下对齐方式

⒃.表单标签

<form>：表单的最外层容器
<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

<textarea>：多行文本框
<select>、<option>：下拉菜单
<label>：辅助菜单

⒄.表格表单组合

表格表单之间可以互相形成数据展示效果。

⒅<div>与<span>

三.CSS

1.基本语法

⑴.格式

选择器{属性1：值1；属性2：值2}

⑵.单位

px→像素（pixel）、% →百分比

⑶.基本样式

width（宽）、height（高）、background-color（背景色）

2.CSS注释

/* CSS注释的内容 */

3.内联样式与内部样式

内联（行内、行间）样式
在html标签上添加style属性来实现的

内部样式
在<style>标签内添加的样式
注：内部样式的优点，可以复用代码
区别内联样式的代码可以复用、复合W3C的规范标椎，进行让结构和样式分开处理。

4.外部样式

引入一个单独的CSS文件，name.css

通过<link>标签引入外部资源，rel属性指定资源跟页面的关系，href属性指定资源的地址。

通过@import方式引入外部样式（这种方式有很多问题，不建议使用）
link @import的区别：
https://blog.csdn.net/qq_41720311/article/details/83958696

5.颜色表示法

⑴.单词表示法：

red green blue…

⑵.十六进制表示法：

十六进制颜色

⑶.RGB三原色表示法：

常见RGB颜色表
取值范围：0～255
提取颜色：下载地址或者用PS中的吸管。

6.背景样式

⑴ background-color：背景颜色

⑵ background-image：背景图片
url（背景地址）
默认：会水平垂直都铺满背景图

⑶ background-repeat：背景图片的平铺方式
repeat-x：x轴平铺
repeat-y：y轴平铺
repeat：x，y都进行平铺，默认值
no-repeat：都不平铺

⑷ background-position：背景位置
x y：number（px、%）| 单词
x：left、center、right
y:top、center、bottom

⑸ background-attachment：背景图随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed：（背景位置是按照浏览器进行偏移的）

7.边框样式

⑴ border-style：样式
solid：实线
dashed：虚线
dotted：点线

⑵ border-width：大小
px …

⑶ border-color：颜色
red #f00 …
注：针对某一条边进行单独设置
颜色：透明颜色 transparent

8.文字样式

⑴ font-family：字体类型
英文、中文
衬线体、非衬线体
注意点：
①.多个字体类型的设置目的
②.引号的添加目的

⑵ font-size：字体大小
默认：16px
写法：number（px）|单词（small large … 不推荐使用）
注：字体大小一般为偶数。

⑶ font-weight：字体粗细
模式：正常（normal） 加粗（bold）
写法：单词（normal、bold）| number（100 200 … 900，100到500都是正常的，600到900都是加粗的）

⑷ font-style：字体样式
模式：正常（normal）斜体（italic）
写法：单词（normal、italic）
注：oblique也是表示斜体，用的比较少，一般了解即可·。
区别：1.italic 带有属性倾斜字体的才可以设置倾斜操作。
2.oblique 没有倾斜属性的字体也可以设置倾斜操作。
color：字体颜色

9.段落样式

⑴ text-decoration：文本装饰
下划线：underline
删除线：line-throu
上划线：overline
不添加任何装饰：none

⑵ text-transform：文本大小写
大写：lowercase
小写：uppercase
首字母大写：capitalize

⑶ text-indent：文本缩进
首行缩进（一个文字16px）
em单位：相对单位，1em永远都是跟字体大小相同

⑷ text-align：文本对齐方式
对齐方式：right、left、center、justify（两边对齐）

⑸ ine-height：定义行高

行高：一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，是变化的，根据当前字体的大小进行变化。
取值：1.number（px）| scale（比例值，跟文字大小）

⑹ letter-spacing：定义字间距
word-spacing：定义词间距（针对英文段落）

英文和数字不自动折行的问题：
1.word-break：break-all；（非常强烈的折行）
2.word-wrap：break-word；(不是那么强烈的折行，会产生一些空白区域)

10.复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。
复合的写法：是通过空格的方式实现的，是不需要关心顺序的，例如background、border；有的是需要关心顺序，例如 font 。
1.background：red url（） repeat 0 0；
2.border：1px red solid；
3.font：
注：最少要有两个值
注：如果非要混写的话，那么要先写复合样式，再写单一样式 ，这样样式才不被覆盖掉。

11.选择器

⑴.ID选择器

注：1.ID是唯一值，在一个页面只能出现一次，多次是不符合规范的。
2.命名的规范：由字母、下划线、中划线、字母（并且第一个不能是数字）。
3.

⑵.CLASS选择器

             .elem{}         class=“elem”
注：1.class选择器是可以复用的。
2.可以添加多个class样式。
3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
4.标签+类的写法。