Heureka's blog

Appearance

02. HTML 基础 ​

HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准标记语言。

一、什么是 HTML ​

HTML 是用于创建网页结构的标准 markup 语言，它使用标签来描述网页的内容和结构。

特点 ​

  • 标记语言：使用标签来组织内容
  • 层次结构：标签可以嵌套
  • 语义化：标签有明确的含义
  • 跨平台：所有浏览器都支持

二、HTML 基本结构 ​

标准模板 ​

html

<!DOCTYPE  html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

各部分说明 ​

DOCTYPE ​

html
<!DOCTYPE html>

告诉浏览器这是一个 HTML5 文档。

html 标签 ​

html
<html>
    <!-- 所有内容都放在这里 -->
</html>

HTML 文档的根元素。

head 部分 ​

html
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>

包含元数据、标题、样式表等，不会显示在页面上。

body 部分 ​

html
<body>
    <!-- 网页的可见内容 -->
</body>

包含网页的所有可见内容。

三、HTML 常用标签 ​

标题标签 ​

html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签 ​

html
<p>这是一个段落。</p>

换行和水平线 ​

html
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->

文本格式 ​

html
<strong>粗体（重要）</strong>
<b>粗体</b>
<em>斜体（强调）</em>
<i>斜体</i>
<mark>高亮</mark>
<del>删除线</del>
<sub>下标</sub>
<sup>上标</sup>

列表 ​

html
<!-- 无序列表 -->
<ul>
    <li>项目 1</li>
    <li>项目 2</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>项目 1</li>
    <li>项目 2</li>
</ol>

图片 ​

html
<img src="image.jpg" alt="图片描述">

链接 ​

html
<a href="https://example.com">链接文本</a>

表单 ​

html
<input type="text" placeholder="请输入">
<input type="password">
<input type="checkbox">
<input type="radio">
<select>
    <option>选项 1</option>
</select>
<button>按钮</button>

四、HTML 属性 ​

属性用于提供元素的额外信息。

语法 ​

html
<tag attribute="value">内容</tag>

常用属性 ​

属性说明示例
id唯一标识<div id="content">
class类名<div class="container">
style内联样式<div style="color: red">
title提示文本<div title="提示">
alt替代文本<img alt="描述">
href链接地址<a href="url">
src源地址<img src="url">

五、HTML 语义化 ​

语义化标签让网页结构更清晰，有利于 SEO 和可访问性。

语义化标签 ​

html
<header>页眉</header>
<nav>导航</nav>
<main>主要内容</main>
<article>文章</article>
<section>区域</section>
<aside>侧边栏</aside>
<footer>页脚</footer>

非语义化标签 ​

html
<div>通用容器</div>
<span>通用行内</span>

六、HTML 实体 ​

特殊字符需要使用实体引用。

空格：&nbsp;
<：&lt;
>：&gt;
&：&amp;
"：&quot;
'：&#39;
版权：&copy;
注册：&reg;

七、HTML 注释 ​

html
<!-- 这是注释，不会显示在页面上 -->

八、HTML5 新增特性 ​

语义化标签 ​

html
<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>

表单增强 ​

html
<input type="email">
<input type="tel">
<input type="url">
<input type="number">
<input type="date">
<input type="time">
<input type="range">

多媒体 ​

html
<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

Canvas 绘图 ​

html
<canvas id="myCanvas" width="200" height="100"></canvas>

总结 ​

HTML 是网页结构的基石，掌握基础标签和语义化是前端开发的基础。