四、CSS设置背景及HTML高级元素的学习

Lyk 2022/4/21 HTMLCSSbackground属性列表元素ol/li列表元素ul/li列表元素dl/dt/dd表格元素table/tr/tdform表单input元素

# 1、CSS设置背景的学习：background

# 1.1.background-image

background-image用于设置元素的背景图片
- 会盖在(不是覆盖)background-color（背景颜色）的上面
如果设置了多张图片
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的
background-image: url(./bg.jpg);

# 1.2.background-repeat

background-repeat用于设置背景图片是否要平铺
常见的设值有
- repeat（默认值）：平铺：水平垂直方向都平铺
- no-repeat：不平铺
- repeat-x：只在水平方向平铺
- repeat-y：只在垂直平方向平铺

# 1.3.background-size

background-size用于设置背景图片的大小
- auto：默认值, 以背景图本身大小显示
- cover：缩放背景图；（宽和高的长度对比）以较长的一方（宽或高）完全覆盖铺满元素,图片保持宽高比，可能背景图片部分看不见
- contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
- < percentage >：百分比，相对于背景区（background positioning area）
- length：具体的大小，比如100px

# 1.4.background-position

background-position用于设置背景图片在水平、垂直方向上的具体位置
- 可以设置具体的数值比如 20px 30px;
- 水平方向还可以设值：left、center、right
- 垂直方向还可以设值：top、center、bottom
- 如果只设置了1个方向，另一个方向默认是center

# 1.5.background-attachment

background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
可以设置以下3个值
- scroll：此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动
- local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
- fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

# 1.6.background简写属性

background是一系列背景相关属性的简写属性
background常用的简写属性的格式

[ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>

1
2
3
4
5

background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
其他属性也都可以省略，而且顺序任意

# 1.7.background-image属性和img元素的对比

利用background-image和img都能够实现显示图片的需求，在开发中该如何选择？

	img	background-image
性质	HTML元素	CSS样式
图片是否占用空间	√	×
浏览器右键直接查看地址	√	×
支持CSS Sprite	×	√
更有可能被搜索引擎收录	√（结合alt属性）	×

总结
- img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
- background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息

# 2、HTML高级元素的学习（列表元素）

# 2.1.列表的实现方式

事实上现在很多的列表功能采用了不同的方案来实现:
- 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
- 方案二: 使用列表元素, 使用元素语义化的方式实现;
事实上现在很多的网站对于列表元素没有很强烈的偏好, 更加不拘一格, 按照自己的风格来布局:
- 原因是列表元素默认的CSS样式, 让它用起来不是非常方便;
- 比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等;
- 虽然我们可以通过重置来解决, 但是我们更喜欢自由的div;
HTML提供了3组常用的用来展示列表的元素
- 有序列表：ol、li
- 无序列表：ul、li
- 定义列表：dl、dt、dd

# 2.2.有序列表 – ol – li元素

ol（ordered list）
- 有序列表，直接子元素只能是li
li（list item）
- 列表中的每一项

<ol>
  <li>有序列表内容1</li>
  <li>有序列表内容2</li>
  <li>有序列表内容3</li>
</ol>

1
2
3
4
5

# 2.3.无序列表 – ul - li元素

ul（unordered list）
- 无序列表，直接子元素只能是li
li（list item）
- 列表中的每一项

<ul>
  <li>无序列表内容1</li>
  <li>无序列表内容2</li>
  <li>无序列表内容3</li>
</ul>

1
2
3
4
5

# 2.4.定义列表 – dl – dt - dd

dl（definition list）
- 定义列表，直接子元素只能是dt、dd
dt（definition term）
- term是项的意思, 列表中每一项的项目名
dd（definition description）
- 列表中每一项的具体描述，是对 dt 的描述、解释、补充
- 一个dt后面一般紧跟着1个或者多个dd

<h2>前端开发</h2>
<dl>
  <dt>阶段一：</dt>
  <dd>HTML</dd>
  <dd>CSS</dd>
  <dd>JS</dd>

  <dt>阶段二：</dt>
  <dd>JS高级</dd>
  <dd>ES6</dd>
  <dd>VUE
  </dd>
</dl>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2.5.写HTML/CSS项目或者案例的思路顺序

先完成结构
重置样式（如：body/a/ul）
先整理，后局部；（顺序：按照从外往里，从上往下）
去除重复的代码（CSS）
- 将重复的逻辑放到一个单独的class中
- 不同的代码抽到不同的class中
不要操之过急，慢慢来反而是快！

# 3、HTML高级元素的学习（表格元素）table/tr/td

# 3.1.表格常见的元素

编写表格最常见的是下面的元素:
- table：表格
- tr(table row)：表格中的行
- td(table data)：行中的单元格
另外表格元素有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了；

推荐用CSS来制定表格的样式；而不是用表格元素的属性来设置表格的样式

# 3.2.表格中单元格边框合并：border-collapse

这里我们需要用到一个表格中非常重要的CSS属性:
- border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。
- 在table元素设置这个CSS属性：table { border-collapse: collapse; }；即可合并单元格的边框

# 3.3.表格的其他元素

thead：表格的表头
tbody：表格的主体
tfoot：表格的页脚
caption：表格的标题
th：表格的表头单元格

<style>
  table {
    border-collapse:collapse;
    text-align: center;
  }
  th,td {
    border: 1px solid #000;
    padding:5px 16px;
  }
</style>
<table>
  <caption style="margin-bottom: 10px;font-weight: 700;font-size:20px;">表格案例标题</caption>
  <thead>
    <tr>
      <th>表头单元格1</th>
      <th>表头单元格2</th>
      <th>表头单元格3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行内单元格1</td>
      <td>行内单元格2</td>
      <td>行内单元格3</td>
    </tr>
    <tr>
      <td>行内单元格1</td>
      <td>行内单元格2</td>
      <td>行内单元格3</td>
    </tr>
    <tr>
      <td>行内单元格1</td>
      <td>行内单元格2</td>
      <td>行内单元格3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>表格的页脚单元格1</td>
      <td>表格的页脚单元格2</td>
      <td>表格的页脚单元格3</td>
    </tr>
  </tfoot>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 3.4.表格中单元格合并

单元格合并分成两种情况:
- 跨列合并: 使用colspan
  - 在最左边的单元格写上colspan属性, 并且省略掉合并的td;
- 跨行合并: 使用rowspan
  - 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;

<style>
  table {
    border-collapse: collapse;
    text-align: center;
  }

  th,
  td {
    border: 1px solid #000;
    padding: 5px 16px;
  }
</style>
<table>
  <caption style="margin-bottom: 10px;font-weight: 700;font-size:20px;">表格案例标题</caption>
  <thead>
    <tr>
      <th>表头单元格1</th>
      <th>表头单元格2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- 跨列合并 -->
      <td colspan="2">1-1</td>
      <!-- <td>1-2</td> -->
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
    </tr>
    <tr>
      <!-- 跨行合并 -->
      <td rowspan="2">3-1</td>
      <td>3-2</td>
    </tr>
    <tr>
      <!-- <td>4-1</td> -->
      <td>4-2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>表格的页脚单元格1</td>
      <td>表格的页脚单元格2</td>
    </tr>
  </tfoot>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 4、HTML高级元素的学习（表单元素）

# 4.1.常见的表单元素

HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单:
form：表单, 一般情况下，其他表单相关元素都是它的后代元素
input：单行文本输入框、单选框、复选框、按钮等元素
textarea：多行文本框
select、option：下拉选择框
button：按钮
label：表单元素的标题

# 4.2.input元素的使用

表单元素使用最多的是input元素
input元素有如下常见的属性:
- type：input的类型
  - text：文本输入框（明文输入）
  - password：文本输入框（密文输入）
  - radio：单选框
  - checkbox：复选框
  - button：按钮
  - reset：重置
  - submit：提交表单数据给服务器
  - file：文件上传
- readonly：只读
- disabled：禁用
- checked：默认被选中
  - 只有当type为radio或checkbox时可用
- autofocus：当页面加载时，自动聚焦
- name：名字
  - 在提交数据给服务器时，可用于区分数据类型
- value：取值
type类型的其他取值和input的其他属性, 查看文档:input学习 (opens new window)

# 4.3.布尔属性（boolean attributes）

常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
布尔属性可以没有属性值，写上属性名就代表使用这个属性
- 如果要给布尔属性设值，值就是属性名本身

<input type="text" disabled autofocus readonly>
<!-- 等价于 -->
<input type="text" disabled="disabled" autofocus="autofocus" readonly="readonly">

1
2
3

# 4.4.表单按钮

表单可以实现按钮效果:
- 普通按钮（type=button）：使用value属性设置按钮文字
- 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
- 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）

<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">

1
2
3

我们也可以通过按钮来实现:

<button type="button">普通按钮</button>  
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>

1
2
3

# 4.5.input和label的关系

label元素一般跟input配合使用，用来表示input的标题(实现点input标题，也可以获取input的焦点)
label可以跟某个input绑定，点击label就可以激活对应的input变成选中（注：label中的for属性值跟对应绑定的input中id属性值必须要一样才能实现绑定）

<form action="">
  <div>
    <label for="username">用户:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="password">密码:</label>
    <input type="text" id="password" name="password">
  </div>
</form>

1
2
3
4
5
6
7
8
9
10

# 4.6.radio的使用

我们可以将type类型设置为radio变成单选框:
- name值相同的radio才具备单选功能

<form action="">
  <div>
    性别：
    <label for="male">
      男:<input type="radio" id="male" name="sex">
    </label>
    <label for="female">
      女:<input type="radio" id="female" name="sex">
    </label>
  </div>
</form>

1
2
3
4
5
6
7
8
9
10
11

# 4.7.checkbox的使用

我们可以将type类型设置为checkbox变成多选框:
- 属于同一种类型的checkbox，name值要保持一致

<form action="">  
  <div>
    爱好：
    <label for="basketball">
      篮球<input type="checkbox" id="basketball" name="hobby" value="basketball">
    </label>
    <label for="football">
      足球<input type="checkbox" id="football" name="hobby" value="football">
    </label>
    <label for="run">
      跑步<input type="checkbox" id="run" name="hobby" value="run">
    </label>
  </div>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 4.8.textarea的使用

textarea的常用属性:
- cols：列数
- rows：行数
缩放的CSS设置
- 禁止缩放：resize: none;
- 水平缩放：resize: horizontal;
- 垂直缩放：resize: vertical;
- 水平垂直缩放：resize: both;

<form action="">
  <label for="info">
    个人描述:
    <textarea style="resize: none;" name="info" id="info" cols="10" rows="6"></textarea>
  </label>
</form>

1
2
3
4
5
6

# 4.9.select和option的使用

option是select的子元素，一个option代表一个选项
select常用属性
- multiple：可以多选
- size：显示多少项
option常用属性
- selected：默认被选中

<!-- 点提交：模拟百度一下 -->
<form action="https://www.baidu.com/s" target="_blank">
  <label for="fruits" >
    喜欢的水果：
    <select name="wd" id="fruits" size='2'multiple>
      <option value="apple">苹果</option>
      <option value="orange" selected>橘子</option>
      <option value="banana" selected>香蕉</option>
    </select>
  </label>
  <input type="submit">
  <button type="submit">提交</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 4.10.form常见的属性

form通常作为表单元素的父元素:
- form可以将整个表单作为一个整体来进行操作;
- 比如对整个表单进行重置;
- 比如对整个表单的数据进行提交;
form常见的属性如下:
- action：用于提交表单数据的请求URL
- method：请求方法（get和post），默认是get
- target：在什么地方打开URL（参考a元素的target）

# 4.11.请求方式的对比（简单带过，后续补充）

发送get请求：http://www.test.com/login?phone=123&password=234（用户的账号密码在请求地址中显示不安全）
发送post请求：http://www.test.com/login 【请求体：phone=123&password=234】（用户的账号密码没有在请求地址中显示，相对安全）

#

三、CSS属性的继承和层叠及display，overflow属性的学习，盒子模型及阴影属性的补充五、字体图标和网络字体,精灵图及定位和浮动的深入学习

Lyk-Blog

Choose mode