学习 HTML(HyperText Markup Language)是前端开发的第一步,它是一种用于创建网页和 web 应用的标记语言。HTML 由一系列标签(tags)和属性(attributes)组成,这些标签和属性用于定义网页的结构和内容。
HTML 基础知识
1. HTML 文档结构
<!DOCTYPE html>
:声明文档类型,告知浏览器当前文档使用的是 HTML5 规范。<html>
:HTML 文档的根元素。<head>
:包含文档的元数据(metadata),如字符集、标题、链接到 CSS、脚本等。<meta charset="UTF-8">
:定义文档的字符集(通常使用 UTF-8)。<title>
:定义文档的标题,在浏览器标签中显示。<body>
:包含文档的内容,即用户在浏览器中看到的部分。
2. 基本 HTML 标签及其意义
-
文档结构标签:
<html>
:根元素,所有 HTML 元素的容器。<head>
:包含所有的头部元素。<body>
:包含所有的可见内容。
-
文本格式标签:
<h1>
到<h6>
:定义标题,<h1>
是最高级别标题,<h6>
是最低级别标题。<p>
:定义段落。<br>
:插入换行符。<hr>
:插入水平线,通常用于分隔内容。<strong>
:定义重要文本,通常显示为加粗文本。<em>
:定义强调文本,通常显示为斜体文本。<b>
:定义粗体文本。<i>
:定义斜体文本。<u>
:定义下划线文本。<small>
:定义小号文本。
-
列表标签:
<ul>
:定义无序列表(通常用圆点符号)。<ol>
:定义有序列表(通常用数字)。<li>
:定义列表项,可以在无序或有序列表中使用。
-
链接和媒体标签:
<a>
:定义超链接。<img>
:定义图像。<audio>
:定义音频内容。<video>
:定义视频内容。
-
表格标签:
<table>
:定义表格。<tr>
:定义表格行。<th>
:定义表格头单元格。<td>
:定义表格数据单元格。<thead>
:定义表格头部。<tbody>
:定义表格主体。<tfoot>
:定义表格底部。
-
表单标签:
<form>
:定义表单。<input>
:定义输入控件。<textarea>
:定义多行文本输入控件。<button>
:定义按钮。<select>
:定义下拉列表。<option>
:定义下拉列表中的选项。<label>
:定义表单控件的标签。
-
结构和布局标签:
<div>
:定义文档中的块级区域,用于布局和样式。<span>
:定义文档中的行内区域,用于样式化一部分文本。
-
语义化标签:
<header>
:定义文档或节的头部。<nav>
:定义导航链接。<main>
:定义文档的主体内容。<section>
:定义文档中的节。<article>
:定义独立的文章。<aside>
:定义侧边栏内容。<footer>
:定义文档或节的页脚。
3. 常用 HTML 属性
id
:为元素定义唯一的标识符。class
:为元素定义一个或多个类名,用于 CSS 和 JavaScript。src
:用于<img>
、<audio>
、<video>
等标签,指定资源的路径。href
:用于<a>
标签,指定链接的目标 URL。alt
:用于<img>
标签,提供图像的替代文本。title
:提供元素的额外信息,通常在鼠标悬停时显示为工具提示。style
:用于内联 CSS 样式。target
:用于<a>
标签,指定链接打开的位置(如_blank
在新窗口打开)。
总结
HTML 是构建网页的基础,通过学习上述标签和属性,我们可以掌握创建基本网页所需的知识。掌握这些基础后,我们可以进一步学习 CSS 和 JavaScript,以增强网页的样式和交互功能。