前端零基础入门到上班:【Day3】从零开始构建网页骨架HTML

HTML 基础入门：从零开始构建网页骨架

- - - 目录
  - 1. 什么是 HTML？
  - - HTML 的核心作用
  - 2. HTML 基本结构
  - - 2.1 DOCTYPE 声明
    - 2.2 `<html>` 标签
    - 2.3 `<head>` 标签
    - 2.4 `<body>` 标签
  - 3. HTML 常用标签详解
  - - 3.1 标题标签
    - 3.2 段落和文本标签
    - 3.3 链接标签
    - 3.4 图像标签
    - 3.5 列表标签
    - 3.6 表格标签
    - 3.7 HTML5 语义化标签
  - 4. HTML 属性
  - 5. HTML 常见错误与规范
  - 6. HTML 实战练习
  - 7. 总结与练习题
  - - 总结
    - 练习题

什么是 HTML？
HTML 基本结构
- 2.1 DOCTYPE 声明
- 2.2 html 标签
- 2.3 head 标签
- 2.4 body 标签
HTML 常用标签详解
- 3.1 标题标签
- 3.2 段落和文本标签
- 3.3 链接标签
- 3.4 图像标签
- 3.5 列表标签
- 3.6 表格标签
- 3.7 HTML5 语义化标签
HTML 属性
HTML 常见错误与规范
HTML 实战练习
总结与练习题

1. 什么是 HTML？

HTML（HyperText Markup Language） 是用于创建网页的标准标记语言。它通过不同的标签来组织和显示文本、图片、链接等内容，是网页结构的基础。与 HTML 搭配使用的还有 CSS 和 JavaScript，分别负责页面的样式和交互功能。

后续内容代码偏多你跟着练习免不了报错同学我建议你关注我公众号可以随时发私信给我看到就会回复

HTML 的核心作用

构建网页结构：定义标题、段落、图片、列表等内容的布局。
链接网页内容：通过超链接将不同页面连接在一起。
增强语义：HTML5 引入了语义化标签，帮助搜索引擎理解内容。

2. HTML 基本结构

一个完整的 HTML 文件由一系列标签组成，标签用来指明页面的结构、内容和其他信息。以下是一个简单的 HTML 页面结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个 HTML 页面</title>
</head>
<body><h1>欢迎来到我的网页！</h1><p>这是我的第一个 HTML 页面。</p>
</body>
</html>

怎么生成HTML基本机构
新建一个目录

用VSCode 打开这个目录，你可以用鼠标拖拽目录到VSCode 上

点击新建文件，新建一个初识html.html, 记得后缀是HTML哦~

接下来输入英文的！，一定要是英文！！！

回车哦亲

恭喜你同学，你的第一个html页面完成了，接下来我们怎么看效果呢？需要安装一个小插件如下图

安装成功之后重启一下，此时你可以 alt + b 就可以看你的html页面啦~~~~
如果在安装过程中遇到问题可以关注公众号直接发消息给我，祝你学习愉快

2.1 DOCTYPE 声明

<!DOCTYPE html>

DOCTYPE 声明位于文档的最顶端，表示当前文档是 HTML5 标准版本。
它帮助浏览器以标准模式渲染页面，确保网页样式和功能的统一。

2.2 `<html>` 标签

<html lang="zh-CN">

<html> 标签定义整个 HTML 文档的根节点，是所有其他内容的容器。
lang="zh-CN" 属性表示文档语言为简体中文，帮助搜索引擎和浏览器理解页面语言。

2.3 `<head>` 标签

<head> 标签用于存放一些网页的基本信息，比如页面标题、字符编码、外部资源（CSS、JS）等，不会直接显示在网页上。

示例：

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个 HTML 页面</title>
</head>

<meta charset="UTF-8">：定义网页的字符编码为 UTF-8，确保页面中所有文本正确显示。
<title>：页面标题，将显示在浏览器标签上。

2.4 `<body>` 标签

<body> 标签包含所有在网页上显示的内容，包括文本、图片、链接等。

示例：

<body><h1>欢迎来到我的网页！</h1><p>这是我的第一个 HTML 页面。</p>
</body>

上述内容会显示在网页中，<h1> 标签表示标题，<p> 表示段落。

3. HTML 常用标签详解

接下来，详细介绍常用的 HTML 标签，帮助你构建更丰富的网页内容。

3.1 标题标签

HTML 提供了六个级别的标题标签：<h1> 至 <h6>。

示例：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

标题标签不仅控制文字大小和粗细，还向搜索引擎传达信息的层次结构，<h1> 通常用于页面主标题。

3.2 段落和文本标签

段落标签 <p>

<p> 用于定义段落。

文本格式化标签

<strong>：将文本加粗。
<em>：将文本斜体。

示例：

<p>这是一个普通段落。</p>
<p><strong>加粗文字</strong> 和 <em>斜体文字</em>。</p>

3.3 链接标签

<a> 标签用于创建超链接，通过 href 属性指定链接的目标地址。

示例：

<a href="https://www.example.com" target="_blank">访问我的网站</a>

target="_blank" 属性用于在新标签页中打开链接。

3.4 图像标签

<img> 标签用于在网页中插入图片。src 属性指定图片 URL，alt 属性描述图片内容。

示例：

<img src="image.jpg" alt="示例图片" width="200" height="150">

3.5 列表标签

HTML 支持有序列表和无序列表。

有序列表 <ol>：使用 <li> 标签定义列表项。
无序列表 <ul>：使用 <li> 标签定义无序项。

示例：

<ol><li>第一项</li><li>第二项</li>
</ol>
<ul><li>无序项一</li><li>无序项二</li>
</ul>

3.6 表格标签

表格由 <table> 标签定义，行由 <tr> 标签定义，表头和数据由 <th> 和 <td> 标签定义。

示例：

<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>小明</td><td>20</td></tr>
</table>

3.7 HTML5 语义化标签

HTML5 新增了一些语义化标签，帮助开发者组织页面结构。

<header>：表示页面头部内容。
<footer>：表示页面底部内容。
<section>：页面的一个章节。
<article>：独立的内容块。

示例：

<header><h1>网站标题</h1>
</header>
<section><article><h2>文章标题</h2><p>这是文章的内容。</p></article>
</section>
<footer><p>版权所有</p>
</footer>

4. HTML 属性

标签可以包含多个属性，常用属性包括 id、class、style 等，用于控制元素的样式和功能。

示例：

<p id="intro" class="highlight">带属性的段落。</p>

id 是唯一标识，用于 CSS 或 JavaScript。
class 表示样式类，便于 CSS 样式应用。

5. HTML 常见错误与规范

标签未闭合：确保每个标签都有结束标签，如 <p>...</p>。
层级混乱：标签应按正确的结构嵌套，如 <ul><li></li></ul>。

6. HTML 实战练习

任务：创建一个简单的个人简历页面，包含姓名、简介、教育经历和联系方式。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简历</title>
</head>
<body><h1>姓名：张三</h1><p>简介：一名热爱编程的前端开发者。</p><h2>教育经历</h2><ul><li>大学：计算机科学与技术专业</li></ul><h2>联系方式</h2><p>邮箱：example@example.com</p>
</body>
</html>