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

缠丝猫 · 2024-10-29 19:36:30

什么是 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 创建一个包罗标题、段落、链接和图片的网页。
使用有序列表和无序列表，展示你最喜欢的册本和电影。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云