web前端基础——第二章

ZiminLi

已于 2022-11-23 14:30:40 修改

阅读量668

点赞数 1

分类专栏：技术栈笔记文章标签：前端 css html

于 2022-10-26 18:04:00 首次发布

本文链接：https://blog.csdn.net/ZiminLi/article/details/127466567

版权

技术栈笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

十八、表格标签
- 1.table、tr、th、td、caption 等。
- 2.语义化标签：`<tHead>、<tBody>、<tFoot>`。
十九、表格属性
二十、表单标签
二十一、表格表单组合
二十二、`<div>`与`<span>`
- 1.div ：做一个区域划分的块。
- 2.span ：对文字进行修饰的内联。
二十三、CSS基础语法
- 1.格式。
- 2.单位。
- 3.基本样式。
- 4.CSS注释。
二十四、CSS样式的引入方式
- 1.内联（行内、行间）样式。
- 2.内部样式。
- 3.内联样式和内部样式的区别。
- 4.外部样式。
二十五、CSS中的颜色表示法
- 1.单词表示法。
- 2.十六进制表示法。
- 3.rgb三原色表示法.
- 4.获取颜色的工具。
二十六、CSS背景样式
二十七、CSS边框样式
二十八、CSS文字样式
- 1.font-family ：字体类型
- 2.font-size ：字体大小
- 3.font-weight ：字体粗细
- 4.font-style ：字体样式
- 5.color ：字体颜色
二十九、CSS段落样式
- 1.text-decoration ：文本装饰。
- 2.text-transform ：文本大小写（针对英文段落）。
- 3.text-indent ：文本缩进。
- 4.text-align ：文本对齐方式。
- 5.line-height ：定义行高。
- 6.letter-spacing ：定义字间距。
- 7.word-spacing ：定义词间距（针对英文）。
- 8.强制拆行：（针对英文）
三十、CSS复合样式
三十一、CSS选择器
- 1.ID选择器。
- 2.CLASS选择器。
- 3.标签选择器（TAG选择器）。
- 4.群组选择器（分组选择器）。
- 5.通配选择器。
- 6.层次选择器。
- 7.属性选择器。
- 8.伪类选择器。
- - （1）hover、after等伪类选择器
  - （2）结构伪类选择器

十八、表格标签

1.table、tr、th、td、caption 等。

<table> ：表格的最外层容器
<tr> ：定义表格行
<th> ：定义表头
<td> ：定义表格单元
<caption> ：定义表格标题

注:之间是有嵌套关系的，要符合嵌套规范

2.语义化标签：`<tHead>、<tBody>、<tFoot>`。

语义化标签：tHead、tBody、tFoot
注:在一个table中，tBody是可以出现多次的，但是tHead、tFoot只能出现一次

十九、表格属性

border ：表格边框
cellpadding ：单元格内的空间
cellspacing ：单元格之间的空间
rowspan ：合并行
colspan ：合并列
align ：左右对齐方式（left、center、right）
valign ：上下对齐方式（top、middle、bottom）

二十、表单标签

form、input、textarea、select、label…
input标签(单标签)有一个type属性，决定是什么控件。
还有一些常见的属性:
checked、disabled、name…

<form> ：表单的最外层容器
<input> ：标签用于搜集用户信息，根据不同的type属性，展示不同的控件，如输入框、密码框、复选框等
<textarea> ：多行文本框
<select>、<option> ：下拉菜单
<label> ：辅助表单

type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.baidu.com">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框</h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox" checked>香蕉
        <input type="checkbox" disabled>葡萄
        <h2>单选框</h2>
        <input type="radio" name="gender" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" name="gender" id="woman"><label for="woman">女</label>
        <h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>
        <h2>下拉菜单</h2>
        <select>
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <select size="3">
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <select multiple>
            <option>北京</option>
            <option>上海</option>
            <option>杭州</option>
        </select>
        <h2>上传文件</h2>
        <input type="file" multiple>
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

二十一、表格表单组合

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <table border="1" cellpadding="30">
            <tBody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户信息</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tBody>
        </table>
    </form>
</body>
</html>

二十二、`<div>`与`<span>`

1.div ：做一个区域划分的块。

div（块）：
div全称division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

2.span ：对文字进行修饰的内联。

span（内联）：
用来修饰文字的。

注:div和span都是没有任何默认样式的，需要配合CSS才行

二十三、CSS基础语法

1.格式。

选择器{属性1:值1;属性2:值2;}

2.单位。

长度单位：
（1）px→像素(pixel)
（2）%→百分比
例：外容器1：600px 当前容器：50% → 300px
外容器2：400px 当前容器：50% → 200px

3.基本样式。

width ：宽
height ：高
background-color ：背景色

4.CSS注释。

/* CSS注释的内容 */

二十四、CSS样式的引入方式

1.内联（行内、行间）样式。

在html标签上添加style属性来实现的

2.内部样式。

在<style>标签内添加的样式
注:内部样式的优点:可以复用代码

3.内联样式和内部样式的区别。

内部样式的代码可以复用，符合W3C的规范标准，进行让结构和样式分开处理。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 100px; height: 100px; background-color: red;}
    </style>
</head>
<body>
    <!-- <div style="width: 100px; height: 100px; background: red;">这是一个块</div>
    <div style="width: 100px; height: 100px; background: red;">另外一个块</div> -->
    <div>这是一个块</div>
    <div>另外一个块</div>
</body>
</html>

4.外部样式。

引入一个单独的CSS文件（例：name.css）
（1）通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性指定资源的地址。
点此查看更多link的rel属性
（2）通过@import方式引入外部样式。(这种方式有很多问题，不建议使用)
点此查看link与@import区别

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="***.css"> -->
    <title>Document</title>
    <style>
        @import url('***.css');
    </style>
</head>
<body>
    <div>这是一个快</div>
</body>
</html>

二十五、CSS中的颜色表示法

1.单词表示法。

red、blue、green、yellow…
点此查看CSS颜色名

2.十六进制表示法。

#000000、#ffffff
十进制：0 1 2 3 4 5 6 7 8 9
二进制：0 1
十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f

3.rgb三原色表示法.

rgb(255,255,255);
取值范围 0~255

4.获取颜色的工具。

提取颜色的下载地址：https://www.baidufe.com/fehelper
photoshop工具

二十六、CSS背景样式

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 （背景位置是按照浏览器进行偏移的）

二十七、CSS边框样式

border-style ：边框的样式
solid：实线
dashed：虚线
dotted：点线
border-width ：边框的大小
px…
border-color ：边框的颜色
red、#f00f00…
透明颜色：transparent
边框也可以针对某一条边进行单独设置 ：
例：border-left-style
中间是方向:left、right、top、bottom

二十八、CSS文字样式

1.font-family ：字体类型

英文字体：Arial,‘Times New Roman’
中文字体：微软雅黑，宋体
中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSun
衬线体与非衬线体
衬线体：

非衬线体：
注意事项：
（1）设置多字体方式、多个字体类型的设置目的——当电脑系统没有首选字体时，依次顺延，都没有则为电脑默认字体。
（2）引号的问题：引号的添加的目的——当字体名称有空格时，需要添加单引号。

2.font-size ：字体大小

默认大小：16px
写法：number(px)或单词（small、large…不推荐使用）

属性取值	字体大小
xx-small	最小
x-small	较小
small	小
medium	正常(默认值)
large	大
x-large	较大
xx-large	最大

注:字体大小一般为偶数

3.font-weight ：字体粗细

两种模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）或number（100 200…900，100到500都是正常的，600到900都是加粗的）

4.font-style ：字体样式

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

5.color ：字体颜色

二十九、CSS段落样式

1.text-decoration ：文本装饰。

下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
注:添加多个文本修饰时用空格符号隔开

2.text-transform ：文本大小写（针对英文段落）。

小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

3.text-indent ：文本缩进。

首行缩进（px、em）
em单位：相对单位，1em永远都是跟字体大小相同

4.text-align ：文本对齐方式。

对齐方式：left、right、center、justify（两端点对齐）

5.line-height ：定义行高。

定义（什么是行高）：一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的。根据当前字体的大小在不断的变化。
取值：（1）number(px)
（2）scale(比例值，跟文字大小成比例的)

6.letter-spacing ：定义字间距。

字之间的间距

7.word-spacing ：定义词间距（针对英文）。

词之间的间距（针对英文段落的）

8.强制拆行：（针对英文）

英文和数字不自动拆行的问题：

word-break:break-all;（非常强烈的拆行）
word-wrap:break-word;（不是那么强烈的拆行，会产生一些空白区域）

三十、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

复合的写法：是通过空格的方式实现的，复合写法有的是不需要关心顺序，例如：background、border；有的是需要关心顺序，例如：font。
1. background:red url() repeat 0 0;
2.border:1px red solid;
3.font（最少要有两个值）:size family;（√）
   weight style size family;（√）
   style weight size family;（√）
   weight style size/line-height family;（√）
注:尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式，这样样式才不会被覆盖掉。

三十一、CSS选择器

1.ID选择器。

css ：#elem{}
heml ：id=“elem”
注：
（1）ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
（2）命名的规范，由字母、下划线、中划线、数字(并且第一个不能是数字)。
（3）驼峰式写法:searchButton(小驼峰)、SearchButton(大驼峰)、searchSmallButton
短线式写法:search-small-button
下划线式写法:search_small_button

2.CLASS选择器。

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

3.标签选择器（TAG选择器）。

/* css :  */div{}
<!-- html ：--><div></div>

使用的场景：1.去掉某些标签的默认样式时
2.复杂的选择器中，如:层次选择器

4.群组选择器（分组选择器）。

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

5.通配选择器。

*{ } → div,ul,li,p,h1,h2 … { }
注:尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：
去掉所有标签的默认样式时。

6.层次选择器。

后代：M N{ }
父子：M>N{ }
兄弟：M~N{ }（当前M下面的所有兄弟N标签）
相邻：M+N{ }（当前M下面相邻的N标签）

7.属性选择器。

选择器	说明
M[attr]	M元素选择指定为attr属性的集合
M[attr=value]	M元素选择指定为attr属性和value值的集合（完全匹配）
M[attr*=value]	M元素选择指定为attr属性并且包含值为value的集合（部分匹配）
M[attr^=value]	M元素选择指定为attr属性并且起始值为value的集合（起始匹配）
M[attr$=value]	M元素选择指定为attr属性并且结束值为value的集合（结束匹配）
M[attr1][attr2]	M元素选择满足多个属性的集合（组合匹配）

8.伪类选择器。

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

（1）hover、after等伪类选择器

M:伪类{}
:link 访问前的样式（只能添加给a标签）
:visited   访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有的标签）
:active    鼠标按下时的样式（可以添加给所有的标签）
注：
1.link visited只能给a标签加，hover和active可以给所有的标签加。
2.如果四个伪类都生效，一定要注意顺序：L V H A。
3.一般网站只这样去设置：a{} a:hover{}。
:after   通过伪类的方式给元素添加一段文本内容，使用content属性
:before    通过伪类的方式给元素添加一段文本内容，使用content属性
:checked 针对表单元素
:disabled 针对表单元素
:focus 针对表单元素