HTML 速构指南

全栈小宗

已于 2025-02-07 21:51:20 修改

阅读量632

点赞数 16

文章标签： html5 前端

于 2025-02-04 17:15:18 首次发布

本文链接：https://blog.youkuaiyun.com/LM9277/article/details/145442326

版权

HTML

初识 HTML

HTML（HyperText Markup Language — 超文本标记语言）是一种用于创建网页的基础标记语言.

HTML 文档

说明：HTML 代码写在 html 文件中（ xxx.html ）

以下是 HTML 骨架：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" >
        <title>Document</title>
    </head>
    <body>
        <!-- 网页主体 -->
    </body>
</html>

html：整个网页
head：网页头部，用来存放给浏览器看的信息
body：网页主体，用来存放给用户看的信息，例如图片、文字

标签结构

标签要成对出现，中间包裹内容
<> 里放英文字母（标签名）
结束标签比开始标签多 /
标签分类：双标签和单标签

<div>这是一个盒子</div>
<p>这是一段文本</p>
<hr>
<br>

标签的关系

父子 or 并列关系：子级标签换行且缩进

<div class="dad">
    <div class="son"></div>
</div>

兄弟 or 并列关系：兄弟标签换行要对齐

<div class="one"></div>
<div class="two"></div>

注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查看代码
在 VSCode 中，添加 or 删除注释的快捷键：Ctrl + /

排版标签

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

文字加粗
字号逐渐减小
独占一行（换行）

h1 标签在一个网页中只能用一次
h2 ~ h6 没有使用次数的限制

段落标签

<p>这是一个段落</p>

显示特点

独占一行
段落之间存在间隙

换行和水平线

换行：br
水平线：hr

文本格式化标签

作用：为文本添加特殊格式，以突出重点
常见文本格式：加粗、倾斜、下划线、删除线等

标签名	效果
strong	加粗
em	倾斜
ins	下划线
del	删除线

标签名	效果
b	加粗
i	倾斜
u	下划线
s	删除线

说明：strong 、em 、ins 、del 标签自带强调含义（语义）

多媒体标签

路径

路径是指在查找文件时，从起点到终点经历的路线

相对路径

查找方式：从当前文件位置出发查找目标文件
符号含义
/ 表示进入某个文件夹里面
. 表示当前文件所在文件夹
.. 表示当前文件的上一级文件夹

绝对路径

查找方式：Windows 系统从盘符出发
提示：Windows 默认是 \ ，其他系统是 / ，建议统一写为 /

图像标签

作用：在网页中插入图片

<img src="url">

src 用于指定图像的位置和名称，是 img 的必须属性

图像属性

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字
title	提示文本	鼠标悬停在图片上时显示的文字
width	图片的宽度	值为数字
height	图片的高度	值为数字

属性语法

属性名 = "属性值"
属性与属性之间用空格隔开，不区分先后顺序

<img src="url" height='240px' width="320px">

超链接标签

作用：点击跳转到其他页面

<a href="http://www.baidu.com">点击跳转</a>

href 的属性值是跳转地址，是超链接的必须属性
超链接默认时在当前窗口跳转页面，添加 target = “_blank” 实现新窗口打开页面
拓展：开发初期，不确定跳转地址，则 href 属性值写为 # ，表示空链接，页面不会跳转，在当前页面刷新一次

音频标签

<audio src="url"></audio>

常用属性

属性	作用	特殊说明
src	指定音频的 url	支持格式: MP3 、Ogg 、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	浏览器一般会禁用自动播放功能

提示：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词

<audio src="url" controls loop autoplay></audio>

视频标签

<video src="url"></video>

常用属性

属性	作用	特殊说明
src	指定视频的 url	支持格式: MP4 、WebM 、Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	浏览器支持在静音状态自动播放

列表

作用：布局内容排列整齐的区域
列表分类：无序列表、有序列表、定义列表

无序列表

作用：布局排列整齐的不需要规定顺序的区域
标签：ul 嵌套 li ，ul 是无序列表， li 是列表条目

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

注意：

ul 标签里只能包裹 li 标签
li 标签里可以包裹任何内容

有序列表

作用：布局排列整齐的需要规定顺序的区域
标签：ol 嵌套 li ，ol 是有序列表，li 是列表条目

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

注意：

ol 标签里只能包裹 li 标签
li 标签里可以包裹任何内容

定义列表

标签：dl 嵌套 dt 和 dd ，dl 是定义列表， dt 是定义列表的标题，dd 是定义列表的描述

<dl>
    <dt>列表标题</dt>
    <dd>列表描述</dd>
</dl>

注意：

dl 里只能包含 dt 和 dd
dt 和 dd 里可以包含任何内容

表格

网页中的表格与 Excel 表格类似，用来展示数据

基本使用

标签：table 嵌套 tr ，tr 嵌套 td / th

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线

表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

提示：表格结构标签可以省略

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息
说明：

跨行合并，添加属性 rowspan
跨列合并，添加属性 colspan

注意：不能跨表格结构标签合并单元格（thead 、tbody 、tfoot）

表单

表单是一个包含表单元素的区域
标签：from 标签用于创建一个表单
作用：收集用户信息
使用场景：

登录页面
注册页面
搜索区域

input 标签

<input type="text">

input 标签 type 属性值不同，则功能不同

type 属性值	说明
text	文本框，用于属于单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

input 标签占位文本

占位文本：提示信息，文本框和密码框都可使用

<input type="text" placeholder="请输入用户名">

文本框和密码框都可以使用

单选框

常用属性

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个 (单选功能)
checked	默认选中	属性名和属性值相同，简写为一个单词

提示：name 属性值自定义

<input type='radio' name='gender' checked>男
<input type='radio' name='gender' >女

上传文件

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能

<input type="file" multiple>

多选框

多选框也叫复选框，默认选中：checked

<p>兴趣爱好:</p>
<input type="checkbox" checked>唱歌
<input type="checkbox">跳舞
<input type="checkbox">运动

下拉菜单

标签：select 嵌套 option ，select 是下拉菜单整体，option 是下拉菜单的每一项
注意：默认显示第一项，selected 属性实现默认选中功能

<select>
    <option>第一项</option>
    <option>第二项</option>
    <option>第三项</option>
    <!-- selected 属性实现默认选中功能 -->
    <option selected>第四项</option>
</select>

文本域

作用：多行输入文本的表单控制

<textarea>默认提示文字</textarea>

补充：

实际开发中，使用 CSS 设置文本域的尺寸
实际开发中，一般禁用右下角的拖拽功能

label 标签

作用：网页中，某个标签的说明文本
提示：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围

写法一
lable 标签只包裹内容，不包裹表单控件
设置 lable 标签的 for 属性值和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man">男</label>

写法二
使用 lable 标签包裹文字和表单控件，不需要属性

<label><input type="radio">女</label>

提示：支持 lable 标签增大点击范围的表单控件：文本框、密码框、单选框、下来菜单等

按钮

<button type="button">按钮</button>

type 属性值	说明
submit	提交按钮，点击后可以提交数据到后台
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合 JavaScript 使用