前端零基础入门到上班:【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. 总结与练习题
        • 总结
        • 练习题

目录
  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. 使用有序列表和无序列表，展示你最喜欢的书籍和电影。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

市面上热门的四款PDF转换器解析！！

市面上热门的四款PDF转换器解析！！

在互联网普及的今天&#xff0c;PDF和Excel已经成为我们工作中不可或缺的两种文件格式。PDF常用于文档的阅读、打印和分享&#xff0c;而Excel则适用于数据的分析和处理。但是&#xff0c;有时候我们需要在两者之间进行转换&#xff0c;例如将PDF中的数据导入到Excel中进行进一…
阅读更多...
物联网数据采集网关详细介绍-天拓四方

物联网数据采集网关详细介绍-天拓四方

一、物联网数据采集网关的概述 物联网数据采集网关&#xff0c;简称数据采集网关&#xff0c;是物联网系统中的重要组成部分&#xff0c;位于物联网设备和云端平台之间。其主要职责是实现数据的采集、汇聚、转换、传输等功能&#xff0c;确保来自不同物联网设备的数据能够统一…
阅读更多...
Hadoop 踩坑汇总

Hadoop 踩坑汇总

文章目录 一、完整教程二、解决问题问题①&#xff1a; DataNode 没有问题②&#xff1a; 网页打不开 三、大功告成&#xff01;&#xff01; 一、完整教程 这个教程比较详细&#xff0c;博主是按照这个来执行的 https://blog.csdn.net/qq_47831505/article/details/123806514…
阅读更多...
VsCode插件：前端每日一题

VsCode插件：前端每日一题

Javascript本地存储的方式有哪些&#xff1f; 区别及应用场景? 1. Cookie Cookie 是网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据。Cookie 通常包含了用户的一些个人信息&#xff0c;如用户名、密码、浏览记录、偏好设置等。Cookie 一般在用户访问网站…
阅读更多...
Excel：vba实现生成随机数

Excel：vba实现生成随机数

Sub 生成随机数字()Dim randomNumber As IntegerDim minValue As IntegerDim maxValue As Integer 设置随机数的范围(假入班级里面有43个学生&#xff0c;学号是从1→43)minValue 1maxValue 43 生成随机数(在1到43之间生成随机数)randomNumber Application.WorksheetFunctio…
阅读更多...
智联招聘×Milvus：向量召回技术提升招聘匹配效率

智联招聘×Milvus：向量召回技术提升招聘匹配效率

01. 业务背景 在智联招聘平台&#xff0c;求职者和招聘者之间的高效匹配至关重要。招聘者可以发布职位寻找合适的人才&#xff0c;求职者则通过上传简历寻找合适的工作。在这种复杂的场景中&#xff0c;我们的核心目标是为双方提供精准的匹配结果。在搜索推荐场景下&#xff0c…
阅读更多...
深入理解gPTP时间同步过程

深入理解gPTP时间同步过程

泛化精确时间协议（gPTP）是一个用于实现精确时间同步的协议，特别适用于分布式系统中需要高度协调的操作，比如汽车电子、工业自动化等。 gPTP通过同步主节点（Time Master）和从节点（Time Slave）的时钟，实现全局一致的时间参考。 以下是gPTP实现主从时间同步的详细过程：…
阅读更多...
奥迪一汽新能源：300台AGV、1000台机器人、24米立体库

奥迪一汽新能源：300台AGV、1000台机器人、24米立体库

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 位于长春的奥迪新能源工厂&#xff0c;占地面积广阔&#xff0c;达到了约150公顷&#xff0c;其规模之宏大&#xff0c;甚至超越了奥迪在欧洲的内卡苏姆工厂。 这座工厂不仅是奥迪在中…
阅读更多...
一、在cubemx下RTC配置调试实例测试

一、在cubemx下RTC配置调试实例测试

一、rtc的时钟有lse提供。 二、选择rtc唤醒与闹钟功能 内部参数介绍 闹钟配置 在配置时间时&#xff0c;注意将时间信息存储起来&#xff0c;防止复位后时间重新配置。 if(HAL_RTCEx_BKUPRead(&hrtc, RTC_BKP_DR0)! 0x55AA)//判断标志位是否配置过&#xff0c;没有则进…
阅读更多...
使用Angular构建动态Web应用

使用Angular构建动态Web应用

&#x1f496; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4bb; Gitee主页&#xff1a;瑕疵的gitee主页 &#x1f680; 文章专栏&#xff1a;《热点资讯》 使用Angular构建动态Web应用 1 引言 2 Angular简介 3 安装Angular CLI 4 创建Angular项目 5 设计应用结构 6 创建组件…
阅读更多...
【每日一题】LeetCode - 盛最多水的容器

【每日一题】LeetCode - 盛最多水的容器

给定一个长度为 n 的整数数组 height。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i])。要求找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 输入示例&#xff1a; height [1,8,6,2,5,4,8,3,7]输出&#xff1a; 4…
阅读更多...
CSS行块标签的显示方式

CSS行块标签的显示方式

块级元素 标签&#xff1a;h1-h6&#xff0c;p,div,ul,ol,li,dd,dt 特点&#xff1a; &#xff08;1&#xff09;如果块级元素不设置默认宽度&#xff0c;那么该元素的宽度等于其父元素的宽度。 &#xff08;2&#xff09;所有的块级元素独占一行显示. &#xff08;3&#xff…
阅读更多...
安卓在windows连不上fastboot问题记录

安卓在windows连不上fastboot问题记录

fastboot在windows连不上fastboot 前提是android studio安装 google usb driver 搜索设备管理器 插拔几次找安卓设备 在其他设备 或者串行总线设备会出现安卓 右键更新驱动 下一步下一步然后可以了
阅读更多...
【FISCO BCOS】二十二、使用Key Manager加密区块链节点

【FISCO BCOS】二十二、使用Key Manager加密区块链节点

#1024程序员节&#xff5c;征文# 落盘加密是对节点存储在硬盘上的内容进行加密&#xff0c;加密的内容包括&#xff1a;合约的数据、节点的私钥。具体的落盘加密介绍&#xff0c;可参考&#xff1a;落盘加密的介绍&#xff0c;今天我们来部署并对节点进行落盘加密。 环境&a…
阅读更多...
高效文本编辑与导航：Vim中的三种基本模式及粘滞位的深度解析

高效文本编辑与导航：Vim中的三种基本模式及粘滞位的深度解析

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…
阅读更多...
Bode图(波特图)

Bode图(波特图)

波特图&#xff1a; 通常用波特图分析信号的频率响应。 对设计滤波器的人来说&#xff0c;比较关注的是在特定的频率内&#xff0c;到底有怎样的增益和相移。根据前面分析的内容&#xff0c;波特图刚好是研究增益和相移。所以要想设计一个满足性能的滤波器&#xff0c;必须要…
阅读更多...
react18中在列表中如何使用useCallback进行渲染优化

react18中在列表中如何使用useCallback进行渲染优化

实现的需求&#xff1a;在列表中如何缓存每个子组件&#xff0c;父组件重新渲染&#xff0c;子组件不更新&#xff0c;下面的列子假设 Chart 组件被包裹在memo 中。你希望在 ReportList 组件重新渲染时跳过重新渲染列表中的每个 Chart。但是&#xff0c;你不能在循环中调用 use…
阅读更多...
详细分析Pytorch中的masked_fill基本知识（附Demo）

详细分析Pytorch中的masked_fill基本知识（附Demo）

目录 1. 基本知识2. Demo 1. 基本知识 基本的原理知识如下&#xff1a; 输入张量和掩码&#xff1a; masked_fill 接受两个主要参数&#xff1a;一个输入张量和一个布尔掩码 掩码的形状必须与输入张量相同&#xff0c;True 表示需要填充的位置&#xff0c;False 表示保持原值 …
阅读更多...
TikTok运营对IP有什么要求？

TikTok运营对IP有什么要求？

TikTok在进行直播带货时&#xff0c;网络环境的配置尤为关键&#xff0c;网络质量直接影响到直播效果&#xff0c;因此选择稳定的IP地址很重要。那么&#xff0c;TikTok直播时该选择什么样的IP地址呢&#xff1f;接下来&#xff0c;我们来深入分析一下。 TikTok对IP地址的要求 …
阅读更多...
HBuilder X 中Vue.js基础使用-＞计算属性的应用（三）

HBuilder X 中Vue.js基础使用-＞计算属性的应用（三）

一、通过简单的计算属性&#xff1a;对两数进行加法&#xff0c;减法&#xff0c;乘法&#xff0c;除法运算 <template><div><h1>computed 计算属性</h1><el-input type"text" v-model"numOne" /> <el-input type"t…
阅读更多...
最新文章

Copyright @ 2022~2023