前端学习（第二周）

浪漫季

已于 2022-12-28 19:47:58 修改

阅读量1.2k

点赞数

文章标签：前端学习 css html

于 2022-10-28 17:59:28 首次发布

本文链接：https://blog.csdn.net/lishunyu1226/article/details/127473239

版权

十九.表格

1.表格标签

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

注：之前有嵌套关系的，要符合嵌套规范

语义化标签：tHead , tBody ,tFood

注：在一个table中，tBody是可以出现多次的，但是tHead ，tFood只能出现一次

举例：

<!DOCTYPE html>
<html lang="en">
<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>
    <table>
        <caption>S13全球总决赛八强赛</caption>
        <tHead>
            <tr>
                <th>比赛日期</th>
                <th>比赛战队</th>
                <th>比赛结果</th>
            </tr> 
        </tHead>
        <tBody>
            <tr>
                <td>2022年十月22日</td>   
                <td>T1  VS  RNG</td>   
                <td>3:0</td>   
            </tr>
        </tBody>
        <tBody>
            <tr>
                <td>2022年十月23日</td>   
                <td>Gen  VS  Dk</td>   
                <td>3:2</td>   
            </tr>
        </tBody>
        <tFood>                                <!--  表格的脚注 -->
            <tr>
                <td>T1和Gen晋级四强</td>   
            </tr>
        </tFood>
    </table>
</body>
</html>

2.表格属性

border:表格边框
cellpadding：单元格与内容之间的间隙
cellspacing：单元格与单元格之间的间距

添加咋< table > 中
例子： < table border=“30” cellpadding=“30” cellsapcing=“30” >

rowspan：合并行
colspan：合并列
align：左右对齐方式(left , center,right)
valign:上下对齐方式 (top, middle ,bottom)

合并行列添加在< th > 或< td >中
align ，valign 添加在< tr >中

二十.表单

1.表单input标签

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

input 标签有一个type属性，决定是什么控件。

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

举例：

<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>T1
        <input type="checkbox">Gen
        <input type="checkbox">Jdg
        <input type="checkbox"disabled>Drx
    <h2>单选框</h2>
        <input type="radio" name="1">farker
        <input type="radio" name="1">deft
        <input type="radio" name="1">369
    <h2>上传文件</h2>
        <input type="file"> 
    <h2>提交按钮和重置按钮</h2>
        <input type="submit" >
        <input type="reset">
    </form>
 </body>

action=""→表示地址

2.表单相关标签标签

< textarea >：多行文本框
< select >，< option >:下拉菜单

 <select>
    <option selected>T1</option>		/*selceted表示选中*/
    <option>Gen</option>
    <option>Jdg</option>
    <option>Drx</option>
 </select>

multiple 表示多选

< label >：辅助表单

&nbsp：表示空格

二十一.< div >与 < span >

div（块）：用来划分一个区域，相当于一块区域容器，可以容纳段落，标题，表格，图像等各种网页元素。
span（内联）：对文字进行修饰

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

二十二.CSS基础语法

格式：选择器{属性1：值1；属性2：值2}
举例

	<style>
        div{width: 25%;height: 30px;background-color: red;}
        span{background-color: blue;}
    </style>

1.选择器写在< head >< /head >中
2.< head>与< body >两部分的标签要相同有映射关系

width：宽
height：高
blackground-color:背景色
长度单位：1.px→像素 2.%→百分比

外容器1→600px 当前容器 50%→300px
外容器2→400px 当前容器 50%→200px

CSS注释：/ * 注释的内容 * /

与HTML快捷键相同

二十三.CSS样式的引入方式

内部样式

在HTML标签上添加style属性来实现的（在< body >中）

内部样式

在< style>标签内添加的样式（在< head >中）

区别：内部样式的代码可以复用（即一个标签对应几个内容），符合五w3c的规范标准，尽量让结构和样式分开处理。

外部样式

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

< link >标签

通过link标签引入外部资源

rel属性指定资源和页面的关系，href属性指定资源的地址。

 <link rel="stylesheet" href="./common.css">

注：stylesheet为默认属性（用的较多），表示文档的外部样式表

@import

通过@import方式引入外部样式（问题较多，不推荐使用）

  	<style>
        @import url("./common.css");
    </style>

二十三.CSS中的颜色表示法

1.单词表示法

red, bule , green ,yellow…

	<style>
        <div>{background-color:red;}
    </style>

2.十六进制表示法

#000000→黑色（最小值）
#ffffff→白色（最大值）

	<style>
        <div>{background-color: #ffffff;}
    </style>

3. rgb三原色表示法：

rgb（255，255 ，255）→白色
rgb（0，0，0）→黑色
取值范围0~255

	<style>
        <div>{background-color: rgb(255, 255, b255);}
    </style>

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

二十四.CSS背景样式

background-color：背景色
background-image:背景图

ur（背景地址）
默认：会水平垂直都铺满背景图

background-repeat：背景图片的平铺方式

repeat-x x轴平铺
repeat-y y轴平铺
repeat （x，y都进行平铺，默认值）
no-repeat 都不平铺

background-position：背景图片的位置

x y :number（px，%）|单词
x，y为正数则向右或向下偏移，负数反之。
x: left ,center ,riht
y:top ,center , bottom

background-attachment：背景图随滚动条的移动方式

scroll：（默认值）背景位置是按照当前元素进行偏移的。
fixed：背景位置是按照浏览器进行偏移的。

二十五.CSS边框样式

border-style：边框的样式

solid：实线
dashed：虚线
dotted：点线

border-width：边框的大小

px…

border-color：边框的颜色

red #f00 …

边框也可以针对某一条边进行单独设置:
border-left-style:中间是方向
left ,right ,top ,bottom

做一个三角形：

<!DOCTYPE html>
<html lang="en">
<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>
        body{background-color:green;}
        div{
            width:0px;height:0px;
            border-top-color:transparent;
            border-top-style:solid;
            border-top-width:30px;;
            border-right-color:transparent;
            border-right-style:solid;
            border-right-width:30px;;
            border-bottom-color:red;
            border-bottom-style:solid;
            border-bottom-width:30px;;
            border-left-color:transparent;
            border-left-style:solid;
            border-left-width:30px;;
            }
    </style>
</head>
<body>  
    <div></div>
</body>
</html>

颜色：透明颜色 transparent

二十六.CSS文字样式

1. font-family：字体类型

英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑（默认），宋体
衬线体和非衬线体

中文字体的英文名称:
1.微软雅黑：‘Microsoft YaHei’
2.宋体：SimSun

 div{font-family:'Times New Roman',Simsun,微软雅黑 ;}

注：
1.字体加’ '是因为有空格
2.多个字体类型的设置目的：防止电脑里无此种字体，字体选取依次向右

2. font-size:字体大小

默认：16px
写法：number（px）| 单词（small large …不推荐使用）

字体大小一般为偶数

3.font-weight：字体粗细

模式：正常（normal）；加粗（bold）
写法：单词（normal，bold）| number（100 200 300 …900； 100到500都是正常的，600到900都是加粗）

4.font-style：字体样式

模式：正常（normal）；斜体（italic）
写法：单词（normal，italic）
注：oblique也是表示斜体，用的比较少，一般了解即可。

区别：
1.italic带有属性倾斜字体的才可以设置倾斜操作
2.oblique没有倾斜属性的字体也可以设置倾斜操作

5.字体颜色

写法：单词（red blue…)

二十七.CSS段落样式

text-decoration：文本修饰

下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none

注：可添加多个文本修饰：line-through,overline,none（用,隔开）

text-transform：文本大小写（针对英文）

小写：lowercase
大写：uppercase

text-indent:文本缩进

首行缩进

 p{text-indent: 36px;font-size: 18px;}

em单位：相对单位，1em永远都是和字体大小相同。

 p{text-indent: 2em;font-size: 16px;}

text-align：文本对齐方式

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

 p{text-align: right;}

line-height：定义行高

如果是多行文字，表示每一行文字基线之间的距离
如果是单行文字，表示→上间距+文本高度+下边距（上下边距相等)

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

 	p{line-height: 30px;}

	p{line-height: 2;}

letter-spacing：定义字间距
word-spacing：定义词间距（针对英文）
英文和数字不自动折行问题：

1.word-break:word-all;（非常强烈的折行）
2.word-wrap:break-word;（不是那么强烈,会产生空白区域）

二十八.CSS复合样式

复合的写法，是通过空格的方式实现的。（复合写法有的不需要顺序，例如background，border；有的需要顺序，例如font）

background:

div{background: red url(./m1.jdp) repeat 0 0;}

border:

div{border: 1px red solid;}

font:

最少要有两个值size ，family（顺序不能变）
weight style size family √
style weight size family √
weight style size/line-height family √

 div{font:bold italic 30px/100px 宋体;}

代码块中100px表示行高

注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式

div {background: url(./m1.jdp) repeat 0 0;
     background-color: red;
    }

二十九.CSS选择器

1.ID选择器

#elem{ } id=“elem”

<!DOCTYPE html>
<html lang="en">
<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>
        #div1{background: red;}
        #div2{background: blue;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这是另一个块</div>
</body>
</html>

1.在一个页面中，ID值是唯一的。
2.命名规范，字母，下划线，中划线，数字（命名的第一位不能是数字）
3.命名方式

驼峰写法：searchButton（小驼峰） SearchButton（大驼峰） searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button

<div id="searchButton"></div>

2.CLASS选择器

.elem{ } class=“elem”

<!DOCTYPE html>
<html lang="en">
<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>
    .box{background: red;}
    </style>
</head>
<body>
    <div class="box">这是一个块</div>
</body>
</html>

1.class选择器可以复用的（一条样式可以作用许多内容）
2可以添加多个class样式（用空格来添加）

<style>
    .box{background: red;}
    .content{font-size: 30px;}
    </style>
</head>
<body>
    <div class="box content">这是一个块</div>
</body>
</html>

3.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序（先识别CSS中的后一个）
4.标签+类的写法：在样式前添加标签，则作用< body>中相同的一类
例子：

<!DOCTYPE html>
<html lang="en">
<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>
    p.box{background: red;}
    </style>
</head>
<body>
    <div class="box content">这是一个块</div>
    <div class="box content">这又一个块</div>
    <p class="box content">这还一个段落</p>
</body>
</html>

则该代码运行结果为段落那一层!

3.标签选择器(TAG选择器）

css: div{}
html：< div >
使用的场景：

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

4.群组选择器

css：div,p,span{}
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用
例子：

<!DOCTYPE html>
<html lang="en">
<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,#text,.title{background: red;}
    </style>
</head>
<body>
    <p id="text">这是一个段落</p>
    <div>这是一个块</div>
    <h2 class="title">标题</h2>
</body>
</html>

5.通配选择器

#{ } → div，ul，li，p，h1，h2…{ }
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。

使用场景：1.去掉所有标签的默认样式

6.层次选择器

后代M N{ }

M,N之间用空格隔开。使得选择M下的N做出样式，可以有作用嵌套内容。

<!DOCTYPE html>
<html lang="en">
<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>
    #list li{border:1px red solid}  
    </style>
</head>
<body>
    <ul id="list">
        <li>
            <ul>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>

父子 M>N { }

无法嵌套

兄弟M~N { }

当前M下面的所有兄弟N标签

相邻M+N { }

当前M下面的相邻的N标签

7.属性选择器

M[attr]{ }

attr为属性

= ：完全匹配
*=：部分匹配
^=: 起始匹配
$=: 结束匹配
[ ] [ ] [ ]:组合匹配

<!DOCTYPE html>
<html lang="en">
<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[class][id]{background: red;}
    </style>
<body>
    <div>aaaa</div>
    <div class="box" id="elem">bbbb</div>
    <div class="search">cccc</div>
    <div class="search-button">dddd</div>
    <div class="button-search">eeee</div>
</body>
</html>

8.伪类选择器

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

M:伪类{ }

:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有标签）
:active 鼠标按下时的样式（可以添加给所有标签）

如果四个伪类都生效，一定要注意顺序：LVHA
一般网站只这样去设置：a{ } →（用于link visited active）和 a:hover{ }

效果如下：

    <style>
        a{color: blue;}
        a:hover{color: red;}
    </style>
</head>
<body>
    <a href="1">这是一个链接</a>
</body>

9.after等伪类选择器

:after, :before 通过伪类的方式给元素添加一段文本内容，使用content属性

after是添加在元素最后边；before是添加在元素的最前面
例：

 	<style>
      		div:after{content: "world"; color: red;}
    </style>
</head>
<body>
    <div>hello </div>
</body>

:checked, :disabled, :focus 都是针对表单元素的

 <style>
       :checked{width: 100px; height: 100px;}
       :disabled{width: 100px; height: 100px;}
       :focus{background: red;}
    </style>
</head>
<body>
   <input type="checkbox">
   <input type="checkbox" checked>
   <input type="checkbox" disabled>
   <input type="text">
</body>

10.结构伪类选择器

nth-of-type()

角标是从1开始的，1表示第一项，2表示第二项| n值表示从0到无穷大
所定义项的第n个

	<style>
        li:nth-of-type(2n+1){background: red;}
        li:nth-of-type(2n){background: blue;}
        li:nth-of-type(2){background:green;}
    </style>
</head>
<body>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</body>