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