HTML概述
HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言,具体指超文本标记语言。它不是一种编程语言,而是一种标记语言,用于描述网页的结构和内容。通过HTML,开发者可以定义网页的标题、段落、链接、图像、列表、表格、表单等各种元素,以及这些元素在网页上的布局和样式。
超文本:页面内可以包含图片,链接,声音,视频等内容
标记:标签(通过标记符号来告诉浏览器网页内容该如何来显示)
浏览器通过看不同的HTML 标签,解析成我们看到的网页
HTML基本语法
HTML写网页的代码的基本结构:

HTML中的常见标签
标签结构
<开始标签> 标签体 </结束标签> 闭合标签(封闭的区间) 双标签
<标签名 /> 自闭和标签,没有修饰的内容,只是完成某个功能 单标签
1. 基础标签
<!DOCTYPE html>:定义文档类型和版本,告知浏览器当前文档使用的是HTML5。<html>:HTML文档的根元素。<head>:包含了所有的头部标签元素,如<meta>,<title>,<link>,<style>等,这些元素不会在网页上直接显示,但会影响网页的渲染和显示方式。<title>:定义浏览器工具栏的标题,当网页添加到收藏夹时的标题。<body>:包含了可见的页面内容,如文本、图片、音频、视频等。
2. 标题和段落
<h1>到<h6>:定义标题或子标题,<h1>定义最大的标题,<h6>定义最小的标题。<p>:定义段落。
3. 文本格式化
<b>和<strong>:加粗文本,<strong>在语义上表示重要内容。<i>和<em>:使文本倾斜,<em>在语义上表示强调。<del>和<s>:为文本添加删除线。<ins>和<u>:为文本添加下划线。<sup>和<sub>:定义上标和下标文本。
4. 图像和链接
<img>:用于插入图像,必须包含src属性来指定图像的来源。<a>:定义超链接,用于从一个页面跳转到另一个页面或页面中的某个部分。必须包含href属性来指定链接的目标地址。
5. 列表
<ul>:定义无序列表。<li>:定义列表中的项。
<ol>:定义有序列表。<li>:定义列表中的项。
<dl>:定义描述列表。<dt>:定义列表中的项。<dd>:描述列表中的项。
6. 表格
<table>:定义表格。<caption>:定义表格标题。<thead>:定义表格的头部。<tr>:定义表格中的行。<th>:定义表头单元格。
<tbody>:定义表格的主体。<tr>:定义表格中的行。<td>:定义表格中的单元格。
<tfoot>:定义表格的尾部。
7. 布局和容器
<div>:定义文档中的区块或节,常用于样式布局。<span>:定义文档中的行内区块或节,常用于文本内小块内容的样式设置。
8. 特殊元素
<br>:插入简单的换行符。<hr>:插入水平线。<center>(非HTML5推荐):使内容居中,但在HTML5中推荐使用CSS来实现。
9. 表单
<form>:定义HTML表单,用于用户输入。<input>:定义输入控件,如文本字段、复选框、单选按钮等。<textarea>:定义多行文本输入控件。<button>:定义点击按钮。<select>和<option>:定义下拉选择列表。
HTML中的标签属性
在HTML中,标签通常可以具有属性,这些属性为HTML元素提供附加的信息或指示浏览器如何渲染该元素。属性总是以名称/值对的形式出现,并且始终包含在元素的开始标签中。以下是一些常见的HTML标签属性及其描述:
1. 全局属性
全局属性可以应用于HTML中的所有元素。虽然并非所有元素都需要或支持这些属性,但以下是一些常见的全局属性:
class:为元素定义一个或多个类名,通常用于CSS样式和JavaScript操作。id:为元素定义一个唯一的标识符,通常用于CSS样式和JavaScript引用。style:直接为元素定义内联CSS样式。title:为元素提供额外的信息(通常是提示信息),这些信息在用户将鼠标悬停在元素上时显示。
2. 特定元素属性
特定元素属性仅适用于某些HTML元素。以下是一些示例:
<a> 标签
href:指定链接的目标地址(URL)。target:指定链接如何打开(例如,在新窗口或新标签页中)。
<img> 标签
src:指定图像的来源(URL)。alt:为图像提供替代文本,如果图像无法显示或加载失败,将显示此文本。width和height:指定图像的宽度和高度(以像素为单位)。
<input> 标签
type:指定输入字段的类型(例如,text,password,checkbox,radio,submit等)。name:定义输入字段的名称,这对于表单提交时数据的收集很重要。value:定义输入字段的初始值。placeholder:提供输入字段的提示信息,当字段为空时显示。
<table>、<tr>、<th> 和 <td> 标签
colspan(<th>和<td>):指定单元格应横跨的列数。rowspan(<th>和<td>):指定单元格应横跨的行数。
<form> 标签
action:指定表单数据提交时发送到的URL。method:指定用于发送表单数据的HTTP方法(通常是get或post)。
3. 布尔属性
有些HTML属性是布尔属性,它们的存在就表示值为true,而不需要明确的值。例如,<input type="checkbox" checked>中的checked属性表示复选框默认被选中。
4. 自定义数据属性
HTML5引入了一种新的属性,称为自定义数据属性(也称为“数据-*”属性),允许你为元素添加额外的信息。这些属性以data-前缀开始,后跟任何你想要的名称。例如,<div data-user-id="123">。然后,你可以使用JavaScript来访问和修改这些属性的值。
注意事项
- 属性名和值之间使用等号(
=)连接,值必须始终包含在引号中(单引号或双引号都可以,但最好保持一致)。 - 某些属性是必需的,而另一些则是可选的,具体取决于所使用的HTML元素和上下文。
- 为了保持代码的可读性和可维护性,建议使用小写字母来编写属性名,并避免在属性名中使用空格或特殊字符。
属性必须写在开始标签中
属性格式 属性名="值"
一个标签中可以写多个属性
特殊符号转义符
在HTML中,一些字符具有特殊的含义,如小于号 <、大于号 >、双引号 " 和单引号 ' 等。当你想在HTML文本中直接显示这些字符时,而不是作为HTML标签或属性的一部分时,你需要使用特殊符号的转义符(也称为实体字符)来表示它们。
以下是一些常见的HTML特殊符号转义符:
<或<:小于号<>或>:大于号>&或&:和号&"或":双引号"'或':单引号'®或®:注册符号 ®©或©:版权符号 ©™或™:商标符号 ™ 或 :非断行空格¢或¢:分(货币符号)£或£:英镑符号 £¥或¥:日元符号 ¥
以及许多其他的特殊符号和字符的转义符。你可以在HTML文档中使用这些转义符来插入相应的特殊字符。请注意,虽然你可以使用实体编号(如<和>)来表示特殊字符,但在大多数情况下,使用字符名称(如<和>)更为常见和易读。



















