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 页面结构:
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 声明
html"><!DOCTYPE html>
- DOCTYPE 声明位于文档的最顶端,表示当前文档是 HTML5 标准版本。
- 它帮助浏览器以标准模式渲染页面,确保网页样式和功能的统一。
html__81">2.2 <html>
标签
html"><html lang="zh-CN">
<html>
标签定义整个 HTML 文档的根节点,是所有其他内容的容器。lang="zh-CN"
属性表示文档语言为简体中文,帮助搜索引擎和浏览器理解页面语言。
2.3 <head>
标签
<head>
标签用于存放一些网页的基本信息,比如页面标题、字符编码、外部资源(CSS、JS)等,不会直接显示在网页上。
示例:
html"><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>
标签包含所有在网页上显示的内容,包括文本、图片、链接等。
示例:
html"><body><h1>欢迎来到我的网页!</h1><p>这是我的第一个 HTML 页面。</p>
</body>
- 上述内容会显示在网页中,
<h1>
标签表示标题,<p>
表示段落。
3. HTML 常用标签详解
接下来,详细介绍常用的 HTML 标签,帮助你构建更丰富的网页内容。
3.1 标题标签
HTML 提供了六个级别的标题标签:<h1>
至 <h6>
。
示例:
html"><h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
- 标题标签不仅控制文字大小和粗细,还向搜索引擎传达信息的层次结构,
<h1>
通常用于页面主标题。
3.2 段落和文本标签
段落标签 <p>
<p>
用于定义段落。
文本格式化标签
<strong>
:将文本加粗。<em>
:将文本斜体。
示例:
html"><p>这是一个普通段落。</p>
<p><strong>加粗文字</strong> 和 <em>斜体文字</em>。</p>
3.3 链接标签
<a>
标签用于创建超链接,通过href
属性指定链接的目标地址。
示例:
html"><a href="https://www.example.com" target="_blank">访问我的网站</a>
target="_blank"
属性用于在新标签页中打开链接。
3.4 图像标签
<img>
标签用于在网页中插入图片。src
属性指定图片 URL,alt
属性描述图片内容。
示例:
html"><img src="image.jpg" alt="示例图片" width="200" height="150">
3.5 列表标签
HTML 支持有序列表和无序列表。
- 有序列表
<ol>
:使用<li>
标签定义列表项。 - 无序列表
<ul>
:使用<li>
标签定义无序项。
示例:
html"><ol><li>第一项</li><li>第二项</li>
</ol>
<ul><li>无序项一</li><li>无序项二</li>
</ul>
3.6 表格标签
表格由 <table>
标签定义,行由 <tr>
标签定义,表头和数据由 <th>
和 <td>
标签定义。
示例:
html"><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>
:独立的内容块。
示例:
html"><header><h1>网站标题</h1>
</header>
<section><article><h2>文章标题</h2><p>这是文章的内容。</p></article>
</section>
<footer><p>版权所有</p>
</footer>
4. HTML 属性
标签可以包含多个属性,常用属性包括 id
、class
、style
等,用于控制元素的样式和功能。
示例:
html"><p id="intro" class="highlight">带属性的段落。</p>
id
是唯一标识,用于 CSS 或 JavaScript。class
表示样式类,便于 CSS 样式应用。
5. HTML 常见错误与规范
- 标签未闭合:确保每个标签都有结束标签,如
<p>...</p>
。 - 层级混乱:标签应按正确的结构嵌套,如
<ul><li></li></ul>
。
6. 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>个人简历</title>
</head>
<body><h1>姓名:张三</h1><p>简介:一名热爱编程的html" title=前端>前端开发者。</p><h2>教育经历</h2><ul><li>大学:计算机科学与技术专业</li></ul><h2>联系方式</h2><p>邮箱:example@example.com</p>
</body>
</html>
7. 总结与练习题
总结
- HTML 是构建网页的基础,了解其语法和结构是进入html" title=前端>前端开发的重要第一步。
练习题
- 使用 HTML 创建一个包含标题、段落、链接和图片的网页。
- 使用有序列表和无序列表,展示你最喜欢的书籍和电影。