前端零基础入门到上班:【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>
7. 总结与练习题
总结
- HTML 是构建网页的基础，了解其语法和结构是进入前端开发的重要第一步。
练习题
- 使用 HTML 创建一个包含标题、段落、链接和图片的网页。
- 使用有序列表和无序列表，展示你最喜欢的书籍和电影。