HTMLCSS网页基础知识总结
2022-09-14 10:16:34 0 举报AI智能生成
包含常见所有的属性使用及特点解释
作者其他创作
大纲/内容
路径问题
绝对路径
C:\win\hello.html
http://xxx.com/xxx/hello.html
相对路径
相对于当前打开这个网页的浏览器的地址栏的所在路径
table
align属性
如果写在table标签上，会让表格本身水平居中
如果写在tr上，会使得tr里的文字内容水平居中
取值范围
tbody在没有编写的情况下，也会自动生成，建议都写上
td 和 th的区别
th就是一个文字加粗、且水平居中的td
行列合并
行合并 rowspan="x"
列合并 colspan=“x”
form表单
action属性
数据提交的服务器地址
method属性
数据提交的方式
input标签
type="text"
文本输入框，可以输入文字内容
type="password"
密码输入框，输入的内容会自动屏蔽
type="radio"
单选框，name相同则为一组
type="checkbox"
复选框
type="submit"
提交按钮，点击该按钮，会自动提交表单
type="reset"
重置，点击会重置表单中的所有输入域
type="date"
日期控件
type="number"
只能输入数字的输入框
value属性
代表输入框的内容
并不是所有的input都需要写value值
placeholder属性
文本框的默认提示
textarea
多行文本输入框
多行文本输入框
rows属性
cols属性
容器标签
div
它没有任何显性的作用，仅作为一个容器
用来包裹其它标签，用来区分网页的结构
最重要的作用就是网页区域的划分，以及内容排版
用来包裹其它标签，用来区分网页的结构
最重要的作用就是网页区域的划分，以及内容排版
默认大小是多少？
width: 100% 跟网页保持一致
height： 随内容变化
width: 100% 跟网页保持一致
height： 随内容变化
可以容纳一切所有标签
div默认独占一行，无论它的宽度是否被修改
span
它无法设置大小，没有宽高，大小随内容变化
通常容纳文字内容
它无法用来做页面布局排版
基本标签
H1~H6
标题标签，独占一行，随着数字的增大，字体逐渐减小
p
段落标签，独占一行，段落跟段落之间，上下有间距
i
斜体字
hr
分割线
b
字体加粗
br
强制换行
ul
搭配li标签使用
属性type，用来指定列表项符号
ol
搭配li标签使用
img标签
单标签
src属性： 存放图片的路径
alt属性：当图片未显示或无法显示时，替换文字
a标签
href属性：链接地址（可以是网页、可以是资源文件、也可以是程序接口，只要能够访问到）
target属性： 用来指定点击之后，打开的网页是当前跳转，还是打开新页面
<a target="_self">xxx</a>
在当前页面跳转
<a target="_blank">xxx</a>
创建新页面并跳转
src 和 href的区别？
src引用的资源通常是不可或缺的，例如img当中的src，如果引用失败会导致页面不完整
href表达的是一种关联性，例如超链接关联的页面，
理论上来说，即使href地址错误，并不影响当前网页的完整性
理论上来说，即使href地址错误，并不影响当前网页的完整性
CSS属性的简写
背景相关
边框相关
字体相关
外边距
精灵图
整合小的图片成为一张大图
然后通过调整背景图的位置，来显示其中部分内容
然后通过调整背景图的位置，来显示其中部分内容
图片整合的作用是为了减少网络请求，提高网页的加载效率
什么是HTML
Hyper Text Markup Language
超文本标记语言
超文本标记语言
由W3C组织来制定和修改该标准
网页的基本编写
准备开发工具
css层叠样式表
用来修饰页面上的各种元素的样式
写法有3种
直接在标签元素上添加，style属性，将样式内容写在style属性中
<table border="1px" style="background-color: #79AEF4;">
<table border="1px" style="background-color: #79AEF4;">
在页面上编写style标签，将所有样式编写再style标签中
不同的样式如何针对不同的标签生效？
靠选择器来选取不同的元素
<style>
..............
</style>
不同的样式如何针对不同的标签生效？
靠选择器来选取不同的元素
<style>
..............
</style>
将style标签中的样式内容，写在单独的文件中，该文件的后缀名，叫.css
html网页需要引入该css文件
<link rel="stylesheet" type="text/css" href="form.css">
html网页需要引入该css文件
<link rel="stylesheet" type="text/css" href="form.css">
选择器（用来选取对应的元素，添加样式）
ID选择器
#box { 。。。。。。 }
通过#号 + ID号选择元素
通过#号 + ID号选择元素
类（别）选择器
.list { 。。。。。。。}
通过 . 加上 类别名称
通过 . 加上 类别名称
标签选择器
直接写标签名称
自定义标签样式也可以生效
属性选择器
input[type='xxx']
p[id=abc] 完全等价于 p#abc
通用选择器
* { 。。。。。}
组合选择器
input, #box, .abc {
。。。。。。。
}
。。。。。。。
}
div#box.abc {
当多个选择器中间没有空格的时候，选择器之间不再有层级关系，表示同一个元素
}
当多个选择器中间没有空格的时候，选择器之间不再有层级关系，表示同一个元素
}
如何判断选择器的优先级
选择元素范围越小，优先级越高
选择越精准，优先级越高
选择越精准，优先级越高
层级选择器
.box > p
>号表示选取下级的子元素
>号表示选取下级的子元素
.box p
表示选取所有后代元素
表示选取所有后代元素
伪类选择器
xxx: hover { ..... }
当鼠标滑过的时候生效
当鼠标滑过的时候生效
xxx:nth-child(n)
选择xxx元素的第n个
选择xxx元素的第n个
xxx:nth-child( even )
选择xxx元素的偶数
选择xxx元素的偶数
xxx:nth-child( odd )
选择xxx元素的奇数
选择xxx元素的奇数
xxx: checked
选择被选中的元素（并不是所有元素都有选中状态）
选择被选中的元素（并不是所有元素都有选中状态）
CSS属性
背景属性
background-color
文本属性
color
font-size
text-decoration
none
underline
overline
line-through
text-indent
font-family
font-weight
bold
排列方式
text-align
left
center
right
line-height
大小
width/height
列表样式清除
list-style：none
背景图
background-image：url( '图片路径' )
背景图默认是被元素的大小限制的
超出的部分不可见
超出的部分不可见
background-size: 300px 500px;
背景图的宽度300px, 高度500px
背景图的宽度300px, 高度500px
背景图依然在默认情况下可以保持宽高比，设定大小时，可以只设定宽或高
background-position: left bottom;
将背景图位置改在左下角
将背景图位置改在左下角
background-position: 200px 100px;
背景图位置，横坐标200px，纵坐标100px
背景图位置，横坐标200px，纵坐标100px
background-repeat: no-repeat;
禁止背景图平铺（重复）
禁止背景图平铺（重复）
背景图与背景颜色可以并存，如果图片没有占据整个容器，则依然能看到背景色
线性渐变：
background: linear-gradient( to left, #ccc, #fff)
第一个参数表示 渐变的方向
第二个参数表示 开始颜色
第三个参数表示 结束颜色
第一个参数表示 渐变的方向
第二个参数表示 开始颜色
第三个参数表示 结束颜色
浮动
float：left/right
左浮动向左漂浮
右浮动向右漂浮
右浮动向右漂浮
浮动元素脱离文档流，不占据页面空间
因此，它会与其他元素重叠，But！！！
因此，它会与其他元素重叠，But！！！
不会遮盖文字内容
（文字环绕效果）
（文字环绕效果）
子元素浮动会导致父元素高度塌陷，解决办法：
给父元素添加固定的高
给父元素添加 overflow: auto；
当一个宽度100%的容器浮动时，宽度会自动改为随内容变化
简单的说，就是没有了宽度，需要靠内容撑开
简单的说，就是没有了宽度，需要靠内容撑开
所有浮动元素会水平横向排列
如何清除浮动元素的影响
如果哪个元素不想受到前面浮动元素的影响
在该元素身上添加 clear: both;
在该元素身上添加 clear: both;
元素的类型
块元素
可以设置宽高大小
独占一行
行内元素
设置宽高无效
水平排列，排在一行，当放不下的时候会换行
只有水平边距是生效的
行内块元素
可以设置宽高大小
水平排列，排在一行，当放不下的时候会换行
如何进行类型转换？？？
display属性
block（块）
inline（行内）
inline-block(行内块）
盒模型
margin
margin: 10px;
表示边框四周都有10像素的距离
表示边框四周都有10像素的距离
margin: 10px 15px;
表示上下边距为10像素，左右边距为15像素
表示上下边距为10像素，左右边距为15像素
margin: auto;
自动调整边距，会使得这个元素在水平方向上居中
自动调整边距，会使得这个元素在水平方向上居中
两个元素上下边距会重叠在一起，当大小不一样的时候，以大的为准
左右不重叠
左右不重叠
padding
padding: 20px;
表示向元素填充20px的距离，内容与边框之间会产生空隙
同时元素会被撑大，也就是说，会改变元素的大小
表示向元素填充20px的距离，内容与边框之间会产生空隙
同时元素会被撑大，也就是说，会改变元素的大小
border
border: 2px solid black;
边框宽度2px，实线，黑色
边框宽度2px，实线，黑色
边框类型：
solid 实线
dashed 虚线
dotted 点线
overflow属性
scroll
未超出时，滚动条不出现，但滚动框出现
hidden
auto
未超出时，滚动框不出现
超出时，滚动框和滚动条一起出现
overflow-x
设置水平方向
overflow-y
设置垂直方向
定位方式
position:absolute
绝对定位的参考系，是有定位的父元素
当上层元素都没有定位时，则参考系为整个页面
当上层元素都没有定位时，则参考系为整个页面
position: relative
相对定位的参考系，是该元素本身
position：fixed
固定定位的参考系，是浏览器窗口
伪元素
一个没有标签的元素，不能独立存在，要依附于其他真实元素
元素的内容由content属性提供
伪元素的其他特性跟真实元素没有差别
xxx::after { 。。。。 }
xxx::before { 。。。。。 }
xxx::before { 。。。。。 }
生成的伪元素会出现在主元素的内部，也就相当于它的子元素
阴影效果
box-shadow
#box {
box-shadow: 2px 2px 5px 0 black inset;
}
第一个表示阴影的横坐标
第二个表示阴影的纵坐标
第三个表示阴影的模糊值
第四个表示阴影的扩展值
第五个表示阴影的颜色
第六个表示阴影的方向（内/外）
box-shadow: 2px 2px 5px 0 black inset;
}
第一个表示阴影的横坐标
第二个表示阴影的纵坐标
第三个表示阴影的模糊值
第四个表示阴影的扩展值
第五个表示阴影的颜色
第六个表示阴影的方向（内/外）
CSS3动画
transition
transition: 3s;
transform
rotate( )
rotateX( 20deg )
rotateY( 45deg )
rotateZ( 30deg )
translate( )
translateX( 20px )
translateY( 20px )
translateZ( 20px )
scale( )
scale( 2.5 ) 放大至2.5倍
scale( 0.7 ) 缩小至0.7倍
scale( 0.7 ) 缩小至0.7倍
@keyframes
第一种编写方式
@kerframes bgchange {
from {
background: red;
}
to {
background: green;
}
}
from {
background: red;
}
to {
background: green;
}
}
第二种编写方式
@kerframes bgchange {
0% {
background: red;
}
40% {
background: yellow;
}
70% {
background:pink;
}
100% {
background: green;
}
}
0% {
background: red;
}
40% {
background: yellow;
}
70% {
background:pink;
}
100% {
background: green;
}
}
如何调用帧动画？
div.info {
animation: bgchange 5s infinite;
}
元素使用了bgchange这个动画，并持续5秒完成，动画无限循环播放
animation: bgchange 5s infinite;
}
元素使用了bgchange这个动画，并持续5秒完成，动画无限循环播放
0 条评论
下一页
