HTML基础知识点-优快云博客

本文介绍了HTML的基础结构，包括文档流、块级与行内元素、行内块元素、盒子模型以及常用的标签、语义化、表单元素、按钮行为、列表、图像和视频属性。还详细讲解了CSS布局技巧，如浮动、定位、Grid和Flex布局，以及百分比布局和对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>Document</title>
</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">fefe</label>
</div>
<div>
    <input type="radio" value="woman" name="sex" id="cb2"><label for="cb2">fefe</label>
</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;
}
<div class="container">
    <div class="d1">11</div>
    <div class="d2">1132</div>
    <div class="d3">22</div>
</div>