本文详细介绍了HTML的基础知识，包括标签和元素的分类（块级、行内和行内块）、HTML文件结构、属性的使用、块元素、行内元素和行内块元素的区别，以及常用的HTML标签如标题、段落、列表、表格、图像、div和span的用法。最后展示了如何创建HTML表单及其关键元素的属性设置。
学习笔记视频来源：3小时前端入门教程（HTML+CSS+JS）https://www.bilibili.com/video/BV1BT4y1W7Aw?p=1&vd_source=01d8d8bf9ce02b30207c26b6979f8a36
文章目录
1.HTML介绍
①HTML 全称是Hypertext Markup Language(超文本标记语言)
②HTML通过一系列的标签(也称为元素)来定义文本、图像、链接等等。HTML标签是由尖括号包围的关键字。
③标签通常成对存在，包括开始标签和结束标签(也称为双标签)，内容位于这两个标签之间，例如：
<p>这是一个段落。</p>
<h1>这是一个标题。</h1>
<a href="#">这是一个超链接。</a>
④除了双标签，也存在单标签，例如：
<input type="text">
<br>
<hr>
< br >：换行标签
< hr >：水平分割线
⑤区别：单标签用于没有内容的元素，双标签用于有内容的元素
2.HTML文件结构
<!--这里放置文档的元信息-->
<!DOCTYPE html>
<html>
<head>
<!--这里放置文档的元信息-->
<title>文档标题</title>
<meta charset="UTF-8">
<!--连接外部样式表或脚本文件-->
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!--这里放置页面内容-->
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<a href="https://www.example.com">这是一个链接</a>
<!--其他内容-->
</body>
</html>
3.HTML属性
属性在HTML中起到非常重要的作用，它们用于定义元素的行为和外观，以及与其他元素的关系
①基本语法：
<开始标签 属性名="属性值">
②每个HTML元素可以具有不同的属性(多个属性)
<p id="describe" class="section">这是一个段落标题</p>
<a href="https://www.baidu.com">这是一个超链接</a>
③说明：属性名称不区分大小写，属性值对大小写敏感
④适用于大多数HTML元素的属性：
| 属性 | 描述 |
|---|---|
| class | 为HTML元素定义一个或多个类名(类名从样式文件引入) |
| id | 定义元素唯一的id |
| style | 规定元素的行内样式 |
4.HTML区块——块元素、行内元素和行内块元素
(1)块元素(block)
块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分割成逻辑块
- 块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块
- 可以包含其他块级元素或行内元素
- 常见的块级元素包括< div >,< p >,< h1 >到< h6 >,< ul >,< ol >,< li >,< table >,< form >等(大家可以手动把两个空格去掉)
(2)行内元素(inline)
行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等
- 行内元素通常在同一行内呈现，不会独占一行
- 它们只占据其内容所需的宽度，而不是整行的宽度，添加宽度高度属性无效
- 行内元素不能包含块级元素，但可以包含其他行内元素
- 常见的行内元素包括< span >,< a >,< strong >,< em >,< br >,< input >等(大家可以手动把两个空格去掉)
(3)行内块元素(inline-block)
- 水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性
- 行内块元素可以包含其他行内元素或块级元素
- 常见行内块元素包括< img >等(大家可以手动把两个空格去掉)
(4)三者相互转化
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
<style>
.div-line{
display:inline;
background-color:aqua;
}
.span-line-block{
display:inline-block;
background-color:purple;
}
</style>
</head>
<body>
<h1>display</h1>
<div class="div-line">这是一个转换成行内元素的div标签</div>
<span class="span-line-block">这是一个转换成行内块元素的span标签</span>
</body>
</html>
5.常用HTML标签(均放置于body标签内)
(1)标题标签(块元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
</head>
<body>
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
</body>
</html>
(2)段落标签(块元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
</head>
<body>
<p>这是一个段落标签</p>
<p>更改文本样式：<b>字体加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s></p>
</body>
</html>
(3)有序列表、无序列表、表格标签(块元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
</head>
<body>
<ul>
<li>无序列表元素1</li>
<li>无序列表元素2</li>
<li>无序列表元素3</li>
</ul>
<ol>
<li>有序列表元素1</li>
<li>有序列表元素2</li>
<li>有序列表元素3</li>
</ol>
<table border="1">
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
<tr>
<td>表格元素11</td>
<td>表格元素12</td>
<td>表格元素13</td>
</tr>
<tr>
<td>表格元素21</td>
<td>表格元素22</td>
<td>表格元素23</td>
</tr>
</table>
</body>
</html>
补充：border是< table >标签的一个属性，border="1"表示表格边框宽度
(4)图像标签(行内块元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
</head>
<body>
<img src="logo.png" alt="该图像无法显示" width="100" height="200">
</body>
</html>
src=""可以是当前目录下的图片，也可以是图片的网页链接
alt=""定义图像的替代文本
(5)div标签(块元素)
div标签——通常用于创建一个可以包含其他HTML标签的容器块，通常没有语义，仅用于组织内容
下面为一个网页示例(包含导航栏和下面的内容)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
</head>
<body>
<div class="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
</div>
<div class="content">
<h1>文章标题</h1>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
</div>
</body>
</html>
(6)span标签(行内元素)
作用：把一小部分文本给包装起来，以便于对它们使用样式、CSS或者使用JS行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
</head>
<body>
<span>这是第1个span标签</span>
<span>这是第2个span标签</span>
<span>这是第3个span标签</span>
<span>这是第4个span标签</span>
<span>这是第5个span标签</span>
<span>链接点击这里 <a href="">链接</a></span>
</body>
</html>
6.HTML表单
创建一个表单需要把表单元素放置在form标签内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
</head>
<body>
<form>
<label for="username">用户名：</span>
<input id="username" type="text" placeholder="请输入用户名"> <br><br>
<label for="pwd">密码：</span>
<input id="pwd" type="password" placeholder="请输入密码"> <br>
<label for="">性别：</label>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<label>爱好：</label>
<input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">跳舞
<input type="checkbox" name="hobby">RAP
<input type="checkbox" name="hobby">篮球 <br><br>
<input type="summit" value="上传">
</form>
</body>
</html>
说明：
(1)form标签
——action属性表示点击提交按钮时向何处发送我们这个填写的数据，属性值为一个URL(网址)，也可以是服务器也就是后端提供的API，只填#表示锚点和占位的作用
(2)input标签
——type属性规定了input元素的类型，text表示文本，radio表示选择，commit表示提交
——placeholder属性可以让它在文本框中显示内容，当输入时该内容就消失了，只是提示
——value属性可以自动填写相关内容，也可以设置提交按钮里面的值
——name属性可以设置单选/多选
(3)label标签
——for属性可以将label标签绑定到input元素，其与input元素的id相对应
扫一扫
4899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
