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文档中使用这些转义符来插入相应的特殊字符。请注意,虽然你可以使用实体编号(如<
和>
)来表示特殊字符,但在大多数情况下,使用字符名称(如<
和>
)更为常见和易读。