HTML笔记
AI-摘要
切换
Tianli GPT
AI初始化中...
介绍自己
生成本文简介
推荐相关文章
前往主页
前往tianli博客
HTML
HTML是什么？ HyperText Markup Language(超文本标记语言)
HTML标签(元素)
标签也可以称为元素，是HTML的基本组成单位。
标签名不区分大小写，但是推荐小写，因为小写更加规范。
<marquee>测试html文件</marquee>
<!-- marquee -->
是标签名
<!-- <marquee> -->
是起始标签
<!-- </marquee> -->
是结束标签
<!-- 测试html文件 -->
是标签体
一般的标签都是有始有终的叫做"双标签"，但是也有一些特殊的标签没有结束标签。叫做"单标签"例如：
<input />
标签嵌套
<marquee>
测试html文件
<input />
</marquee>
标签属性
标签属性用于给标签提供附加信息。
可以写在：起始标签或单标签中
<marquee loop="1" bgcolor="orange">
测试html文件
<input type="password">
</marquee>
<标签名 属性名="属性值" 属性名="属性值"></标签名>
一般的标签属性都具有属性名，但是也有一些标签属性只有属性值。例如：
<input disabled />
标签属性不能重复，如果有重复遵循先入为主。
- 不同的标签，有不同的属性；也有一些通用属性。
- 属性名、属性值都不能乱写，都是W3C规定好的。
HTML结构
<html>
<head>
<!-- 页签/标题 -->
<title>HTML结构</title>
</head>
<body>
<!-- 呈现式标签 -->
<marquee>尚硅谷</marquee>
</body>
</html>
HTML文档声明
<!DOCTYPE html>
<html>
<head>
<!-- 页签/标题 -->
<title>HTML文档声明</title>
</head>
<body>
<!-- 呈现式标签 -->
<marquee>尚硅谷</marquee>
</body>
</html>
文档声明必须放在第一行，用于声明以下的是 HTML5 代码。文档声明只算是一种标记，不是标签。
HTML编码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- 页签/标题 -->
<title>HTML编码</title>
</head>
<body>
<!-- 呈现式标签 -->
<marquee>尚硅谷</marquee>
</body>
</html>
编写代码统一采用 UTF-8 编码。
为了让浏览器在渲染 html 文件时，不犯错误，可以通过meta标签配合 charset 属性指定字符编码。
HTML设置语言
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<!-- 页签/标题 -->
<title>HTML设置语言</title>
</head>
<body>
<!-- 呈现式标签 -->
<marquee>尚硅谷</marquee>
<marquee>I love you</marquee>
</body>
</html>
HTML排版标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML排版标签</title>
</head>
<body>
<!-- 一级标签一般只有一个 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>段落标签</p>
<p>正文标签</p>
<!-- div标签 -->
<!-- div标签是一个块级标签，用于将文档分割为独立的部分 -->
<div>
<p>div标签</p>
<p>div标签</p>
</div>
</body>
</html>
HTML块级元素和行内元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML块级元素和行内元素</title>
</head>
<body>
<!-- 块级元素 特点：独占一行 -->
<!-- <marquee>这是一个跑马灯</marquee>
<marquee>这是一个跑马灯</marquee>
<h1>一级标题</h1>
<h1>一级标题</h1>
<p>段落标签</p>
<p>段落标签</p>
<div></div>
<div></div> -->
<!-- 行内元素 特点：不独占一行 -->
<!-- <input type="text">
<input type="text">
<span>span标签</span>
<span>span标签</span> -->
<!-- 块级元素和行内元素的区别 -->
<h1>块级元素和行内元素的区别</h1>
<div>
<h2>区别1</h2>
<p>块级元素独占一行，行内元素不独占一行</p>
<h2>区别2</h2>
<p>行内元素中能写：行内元素，但不能写：块级元素</p>
<h2>区别3</h2>
<p>块级元素中几乎什么都能写</p>
<h2>特殊规则</h2>
<div>
<p>h1-h6不能嵌套</p>
<p>p标签中不能写块元素</p>
</div>
</div>
</body>
</html>
HTML常用文本标签
文本标签通常都是行内元素。
<!-- em标签，语义为着重阅读的内容 -->
<em></em>
<!-- strong标签，语义为十分重要的内容 -->
<strong></strong>
<!-- span标签，没有语义，用于包裹短语的通用容器 -->
<span></span>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML_常用文本标签</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
<p>预防电信诈骗，请安装：<em>国家反诈中心app</em>。</p>
<p>当我们出门时，一定要<strong>关好门窗</strong>。</p>
<p>前端三个框架为：<span>Angular、React、Vue</span>。</p>
</body>
</html>
HTML不常用的文本标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML不常用的文本标签</title>
</head>
<body>
<p>
<!-- cite 作品标题 -->
这首<cite>《光辉岁月》</cite>，非常的好听！
</p>
<p>
<!-- dfn 特殊术语 -->
<dfn>耗子尾汁</dfn>，是一个网络流行语，意思同<dfn>好自为之</dfn>。
</p>
<p>
<!-- del/ins 删除的文本和插入的文本 -->
商品原价：<del>199</del>，限时秒杀：<ins>99</ins>。
</p>
<p>
<!-- sub/sup 下标与上标文字 -->
水的化学方程式是：H<sub>2</sub>O，8的三次方是这么写的：8<sup>3</sup>。
</p>
<p>
<!-- code 一段代码 -->
等学习了JS，这段代码很有意思：<code>alert(1)</code>。
</p>
<p>
<!-- samp 从正常的上下文中，将某些内容提取出来，例如：标识设备输出 -->
手机突然提示，<samp>支付宝到账100万元！</samp>
</p>
<p>
<!-- kbd 键盘文本，表示文本是通过键盘输入的 -->
保存的快捷键是：<kbd>ctrl + s</kbd>。
</p>
<p>
<!-- abbr 缩写，最好配合上title属性 -->
<abbr title="英雄联盟">LOL</abbr>这个游戏非常好玩。
</p>
<p>
<!-- bdo 更改文本方向，要配合dir属性，可选值：ltr(默认值)、rt1 -->
你是年少的欢喜，这句话反过来念就是：<bdo dir="rtl">你是年少的欢喜</bdo>。
</p>
<p>
<!-- var 标记变量，可以与code标签一起使用 -->
等学了JS，我们就知道要这样定义变量了<code>let <var>a</var> = 1</code>
</p>
<p>
<!-- small 附属细则，例如：包括版权、法律文本。——很少使用 -->
<small>本网站所有资料、图标仅供参考，涉及投资项目所造成的盈亏与本网站无关。</small>
</p>
<p>
<!-- b 摘要中的关键字、评论中的产品名称。——很少使用 -->
我也买过<b>罗技GPW二代</b>这个鼠标，确实很好用！
</p>
<p>
<!-- i 人物的思想活动，呈现字体图标 -->
猪头声嘶力竭地喊着：<i>“燕子，没有你我怎么活啊！”</i>
</p>
<p>
<!-- u 与正常内容有反差文本，例如：错的单词、不合适的描述等。——很少使用-->
张三把“你好”的英文写成了：<u>heelo</u>，这是不对的！
</p>
<p>
<!-- q 短引用 ——很少使用 -->
屈原曾经说过：<q>路漫漫其修远兮，吾将上下而求索。</q>
</p>
<!-- blockquote标签和address标签是块元素 -->
<p>
<!-- blockquote 长引用 ——很少使用 -->
有一首歌，歌词是这样的：<blockquote>后来，我总算学会了如何去爱；可惜你早已远去消失在人海；后来终于在眼泪中明白，有些人一旦错过就不在；</blockquote>
</p>
<p>
<!-- address 地址信息 -->
我们学校的地址是：<address>北京宏福科技园</address>
</p>
</body>
</html>
HTML图片标签
像素(px)是一种单位，表示图片的大小。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML图片标签</title>
</head>
<body>
<!-- img是一个行内元素，src是图片的地址 alt是图片注释 -->
<img width="100" alt="作者头像" src="auther.webp" />
<img width="100" alt="作者头像" src="auther.webp" />
</body>
</html>
常见图片格式
1.jpg格式
概述：扩展名为 .jpg 或 .jpeg，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。
主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等。——该格式网页中很常见。
2.png格式
概述：扩展名为 .png，是一种无损的压缩格式，能够更高质量的保存图片。
主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如：公司logo图、重要配图等。
3.bmp格式
概述：扩展名为 .bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片。（网页中很少使用）
4.gif格式
概述：扩展名为 .gif，仅支持256种颜色，色彩呈现不是很完整。
主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
使用场景：网页中的动态图片。
5.webp格式
概述：扩展名为 .webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
使用场景：网页中的各种图片。
6.base64格式
- 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
- 原理：把图片进行 base64 编码，形成一串文本。
- 如何生成：靠一些工具或网站。
- 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
- 使用场景：一些较小的图片，或者需要和网页一起加载的图片。
HTML超链接
代码中的多个空格、多个回车，都会被浏览器解析成一个空格。
a标签是行内元素，但是a标签可以包裹除它自身外的任何元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML超链接</title>
</head>
<body>
<!-- a标签是超链接标签，target属性用于定义跳转的具体位置-->
<!-- _self：在本页签中打开 -->
<!-- _blank：在新页签中打开 -->
<a target="_blank" href="https://www.happyladysauce.cn">我的博客</a>
<a target="_self" href="https://www.happyladysauce.cn">我的博客</a>
<a target="_parent" href="https://www.happyladysauce.cn">我的博客</a>
<a target="_top" href="https://www.happyladysauce.cn">我的博客</a>
</body>
</html>
文件超链接
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML超链接跳转文件</title>
</head>
<body>
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/Apex.mp4">Apex.mp4</a>
<a href="./resource/home.jpg">home.jpg</a>
<!-- 其他文件例如.gif .pdf等等 -->
<!-- 浏览器不能直接打开的文件，会触发自动下载 -->
<a href="./resource/E2E-Extended-v1.55.0.zip">E2E-Extended-v1.zip</a>
<!-- 强制触发下载 download属性里是文件的下载名称 -->
<a href="./resource/Apex.mp4" download="Apex精彩剪辑">下载Apex精彩剪辑</a>
</body>
</html>
跳转锚点
<!--
第一种跳转锚点
<a href="#name图1">看图1</a>
<a name="name图1"></a>
第二种跳转锚点
<a href="#图1">看图1</a>
<p id="图1">看图1</p>
-->
锚点是网页中的一个标记点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML超链接跳转锚点</title>
</head>
<body>
<a href="#name图1">看图1</a>
<a href="#name图2">看图2</a>
<a href="#name图3">看图3</a>
<a href="#name图4">看图4</a>
<a href="#图1">看图1</a>
<a href="#图2">看图2</a>
<a href="#图3">看图3</a>
<a href="#图4">看图4</a>
<a name="name图1"></a>
<p id="图1">看图1</p>
<img src="./resource/图片/图1.jpg" alt="图1" />
<a name="name图2"></a>
<p id="图2">看图2</p>
<img src="./resource/图片/图2.jpg" alt="图2" />
<a name="name图3"></a>
<p id="图3">看图3</p>
<img src="./resource/图片/图3.jpg" alt="图3" />
<a name="name图4"></a>
<p id="图4">看图4</p>
<img src="./resource/图片/图4.jpg" alt="图4" />
<!-- 回到顶部页面 -->
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
<!-- 去其他页面的锚点 -->
<a href="./16_HTML超链接跳转锚点.html#test">看其他页面的锚点</a>
<!-- JS互动 -->
<a href="javascript:alert(666);">点我弹窗</a>
</body>
</html>
注意！
1.具有
href属性的a标签是超链接，具有name属性的a标签是锚点。2.
name和id都是区分大小写的，且id最好别是数字开头。
超链接唤起应用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML超链接唤起应用</title>
</head>
<body>
<a href="tel:">电话联系</a>
<a href="mailto:1213@163.com">邮件联系</a>
<!-- 电脑一般没有短信功能 -->
<a href="sms:10086">短信联系</a>
</body>
</html>
HTML列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML列表</title>
</head>
<body>
<!-- 有序列表(Ordered List) <ol> -->
<h2>要把大象放冰箱分几步？</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关闭</li>
</ol>
<!-- 无序列表(Unordered List) <ul> -->
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>西安</li>
<li>深圳</li>
</ul>
<!-- 自定义列表(Definition List) <dl> -->
<h2>如何更好的学习</h2>
<dl>
<dt>术语名称/术语标题</dt>
<dd>术语描述</dd>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
</dl>
</body>
</html>
HTML表格
表格整体结构
这是一个表格的要数，表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
| 学生信息 | 表格标题 | |||
|---|---|---|---|---|
| 姓名 | 性别 | 年龄 | 民族 | 表格头部 |
| 李四 | 男 | 18 | 汉族 | |
| 王五 | 女 | 20 | 满族 | 表格主体 |
| 王五 | 男 | 19 | 回族 | |
| 共计：4人 | 表格脚注 |
表格使用的标签：
table:表格
caption:表格标题
thead:表格头部
tbody:表格主体
tfoot:表格脚注
tr:每一行
th、td:每一个单元格（表格头部中使用th，表格主体、表格脚注中使用td）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML表格</title>
<body>
<
<table border="1">
<!-- 表格标题 -->
<caption>
学生信息
</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
</head>
</html>
表格属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML表格</title>
<body>
<!-- border控制表格边框 -->
<!-- width控制表格宽度 -->
<!-- height控制表格高度 -->
<!-- cellspacing控制单元格间距 -->
<table border="1" width="500" height="300" cellspacing="0">
<!-- 表格标题 -->
<caption>
学生信息
</caption>
<!-- 表格头部 -->
<!-- align控制单元格字体水平对齐 值为left、right、center -->
<!-- valign控制单元格字体垂直对齐 值为top、bottom、middle -->
<thead height="30" align="center" valign="middle">
<tr>
<th height="50" align="center" valign="middle">姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody height="90" align="center" valign="">
<tr height="30" align="center" valign="middle">
<td height="50" align="center" valign="middle">姓名>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>19</td>
<td>回族</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
</body>
</head>
</html>
表格跨行跨列
td标签使用colspan属性和rowspan属性调整单元格的跨行与跨列
<!DOCTYPE html>
<html lang="zh-CM">
<head>
<meta charset="UTF-8" />
<title>HTML跨行跨列</title>
</head>
<body>
<!-- <table border="1" cellspacing="0">
<caption>课程表</caption>
<thead>
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
<th>1-4</th>
<th>1-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
</tr>
<tr>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
</tr>
</tbody>
</table> -->
<table border="1" cellspacing="0">
<caption>
课程表
</caption>
<thead>
<tr>
<th>1-1</th>
<th colspan="2">1-2</th>
<!-- <th>1-3</th> -->
<th colspan="2">1-4</th>
<!-- <th>1-5</th> -->
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<!-- <td>3-1</td> -->
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
<td>3-5</td>
</tr>
<tr>
<td rowspan="2">4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
<td>4-5</td>
</tr>
<tr>
<!-- <td>5-1</td> -->
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
<td>5-5</td>
</tr>
</tbody>
</table>
</body>
</html>
补充常用标签
<!DOCTYPE html>
<html lang="zh-CM">
<head>
<meta charset="UTF-8" />
<title>HTML补充常用标签</title>
</head>
<body>
<a href="https://www.happyladysauce.cn">去博客</a>
<!-- br 换行标签 -->
<br />
<a href="https://www.baidu.com">去百度</a>
<!-- hr 分割线 -->
<hr />
<div>I Love You I Love You Love</div>
<hr />
<!-- pre 按原文显示 -->
<pre>
I Love You
I Love You
Love
</pre
>
<hr />
</body>
</html>
HTML表单
表单基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML表单基本结构</title>
</head>
<body>
<!-- form 表单,action：用于指定表单的提交地址
target：用于控制表单提交后，如何打开页面，常用值如下：
_self：在本窗口打开
_blank：在新窗口打开
method：用于控制表单的提交方式，get、post等 -->
<form action="https://www.baidu.com/s" target="_blank" method="get">
<!-- input 输入框,name属性用于指定提交数据的名字(需要与后端人员沟通后确定) -->
<input type="text" name="wd" />
<!-- button 按钮 -->
<button>去百度搜索</button>
</form>
<form action="https://search.jd.com/search" target="_blank" method="get">
<input type="text" name="keyword" />
<button>去京东搜索</button>
</form>
<hr />
<a href="https://search.jd.com/search?keyword=手机">搜索手机</a>
</body>
</html>
表单常用控件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>HTML表单常用控件</title>
</head>
<body>
<form action="https://search.jd.com/search">
<!-- name属性：数据的名称；value属性：输入框的默认值；maxlength属性：最大长度 -->
账户：<input
type="text"
name="account"
value="guest"
maxlength="8"
/><br />
密码：<input type="password" name="pwd" value="" maxlength="10" /><br />
<!-- 单选框 -->
性别：
<input type="radio" name="gender" value="male" checked />男
<input type="radio" name="gender" value="female" />女<br />
<!-- 复选框 -->
爱好：
<input type="checkbox" name="hobby" value="swimming" />游泳
<input type="checkbox" name="hobby" value="drawing" />绘画
<input type="checkbox" name="hobby" value="cooking" />烹饪<br />
<button>确认</button>
</form>
</body>
</html>
单选框和复选框一定要写value属性指定选项值，并且使用name属性来划分选择框之间的关系(name属性值相同的为一类框)。checked用于指定默认勾选框。
本文是原创文章，采用 CC BY-NC-ND 4.0 协议，完整转载请注明来自 HappyLadySauce
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
