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标签引入
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(推荐)----》写法稍微复杂,但是没有副作用,推荐使用
13. 定位
(1)相对定位:positon:relstive;
相对于原来的位置,进行指定的偏移,相对定位的话,它仍然在标准文档流中,原来的位置会被保留
(2)绝对定位:
定位:基于xxx定位,上下左右~
1、没有父级元素定位的前提下,相对于浏览器定位
2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
总结:相对一父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留
(3)6.3、固定定位-fixed
(4)图层!!!没讲