什么是HTML
HTML(HyperText Markup Language)是用于创建网页的标准标记语言。它使用标记来描述网页的内容和结构,可以包括文本、图像、链接、音频、视频等。HTML是Web开发的基础,是一门必须掌握的语言。
HTML标记语言的特点是:易于学习、简单、免费、与许多浏览器兼容、跨平台、可扩展性强。HTML是基于标记的语言,标记是一些基于尖括号的名称。Web浏览器读取HTML文档,并根据HTML信息显示网页。
HTML是语言,而不是编程语言。它不具有编程语言的特性,如变量、循环语句、函数等。相反,它只是一个标记语言,用于创建静态网页。
HTML的结构
HTML文档是基于标记的文本文件,包含在<html>和</html>标记之间。HTML文档通常包含头部(<head>)、主体(<body>)和脚注(<footer>)等部分。头部包含网页元信息(如标题、关键词、描述信息),而主体部分则以HTML标记描述网页内容。
以下是一个简单的HTML文档结构示例:
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>标题</h1>
<p>这是一个段落。</p>
</body>
</html>
DOCTYPE
DOCTYPE是指HTML文档类型定义(Document Type Definition),它是一个告诉Web浏览器网页所使用的HTML版本的特殊标记。DOCTYPE必须是HTML文档中的第一行。以下是HTML5的DOCTYPE示例:
<!DOCTYPE html>
html标记
<html>是HTML文档的根元素,它指示Web浏览器当前文档使用的是HTML语言。<html>元素包含两个子元素,<head>和<body>。<head>元素包含网页的元信息,<body>元素包含网页内容。以下是HTML根元素示例代码:
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>网页标题</h1>
<p>网页内容</p>
</body>
</html>
head标记
<head>元素是HTML文档头部的容器,在这个标记中可以定义网页的元信息。<head>标记包含了<title>、<meta>、<link>和<style>等标记,下面详细介绍:
<title>标记
<title>标记定义网页的标题,显示在Web浏览器的标题栏或选项卡上。它是必须的元素,每个HTML文档只能有一个<title>标记。以下是<title>标记示例:
<head>
<title>网页标题</title>
</head>
<meta>标记
<meta>标记用于在头部指定元信息,例如描述、关键字、作者等。以下是指定网页描述和关键字的<meta>标记的示例:
<head>
<meta name="description" content="网页描述。">
<meta name="keywords" content="网页, 关键词">
</head>
<link>标记
<link>标记定义HTML文档与外部资源(通常是CSS样式表)之间的关系。以下是链接外部CSS样式表的<link>标记示例:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>标记
<style>标记用于在头部定义CSS样式信息。
<head>
<style type="text/css">
/* CSS规则 */
</style>
</head>
body标记
<body>元素包含HTML文档的主体内容,例如文字、图片、链接、表格等。以下是<body>标记的示例:
<body>
<h1>网页标题</h1>
<p>网页内容</p>
</body>
HTML标记
除了<html>、<head>和<body>等元素外,HTML还包含许多其它标记。下面是常用的一些HTML标记:
文字格式化标记
HTML可以标记文本的格式,以实现粗体、斜体、下划线、删除线等效果。
<b>和<strong>
<b>和<strong>定义文本的粗体效果,它们的区别在于,<strong>标记通常表示强调,表示重要内容需要强调处理。以下是<b>和<strong>标记示例:
<p>这是<b>粗体</b>文本。</p>
<p>这是<strong>重要的</strong>文本。</p>
<i>和<em>
<i>和<em>标记定义文本的斜体效果,<em>标记通常表示强调,表示重要内容需要斜体强调。
<p>这是<i>斜体</i>文本。</p>
<p>这是<em>重要的</em>文本。</p>
<u>
<u>标记定义文本的下划线效果,以下是<u>标记示例:
<p>这是<u>下划线</u>文本。</p>
<s>和<del>
<s>和<del>定义文本的删除线效果,<del>标记通常表示删除的内容。以下是<s>和<del>标记示例:
<p>这是<s>删除线</s>文本。</p>
<p><del>删除的内容</del></p>
标题标记
HTML提供了6个级别的标题标记,可以用来组织文本内容。
<h1>到<h6>
<h1>到<h6>标记依次代表6个不同的标题级别,<h1>是最高级别的标题,<h6>是最低级别的标题。以下是<h1>到<h6>标记示例:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
图像标记
HTML中使用<img>标记插入图像,图像可以是GIF、JPEG、PNG等格式。
<img>
<img>标记是单标记,它必须有一个src属性,指定图像文件的URL地址。以下是插入图像的<img>标记示例:
<img src="图片地址" alt="图片说明">
以上代码中的alt属性是图片的说明,当图片无法显示时,将显示这个说明。
链接标记
HTML中使用<a>标记创建链接,链接可以指向任何URL地址,包括外部网站、同一站点中的其他页面、电子邮件地址等。
<a>
<a>标记用于创建链接,它必须有一个href属性,指定要链接到的地址。以下是创建链接的<a>标记示例:
<a href="链接地址">链接文本</a>
列表标记
HTML中提供了有序列表和无序列表两种列表格式。
<ul>
<ul>标记定义无序列表,列表项使用<li>标记。以下是创建无序列表的<ul>标记示例:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol>
<ol>标记定义有序列表,列表项使用<li>标记。以下是创建有序列表的<ol>标记示例:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
表格标记
HTML中使用<table>标记创建表格,<th>和<td>标记用于定义表格的表头和表格数据。
<table>
<table>标记定义表格,它可以包含<caption>、<thead>、<tbody>、<tfoot>等标记。以下是创建表格的<table>标记示例:
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
</tbody>
</table>
<th>
<th>标记定义表头单元格。以下是创建表格头部的<th>标记示例:
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<td>
<td>标记定义表格中的数据单元格。以下是创建表格数据的<td>标记示例:
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
</tbody>
表单标记
HTML提供了一系列表单元素用于创建用户表单,包括文本框、密码框、单选框、复选框、下拉框等。
<form>
<form>标记定义表单,它包含一个或多个表单元素,例如文本框、按钮等。以下是创建表单的<form>标记示例:
<form action="url" method="get">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
<label for="password">密码</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="提交">
</form>