导图社区 HTML知识点
HTML概念具有一定功能的标签，CSS概念，选择器，标准文档流，伪元素，标准盒子模型，怪异盒子模型，浮动，定位
创新思维之微创新头脑风暴，用一种与众不同的方法从现实接近理想，用第一性原理来找到真正要解决的问题。
剪辑视频培训要点，剪辑基本规则，剪辑手法及蒙太奇技巧，剪辑基本规则要了解镜头素材的选择、剪接点的确定、镜头长度的确定、剪辑中的景别安排、剪辑中的匹配原则、剪辑中运动的表现。
本图介绍了架构师的基础技术、开源项目、设计理论、架构模式、综合能力，如编程语言、操作系统、网络、底层技术、数据结构和算法、安全的基本技术。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
知识点
HTML
概念
定义：超文本标记语言，可以存储音乐、视频、链接、图片等
普通文本：只能放文字
标签
分为单标签和双标签
具有强烈语义的标签
p 段落
span 包含一句话
h1-h6 标题等级
只能有一个h1、h2等级的标题
用h3表示网页一个部分的标题
del 删除
em 强调
strong 特别的强调，强调笔记比em更高
列表
无序列表
ul li
有序列表
ol li
自定义列表
dl dt dd
ul标签和ol标签里只能放li；li里可以放任何标签；dl标签里只能放dt和dd
具有一定功能的标签
img 标签
br 换行（不能使用）
hr 分割线（不能使用）
<!----> 注释
b 粗体文本
i 斜体文本
pre 原样输出
iframe 放别的网页在指定的网页中
audio 音频
video 视频
autoplay 自动播放，必须要设置静音属性
loop 循环播放
muted 静音属性
controls 控件
a 标签
超链接
href属性 设置跳转的地址
锚点
href地址的后面加上#id名
表单
表单控件form标签进行配合
input
type
button 只是一个普通按钮，不具备提交数据的功能。
submit 核心作用是提交数据
text 输入框变成文本框
password 密码框
file 上传文件
reset 重置按钮
radio 单选
checkbox 多选
image 用图片当做提交按钮
email 邮箱
value属性 输入框的默认值
placeholder属性 提示
checked 默认选项
autofocus 自动获取焦点
autocomplete 自动完成
name属性必须写
autocomplete属性值必须为on
关闭为off
required 必填
标签必须有name属性
必须有提交按钮
必须在form标签当中
disabled 禁用
readonly 只读
textarea 多行文本输入
name
placeholder 提示信息
cols宽度，单位是数字
rows高度，单位是数字
button 按钮和input type=“button”的效果相同，不会提交数据
select 下拉列表
option 标签可以设置下拉列表的选项
optgroup 给选项分组
label属性 可以给optgroup分的组命名
label 标签
作用：当用户点击label标签当中的文字时，能够让和label标签绑定的输入框获取焦点
使用方法：将文字和控件直接放在label标签当中
表格
table标签 tr、td、th
div标签
切割
层叠样式表
选择器
三大选择器
id 全局且唯一
class 全局且不唯一
html 标签选择器
组合选择器
后代选择器
子元素选择器
兄弟选择器
相邻 +
普通 ~
伪类选择器
超链接伪类
：link 没浏览过
：visited 浏览过
：hover 鼠标悬浮状态
：active 选中状态
选择子元素的伪类
first-child 选择第一个子元素
last-child 选择最后一个子元素
nth-child（）选择任意一个子元素
nth-child（odd）基数个子元素
nth-child（even）偶数个子元素
nth-child（n）所有子元素
2n 偶数
2n+1 基数
并集选择器
div，box
交集选择器
div.box
选中div标签并且这个div的类名叫做box
标准文档流
网页的解析顺序
从上到下 从左到右
标签分等级
行内元素
特点：
多个行内元素全挤在一行
行内元素不能设置宽度和高度，行内元素是所有内容加在一块的宽度，高度是内容行高
块级元素
每一个块级元素都会独占一行(会默认占满父元素宽度的100%)
块级元素可以设置宽度和高度
空间折叠
代码当中的所有空白都会合并到一起，形成一个空格
优缺点
好处：让网页结构更加稳定
坏处：
伪元素
::before
::atfer
标准盒子模型
所有的标签其实都是一个盒子
盒子当中包括五个关键点：
width 内容的宽度
height 内容的高度
padding 内边距 内容到边框的距离，可以一次性设置四个方向的内边距值
分开设置
padding-top 上边距
padding-bottom 下边距
padding-left 左边距
padding-right 右边距
一起设置<br>
padding值是一个值的时候，表示四个方向
两个值的时候，第一个表示上下，第二个表示左右
三个值的时候，第一个表示上，第二个表示左右，第三个表示下
四个值的时候，顺序是上右下左
border 边框
margin 外边框 指的是两个盒子之间的距离
margin值的设置和padding是相同的，可以一次性设置四个方向，也可以单独设置一个方向
塌陷：两个margin值当中取较大的那个值
标准盒子模型在网页当中实际所占据的宽度：内容的宽度+左padding+右padding+左border+右border=实际宽度<br>
padding导致的小问题：会导致盒子变大。
怪异盒子模型
实际宽度=width属性值
内容的宽度=width-左右padding-左右border
如何开启怪异盒子模型：
box-sizing：border-box；
浮动
是css当中一种非常重要并且使用频率非常高的一种布局方案
通过浮动，可以让元素脱离标准文档流
浮动脱离标准文档流之后带来的影响
标签等级限制将会消失
margin塌陷将会消失
字围效果
元素脱离文档流，会导致网页结构不稳定（坏处）
使用
float：left|right
清除浮动带来的影响<br>
.clearfix::after
定位
相对定位
绝对定位
固定定位
