【一小时带你学会HTML，知识点总结】

于 2023-03-26 22:03:40 发布
阅读量1k 收藏 88
点赞数 29
分类专栏： web前端 文章标签： html 前端 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61605998/article/details/129781661
版权

文章目录

前言

这是入手开发web前端的开始，后续也会发布有关于css、JavaScript、vue、springboot、 jdbc、servlet等文章，我写此文的目的是为了记录我入手制作一个上线网站的开始，目前也正在学习中，在不断的学习中，不断总结、不断进步！

一、HTML基础

【1】HTML的基本结构

HTML文档由以下三部分组成：

  1. DOCTYPE声明：告诉浏览器这个文档使用哪个HTML版本进行编写。
  2. HTML标签：HTML文档的根元素，包含文档的所有内容。
  3. Head和Body标签：Head标签用于指定文档的元数据（例如标题、关键词、样式等），而Body标签用于指定文档的主体内容。

下面是一个简单的HTML文档结构：

<!DOCTYPE html>
<html>
<head>
  <title>My HTML Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

在这个例子中，我们使用<!DOCTYPE html>声明告诉浏览器使用HTML5版本进行解析。<html>标签是HTML文档的根元素，包含了整个文档的内容。<head>标签用于指定文档的元数据，包括文档标题（<title>标签）等。<body> 标签用于指定文档的主体内容，包括标题（<h1>标签）和文本（<p>签）。

二、格式化文本与段落

【1】格式化文本

HTML提供了多种格式化文本的方式，可以使文本更加丰富和有吸引力。下面是一些常用的格式化文本的标签：

  • <b>：用于表示粗体文本。
  • <i>：用于表示斜体文本。
  • <u>：用于表示下划线文本。
  • <s>：用于表示删除线文本。
  • <em>：用于表示强调文本。
  • <strong>：用于表示重点文本。
  • <sup>：用于表示上标文本。
  • <sub>：用于表示下标文本。

下面是一个例子，演示如何使用这些标签来格式化文本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    <strong>加粗</strong>
    <b>加粗</b>
    <ins>下划线</ins>
    <u>下划线</u>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
</body>
</html>

【2】段落

HTML使用<p>标签来表示一个段落。在HTML中，每个段落通常占据一行，并且段落之间会有一些间距。下面是一个例子：

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

在这个例子中，我们使用了两个<p>标签来表示两个段落。在浏览器中，这两个段落将分别显示为独立的行。如果想要在段落之间添加一些额外的空格，可以使用<br>标签，它表示换行。

<p>This is the first paragraph.<br>This is the second line of the first paragraph.</p>
<p>This is the second paragraph.</p>

在这个例子中，我们在第一个段落中使用了<br>标签来在第一行和第二行之间添加了一个换行符。

【3】标题

HTML提供了六个级别的标题，分别用于表示不同的标题级别。这些标题标签是<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，其中<h1>表示最高级别的标题，而<h6>表示最低级别的标题。下面是一个例子：

<h1>This is a level one heading</h1>
<h2>This is a level two heading</h2>
<h3>This is a level three heading</h3>
<h4>This is a level four heading</h4>
<h5>This is a level five heading</h5>
<h6>This is a level six heading</h6>

在浏览器中，这些标题标签将根据其级别和样式显示为不同的大小和字体加粗程度的标题文本

【4】注解

HTML中的注释用于在代码中添加注释，这些注释将被浏览器忽略。注释使用<！–开始，使用–>结束。下面是一个例子：

<!-- This is a comment -->
<p>This is some text.</p>

在这个例子中，<!-- This is a comment -->是一个注释，它将被浏览器忽略。只有<p>This is some text.</p>会被显示在页面上。

【5】综合代码

以上就是HTML的格式化文本与段落的基础知识点，下面是一个例子，展示如何结合使用这些标签来创建一个简单的网页：

<!DOCTYPE html>
<html>
<head>
	<title>My Webpage</title>
</head>
<body>
	<h1>Welcome to my webpage</h1>
	<p>This is some text about me.</p>
	<h2>My Hobbies</h2>
	<ul>
		<li>Reading</li>
		<li>Traveling</li>
		<li>Hiking</li>
	</ul>
	<h3>My Favorite Books</h3>
	<ol>
		<li>The Great Gatsby</li>
		<li>To Kill a Mockingbird</li>
		<li>1984</li>
	</ol>
	<p>Thanks for visiting!</p>
</body>
</html>

三、列表标签

【1】无序

  1. 场景：在网页中表示一组无顺序之分的列表，如：新闻列表
  2. 标签组成
标签名说明
Ul表示无序列表的整体，用来包裹li标签
li表示无序列表的每一项，用来包含每一行的内容
  1. 显示特点：列表的每一项前默认显示圆点标识
  2. 注意点：
  • Ul标签中只允许包含li标签
  • li标签可以包含任意内容
  1. 无序列表使用<ul>标签创建，其中每个列表项使用<li>签表示。无序列表将列表项呈现为带有圆点或其他符号的项目。下面是一个例子：
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

【2】有序

  1. 场景：在网页中表示一组由顺序之分的列表，如：排行榜
  2. 标签组成：
标签名说明
ol表示有序列表的整体，用来包裹li标签
li表示有序列表的每一项，用来包含每一行的内容
  1. 显示特点：列表的每一项前默认显示序号标识
  2. 注意点：
  • ol标签中只允许包含li标签
  • li标签可以包含任意内容
  1. 有序列表使用<ol>标签创建，其中每个列表项使用<li>标签表示。有序列表将列表项呈现为按照数字或字母顺序排列的项目。下面是一个例子：
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

【3】自定义

  1. 场景：在网页的底部导航中通常会使用自定义列表实现。
  2. 标签组成：
标签名说明
dl表示自定义列表的整体，用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示列表的针对主题的每一项内容
  1. 显示特点：dd前会默认显示缩进效果
  2. 注意点：dl标签中只允许包含dt/dd标签
  3. 定义列表使用<dl>标签创建，其中每个列表项使用<dt>标签表示定义术语，使用<dd>标签表示定义。下面是一个例子：
<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
  <dt>Term 3</dt>
  <dd>Definition 3</dd>
</dl>

四、表格标签

【1】表格的基本标签

  1. 场景：在在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表：
  2. 基本标签：
标签名说明
table表格整体，科用于包裹多个tr
tr表格每行，可用于包裹td
td表格每行，可用于包裹td
  1. 注意点：标签的嵌套关系：table>tr>td

【2】表格的相关属性

  1. 场景：设置表格基本展现效果
  2. 常见的相关属性：值为：数字
属性名效果
border边框宽度
width表格宽度
height表格高度

3.注意点： 实际开发时针对于样式效果推荐使用css设置。

【3】表格标题和表头单元格标签

  1. 场景：在表格中表示整体大标题和一列小标题
  2. 其它标签
标签名说明
caption：表格大标题表示表格整体大标题，默认在表格整体顶部居中位置显示
th：表头单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
  1. 注意点
  • caption标签卸载table标签内部
  • th标签书写在tr标签内部（用于替换td标签）

【4】表格的结构标签

  1. 结构标签:
标签名名称
thead表格头部
tbody表格主体
tfoot表格底部
  1. 注意点
  • 表格结构标签内部用于包裹tr标签
  • 表格的结构标签可以省略
  1. 代码
<body>
    <!-- table包含tr,tr包含td -->
    <table  border="1"  width="300" height="200" > 
        <caption><strong>学生信息</strong></caption>

        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>21</td>
            </tr>
            <tr>
                <td>小华</td>
                <td>男</td>
                <td>20</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>牛</td>
                <td>牛</td>
                <td>牛</td>
            </tr> 
        </tfoot> 
    </table>
</body>

【5】合并单元格

  1. 明确合并那几个单元格
  2. 通过左上原则，确保保留谁删除谁
  • 上下合并→只保留最上，删除其它
  • 左右合并→只保留最左的，删除其它
  1. 给保留的单元格设置：跨行合并或者跨列合并
属性名：属性值说明
rowspan:合并单元格的个数跨行合并，将多行的单元格垂直合并
colspan:合并单元格的个数跨列合并，将多列的单元格水平合并
  1. 注意点
  • 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨:thead、tbody、tfoot）
  1. 代码
<body>
    <!-- table包含tr,tr包含td -->
    <table  border="1"  width="300" height="200" > 
        <caption><strong>学生信息</strong></caption>

        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <!-- rowspan合并单元格的个数 ，跨行合并，保留最上 -->
                <td rowspan="2">男</td>  
                <td>21</td>
            </tr>
            <tr>
                <td>小华</td>
                <td>男</td>
                <td>20</td>
            </tr>
            <tr>
                <td>小美</td>
                <td>女</td>
                <td>20</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <!-- colspan合并单元格的个数 ，跨列合并，保留最左 -->
                <td colspan="3">牛</td>
                <td>牛</td>
                <td>牛</td>
            </tr> 
        </tfoot> 
    </table>
</body>

五、表单标签

【1】input系列标签

（1）基本介绍

  1. 场景：在网页中显示收集用户的表单信息，如：登录页、注册页
  2. 标签名：input
  3. input标签可以通过type属性值的不同，显示不同的效果
  4. type常见属性值
type属性值说明
text文本框，用于输入单行文本
password密码框，用于输入密码
radio单选框，用于多选一
checkbox多选框，用于多选多
file文件选择用于之后上传文件
submit提交按钮，用于提交
reset重置按钮，用于重置
button普通按钮，默认没有功能

（2）input-文本框-placeholder

  1. 场景：在网页中显示输入单行文本的表单控件
  2. type属性值：text
  3. 常见属性
属性名说明
placeholder占位符，提示用户输入内容的文本

（3）input-单选框-radio

  1. 场景：在网页中显示多选一的单选表单控件
  2. type属性值：tradio
  3. 常见属性
属性名说明
name分组，有相同name的属性值的单选框为一组，一组只有一个被选中
checkede默认选中

（4）input-文本选择-multiple

  1. 场景：在网页中显示文件选择的表单控件
  2. type属性值：file
  3. 常见属性
属性名说明
multiple多文件选择

（5）input-按钮-submit(提交功能)和reset(重置功能)

  1. 场景：在网页中显示不同功能夫人按钮的表单控件

  2. 常见属性：submit reset button

  3. 上面已经说明了一部分，就不作重复的说明了

（6）综合代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input的基本使用</title>
</head>
<body>
    <!-- 表单预标签-父级标签<form action=""</form>> -->
    
    <form action="">
    <!-- placehoider：用在text中，表示占位符，提示用户输入的文本 -->
    账号：<input type="text" placeholder="请输入用户名:">
    <br>
    <br>
    密码: <input type="password" placeholder="请输入密码：">
    <br>
    <br>
    <!-- name表示对单选框进行分组，同一组只能选中一个，checked表示默认选中 -->
    性别：<input type="radio" name="sex">男 <input type="radio" name="sex" checked>女
    <br>
    <br>
    <!-- checked表示默认选中 -->
    多选框：<input type="checkbox" checked>
    <br>
    <br>
    <!-- multiple表示可以多文件上传 -->
    上传文件：<input type="file" multiple>
    <br>
    <br>
    <!-- 按钮 -->
    <input type="submit">
    <input type="reset">
    <input type="button" value="免费注册">
</form>
</body>
</html>

【2】button按钮标签

  1. 场景：在网页中显示用户点击的按钮
  2. 标签名：button
  3. type属性值（同input德按钮系列一样）
  4. 注意点：
  • 谷歌浏览器中button默认是提交按钮
  • button标签是双标签，可以包裹其它内容：文字、图片
  1. 代码
</head>
<body>
    <button>普通按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮</button>
</body>
</html>

【3】select下拉菜单标签

  1. 场景：在网页中提供多个选项的下拉菜单表单控件
  2. 标签组成：
  • select标签：下拉菜单的整体
  • optyion标签：下拉菜单的每一项
  1. 常见属性
  • selected:下拉菜单的默认选中
  1. 代码
<select>
        <option >上海</option>
        <option >广东</option>
        <option >广西</option>
        <!-- selected表示默认选项 -->
        <option selected >北京</option> 
</select>

【4】label标签

标签<label>是一个HTML元素，它与表单元素相关联，提供了一种为表单元素添加标注的方法。通过使用标签，用户可以点击文本标签，从而使相关联的表单元素获得焦点。

以下是关于<label>标签的一些知识点：

  1. <label>标签的基本语法如下：
<label for="element_id">label_text</label>

其中，for属性指定了相关联的表单元素的id，label_text是显示在标签上的文本。

  1. <label>标签可以包含其他元素，例如图像、文本和其他HTML元素，以实现自定义标注样式。
  2. <label>标签不一定需要与表单元素相关联。如果省略了for属性，则该标签的文本仍然可以用于描述任何内容。
  3. 当用户单击与标签相关联的文本时，浏览器会将焦点设置到相关联的表单元素上。这使得通过使用标签可以提高表单的可用性和可访问性。
  4. 以下是一个简单的示例，展示如何使用<label>标签：
<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="登录">
</form>

在上面的示例中，两个文本输入框都使用了<label>
标签进行标注。当用户单击标签时，对应的输入框将获得焦点。

六、超链接与浮动框架

【1】超链接

超链接（<a>标签）是HTML中的一个元素，用于在页面中创建链接。以下是一些超链接的知识点：

  1. 基本语法：<a href="url">link_text</a>。其中，href属性指定了链接目标的URL，link_text是链接文本。
  2. 可以通过target属性指定链接打开的方式。常用的方式包括_blank（在新窗口中打开）和_self（在当前窗口中打开）。
  3. 可以使用锚点（#）指向页面内的位置。例如，<a href="#section2">Go to Section 2</a>会将页面滚动到id为section2的元素。
  4. 可以使用相对路径指向同一站点内的页面，也可以使用绝对路径指向外部站点的页面。

以下是一个简单的示例，展示如何使用超链接：

<a href="https://www.google.com" target="_blank">Google</a>

在上面的示例中，当用户单击链接时，将在新的浏览器窗口中打开Google网站。

【2】浮动框架

浮动框架（<iframe>标签）是一种HTML元素，用于在页面中嵌入其他网页或文档。以下是一些浮动框架的知识点：

  1. 基本语法：<iframe src="url"></iframe>。其中，src*属性指定要嵌入的网页或文档的URL。
  2. 可以使用height和width属性调整浮动框架的大小。
  3. 可以使用frameborder属性控制是否显示边框。
  4. 可以使用scrolling属性控制是否显示滚动条。

以下是一个简单的示例，展示如何使用浮动框架：

<iframe src="https://www.google.com" width="100%" height="500px"></iframe>

在上面的示例中，将在当前页面中嵌入Google网站。

七、影像与多媒体文件

【1】图像

图像可以通过<img>标签在网页中插入。以下是一些图像的知识点：

  1. 基本语法：<img src="image_url" alt="image_description">。其中，src属性指定图像的URL，alt属性为图像提供文本描述，用于辅助阅读设备和搜索引擎。
  2. 可以使用width和height属性调整图像的大小。
  3. 可以使用title属性为图像提供一个鼠标悬停提示。

以下是一个简单的示例，展示如何在网页中插入图像：

<img src="https://www.example.com/images/example.jpg" alt="Example Image" width="500" height="300">

在上面的示例中，将在网页中插入一张名为example.jpg的图像，宽度为500像素，高度为300像素。

【2】音频和视频

音频和视频可以通过<audio>和<video>标签在网页中插入。以下是一些音频和视频的知识点：

  1. 基本语法：<audio src="audio_url"></audio>或<video src="video_url"></video>。其中，src属性指定音频或视频的URL。
  2. 可以使用controls属性为音频或视频添加控件，例如播放/暂停按钮、音量控制等。
  3. 可以使用autoplay属性设置音频或视频自动播放。
  4. 可以使用loop属性设置音频或视频循环播放。

以下是一个简单的示例，展示如何在网页中插入音频和视频：

<audio src="https://www.example.com/audio/example.mp3" controls autoplay></audio>

<video src="https://www.example.com/video/example.mp4" controls width="640" height="360"></video>

在上面的示例中，将在网页中插入一个名为example.mp3
的音频文件和一个名为example.mp4的视频文件。音频文件将自动播放，并带有播放控件，视频文件将在640像素宽、360像素高的区域内播放，并带有播放控件。

总结

以上就是今天要讲的内容，写了接近1万字，本文仅仅简单介绍了HTML的基本使用以及整体的部分知识点，对于新手小白来说，这是一篇比较好的知识点整合的文章，希望有帮助的友友点赞、收藏支持以下，如果能打赏，那对于博主来说，太开心了，下一期CSS再见！~~

语言-逆行者
关注
  • 29
    点赞
  • 踩
  • 88
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 20
    评论
专栏目录
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

语言-逆行者

一起交流学习

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值