文章目录
前言
提示：HTML不区分大小写，是一种超文本的标记语言
另外用VS Code写HTML是有公式的
*：生成的数量，
{}：标记中的文本内容
>：子标记
+：同级标记
$：序号
^：上级
提示：以下是本篇文章正文内容，下面案例可供参考
标签
HTML标记是指HTML语言的标签（tag）和属性（attribute）。
HTML标签是用于定义HTML文档结构、元素的语法和显示效果的代码。
HTML属性是用于控制HTML元素行为和样式的代码。
HTML标签是网页开发中最基础的元素，是构成网页结构的基本单元。
以下是HTML标签的一些常用示例：
html标签
<html>标签定义了HTML文档的根元素，通常在这个标签中包含了<head>和<body>标签，用来定义文档的头部和主体部分
下面的示例代码展示了一个基本的HTML结构：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<!-- 主体部分内写代码 -->
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
<p style="text-indent: 2em;">这是首页缩进两个字符</p>
</body>
</html>
标题标签h1-h6
用于定义文档标题的标记，共有六个等级，从h1到h6
<!-- 标题标记 h1-h6 独占一行显示，字体变大加粗-->
<h1>一级标题</h1>
<h6>二级标题</h6>
段落标签p
用于定义段落内容的标记
<!-- 段落标记 p 独占一行 段落之间有间距-->
<p>这是第一段内容</p>
<p>这是第二段内容</p>
换行标签br
<!-- 换行标记（单） br 浏览器运行时会忽略掉代码中的换行符-->
<p>
黑云压城城欲催<br>
甲光向日金鳞开
</p>
超链接标签a
<a>标签用于定义超链接，可以链接到其他页面、文件或页面内的某个位置
超链接a，必须设置href属性：跳转地址，可以实现界面跳转
<!-- 文字跳转 点击文字跳转到页面-->
<a href="https://blog.csdn.net/rej177">CSDN二哈喇子！</a>
<!-- 图片跳转 点击图片跳转到页面-->
<a href="https://blog.csdn.net/rej177"> <!-- 绝对路径 -->
<img src="./img.jpg" width="100" height="100"> <!-- 相对路径 -->
</a>
<!-- 运行效果：点击图片跳转到改路径，但图片存放位置与代码同级 -->
锚点定位
HTML锚点是指在同一个文档中为页面的不同部分设置超链接，这样用户在点击链接时直接跳转到相应的页面部分而不需要滚动。
要创建HTML锚点，需要使用以下步骤：
-
给目标元素添加id属性，作为锚点的名称
例如：<h2 id="section1">Section 1</h2> -
在锚点的链接中添加
#符号和对应的锚点名称，
例如：<a href="#section1">转到第1行</a> -
点击链接时，页面会自动定位到对应的锚点位置。
请注意，在单页应用程序中，锚点也可以用于页面内的导航。
<!-- 可用公式生成：ol>li*200{拉黑两分钟}
为了更好的演示所以设置成有序列表，全改p标签也可以-->
<p id="first">街头的乌鸦</p>
<ol>
<li>拉黑两分钟</li>
<li>拉黑两分钟</li>
<li>拉黑两分钟</li>
<!-- 中间省略N行 -->
<li>拉黑两分钟</li>
<li>拉黑两分钟</li>
<li>拉黑两分钟</li>
</ol>
<a href="#first">回到第一个</a>
运行效果：
图像标签img
<img>标签用于在HTML页面中插入图片，用于定义图片的标记
下面中的 jpg图片要放在与代码同级文件夹下
<!-- 图片标记 img -->
<!-- 必须设置scr属性：图片地址 -->
<img src="./image.jpg">
除了 src 和 alt 属性之外，还有其他属性可以用于控制图片的大小、对齐方式等等
可以使用 width 和 height 属性设置图片的宽度和高度：
alt属性可省略，如果要加的话应该使用有意义的 alt 属性来提供图片的描述
<img src="./image.jpg" alt="图片描述" width="500" height="300">
<!-- 上述代码中，src属性指定了要显示的图片文件的路径，而 alt属性则提供了一个替换文本，
如果在显示图片时出现问题，则会显示此替换文本。 -->
该标记将显示一个宽度为 500px、高度为 300px 的图片。
需要注意的是，使用 <img> 标记时应该注意图片格式和大小，以确保页面加载速度较快，并且不占用过多的带宽
列表标签
用于定义有序或无序列表的标记
有序列表ol
子标记 列表项：li
每个列表项独占一行显示，列表项前有序号
<!-- ol>li*2 公式生成 -->
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
无序列表ul
子标记 列表项：li
每个列表项独占一行显示，列表项前有圆点图标
<!-- ul>li*2 公式生成 -->
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
定义列表dl
子标记：dt(简要说明)，dd(详细描述)
<!-- dl>(dt+dd)*3 公式生成-->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于创建网页</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>一种编程语言，可用于创建动态和交互性效果</dd>
</dl>
表格标签
用于定义表格的标记
table：整个表格
tr：行
列：
th：居中加粗
td：居左不加粗
<table border="1" cellpadding="5" cellspacing="0">
<caption>表格标题</caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">表格备注</td>
</tr>
</tfoot>
</table>
表格列合并
跨行合并
1：删除合并后下方多余的列
2：设置rowspan属性，行范围属性
扩列合并
1：删除合并后右侧多余的列
2：设置colspan属性，列范围属性
【例】做一个类似于下图的大一课表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="8">大一课表</td>
<!-- colspan="8"，代表后面这个数据横向占8列 -->
</tr>
<tr>
<td>节次</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<!-- rowspan="2", 代表后面这个数据纵向占2行-->
<td>英语</td>
<td>数据库</td>
<td>软件测试</td>
<td>Java</td>
<td>体育</td>
<td></td>
<td></td>
</tr>
<tr>
<td>前端</td>
<td>形势政策</td>
<td>软件测试</td>
<td>Java</td>
<td>体育</td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>Java</td>
<td></td>
<td>前端</td>
<td>数据库</td>
<td>Python</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Java</td>
<td>数学</td>
<td>前端</td>
<td>数据库</td>
<td>Python</td>
<td></td>
<td></td>
</tr>
<tr>
<td>晚上</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td>自习</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8">注意</td>
</tr>
</table>
</body>
</html>
表单标签
表单标记的意义：用于获取用户的输入与选择数据
HTML中的表单标签用于创建用户输入的交互式部分。以下是一些常用的表单标签：
HTML中的常用的表单标签包括：
<form>：定义表单，用于包裹表单元素。<textarea>：用于创建多行文本输入框。<option>：定义下拉列表框中的选项。<label>：定义表单元素的标签，用于增加对输入字段的描述或说明。<button>：用于创建按钮<fieldset>：用于将相关的表单元素分组。<legend>：定义fieldset元素的标题。<optgroup>：定义一个选项组，用于在下拉列表框中分组选项。<input type="submit">：定义提交按钮。<input type="reset">：定义重置按钮，用于清除表单中的数据。
以上是一些常用的表单标签，可以根据实际需求选择适合的标签来构建表单。
input：输入框
<input>：定义输入字段，例如文本输入框、密码输入框、单选按钮、复选框等
文本框
placeholder输入提示属性，value默认值
<form>
<p>
文本框 <input type="text" placeholder="请输入想输入的内容" value="你好">
</p>
</form>
密码框
<form>
<p>
密码框 <input type="password">
</p>
</form>
单选按钮
<input type="radio">：定义单选按钮
设置性别或同意与否的时候经常用到
多个单选按钮必须设置相同的name属性，才会单选，
<form>
<p>
<!-- input[type=radio]*2 公式自动生成 -->
<input type="radio" name="sex" checked>是
<!-- checked属性是默认选中 -->
<input type="radio" name="sex">否
</p>
</form>
复选框
<input type="checkbox">：定义复选框
<form>
<p>
<!-- input[type=checkbox]*4 公式自动生成 -->
<input type="checkbox">JAVA
<input type="checkbox">MySQL
<input type="checkbox">Python
<input type="checkbox" checked>VUE
<!-- checked属性是默认选中 -->
</p>
</form>
上传文件按钮
上传图片或文件时用到，比如买东西时评论带图片
<input type="file">：定义文件上传字段
<form>
<p>
文件框 <input type="file">
</p>
</form>
下拉列表
<select>：定义下拉列表框
<form>
<p>
下拉列表 <select>
<option value="">高中</option>
<option value="">专科</option>
<option value="">本科</option>
<option value="">硕士</option>
<option value="">博士</option>
</select>
</p>
</form>
文本域
大段的文字输入
<form>
<p>
文本域
<textarea cols="30" rows="10"></textarea>
</p>
</form>
只读框和禁用框
只读框（readonly）是指用户可以看到文本，但无法编辑它
禁用框（disabled）是指用户既无法看到文本，也无法编辑它
<form>
<p>
只读框 <input type="text" value="只读文本" readonly>
</p>
<p>
禁用框 <input type="text" value="禁用文本" disabled>
</p>
</form>
按钮
HTML按钮是用于在网页中触发特定操作的元素
按钮类型： <button>元素有不同的类型属性，用于定义按钮的类型。常见的类型包括：
submit：用于提交表单数据。
reset：用于重置表单数据。
button：普通按钮，不会有任何默认行为。
<form>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通</button>
</form>
也可以电钮样式做更改
<!-- 按钮事件： 使用JavaScript可以为按钮添加各种事件，例如点击事件、鼠标悬停事件等 -->
<button onclick="myFunction()">点击我</button>
<!-- 按钮样式： 可以使用CSS来自定义按钮的样式，例如修改背景颜色、字体样式等 -->
<button style="background-color: blue; color: white;">点击我</button>
容器标签div与span
当涉及到HTML标记和CSS样式时，div和span是两个常用的容器标签
它们本身没有特定的语义，而是用于组织和样式化其他HTML元素
div和span没有默认的视觉效果，需要结合css代码使用
div标签
div：区域标记 ，一个复杂的界面必须使用若干个div标记划分出不同的区域
中间一般装的是若干个子标记
div标签是一个块级元素，它通常用于将HTML文档的一部分划分为独立的区域
可以使用div标签来创建布局，将多个元素组合在一起，并对它们应用共同的样式
通过设置div的CSS属性，如宽度、高度、背景色等，可以控制div的外观
给<div>标签设置不同的样式，可以实现各种不同的布局效果。
我们加一点css代码让他更好的显示：
<body>
<!-- 下面的示例代码展示了如何使用div标签创建两个不同的区域： -->
<div style="background-color: lightblue; padding: 20px;">
<div style="background-color: lightgray; margin-bottom: 10px; padding: 10px;">
<h1>这是第一个标题</h1>
<p>你好世界！</p>
</div>
</div>
<div style="background-color: lightblue; padding: 20px;">
<div style="background-color: lightgray; margin-bottom: 10px; padding: 10px;">
<h2>这是第二个标题</h2>
<p>Hello World！</p>
</div>
</div>
</body>
输出结果：
span标签
span：范围标记 ，在一行文本中使用span标记，凸显某一块文本内容
span标记中间装的是纯文本内容
span标签是一个内联元素，它通常用于对文本的一部分进行样式化或标记。
可以使用span标签来对文本中的某个词、句子或字符应用特定的样式，如颜色、字体大小等。
通过设置span的CSS属性，可以改变其外观，但不会破坏文本的流动性。
这里也加一点css代码让他更好的显示：
<body>
<p>这是一个 <span style="color: cyan;">带颜色</span> 的文字</p>
<p>这是一段 <span id="mySpan">可点击的文本</span>。</p>
<script>
document.getElementById("mySpan").addEventListener("click", function() {
alert("你点击了span标签！");
});
</script>
</body>
在第二个方法中使用了 JavaScript 的 addEventListener 方法来给 id 为 mySpan 的 span 标签添加了一个“点击”事件。当用户点击这个 span 标签时，会触发一个函数，该函数使用 alert() 方法在屏幕上显示一个弹出框，其中包含一条消息：“你点击了 span 标签！”。
更具体地说，这段代码的作用是：
使用 document.getElementById() 方法获取 id 为 mySpan 的 span 标签。
使用 addEventListener() 方法向该 span 标签添加一个“点击”事件监听器，当用户点击该 span 标签时触发。
创建一个匿名函数，在用户点击 span 标签时执行该函数。该函数使用 alert() 方法在页面上显示一个弹出框，其中包含一条消息：“你点击了 span 标签！”。
这段代码的效果是向 id 为 mySpan 的 span 标签添加了一个“点击”事件监听器，当用户点击该标签时，会显示一个弹出框，告诉用户他们点击了 span 标签
输出效果：
扫一扫
3485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
