HTML基础知识点
文章目录
- html的结构
- 文档流
-
- 块级元素和行内元素
-
- 块级元素(block)
- 行内元素(inline)
- 行内块元素(inline-block)
- 盒子模型
-
- 计算方式
- 常用标签(element)
-
- 语义化标签
-
- strong
- header
- footer
- article
- section
- nav
- aside
- div
- h1-h6
- a
- p
- 表单标签
-
- 表单属性
- form
- select
- input
- label
- button
-
- 按钮的状态如下
- 点击事件
- 列表(ul、ol、dl)
- image
-
- 常用属性
- 常用样式
- video
-
- 常用属性
- span
- table
- 块级和行内元素
- 选择器
-
- 分类
- 伪类选择器
-
- 常用伪类
- 伪元素、伪类
-
- 伪类
- 伪元素
- 常用通用样式
- 布局
-
- float(浮动布局)
- position(定位)
- Grid(格子布局)
- flex(弹性布局)
-
- 主轴和纵轴
- flex-direction
- 常用布局
- 对齐
- 百分比布局
- 对齐效果
-
- 水平对齐
- div中水平对齐
-
- inline
- 垂直对齐
html的结构
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
文档流
普通的网页是从浏览器的左上角开始排列的，遵循从上到下，从左到右。
可以使用float、absolute脱离正常文档流。
块级元素和行内元素
块级元素(block)
div、p、h1-h6都是块级
特点：独占一行，可以设置宽高。
行内元素(inline)
a、img、button
特点：宽高是根据自身的内容决定。
行内块元素(inline-block)
特点：inline-block 产生的空隙与父级元素继承或者设定的 font-family、font-size 有关，通常情况下，12px 大小的 tahoma 字体，inline-block 后元素间产生的空隙（间隙）大约是 5px
盒子模型
盒子由margin、border、padding、content组成。
计算方式
由box-sizing决定。
-
content-box：默认的计算方式。最终在网页上展示出来的宽高=content的宽高，不会加上border和padding.
总结：content往外撑开。
-
border-box：最终在网页上展示出来的宽高=content的宽高+padding+border。
总结：content向里面缩。
常用标签(element)
语义化标签
开发人员能够通过标签名一眼就知道标签是干什么的。同时也为了让搜索引擎(比如百度、谷歌、360)，语义化标签不需要设置样式或者属性。
strong
加粗效果，主意用来强调。
和b标签效果一样。但是推荐用strong。
header
页头，html5语义化标签。
footer
页脚，html5语义化标签。
article
文章
section
章节
nav
导航
aside
侧边栏
div
包装容器。单独使用没效果。块级元素，独占一行。
h1-h6
一般用于文章的标题 。h1最大，h6最小，字体有加粗效果。默认有margin.
a
行级元素，超链接，默认有下划线，点击后能跳转。
href:设置超链接。
使用text-decoration取消下划线。
p
段落，代表文章的一段。块级元素。默认有上下margin.
line-height:设置每行之间的距离。
表单标签
表单属性
name: 单选框、复选框的name相同，才算一组。否则会造成数据错乱。
value：代表选择项的值，组内的值不能重复，必须唯一，否则选择就没意义了。
form
使用action属性配合input的name和value，还要使用一个submit类型的input，可以达到表单提交。
<form action="baidu2.html">
<input type="checkbox" value="cb1" name="in1">fefe
<input type="checkbox" value="cb2" name="in2">fefe
<input type="text" name="itxt" value="">fefe
<input type="submit">提交
form>
select
下拉选择。为了多选一。和input多选框功能类似。
optgroup:给选项分组。看需求使用，不需要分组就不用。
option:代表每个选项。
<select name="fefe" id="sex">
<optgroup label="选项1">
<option value="1">
fefe
option>
<option value="2">
aaa
option>
optgroup>
<optgroup label="选项2">
<option value="1">
fefe
option>
<option value="2">
aaa
option>
optgroup>
select>
input
行级元素。
类型(type)：普通输入框、密码输入框、多选框、单选框、日期选择框、颜色选择器、文件选择器。
光标样式：颜色、粗细。
输入提示字符串：placeholder
输入框样式
border是input的默认边框。
outline是伪类作用下的边框。
label
标签为 input 元素定义标注（标记）。
包装input后，将for属性的值设置为input的id，点击label会自动选择input.
<div>
<input type="radio" value="man" name="sex" id="cb1"><label for="cb1">fefelabel>
div>
<div>
<input type="radio" value="woman" name="sex" id="cb2"><label for="cb2">fefelabel>
div>
button
作用是有点击效果，鼠标移上去会有特殊效果。
按钮的状态如下
默认状态
鼠标移上去的状态
按下状态
禁用状态
点击事件
设置onclick属性
<script>
function start(){
}
script>
<button onclick="start()">确定button>
列表(ul、ol、dl)
列表就是按水平或垂直排列的多个同样的布局。
有序列表、无序列表、自定义列表。
image
展示图片。
常用属性
src:设置图片的来源。本地图片路径url、网络url。
scale:缩放比例。大于1代表放大，小于1代表缩小。
alt:当图片无法显示时，在网页中给出的提示。
<img src="https://xxx.xxx.png" alt="对图片的描述"/>
常用样式
object-fit：图片的显示方式。
按比例缩放(contain,可能会有留白)、裁剪(cover)、填充(fill，可能会变形)。
img{
object-fit: cover;
}
video
视频播放器，
常用属性
src:视频地址url.
autoplay:自动播放。
span
包装文字，方便设置单独的效果。
table
表格。
块级和行内元素
用法
div{
display: inline;
}
block:独占一行，可以设置宽高
inline:不会独占一行，可以和其他行内元素并排在一行内，不能设置宽高。
inline-block:不会独占一行，还可以设置宽高。
选择器
分类
id、class、通用(*)、标签选择器。
关系选择器
父子选择器(>)、后代选择器（空格）、相邻兄弟选择器(加号)、通用兄弟选择器(~)。
组合选择器(逗号)
伪类选择器
使用:冒号
格式：
选择器 : 伪类
作用：满足冒号后面的条件时，样式才会生效被触发。
常用伪类
:hover
鼠标移上标签的范围时触发。
:checked
选中复选框或者单选框时触发。
:active
在标签上鼠标按住到放开这段时间触发。
:focus
input或者button被点击触发。
first-child
选择器所代表标签第一个子标签。
last-child
选择器所代表标签最后一个子标签。
nth-child()
选择器所代表标签子类的第n个标签，括号中指定位置。从1开始。
///div的第二个子标签
div:nth-child(2)
伪元素、伪类
只要跟鼠标有关的改变都是伪类。
要改变选择器内容的部分样式就是伪元素。
伪类
格式:
选择器 : 属性
常用场景：鼠标移动、点击、离开到标签上产生特殊的效果。
伪元素
作用：允许你对被选择元素的特定部分修改样式。比如改变选择器首字母的样式。
格式:
选择器 :: 属性
::first-line 第一行内容
::first-letter 首字母
::placeholder 输入提示
::selection 用户高亮选择后触发
常用通用样式
背景颜色
宽和高
阴影
边框
margin、padding
文字颜色
文字大小font-size
文字样式font-weight
文字字体font-family
文字装饰text-decoration
布局
float(浮动布局)
设置浮动
flost: left|right
取消浮动
clear-float: left|right|both
脱离正常文档流，后浮动的在先浮动人尾部。
浮动的元素处于没有浮动的上层。
position(定位)
确定标签在窗口中的具体位置。
absolute：绝对定位，相当于当前的可见区域窗口，元素会被移出正常文档流,以前占的位置会被后面的元素取代。
relative：相对定位，left、right、top、bottom相对于自身的位置。
fixed：固定定位。相对于整个浏览器窗口的位置。
sticky(吸附效果):默认会覆盖前一个sticky的标签。
static：元素默认就是静态，设置left、right、top、bottom不会生效。
Grid(格子布局)
grid-template-columns: repeat(1,100px);
grid-template-rows: repeat(2,100px);
justify-items:水平对齐
align-items:垂直对齐
flex(弹性布局)
justify-content: space-between;
align-items: center;
flex-direction(主轴方向): row;
flex-wrap(是否换行):wrap
子元素属性
设置子标签所占剩余空间的比例。
flex-grow: 2;
特点：所有子标签都会在一行排列，无视标签是块级还是行内元素。
主轴和纵轴
flex-direction
设置主轴方向
2个值：row-水平方向（默认值）。column-垂直方向
主轴和纵轴是相反的方向。
常用布局
flex-wrap:是否往主轴方向换行。
对齐
justify-content 根据主轴对齐
align-items 根据纵轴对齐
值：center flex-start flex-end space-around space-between space-evently
flex-grow:是flex容器的子标签的属性，它会告诉容器它自身的比例。
.container {
display: flex;
height: 2000px;
}
.d1{
flex-grow: 1;
}
.d2{
flex-grow: 3;
}
.d3{
flex-grow: 1;
}
11
1132
22
百分比布局
相对于父容器空间所占百分比。
div{
width: 50%;
}
对齐效果
CSS 布局 – 水平 & 垂直对齐 | 菜鸟教程 (runoob.com)
水平对齐
text-align
justify-content:
div中水平对齐
设置一个固定的width，使用margin:auto水平对齐。
inline
当多个inline或者inline-block需要水平对齐是，用vertical-align设置。
vertical-algin: top|middle|bottom
垂直对齐
align-items