web前端html和css笔记1

爱喝橙汁的兔兔～

已于 2022-11-12 16:42:46 修改

阅读量641

点赞数

分类专栏： web前端文章标签： javascript 前端 html

于 2022-11-12 16:36:30 首次发布

本文链接：https://blog.csdn.net/weixin_46039828/article/details/127821650

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

web前端html和css笔记1

一、一个网页的组成部分

网页三剑客

HTML
CSS
JavaScript

二、HTML 超文本标记语言 (结构层)

认识HTML 标签
功能：用于将内容解析在网页上
将我们图片,文字,视频,音频等信息呈现在网页中

1. 图片标签

代码格式：
<img src="地址" alt="解释" title="提示信息" width="" height="">

2. 链接标签

<a herf="" target="">
herf：链接地址
target：_self当前页面打开(默认) _blank新窗口打开

3. 表格标签

<table></table>               #表格最外层容器
<tr></tr>                     #定义表格行
<th></th>                     #定义表格头
<td></td>                     #定义表格单元
<caption></caption>           #定义表格标题
<thead></thead>               #头
<tbody></tbody>               #身体
<tfoot></tfoot>               #尾

表格属性

border 表格边框1
cellpadding 单元格内的空间30
cellspacing 单元格之间的空间
rowspan：合并行
colspan：合并列 =2表示有两列要合并只需要早表格头的表格行定义加上 colspan=“2"就好
align：左右对齐方式right
valign：上下对齐方式center

4. 表单form

<input type="" placeholder>

placeholder
让初始的文本框内有提示性的文字
type的类型：
4.1 文本框text
4.2 密码框password
4.3 输入框input
4.4 复选框checkbox
checkbox默认状态勾选：checked 无法勾选disable
4.5 单选框radio
radio 设置选项1和2不可以同时勾选：设置name属性相同
4.6 上传文件file
4.7 submit提交按钮
4.8 reset重置按钮

5. textarea多行文本框

<textarea cols="30" rows="10"></textarea>
cols控制列数，rows控制行数

6. select标签：下拉菜单

option下拉菜单

<select>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</select>

下拉菜单的属性：

selected：修改默认初始值为某个选项
disable：该选项不可选
size属性，其值为显示个数
<select size="2">
多选：multiple
<select size="2" multiple>

7. label辅助表单

<input type="radio" name="1" id="1"><label for="1">选项一</label>
<input type="radio" name="1" id="2"><label for="2">选项二</label>

name属性相同不能同时选中
我们在input属性中添加了id属性并赋值，在后添加label标签并在for属性内填入对应id
以此实现了点击文字也能选中的效果

8. 块元素

块盒or块元素: 特点：独占一行
一些典型的块元素的标签：
8.1 div
8.2 h1-h6
8.3 p
8.4 ul>li (无序列表)
8.5 ol>lii(有序列表)
8.6 dd dl dt(多级列表)
8.7 form

9. 行内元素

行盒(行内元素) 不独占一行, 只有一行放不下时才会换行
9.1 a :超链接
9.2 span 局部修饰
9.3 b strong 文字加粗
9.4 em 倾斜文字
9.5 换行标签br
9.6 label
9.7 select option
9.8 textarea

二、CSS 层叠样式表 (表现层)

作用:美化网页

1. 外部样式css两种写法

（1）链接式：
引入外部CSS文件，name.css
使用link标签引入

其中rel属性指定资源与页面的关系 href属性资源的地址 rel属性: 属性值及意义（2）导入式（@import是CSS2.1特有的！）

2. css的标签：

div：标签定义 HTML 文档中的一个b分隔区块或者一个区域b部分。
span标签：重点要突出的字，使用span标签套起来。用于对文档中的b行内b元素进行组合。
font-family：字体系列
font-size：字体大小
font-weight：字体粗细bloder（加粗）
font: oblique bloder 12px “楷体”

按类型分类：

block：块
inline：内联
inline-block：内联块
其中
block有div、p、ul、li、h1……
block特性
1.独占一行。
2.支持所有特性。
3.不写宽的时候与父元素相同。
4.所占区域为矩形

inline有span、a、em、strong、img……
inline特性：
1.挨在一起。
2.不支持一些样式如：weight、height等。
3.不写宽时宽又内容决定。
4.所占区域不一定为矩形。
5.内联标签之间会有空隙，原因：换行产生

inline-block有input、select……
inline-block特性：
1.挨在一起但是支持宽高

按内容分类有
Flow：流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的

按显示
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
非替换元素：将内容直接告诉浏览器，将其显示出来

有些标签有默认样式，有些标签没有默认样式。
没有默认样式：
div、span、……
有默认样式：
body、h1……h6、p、ul、……
body -->margin:8px
h1 -->margin:上下21.440px
font-weight:bold
p -->margin:上下16px
ul -->margin:上下 16px padding:左40px
默认点：list-style:disc
a -->text-decoration:underline;

一些标签必须按顺序嵌套：
ul、li
dl、dt、dd
table、tr、td

3. 选择器：美化我们的网页

css选择器:
选择器主要用于对元素进行名称标记,
在css中可以通过该名称查找到指定的一个或一类元素
优先级 id>class>标签语法格式
选择器{属性1：值1 ；属性2：值2 ；属性3：值3}
属性：
width：像素px或者%
height
background-color

（1）标签选择器：标签{}
标签选择器查找方式: 标签名称比如div
class 类选择器查找方式: .类名称{}
id 选择器查找方式: #id名称{}
层次选择器
（2）群组选择器：使用逗号方式，给不同选择器添加统一的CSS样式来达到代码的复用
（3）通配选择器：*{}–>div,ul,li,p,h1,h2等等{}
（4）层次选择器：
后代选择器：M N{} #MN之间有空格隔开
子代选择器：M>N{}
兄弟选择器：M~N{}：当前M下的所有兄弟N 标签
相邻兄弟选择器: 形式：M+N{}（下面一个兄弟）
（5）属性选择器（常用）id + class结合
:M[attr]{} =：完全匹配 *=部分匹配 ^=起始匹配￥=结束匹配
组合匹配：style标签内多添加几个属性即可，如下图，注意第8行。
（6）:hover等伪类选择器：CSS伪类用于向默写元素添加特殊的效果。一般
通用选择器
用于初始样式添加不上的时候，用伪类来添加。
:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式 (只能添加给a标签)
:hover 鼠标移入时的样式
:active 鼠标按下时的样式（按下未释放）
（7）after等伪类选择器
:after、:before 通过伪类的方式给元素添加一个文本内容（使用contect属性）
:checked、:disabled、:focus 针对表单元素
（8）结构伪类选择器
nth-of-type()
nth-child()

单一样式优先级
style行间>id>class>tag>*>继承
style 权重 1000
id 权重 100
class 权重 10
tag 权重 1
!important 提升优先级

层次优先级：
1.权重比较
ul li .box p input{} 权重相加1+1+10++1+1
.hello span #elem{} 权重相加 10+1+100
2.约分比较
ul li .box p input{}
.hello span #elem{}
两边开始用相同优先级的约分，谁先没谁优先级低。

4. 背景样式：

background
backgroun-attachment：背景图像是否固定或者随着页面的其余部分滚动。
scroll（默认）跟随页面滚动 fixed（不滚动） local（随元素滚动） initial inherit（继承）
background-color：设置元素的背景颜色。
background-image：把图像设置为背景。
background-position：设置背景图像的起始位置。
background-repeat：设置背景图像是否及如何重复。repeat将向垂直和水平方向重复（默认）

5. 边框样式：

border-width
border-style：样式 dotted（点状） dashed（虚线） solid（实现）
border-color：transparent透明
inherit：继承

6. 文本修饰/文本样式

（1）颜色
color 字体颜色 /* 颜色名词十六进制 */
rgb
rgba
颜色表示方法：
①单词表示法
②十六进制表示法
③RGB三原色表示法
RGB：0~F ,rgb(0,255,255)
RGBA：A（透明度）：0~1,rgba(0,255,255,0.9)

（2）文本对齐方式
text-align 对齐方式 left 以em作单位是字体个数

（3）首行缩进 –> text-indent：2em
text-indent 首行缩进 text-indent: 32px; /首行缩进/

（4）行高 –> line-height：300px；单行文字上下居中！line-height = height
line-height 行高

（5）下划线 –> text-decoration
text-decoration

下划线 underline
中划线 line-through
上划线 overline
闪烁文本 blink
继承 inherit
（6）文本图片水平对齐：vertical-align: middle;
img,span{vetical-align:middle}/垂直对齐 middle中间/

（7）文字阴影text-shadow阴影颜色，水平偏移，垂直偏移，阴影半径
text-shadow: #008800 20px -10px 2px;

text-transform：lowercase
letter-spacing 字距（中文
word-spacing 词距（英文
单词过长时便会”跑出“框外：
word-wrap
一、word-break: break-all;（强烈）
二、word-wrap: break-word;（不强烈，会产生空白）

7. 修改背景

width
height
background-color
backgroud-image
background-position
背景颜色背景图片平铺方式背景位置

渐变
径向渐变、圆形渐变
background-image: linear-gradient(66deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

8. 修改字体字体修饰（文字样式）

font-size：字体大小为百分比的时候是父类的n%
font-family ：字体名称
font-weight：bold（粗体）;bolder lighter
font-style oblique倾斜 italic斜体
font-style: oblique;

9. 盒子模型

组成部分
组成：content–>padding（内边距）–>border（边框）–>margin（外边距）
由内到外
内容+边框+内边距+外边距

content相当于快递盒中物品：content由宽和高决定
padding相当于填充物：padding不能出现负值，margin是可以出现负值。
border相当于包装盒
margin相当于盒子与盒子之间的距离：

（1）边框border：
粗细 px
样式 solid red
颜色

（2）外边距margin：
妙用：居中元素：margin：0，auto
/* 复合写法 /
margin: 10px 0 0 30px; / 四个值上右下左刚好是顺时针*/
margin: 20px 30px; /* 两个值上下左右*/;
margin: 40px 30px 50px; /* 上左右下;/
margin: 100px; / 四个方向值一致*/

（3）盒子的计算方式：
计算规则：标准盒模型计算 IE盒模型

盒子宽度= width + 左右边框+左右内边距+左右外边距

IE盒模型 box-sizing:border-box

盒子宽度= width+左右外边距

（4）margin叠加
当给两个盒子同时添加上下边距时，会出现叠加问题。
这个问题只有在上下有（会取上下值较大的作为叠加值），
左右是没有得加叠加问题的。

左右自适应
上下自适应是不可行

（5）盒子类型转换

display显示框类型
display可给定的值有：
block、/* 行盒转换为块盒 block*/
inline、块盒转换为行盒 inline 块和块一行放
inline-block、
none……不占空间的隐藏
visibility：hidden则为占空间的隐藏

（6）圆角边框 border-radius: 100px;
border-radius有四个参数（顺时针），左上开始，左上右上右下左下，顺时针方向
圆圈：圆角=半径

（7）盒子阴影box-shadow: 10px 10px 100px yellow;

10. overflow溢出隐藏

overflow: hidden;

11. opacity：透明度

值为0（透明）~1（不透明）那么0.5就是半透明
rgba最后一个值为0或1，1表示不透明，0表示透明。

12. float浮动概念及原理

文档流：文档中可显示对象在排列时所占用的位置
网页布局方式：标准文档流

浮动：控制元素向左还是向右块元素左右布局
float特性：
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，
如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float取值有left、right、none（默认）
注意点
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加
只会影响后面的元素

清除浮动clear：clear属性只会操作块标签，对内联不起作用
浮动的缺陷：会让父元素塌陷
right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
none：

解决塌陷问题方案：
方案一：增加父级元素的高度
方案二：增加一个空的div标签，清除浮动
方案三：在父级元素中增加一个overflow：hidden
方案四：父类添加一个伪类:after（推荐，是空标签的加强版）

浮动元素增加空div----》简单、代码尽量避免空div
设置父元素的高度-----》简单，元素假设没有了固定的高度，就会超出
overflow----》简单，下拉的一些场景避免使用
父类添加一个伪类:after（推荐）----》写法稍微复杂，但是没有副作用，推荐使用