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<br>多行文本输入框
rows属性
cols属性
容器标签
div
它没有任何显性的作用，仅作为一个容器<br>用来包裹其它标签，用来区分网页的结构<br>最重要的作用就是网页区域的划分，以及内容排版<br>
默认大小是多少？<br>width: 100% 跟网页保持一致<br>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表达的是一种关联性，例如超链接关联的页面，<br>理论上来说，即使href地址错误，并不影响当前网页的完整性<br>
CSS属性的简写
背景相关
边框相关
字体相关
外边距
精灵图
整合小的图片成为一张大图<br>然后通过调整背景图的位置，来显示其中部分内容<br>
图片整合的作用是为了减少网络请求，提高网页的加载效率
什么是HTML
Hyper Text Markup Language<br>超文本标记语言
由W3C组织来制定和修改该标准
网页的基本编写
准备开发工具
css层叠样式表
用来修饰页面上的各种元素的样式
写法有3种
直接在标签元素上添加，style属性，将样式内容写在style属性中<br><table border="1px" <font color="#d32f2f">style="background-color: #79AEF4;"</font>><br>
在页面上编写style标签，将所有样式编写再style标签中<br><br><b><font color="#0000ff">不同的样式如何针对不同的标签生效？<br>靠选择器来选取不同的元素<br><br></font></b><style><br>..............<br></style>
将style标签中的样式内容，写在单独的文件中，该文件的后缀名，叫.css<br><br>html网页需要引入该css文件<br><link rel="stylesheet" type="text/css" href="form.css"><br>
选择器（用来选取对应的元素，添加样式）
ID选择器
<font color="#f44336"><b>#box</b></font> { 。。。。。。 }<br>通过#号 + ID号选择元素
类（别）选择器
<font color="#f44336"><b>.list</b></font> { 。。。。。。。}<br>通过 . 加上 类别名称
标签选择器
直接写标签名称
自定义标签样式也可以生效
属性选择器
<font color="#f44336"><b>input[type='xxx']</b></font>
p[id=abc] 完全等价于 p#abc
通用选择器
* { 。。。。。}
组合选择器
<font color="#f44336"><b>input, #box, .abc</b></font> {<br> 。。。。。。。<br>}
<font color="#f44336"><b>div#box.abc</b></font> {<br> 当多个选择器中间没有空格的时候，选择器之间不再有层级关系，表示同一个元素<br>}<br><br>
如何判断选择器的优先级
选择元素范围越小，优先级越高<br>选择越精准，优先级越高
层级选择器
.box > p<br>>号表示选取下级的子元素
.box p<br>表示选取所有后代元素
伪类选择器
xxx: hover { ..... }<br>当鼠标滑过的时候生效
xxx:nth-child(n)<br>选择xxx元素的第n个
xxx:nth-child( even )<br>选择xxx元素的偶数
xxx:nth-child( odd )<br>选择xxx元素的奇数
xxx: checked<br>选择被选中的元素（并不是所有元素都有选中状态）
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( '图片路径' )
背景图默认是被元素的大小限制的<br>超出的部分不可见
background-size: 300px 500px;<br>背景图的宽度300px, 高度500px
背景图依然在默认情况下可以保持宽高比，设定大小时，可以只设定宽或高
background-position: left bottom;<br>将背景图位置改在左下角<br>
background-position: 200px 100px;<br>背景图位置，横坐标200px，纵坐标100px<br>
background-repeat: no-repeat;<br>禁止背景图平铺（重复）
背景图与背景颜色可以并存，如果图片没有占据整个容器，则依然能看到背景色
线性渐变：
background: linear-gradient( to left, #ccc, #fff)<br>第一个参数表示 渐变的方向<br>第二个参数表示 开始颜色<br>第三个参数表示 结束颜色
浮动
float：left/right
左浮动向左漂浮<br>右浮动向右漂浮
浮动元素脱离文档流，不占据页面空间<br>因此，它会与其他元素重叠，But！！！<br>
不会遮盖文字内容<br>（文字环绕效果）
子元素浮动会导致父元素高度塌陷，解决办法：
给父元素添加固定的高
给父元素添加 overflow: auto；
当一个宽度100%的容器浮动时，宽度会自动改为随内容变化<br>简单的说，就是没有了宽度，需要靠内容撑开
所有浮动元素会水平横向排列
如何清除浮动元素的影响
如果哪个元素不想受到前面浮动元素的影响<br>在该元素身上添加 <font color="#f44336">clear: both;</font>
元素的类型
块元素
可以设置宽高大小
独占一行
行内元素
设置宽高无效
水平排列，排在一行，当放不下的时候会换行
只有水平边距是生效的
行内块元素
可以设置宽高大小
水平排列，排在一行，当放不下的时候会换行
如何进行类型转换？？？
display属性
block（块）
inline（行内）
inline-block(行内块）
盒模型
margin
margin: 10px; <br>表示边框四周都有10像素的距离
margin: 10px 15px;<br>表示上下边距为10像素，左右边距为15像素
margin: auto;<br>自动调整边距，会使得这个元素在水平方向上居中
两个元素上下边距会重叠在一起，当大小不一样的时候，以大的为准<br>左右不重叠
padding
padding: 20px;<br>表示向元素填充20px的距离，内容与边框之间会产生空隙<font color="#f44336"><br>同时元素会被撑大，也就是说，会改变元素的大小</font>
border
border: 2px solid black;<br>边框宽度2px，实线，黑色
边框类型：
solid 实线<br>
dashed 虚线
dotted 点线
overflow属性
scroll
未超出时，滚动条不出现，但滚动框出现
hidden
auto
未超出时，滚动框不出现
超出时，滚动框和滚动条一起出现
overflow-x
设置水平方向
overflow-y
设置垂直方向
定位方式
position:absolute
绝对定位的参考系，是有定位的父元素<br>当上层元素都没有定位时，则参考系为整个页面
position: relative
相对定位的参考系，是该元素本身
position：fixed
固定定位的参考系，是浏览器窗口
伪元素
一个没有标签的元素，不能独立存在，要依附于其他真实元素
元素的内容由content属性提供
伪元素的其他特性跟真实元素没有差别
xxx::after { 。。。。 }<br>xxx::before { 。。。。。 }
生成的伪元素会出现在主元素的内部，也就相当于它的子元素
阴影效果
box-shadow
#box {<br> box-shadow: 2px 2px 5px 0 black inset;<br>}<br>第一个表示阴影的横坐标<br>第二个表示阴影的纵坐标<br>第三个表示阴影的模糊值<br>第四个表示阴影的扩展值<br>第五个表示阴影的颜色<br>第六个表示阴影的方向（内/外）
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倍<br>scale( 0.7 ) 缩小至0.7倍
@keyframes
第一种编写方式
@kerframes bgchange {<br> from {<br> background: red;<br> }<br> to {<br> background: green;<br> }<br>}<br>
第二种编写方式
@kerframes bgchange {<br> 0% {<br> background: red;<br> }<br> 40% {<br> background: yellow;<br> }<br> 70% {<br> background:pink;<br> }<br> 100% {<br> background: green;<br> }<br>}<br>
如何调用帧动画？
div.info {<br> animation: bgchange 5s infinite;<br>}<br>元素使用了<font color="#f44336"><b>bgchange</b></font>这个动画，并持续<font color="#f44336"><b>5</b></font>秒完成，动画<font color="#f44336"><b>无限循环</b></font>播放
0 条评论
下一页
