第二周笔记021~045

Cq2004

已于 2022-10-29 00:00:29 修改

阅读量913

点赞数

分类专栏： 11 文章标签：前端 javascript 开发语言

于 2022-10-28 17:52:00 首次发布

本文链接：https://blog.csdn.net/Cq2004/article/details/127471625

版权

11 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

21.嵌套列表

1.意义：列表之间可以互相嵌套形成多层级列表
2.例：代码：
在这里插入图片描述
效果：

22.表格标签

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

注：之间有嵌套关系，要符合嵌套规范。
语义化标签：tHead,tBody,tFood
注：tBody可以出现多次，tHead、tFood只能出现一次。

23.表格属性

在这里插入图片描述
align:left ,center ,right
valign:top ,middle ,bottom

24~25表单标签

在这里插入图片描述

在第一个form后面添加 action="网址"即将表格提交到该网址中
在type后面加palceholder即在框内添加提示信息
在type后加checked即默认被选中
在type后加disabled即不能被选中
name标签定义可使几个选项为一组

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

效果:
：在这里插入图片描述

26.表格表单组合使用

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

表格有嵌套规范，表单无嵌套规范
空格：& nbsp ;

效果：

27.< div >与< span >

1.div(块）:做一个区域划分的块在这里插入图片描述
2.span(内联)：对文字进行修饰的内联

例：
效果：

28.CSS语法格式

css基本语法：

选择器{ 属性1 ；值1 ；属性2 ；值2 （；）}
width:宽
height:高
background-colour:背景色
长度单位：
1：px:像素
2.%：百分比
例：外容器1——600px 当前容器50%——300px

效果：

29. 内联样式与内部样式

1.内联（行内、行间）样式：在html标签上添加style属性来实现的
在这里插入图片描述
2.内部样式：在< style >标签内添加的样式

注：内部样式的代码，可以复用代码、符合w3c的标准，进行让结构和样式分开处理

30.外部样式及两种写法

外联样式：引入一个单独的css文件，name.css
1.< link >标签：引入外部资源

rel:指定引入资源的类型（跟页面的关系）
href:引入外部资源的地址
rel属性：
2.@import(不建议使用)

31.css颜色表示法

1.单词表示法：red blue green… 在这里插入图片描述

```
**16进制表示法**：
```

0~9， a ~ f
例：#000000:黑色； #fffffff：白色
3.rgb三原色表示法：例：

rgb( 0 , 0 , 0 ):黑色
rgb(255,255,255)白色
取值范围：0~255
提取网页颜色：
1.FeHelper:

2.Photoshop:拾色器

32.背景样式

在这里插入图片描述
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:（背景位置是按照当浏览器进行偏移的）

33.背景实现视觉差效果

在这里插入图片描述

34.边框样式

css边框样式：
broder-style:边框的样式

solid:实线
dashed:虚线
dotted：点线
broder-width:边框的样式
px…
broder-color:边框的颜色
red #f00…
注：针对某一条边进行单独设置：例：border-left-style
效果：

35.边框实现三角形

在这里插入图片描述
效果：

36.family字体类型

font-family:字体类型
英文字体：Arial,‘Times New Roman’
中文字体：微软雅黑（'Microsoft YaHei '），宋体(Simsun)
衬线体、非衬线体
在这里插入图片描述注意点：1.多个字体类型的设置目的：识别更多的计算机
2.引号的添加目的：字体名称中间有空格，规定要加引号
3.英文字体名称只能识别英文，中文字体名称既能识别中文，也能识别英文。

37.字体大小粗细样式

1.font-size:字体大小
默认：16px
单词表示法（不推荐）
在这里插入图片描述
注：字体大小一般为偶数
2.font-weight:字体粗细
两种模式：正常（ normal ），加粗( bold )
写法:单词（normal,bold）或者number( 100,200,300…900,100~500都是正常的，500 ~900都是加粗的)
3.font-style:字体样式
两种模式：正常（normal），斜体（ italic ）
写法：单词(normal,italic)
注：oblique也表示斜体，了解即可
与italic区别：
在这里插入图片描述
4.color:字体颜色