『知识巩固#1』Html、Css基础整理
Html
标签学习
-
排版标签
-
标题
h1、h2、h3、h4、h5、h6
只有这六个
-
段落标签
p
标签 段落之间有空隙换行
-
换行标签
br
空换行hr
下划线换行
-
-
文本格式化标签 根据语境区分
b
、strong
加粗u
、ins
下划线i
、em
倾斜s
、del
删除线
-
媒体标签
- 图片标签
img
- 属性名、属性值
alt
属性值作为替换文本、src
属性作为图片链接、title
属性在鼠标悬停时显示width
、height
很容易理解,控制图片宽高
- 路径
- 相对路径
- 绝对路径
- 音频标签
audio
controls
显示播放的空间autoplay
自动播放(部分浏览器不支持)loop
循环播放
- 视频标签
video
- 谷歌浏览器需要配合
muted
实现静音播放
- 谷歌浏览器需要配合
- 图片标签
-
链接标签
a
href
target
目标网页的打开形式_blank
在新窗口中跳转 保留原网页_self
在当前窗口中跳转(覆盖原网页) 不打开新的网页窗口
h5 不再支持 div盒子 align: center 的属性
列表标签
ul
无序列表- 只能包含
li
标签 li
标签可以包含任意内容
- 只能包含
ol
有序列表 可以认为是order list
: 有顺序的列表ol
列表中只允许包含li
标签li
标签可以包含任意内容
dl
自定义列表diy list
dt
自定义列表的主题dd
自定义列表的内容 注意dd
会默认显示缩进效果dl
标签中只允许包含dt
/dd
标签dt
/dd
标签可以包含任意内容
表格
table
tr
行 可以理解为table row
可以包含n
个td
td
单元格th
表头table head
放在tr
中caption
书写在table
标签内容 表示表格大标题 一般居中
- 表格的结构标签 (了解)
thead
tbody
tfoot
- 语义化的标签 易于后期维护 及浏览器理解渲染
- 合并单元格
- 不能跨结构标签合并(不能跨
thead、tbody、tfoot
) - 跨行合并
rowspan
、跨列合并colspan
- 明确合并哪几个单元格
- 通过左上原则,确定保留谁,删除谁
- 给保留的单元格设置属性
- 不能跨结构标签合并(不能跨
表单
-
input
系列type
属性值如下:text
文本框,用于输入单行文本 不换行 即写代码需要br
手动换行password
密码框 用于输入密码radio
单选框 用于多选一checkbox
多选框file
用于之后上传文件submit
提交按钮 用于提交reset
重制按钮 重制和提交生效 必须要有父级标签表单域button
普通按钮 可以配合js
添加功能
-
input
其他属性placehold
给输入框提示文字name
用name属性分组,相同name属性的单选框为一组checked
表示默认选中 指选项的默认值multiple
上传文件时实现多选value
给按钮添加或修改按键文字,包括submit
、reset
、button
-
单独的
button
标签 也可以作为按钮使用- 由于
button
本身不具有功能,因此可以灵活地给button
添加功能,拓展性极高 - 与
js
搭配使用有奇效
- 由于
-
select
下拉菜单- 组成:
select
标签,下拉菜单的整体,需要包裹住option
option
下拉的选项
- 默认选中:value的值设置为
selected
,不设置默认为第一项
- 组成:
-
textarea
文本域标签- 一般通过
css
给其添加行列,即宽高 - 禁用文本域的拖拽改变大小
- 一般通过
-
label
标签- 实现点击固定区域便可选中单选框、多选框
- 使用方法①
- 用
label
标签把内容包裹起来 - 在表单标签上添加
id
属性 - 在
label
标签的for
属性中设置对应的id
值
- 用
- 使用方法②
- 直接使用
label
标签把内容和表单标签一起包裹起来 - 需要把
label
标签的for
属性删除
- 直接使用
语义化标签
- 无语义
div
span
- 有语义(了解)
- 用于手机端的开发
header
、nav
、footer
、aside
、section
、article
字符实体
html
中空格合并的现象&nsbp
空格©
网页的版权 copyright
Css
基础认知
-
css
的引入方式-
内嵌式
css
写入style
标签中,通常约定为html
文件中的head
标签内
-
外联式
- 写入单独的
.css
文件中 - 通过
link
引入link
中
- 写入单独的
-
行内式
css
写在标签的style
属性中
-
基础选择器
- 标签选择器
- 标签名 {css属性名: 属性值;}
- 类选择器
.class
通过类名 指定标签的style
- 一个标签需要多个类名,用空格隔开即可
id
选择器- 配合
js
诞生,在一个页面中式唯一的,不可替代的 #id
{属性名: 属性值}- 所有标签上都有
id
属性 - 每一个标签只能有一个
id
属性值 - 一个
id
选择器只能选中一个标签
- 配合
- 通配符选择器
- 使用
*
号可以匹配所有的标签 - 一般用其清除
margin
、padding
属性
- 使用
字体和文本样式
字体
- 字体大小
font-size
- 浏览器有默认值
16px
- 字体粗细
font-weight
- 取值
- 关键字: 正常
normal
加粗blod
- 纯数字: 正常400 加粗 800
- 关键字: 正常
- 字体样式
font-style
字体是否倾斜- 正常
normal
倾斜italic
- 字体系列
font-family
- 雅黑、宋体、黑体之类的
windows
电脑 默认是微软雅黑- 一般网页会提供多个字体,用逗号隔开,表示按顺序显示,避免出现用户电脑上没有安装字体的情况
- 常见字体系列
- 无衬线字体
sans-serif
均匀 无笔锋 一般网页都用这种类型 - 衬线字体
serif
不均匀 有笔锋 - 等宽字体
monospace
所有文字占相同宽度
- 无衬线字体
- 样式的层叠问题
- 层叠性: 后面的覆盖前面的属性
- 样式以最后覆盖的为准
font
相关属性的连写font: style weight size family
- 只能省略前两个,省略相当于默认值
- 一个属性冒号后面书写多个值的写法,属于复合属性
文本
- 文本缩进
text-indent
- 取值为 数字+
px
或者 数字+em
;1em
为当前font-size的大小
- 文本水平对齐
text-align
- 左对齐、右对齐、居中对齐
- 能让哪些元素水平居中
- 文本
span
标签input
标签、imp
标签
- 文本修饰
text-decoration
- 属性值有:
underline
下划线 常用line-through
删除线 不常用overline
上划线 不常用none
无装饰线 常用
- 行高
line-height
取值为px
或者font-size
的倍数- 行高 = 上间距 + 文本高度 + 下间距
- 应用
- 单行文本垂直居中 可以设置为
line-height
: 文字父元素高度
- 单行文本垂直居中 可以设置为
- 注意点
- 如果同时设置了行高和font连写,注意覆盖问题
font: style weight size/line-height family
- 颜色常见取值 网页设计时直接取色器吸就好啦qvq
- 关键词
- rgb
- rgba
- 十六进制
- 标签水平居中
margin: 0 auto
选择器进阶
- 后代选择器: 空格
选择器1 选择器2 {css}
- 只要是后代,儿子、孙子等都会被选中
- 子选择器: >
选择器1 > 选择器2 {css}
- 只选择儿子,不选其他
- 并集选择器: ,
选择器1, 选择器2 {css}
- 两者均包括
- 交集选择器:紧挨着
- 作用 选中页面中同时满足多个选择器的标签
选择器1.选择器2 {css}
满足既又原则
- 伪类选择器
hover
- 当鼠标放置到目标上时,样式改变
- 任何一个标签都可以写
hover
背景属性
- background-color 略过 英语够用就行
- background-image
background-image: url()
- background-repeat
- background-position
- 两个参数分别控制左右和上下(水平方向、垂直方向)
- 可以用数字如
100px
控制、也可以用方向right、left、center控制
- 复合属性
- color、image、repeat、position
- 不分先后顺序,但是推荐上述顺序
- 如果需要单独的设置与连写,要么把单独的样式写到连写的后面,要么写到连写的里面
- 背景图位置如果是英文单词 可以不分先后顺序;数字写法 默认第一个是水平位置 第二个是竖直位置
- 图案
img
、background-image
: 重要的图片用img
不重要的图片用background-image
元素显示模式
- 块级元素
- 独占一行
- 宽度默认是父元素的宽度 高度默认由内容展开
- 可以设置宽高
div、h系列、p、ul、li、dl、dt、dd、form、header、nav、footer
- 行内元素
- 一行可以显示多个
- 宽高默认由内容撑起
- 不可以设置宽高
a、span、b、u、i、s、strong、ins、em、del
- 行内块元素
- 一行可以设置多个
- 可以设置宽高
input、textarea、button、select
img
有行内块的特点 但是chrome调试后显示有inline
- 元素显示模式转换
display: block
转换为块级元素display: inline-block
转换为行内块元素display: inline
极少……- 转换规范:
- 块级元素作为大容器,可以嵌套很多元素,但是不能用小范围的元素嵌套大范围元素 如p标签不能嵌套div、p、h
- a标签内部可以嵌套任意元素,除了a标签
css特性
- 继承性
- 子元素没有的 从父元素处继承;子元素有的,不继承
- 可以理解为 父元素的样式先赋给子元素 子元素自己的样式又赋给自己 后者覆盖前者 故显示子元素的样式
- 层叠性
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
- 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
- 优先级 最复杂
css三大特性
-
优先级的介绍
-
不同的选择器具有不同的优先级,优先级高的选择器样式会夫噶优先级低的样式
-
优先级公式
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
-
!important
不能提升继承的优先级,且实际开发中不建议使用 -
标签的范围越广,其优先级越低,个人认为可简记为 远水解不了近渴
-
-
权重叠加计算
- 场景:复合选择器 需要通过权重叠加计算 判断最终哪个选择器优先级会生效
- 权重叠加计算公式
- (0, 0, 0, 0) (行内,id,类名,标签) 之间无进位
- 只是统计每个复合选择器的对应选项个数 如果都相同 谁在后面谁生效
- 如果第一级数字相同 再去比较其他 需要结合例子理解
- 对于
!important
如果不是继承,则权重最高
-
排错
- 使用谷歌F12找错误 开发者常用
- 常用单词拼写错误 我自己就经常犯
main
函数都能搞成mian
- 上一行出错的代码可能会导致下一行代码失效
盒子模型
- 概念
- 每一个标签都是一个盒子
- 浏览器在网页渲染时,会将网页中的元素看作是一个个的矩形区域,我们也称其为盒子
- 内容
content内容区域、padding内边距、border边框、margin外边距
- 官方的联想模型为 苹果电脑的包装盒,个人理解为箱装盒式牛奶
- 边框
- 简写为
bd
后按tab
键 - border: 粗细 线条样式 颜色 不分先后顺序 MDN官网上线条的样式如下
-
- 可拆分单个属性
border-width
、border-style
、border-color
- 也可以拆分为单个方向 属性名为:
borde-方位名词
属性值连写
- 简写为
- 大小计算
- 盒子宽度 = 左边框 + 内容宽度 + 右边框
- 盒子高度 = 上边框 + 内容高度 + 下边框
- 设置
- 顺序
- 从外往内,从上往下
- 盒子的样式:
- 宽高
- 辅助的背景颜色
- 盒子模型的部分:border、padding、margin
- 其他样式:color、font-、text-、……
- 顺序
- 内边距
- 上右下左旋转设置padding的值
- 注意:
- ① 设置width和height是内容的宽高!
- ② 设置border会撑大盒子
- ③ 设置padding会撑大盒子
- 优化计算公式
- 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
- 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
- css3模型自动内减
- 加上
box-sizing: border-box
- 浏览器会自动计算多余大小,自动在内容中减去
- 加上
- 外边距
- 与内边距设置写法一样,只是不计入盒子的大小中
- 清除默认边距
- 浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的margin和padding,后续自己设置
- 常用
* {margin: 0; padding: 0;}
清除内边距
- 外边距折叠现象
- 合并现象
- 相邻的两个盒子,
margin-bottom
和margin-top
会合并 取最大值 而不是相加
- 相邻的两个盒子,
- 塌陷现象
- 发生在互相嵌套的块标签
- 给子元素添加
margin
值,会使父标签子标签都下移, 坑爹现象 - 解决方法(四种):
- 给父元素设置
border-top
或者padding-top
(分隔父子元素的margin-top
) - 给父元素设置
overflow:hidden
这个方法最完美 - 转换成行内块元素
- 设置浮动
- 给父元素设置
- 合并现象
- 行内元素、行内块元素的
padding
、margin
无效情况- 给行内元素设置
margin
和padding
- 水平方向的margin和padding布局中有效
- 垂直方向的margin和padding布局中无效
- 给行内元素设置
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 客怎眠qvq!