HTML 基础

子柒s

已于 2025-07-23 10:56:27 修改

阅读量1.2k

点赞数 13

CC 4.0 BY-SA版权

文章标签： html 前端

于 2025-07-23 09:45:09 首次发布

本文链接：https://blog.csdn.net/qq_68630091/article/details/149529785

标题目录

基本概念
注释
常用快捷键
转义符号
文本相关标签
分区元素
URL 路径
- 相对路径
- 绝对路径
表格
超链接
表单
音视频插入
图片的类型
总结

基本概念

HTML（Hyper Text Markup Language）超文本标记语言，负责网页的内容
超文本：除了文本以外，我们还可以向网页中插入图片、超链接、表格、表单、音频、视频等
HTML 由大量的标记/标签构成，分为：
- 双标记标签：<head></head>
- 单标记标签：<br/>或 <br>，两种写法都可以

完整的网页结构：

<!-- 表示当前文档是html5版本 让浏览器使用h5的规范解析 -->
<!DOCTYPE html>
<!--表示网页的开始与结束 lang="en"表示网页是一个英文网站 zh表示中文-->
<html lang="en">
<!--网页头部,存放一些配置信息-->
<head>
    <meta charset="UTF-8"> <!--配置编码,为了认识中文-->
    <title>我是网页标题</title> <!-- 配置网页的标题 -->
</head>
<body> <!--网页展示的内容-->
第一个网页的内容
</body>
</html>

HTML 文件的后缀名是 .html 或 .htm，会按顺序从上往下、从左往右依次解析执行
HTML 属性
属性：也称为特征，描述标签某一方面的特点
html 有很多的属性和值，用来修改元素的样式和状态
写法：<标签属性名 1=“属性值 1” 属性名 2=“属性值 2”></标签>
要求：
1. 属性的声明必须在开始标签中
2. 一个元素可以有多个属性，多个属性不区分先后顺序，使用空格隔开即可
3. 属性值要包裹在双引号中
4. 单值属性：只有一个与属性名同名值，值可以省略不写，如 readonly 只读 disabled禁用

注释

用来解释代码且不会执行的文本
注释格式：
快捷键： Ctrl+/ 添加注释，再按一次取消注释
注释不能嵌套注释，也不可以写在标签里！

常用快捷键

Ctrl + D 复制当前行
Ctrl + Y 删除当前行
Home 光标移至行首
End 光标移至行尾
Shift + Enter 光标在任意位置都可以向下添加一个空白行
Shift + Alt + 上下键快速上下调整当前行的位置
选中多行 Tab 统一设置缩进
Shift + Tab 回退缩进

转义符号

字符	命名实体	数字实体	说明
			不间断空格（防止自动换行）
<	<	<	小于号（标签开始符）
>	>	>	大于号（标签结束符）
&	&	&	和号（用于转义其他实体）
"	"	"	双引号（在属性值中使用）
’	'	'	单引号（在属性值中使用）

文本相关标签

<b>加粗文字</b> 加粗文字
<i>斜体文字</i> 斜体文字
<u>下划线文字</u> 下划线文字
<s>删除线文字</s> ~~删除线文字~~
<hn>n级标题</hn> n为1到 6 独占一行，字体加粗，有垂直行间距
<p>段落</p> 独占一行，有垂直行间距
<hr> 独占一行的灰色水平分割线

空格折叠现象：连续的多个空格或换行会折叠成一个空格显示，使用<br>换行
生成假文：输入 lorem 按 Tab 补全即可

分区元素

分区标签：可以理解为一个区域，对多个具有相同或相似结构的标签进行统一管理

<div></div> 行内分区：独占一行 div作为典型代表,默认宽度为父级宽度的100%,高度为0靠内容撑起来
<span></span> 块级分区：不换行,用于选中一行中的一部分内容

HTML5 新增了一些带有语义的分区标签

<header></header>定义网页或一个区域的头部
<nav></nav>定义网页的导航部分
<main></main>定义网页的主要内容
<section></section>定义网页的一个区块或章节
<article></article>定义网页中独立完整的内容，比如博客文章或新闻报道
<aside></aside>定义网页的侧边栏或者附属信息
<footer></footer>定义网页或一个区域的页脚部分

<!-- 目前div的使用频率较高   -->
<div class="header">顶部条</div>
<div class="nav">导航栏</div>
<div class="aside">侧边栏</div>
<div class="main">主体</div>
<div class="article">文章</div>
<div class="footer">尾部</div>
<hr>
<!-- h5新增的一些带有语义的分区标签 -->
<header>头部</header>
<nav>导航栏</nav>
<main>主体</main>
<article>文章</article>
<section>区域</section>
<aside>侧边栏</aside>
<footer>页脚</footer>

其实在用户看来是没有区别的，只不过这样会大大提高代码的可读性与模块复用性、也有利于检索

URL 路径

URL（Uniform Resource Locator）统一资源定位符，俗称路径，用来标识资源的位置

相对路径

从当前 html 文件的位置出发去找资源
如果 html 与资源在同一个目录下，直接写资源的名字，如：1.png
如果资源在 html 的下一级目录，先写目录名再写目录里的资源，如：img/2.png
如果资源在 html 的上一级目录，先回到上一级再找资源，如： . ./3.png

绝对路径

从根目录处开始找资源，不需要当前文件的位置

优点：节省本地服务器的存储空间
缺点：资源不稳定，如果远程服务器删除此资源，本地服务器就引用不到了，且并不安全
网络资源：从协议开始，如：
https://cn.bing.com/images/search?q=%e5%9b%be%e7%89%87&id=457EC80FCD5EE9AB67B2B3E8F5624312D6F6400B&FORM=IACFIR

表格

<table></table> 表示整个表格包含表格的全部内容
<tr></tr> 表示表格中的一行 table row
<td></td> 表示表格中的一个单元格 table datacell
单元格是真正存放数据的地方，一行有几个单元格，表示一行有几列
<caption></caption> 表格的标题
<th></th> 行/列的标题文字加粗居中显示

表格属性：

border=“1px” 给表格添加边框
style=“border-collapse: collapse” 表格默认的边框是带有间距的，想去掉可以加这句代码
合并单元格（写在 td 里，被合并的单元格一定得删掉！）
colspan="n"跨列从当前单元格开始，向右合并 n 个单元格（n 也包含当前单元格）
rowspan="n"跨行从当前单元格开始，向下合并 n 个单元格（n 也包含当前单元格）

代码示例：

<table border="1px" style="border-collapse: collapse">
  <caption>购物车</caption>
  <tr>
    <th>商品编号</th>
    <th>商品名称</th>
    <th>商品价格</th>
  </tr>
  <tr>
    <td style="text-align: center">1</td>
    <td>荣耀X60</td>
    <td>2601</td>
  </tr>
  <tr>
    <td style="text-align: center">2</td>
    <td>三折叠 怎么折都有面</td>
    <td>27399</td>
  </tr>
  <tr>
    <td>总价</td>
    <td colspan="2">30000</td>
  </tr>
</table>

效果：
在这里插入图片描述

超链接

<a> 标签用于向页面插入超链接

href 表示要链接的资源路径
超链接可以链接网络与内部资源，还可以链接图片
通过 a 标签包裹 img 标签可以实现图片超链接
锚点：先给对应的 html 内容添加 id，再通过#id 值选中，即可跳转到锚点位置，#表示直接跳转到页面顶部

<!-- 跳转到本地资源 -->
<a href="p2_文本处理.html">跳转到今日的第2个页面</a>
<a href="p4_图片插入.html">跳转到今日的第4个页面</a>
<!-- 跳转到外部资源 -->
<a href="https://www.baidu.com/">百度首页</a>
<a href="https://www.tmooc.cn/">TMOOC首页</a>
<!-- 跳转至本地的图片资源 -->
<a href="2.png">即将打开一张图片</a>
<!-- 图片链接   -->
<a href="https://www.baidu.com/">
  <img src="2.png" alt="" width="300px">
</a>
<hr>
<!--锚点 书签-->
<h1>西游记</h1>
<a href="#c1">快速跳转至第1章</a>
<a href="#c2">快速跳转至第2章</a>
<a href="#c3">快速跳转至第3章</a>
<hr>
<h3 id="c1">第一章 石猴出世</h3><!--p*30>lorem-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum
    error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique
    veritatis vero.</p>
<h3 id="c2">第二章 蓬莱学艺</h3><!--p*30>lorem-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum
    error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique
    veritatis vero.</p>
<h3 id="c3">第三章 龙宫借宝</h3><!--p*30>lorem-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae distinctio dolorem doloremque earum
    error fugit in ipsum itaque laboriosam libero modi molestias necessitatibus, nulla quibusdam quos similique
    veritatis vero.</p>
<a href="#">快速跳转至页面顶部</a>

表单

表单提供了一些可视化的输入控件，会自动收集整理用户输入的内容，并提交给服务器
<form></form> 表示表单的开始与结束

属性	描述
action=“url”	向哪个地址提交数据，如果不写会提交给当前页面，也可以写一个#号占位
type	控件类型
name	控件名
value	可以设置输入框的默认值，如果是按钮，则设置的是按钮上显示的文本
placeholder	提示占位文本
maxlength	设置输入的最大长度
readonly	设置文本控件只读，能看不能改，数据可以提交
disabled	设置控件为禁用(控件变为灰色的了,且数据不可以提交)
checked	单/多选框使用此属性可以设置指定选项被默认选中

<input type="text"> 文本输入框
<input type="password"> 密码框
<input type="radio"> 单选框 注意设置name与value属性！
<input type="checkbox">多选框 注意设置name与value属性！
<input type="date">日期
<input type="file">文件
<input type="color">颜色
<input type="range">范围
<input type="submit" value="提交按钮">    
<input type="reset" value="重置按钮">    
<input type="button" value="普通按钮">

按钮的另外一种写法：

<button>按钮</button>

下拉选框： selected 可以设置默认选中

<select name="city">       
  <option value="1" selected>北京</option>        
  <option value="2">上海</option>        
</select>

label 关联控件：用于 form 中文本和控件的关联，单击文本如同单击控件

<input type="checkbox" id="agree">    
<label for="agree">我同意相关的服务协议</label>

多行文本域：用于输入多行文本内容，常用于留言板意见栏等

resize：none 不允许拖拽修改多行文本域的大小
rows 设置行数(高度) cols设置列数(宽度)但这两个属性不推荐后期可以用CSS做

<textarea style="resize: none;" rows="4" cols="50"></textarea>

总体代码：

<body>
    <!--form表示整个表单 action="#"表示将收集到的数据提交至当前页-->
    <!-- name设置控件的名字,不设置名字的控件无法提交值 -->
    <!--input控件: type属性用来设置控件的类型
       text文本框 password密码框 radio单选框 checkbox复选框
       date日期 color颜色 range范围 file文件
       submit提交按钮 reset重置按钮 button普通按钮-->
    <form action="#">
        姓名1:<input type="text" name="uname1"> <br>
        姓名2:<input type="text" name="uname2"> <br>
        <!-- value默认用来保存控件的值,也可以用于设置输入框的默认值 -->
        姓名3:<input type="text" name="uname3" value="rose"> <br>
        <!-- 单值属性:readonly只读(只能看不能改)  disabled禁用(不能改,且无法提交值)  -->
        姓名4:<input type="text" name="uname4" value="rose" readonly> <br>
        姓名5:<input type="text" name="uname5" value="rose" disabled> <br>
        <!-- placeholder占位提示文本 -->
        姓名6:<input type="text" name="uname6" placeholder="请输入用户名"> <br>
        <hr>
        密码:<input type="password" placeholder="请输入密码" name="pwd" maxlength="6"> <br>
        <!-- 多个单选选项必须设置相同的name才可以被分到同一组,实现单选!
             每个选项必须设置value才能提交值,不然提交的值都是on -->
        性别:
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="0" checked>女
        <br>
        爱好:
        <input type="checkbox" name="hobby" value="cf">吃饭
        <input type="checkbox" name="hobby" value="sj" checked>睡觉
        <input type="checkbox" name="hobby" value="dyx" checked>打游戏
        <input type="checkbox" name="hobby" value="java">学Java
        <br>
        生日:<input type="date" name="birthday"> <br>
        颜色:<input type="color" name="lc"> <br>
        范围:<input type="range" name="fw"> <br>
        文件:<input type="file" name="wj">
        <br>
        喜欢的城市:<select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="cc" selected>长春</option>
            <option value="gz">广州</option>
        </select>
        <br>
        <!-- 关联效果:点击文字即可选中复选框 -->
        <input type="checkbox" id="ok">
        <label for="ok">我同意以上协议</label>
        <br>
        <!-- 关联效果:点击文字即可选中输入框,且输入框有输入光标 I -->
        <label for="nickname">昵称:</label>
        <input type="text" id="nickname">
        <br>
        <!-- 多行文本域 -->
        留言板:<textarea cols="30" rows="3" style="resize: none;">请留言~</textarea>
        <hr>
        <input type="submit" value="点我提交">
        <input type="reset" value="点我重置">
        <input type="button" value="普通按钮">
        <button>h5新按钮</button>
    </form>
</body>

必须掌握：

题目	答案
value加在输入框上，是设置什么?	设置显示的默认值,用户输入的值也保存在value属性中
value加在按钮上，是设置什么?	设置按钮上显示的文字
value加在单选/多选/下拉选框选项上,是设置什么?	设置选中当前选项时提交的值
只读/禁用属性是什么?有什么区别?	readonly disabled 都是单值属性，都只允许看，不允许编辑，但禁用无法提交值
怎么设置单选/多选选项的默认选中?	checked单值属性
怎么设置下拉选框选项的默认选中?	selected单值属性
写单选时，必须要写的两个属性是什么?	name：将所有选项分到同一组；value：不然提交的是on

音视频插入

音频标签<audio>
视频标签<video>

src= “插入资源的路径”
controls 显示播放控件单值属性
muted 设置静音，必须设置静音才能自动播放单值属性
autoplay 自动播放单值属性
loop 循环播放单值属性

<!--音频插入-->
<audio src="img/bird.mp3" controls></audio>
<!--视频插入-->
<video src="img/wdsj.mp4" style="width:500px;" controls muted autoplay loop></video>