HTML基础知识点

发布时间：2023-05-31 文章分类：WEB开发, 电脑百科投稿人：李佳字号：默认 | 大 | 超大打印

1、HTML基础

1.1、什么是网页？

网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。

1.2、什么是HTML？

HTML 指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。

1.3、常用的浏览器有哪些？

常用的五大浏览器有：IE浏览器、火狐浏览器（Firefox）、g谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）

浏览器	内核	备注
IE	Trident	IE、猎豹安全浏览器、360急速浏览器、百度浏览器
Firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera	Blink	Blink其实是Webkit的分支

1.4、什么是web标准？

web 标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。

1.5、web标准的构成

标准	作用
结构	结构用于对网页元素进行整理和分类，主要指的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，主要指的是Javascript

1.6、web标准的好处有哪些？

提高兼容性：对于浏览器开发商和web程序开发人员在开发新的应用程序时遵守指定的标准更利于web的发展。
提高开发效率：开发人员按照web标准制作网页，这样对于开发者来说就更简单了，可以很容易了解彼此的代码。
跨平台：使用web标签，将确保所有浏览器正常的显示网页，无需费时重写。
加快网页解析速度：遵守web标准可以使网页更利于搜索引擎搜索。
易于维护：页面的样式和布局信息保存在单独的CSS文件中，想改变页面外观时，仅需要修改CSS文件即可。

2、HTML基本标签

2.1、HTML页面固定结构

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主题内容
    </body>
</html>

html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题

2.2、HTML标签分类

2.2.1 按闭合特征分类

闭合标签：由开始标签和结束标签共同组成，成对出现；常见的闭合标签有<div></div><p></p>、<span></span>等。标签之间的关系可以存在并列及嵌套关系。
单标签：指没有内容的标签，在开始标签中自带闭合标识符。常见的单标签有<img/>、<hr/>、<link/>、<meta/>、<input/>、<br/>等。

2.2.2 按显示模式分类

块级元素：块级元素是指本身属性为display: block的元素。
行内元素：行内元素是指本身属性为display: inline的元素，其宽度随着元素的内容变化而变化，也叫内联元素。
行内块元素：行内块级元素是指本身属性为display: inline-block的元素

块级元素特点：

每一个块级元素独占一行，从上到下排布。
块级元素可以直接控制宽高。
不设置宽度的情况下，块级元素的宽度是其父元素内容的宽度。
不设置高度的情况下，块级元素的高度是他本身内容的高度。

常见的块级元素：

标签	描述
div	常见的块级容器，也是css和layout的主要标签
h1~h6	一二三四五六级标题
hr	水平分割线
menu	菜单列表
ol、ul、li	有序列表、无序列表、列表项
dl、dt、dd	自定义列表、定义分类、类项描述
table	表格
address	定义地址
p	段落
form	交互表单

行内元素特点：

行内元素会和其他元素从左到右的显示在一行。
行内元素不能直接设置宽高，只可以设置内外边距的水平方向的值。也就是说，对行内元素设置margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的。垂直方向的margin和padding是无效的。
行内元素只能容纳文本或者其他行内元素，不允许在行内元素中嵌套块级元素
行内元素的宽高是由内容本身大小决定的。

常见行内元素：

标签	描述
a	锚点，链接标签
span	常用的行内标签容器，定义文本内区块
sup	上标文本
sub	下标文本
strong	加粗
ins	下划线
em	倾斜
del	删除
label	input元素的标注

行内块级元素特点：

和其他行内或行内块级元素放置在同一行上
元素的宽高和内外边距都可以设置

常见行内块级元素：

标签	描述
button	按钮
input	输入框
textarea	多行文本输入框
img	图片
select	下拉列表

3、路径的介绍

绝对路径：指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如：D:\BaiduNetdisk\BaiduNetdisk.exe
相对路径：从当前文件开始出发找目标文件的路径。

3.1、相对路径的三种情况

同级目录：直接写目标文件的名字，vscode在前面加./快速查找
下级目录：直接写文件夹名/目标文件名字！，vscode在前面加在前面加./快速查找
上级目录：…/目标文件的名字

4、HTML媒体和链接

4.1、 img图片标签

属性	说明
src	指定需要展示的图片路径
alt	替换文本，当图片加载失败时，才显示的文字
title	提示文本，当鼠标悬停时，才显示的文字
width	图片的宽度
height	图片的高度

4.2 audio音频标签

属性	说明
src	指定需要播放的音频路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

4.3 video视频标签

属性	说明
src	指定需要播放的视频路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop	循环播放

4.4 a链接标签介绍

属性	说明
href	目标网页的路径
target	跳转目标网页的打开形式。_self：默认值，在当前窗口跳转；_blank：在新窗口中跳转

5、列表标签

5.1、无序列表

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

代码示例

<ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>凤梨</li>
    <li>葡萄</li>
    <li>桃子</li>
</ul>

效果

香蕉
苹果
凤梨
葡萄
桃子

5.2、有序列表

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

代码示例

<ol>
    <li>斗破苍穹</li>
    <li>斗罗大陆</li>
    <li>遮天</li>
    <li>盘龙</li>
    <li>仙逆</li>
</ol>

效果

斗破苍穹
斗罗大陆
遮天
盘龙
仙逆

5.3、自定义列表

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

代码示例

<dl>
    <dt>购物指南</dt>
    <dd>购物流程</dd>
    <dd>会员介绍</dd>
    <dd>生活旅行</dd>
    <dd>常见问题</dd>
</dl>

效果

购物指南

购物流程

会员介绍

生活旅行

常见问题

6、table表格

6.1、表格的标签

标签名	说明
table	表格整体，可用于包裹caption、thead、tbody、tfoot或直接包裹多个tr
caption	表格整体大标题，默认在表格整体顶部居中位置显示
thead	表格头部，用于包裹th
tbody	表格主体，用于包裹td
tfoot	表格底部，用于包裹td
tr	表格每行，可用于包裹th,td
th	表格小标题，通常用于表格第一行，默认内部文字加粗并且居中显示
td	表格单元格，可用于包裹内容

代码示例

<table>
    <caption>成绩单</caption>
    <thead>
        <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>诸葛亮</td>
        <td>100分</td>
        <td>98分</td>
        <td>99分</td>
        </tr>
        <tr>
        <td>司马懿</td>
        <td>97分</td>
        <td>98分</td>
        <td>99分</td>
        </tr>
        <tr>
        <td>周瑜</td>
        <td>97分</td>
        <td>96分</td>
        <td>98分</td>
        </tr>
        <tr>
        <td>贾诩</td>
        <td>97分</td>
        <td>98分</td>
        <td>99分</td>
        </tr>
        <tr>
        <td>郭嘉</td>
        <td>99分</td>
        <td>99分</td>
        <td>99分</td>
        </tr>
    </tbody>
    <tfoot>
        <td>平均分</td>
        <td>98分</td>
        <td>98.2分</td>
        <td>98.8分</td>
    </tfoot>
</table>

效果

成绩单
姓名	语文	数学	英语
诸葛亮	100分	98分	99分
司马懿	97分	98分	99分
周瑜	97分	96分	98分
贾诩	97分	98分	99分
郭嘉	99分	99分	99分
平均分	98分	98.2分	98.8分

6.2、表格相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度
align	left、right、center	表格水平位置，也可以用于tr和td中，表示的是单元格内容的水平位置
bordercolor	rbg、rbga、十六进制	边框的颜色
cellpadding	单元格的内容和边框之间的距离
cellspacing	两个单元格之间距离的大小
bgcolor	表格的背景色，也可以用于tr和td
background	表格的背景图片，也可以单独的用于某一个单元格

6.3、表格合并单元格

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

代码示例

<table>
    <caption>成绩单</caption>
    <thead>
        <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>诸葛亮</td>
        <td>100分</td>
        <td rowspan="2">98分</td>
        <td rowspan="2">99分</td>
        </tr>
        <tr>
        <td>司马懿</td>
        <td rowspan="3">97分</td>
        </tr>
        <tr>
        <td>周瑜</td>
        <td>96分</td>
        <td>98分</td>
        </tr>
        <tr>
        <td>贾诩</td>
        <td>98分</td>
        <td>99分</td>
        </tr>
        <tr>
        <td>郭嘉</td>
        <td align="center" colspan="3">99分</td>
        </tr>
    </tbody>
    <tfoot>
        <td>平均分</td>
        <td>98分</td>
        <td>98.2分</td>
        <td>98.8分</td>
    </tfoot>
</table>

效果

成绩单
姓名	语文	数学	英语
诸葛亮	100分	98分	99分
司马懿	97分	98分	99分
周瑜		96分	98分
贾诩		98分	99分
郭嘉	99分
平均分	98分	98.2分	98.8分

7、form表单

7.1、 input系列标签的基本介绍

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交表单
input	reset	重置按钮，用于重置表单
input	button	普通按钮，默认无功能，之后配合js添加功能

7.2、 button系列标签的基本介绍

标签名	type属性值	说明
button	submit	提交按钮。点击之后提交数据给后台服务器
button	reset	重置按钮。点击之后恢复表单默认值
button	button	普通按钮。默认无功能

7.3、 select下拉菜单标签

标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中

代码示例

<select>
    <option>长海</option>
    <option selected>重庆</option>
    <option>西安</option>
</select>

效果

长海重庆西安

7.4、 textarea文本域标签

常见属性：

cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

7.5、 label标签

使用场景：常用于绑定内容与表单标签的关系

使用方法一

使用label标签把内容包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

使用方法二

直接使用label标签把内容和表单标签一起包裹起来
需要把label标签的for属性删除即可

8、常见字符实体

显示结果	描述	实体名称
`' '`	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
’	撇号	`'`
¢	分（cent）	`¢`
£	榜（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
©	版权（copyright）	`©`

9、有语义的布局标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

标签 HTML, 基础, 知识

显示结果	描述	实体名称
`' '`	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
’	撇号	`'`
¢	分（cent）	`¢`
£	榜（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
©	版权（copyright）	`©`

显示结果	描述	实体名称
`' '`	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
’	撇号	`'`
¢	分（cent）	`¢`
£	榜（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
©	版权（copyright）	`©`

1、HTML基础

1.1、什么是网页？

1.2、什么是HTML？

1.3、常用的浏览器有哪些？

1.4、什么是web标准？

1.5、web标准的构成

1.6、web标准的好处有哪些？

2、HTML基本标签

2.1、HTML页面固定结构

2.2、HTML标签分类

2.2.1 按闭合特征分类

2.2.2 按显示模式分类

3、路径的介绍

3.1、 相对路径的三种情况

4、HTML媒体和链接

4.1、 img图片标签

4.2 audio音频标签

4.3 video视频标签

4.4 a链接标签介绍

5、列表标签

5.1、 无序列表

5.2、 有序列表

5.3、 自定义列表

6、table表格

6.1、 表格的标签

6.2、 表格相关属性

6.3、 表格合并单元格

7、form表单

7.1、 input系列标签的基本介绍

7.2、 button系列标签的基本介绍

7.3、 select下拉菜单标签

7.4、 textarea文本域标签

7.5、 label标签

8、常见字符实体

9、有语义的布局标签

3.1、相对路径的三种情况

5.1、无序列表

5.2、有序列表

5.3、自定义列表

6.1、表格的标签

6.2、表格相关属性

6.3、表格合并单元格

显示结果	描述	实体名称
`' '`	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
"	引号	`"`
’	撇号	`'`
¢	分（cent）	`¢`
£	榜（pound）	`£`
¥	元（yen）	`¥`
€	欧元（euro）	`€`
§	小节	`§`
©	版权（copyright）	`©`