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

news2024/12/28 20:24:14

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. 总结与练习题
        • 总结
        • 练习题

目录
  1. 什么是 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. 总结与练习题

1. 什么是 HTML？

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

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

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

2. HTML 基本结构

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2223850.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CRLF、UTF-8这些编辑器右下角的选项的意思

CRLF、UTF-8这些编辑器右下角的选项的意思

经常使用编辑器的小伙伴应该经常能看到右下角会有这么两个选项&#xff0c;下图是VScode中的示例&#xff0c;那么这两个到底是啥作用呢&#xff1f; 目录 字符编码ASCII 字符集GBK 字符集Unicode 字符集UTF-8 编码 换行 字符编码 此部分参考博文 在计算机中&#xff0c;所有…
阅读更多...
网络搜索引擎Shodan（1）

网络搜索引擎Shodan（1）

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址&#xff1a;shodan(1)_哔哩哔哩_bilibili 本文主要讲解网络搜索引擎Shodan的一些用法&#xff08;host和search这两个命令&#xff09;。 Shodan 是一个网络…
阅读更多...
合合信息亮相PRCV大会，探讨生成式AI时代的内容安全与系统构建加速

合合信息亮相PRCV大会，探讨生成式AI时代的内容安全与系统构建加速

一、前言 在人工智能技术的飞速发展下&#xff0c;生成式AI已经成为推动社会进步的重要力量。然而&#xff0c;随着技术的不断进步&#xff0c;内容安全问题也日益凸显。如何确保在享受AI带来的便利的同时&#xff0c;保障信息的真实性和安全性&#xff0c;已经成为整个行业待解…
阅读更多...
高速自爆穿梭无人机技术详解

高速自爆穿梭无人机技术详解

高速自爆穿梭无人机技术是一种结合了高速飞行与自爆式攻击能力的先进无人机技术。以下是对该技术的详细解析&#xff1a; 一、技术特点 1. 高速飞行&#xff1a; 高速自爆穿梭无人机通常具备极高的飞行速度&#xff0c;如部分型号的速度可达到174公里/小时&#xff0c;甚至更…
阅读更多...
Stack和Queue（3）

Stack和Queue（3）

Stack和Queue&#xff08;3&#xff09; priority_queue的模拟实现 priority_queue.h #include <vector>namespace soobin {template<class T, class Container vector<T>>class priority_queue{public://强制生成默认构造priority_queue() default;temp…
阅读更多...
html+css+js实现Notification 通知

html+css+js实现Notification 通知

实现效果&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Notif…
阅读更多...
深入拆解TomcatJetty——Tomcat如何实现IO多路复用

深入拆解TomcatJetty——Tomcat如何实现IO多路复用

深入拆解Tomcat&Jetty 专栏地址&#xff1a; 极客时间-深入拆解Tomcat & Jetty IO 多路复用 当用户线程发起 I/O 操作后&#xff0c;网络数据读取操作会经历两个步骤&#xff1a; 用户线程等待内核将数据从网卡拷贝到内核空间。内核将数据从内核空间拷贝到用户空间…
阅读更多...
Docker搭建DVWA靶场以及刷题记录

Docker搭建DVWA靶场以及刷题记录

Docker搭建DVWA靶场以及刷题记录 Docker搭建DVWA靶场以及刷题记录靶场搭建 刷题记录SQL InjectionLowMediumHighImpossible SQL Injection(Blind)LowMediumHigh XSS (Reflected)LowMediumHigh XSS (Stored)LowMediumHigh File UploadLowMediumHigh Docker搭建DVWA靶场以及刷题记…
阅读更多...
zabbix 6.0 监控clickhouse(单机）

zabbix 6.0 监控clickhouse(单机）

zabbix 6.0 LTS已经包含了clickhouse的监控模板&#xff0c;所以我们可以直接使用自带的模板来监控clickhouse了。 0.前置条件 clickhouse 已经安装&#xff0c;我安装的是24.3.5.47zabbix-agent 已经安装并配置。系统是ubuntu 2204 server 1. 新建监控用户 使用xml的方式为…
阅读更多...
适用于 Windows 11/10 电脑 的 13 个最佳文件恢复软件

适用于 Windows 11/10 电脑 的 13 个最佳文件恢复软件

如果您由于系统故障、硬件损坏、人为错误或病毒攻击而丢失了重要文件或文件夹。不用担心&#xff0c;因为我们随时为您提供帮助&#xff01;借助正确的文件恢复工具&#xff0c;您可以立即检索计算机上不同类型的文件。如果你有为您的文件创建备份&#xff0c;你不用担心&#…
阅读更多...
juzigei/基于 ThinkPHP+Mysql灵活用工_灵活用工系统_灵活用工平台

juzigei/基于 ThinkPHP+Mysql灵活用工_灵活用工系统_灵活用工平台

基于 ThinkPHPMysql 灵活用工灵活用工平台灵活用工系统灵活用工小程序灵活用工源码灵活用工系统源码 开发语言 ThinkPHPMysql 源码合作 提供完整源代码 软件界面展示 一、企业管理后台 二、运用管理平台 三、手机端
阅读更多...
ECharts饼图-饼图自定义样式，附视频讲解与代码下载

ECharts饼图-饼图自定义样式，附视频讲解与代码下载

引言&#xff1a; 在数据可视化的世界里&#xff0c;ECharts凭借其丰富的图表类型和强大的配置能力&#xff0c;成为了众多开发者的首选。今天&#xff0c;我将带大家一起实现一个饼图图表&#xff0c;通过该图表我们可以直观地展示和分析数据。此外&#xff0c;我还将提供详…
阅读更多...
视频播放速度过快怎么办？视频速度调慢的简单方法

视频播放速度过快怎么办？视频速度调慢的简单方法

视频播放速度过快怎么办&#xff1f;在这个快节奏的时代&#xff0c;我们似乎习惯了迅速浏览和消化信息&#xff0c;视频内容也不例外。然而&#xff0c;有时我们会遇到视频速度过快的问题&#xff0c;这不仅让我们难以捕捉到每一个细节&#xff0c;更可能让我们错失视频所要传…
阅读更多...
【ChatGPT插件漏洞三连发之二】零点击Github仓库接管

【ChatGPT插件漏洞三连发之二】零点击Github仓库接管

在我们深入研究细节之前&#xff0c;我们想先解释一下插件上的帐户接管意味着什么。 举个例子&#xff0c;当您安装与您的 GitHub 交互的插件时&#xff0c;此插件会在插件网站上为您创建一个额外的帐户&#xff0c;用于存储您的 GitHub 凭据。使用这些凭据&#xff0c;插件可…
阅读更多...
内置数据类型、变量名、字符串、数字及其运算、数字的处理、类型转换

内置数据类型、变量名、字符串、数字及其运算、数字的处理、类型转换

内置数据类型 python中的内置数据类型包括&#xff1a;整数、浮点数、布尔类型&#xff08;以大写字母开头&#xff09;、字符串 变量名 命名变量要见名知意&#xff0c;确保变量名称具有描述性和意义&#xff0c;这样可以使得代码更容易维护&#xff0c;使用_可以使得变量名…
阅读更多...
Linux中级（DNS域名解析服务器）

Linux中级（DNS域名解析服务器）

一。产生原因1.IP地址&#xff1a;是互联网上计算机唯一的逻辑地址&#xff0c;通过IP地址实现不同计算机之间的相互通信&#xff0c;每台联网计算机都需要通过IP地址来互相联系和分别&#xff0c;但由于IP地址是由一串容易混淆的数字串构成&#xff0c;人们很难记忆所有计算机…
阅读更多...
计算机毕业设计Python+大模型租房推荐系统 租房大屏可视化 租房爬虫 hadoop spark 58同城租房爬虫 房源推荐系统

计算机毕业设计Python+大模型租房推荐系统 租房大屏可视化 租房爬虫 hadoop spark 58同城租房爬虫 房源推荐系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 用到的技术: 1. python…
阅读更多...
【独家:AI编程助手Cursor如何revolutionize Java设计模式学习】

【独家:AI编程助手Cursor如何revolutionize Java设计模式学习】

【独家:AI编程助手Cursor如何revolutionize Java设计模式学习】 导语 在Java高级编程的世界里,设计模式是每个开发者必须掌握的利器。但是,如何快速理解并灵活运用这些模式呢?让我们一起探索如何借助AI编程助手Cursor,轻松掌握设计模式,提升Java编程技能! 正文 设计模式:J…
阅读更多...
opencv - py_ml - py_kmeans

opencv - py_ml - py_kmeans

文章目录 1.理解 K-Means 聚类目标理论T 恤尺码问题它是如何工作的&#xff1f; 其他资源 2.OpenCV 中的 K-Means 聚类目标理解参数输入参数输出参数 1.理解 K-Means 聚类 目标 在本章中&#xff0c;我们将理解 K-Means 聚类的概念、其工作原理等。 理论 我们将通过一个常用…
阅读更多...
4.2-6 使用Hadoop WebUI

4.2-6 使用Hadoop WebUI

文章目录 1. 查看HDFS集群状态1.1 端口号说明1.2 用主机名访问1.3 主节点状态1.4 用IP地址访问1.5 查看数据节点 2. 操作HDFS文件系统2.1 查看HDFS文件系统2.2 在HDFS上创建目录2.3 上传文件到HDFS2.4 删除HDFS文件和目录 3. 查看YARN集群状态4. 实战总结 1. 查看HDFS集群状态 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023