【前端】如何制作一个简单的网页(3)

接下来我们为html元素添加网页内容。网页内容按照功能的不同可以区分为网页头与网页体两个部分。

先来说说什么是网页头。

|--------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|
| 网页头 网页头(又称为网页头部信息)向浏览器提供文档的一些信息。 这些信息包括网页的名称、编码方式、++样式、JS代码++ 等。 | |
| <head> 文档的所有信息均包含在head元素内部,即它从<head>开始,从</head>结束。 head 中的内容不会在网页中显示。 | |
| 设置网页编码 <meta>设定网页的元信息,它是一个单标签元素。 meta 中的charset属性用来设置网页的++编码++ ,它的值通常为"UTF-8"。 | |
| <title> <title>元素用来设置文档的标题或者名称,仅在 head 中使用。 浏览器通常会将该元素的内容显示在标签页中。 | |
| 网页体 网页体,也就是网页的主体,包含了网页中要显示的所有内容。 比如段落、图像、超链接等,我们浏览网页时看到的所有信息都包含在网页体中。 | |

总结:

|------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|
| 到这里,HTML文档的框架已经基本成型。 需要注意的是,缺少<html>、<head>、<body>等标签,网页不会报错,但是会让网页的加载速度变慢。 这是因为浏览器会消耗掉一部分性能,自动地为你补全缺失的标签。 | |

自动生成网页结构

HTML编辑器提供了一个更简便的方法帮助我们编写网页结构。

英文!+tab键

生成:

学习网页中常见的文本元素,制作一个完整的网页。

|-----------------------------------------------------------------------------|----------------------------------------------------------------------------|
| 标题是标明文章、作品等内容的简短语句。 我们在看文章时,第一时间关注标题,是因为它能够总结文章的中心内容。 同样的,网页也需要用到标题元素来突显主题。 | |

|----------------------------------------------------------------------------|----------------------------------------------------------------------------|
| | |

|-----------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|
| body 浏览器显示给用户的内容均要放在body元素中。 本课后续的所有元素均放在body中,后面我们将不再强调这一点。 | |
| 标题开始的位置 h1 元素表示网页中的标题。 它由<h1>开始,</h1>结束。 全称:heading - 标题 | |
| 标题内容 标题的文字紧跟在<h1>标签之后,并且在网页中默认以粗体的样式显示。 在这里,我们将"我是一个大标题"设置为标题内容。 | |
| 其它等级标题 其实刚刚的<h1>标签又被称为一级标题。 HTML 总共提供了 6 个标题元素,即h1 ~h6,它们分别对应不同等级的标题,其中h1是最高等级。 默认情况下随着等级的降低,字体样式也会逐渐减小; | |

Ps:

|------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------|
| h1与title的区别 title 元素指的是网页的标题名称。它被显示在浏览器的标签页中,且一个HTML文档只能有一个title标签。 h1 元素指的是网页内容中的标题,一个网页可以含有多个h1标题。 | |

|--------------------------------------------------------------------------------|----------------------------------------------------------------------------|
| 对于一篇文章来说,只有标题没有正文是不行的。 如图所示,将文字分段显示,能够在网页中更有条理的展现内容。 为了实现这一目的,你需要使用HTML中的段落元素。 | |
| | |

具体解释:

|--------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
| =p元素 p元素代表段落。 这里使用 <p></p>标签对标记段落,内容为"夜曲编程专注于编程入门教育。"。 p - paragraph - 段落 | |
| 段落元素的特点: 1.段落与段落之间有默认的间隙; 2.一个段落中的文字会根据浏览器窗口的大小自动换行。 | |
| 文字中的空格与换行 为元素添加内容时,若出现换行或多个空格,浏览器会将其转换为一个空格。 比如右边的代码: 第1、2行,在段落内容中添加了换行; 第4行,在段落内容中添加了多个空格, 它们在网页中均被转换为一个空格。 | |
| 强制换行 若想要强制在某个位置换行,可以使用<br>标签。 <br> 是一个单标签元素,表示在此处强制换行。 br - break - 打断 | |

总结:

刚才我们完成了网页中标题与段落元素的学习。在实际开发时,一个网页通常会包含多个相同元素,比如多个标题与段落。

对于相同标签的元素,我们又该如何区分定位呢?

相关推荐
颜酱1 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
Coder_Boy_2 小时前
技术让开发更轻松的底层矛盾
java·大数据·数据库·人工智能·深度学习
失忆爆表症2 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui
invicinble2 小时前
对tomcat的提供的功能与底层拓扑结构与实现机制的理解
java·tomcat
小迷糊的学习记录2 小时前
Vuex 与 pinia
前端·javascript·vue.js
发现一只大呆瓜2 小时前
前端性能优化:图片懒加载的三种手写方案
前端·javascript·面试
较真的菜鸟2 小时前
使用ASM和agent监控属性变化
java
黎雁·泠崖2 小时前
【魔法森林冒险】5/14 Allen类(三):任务进度与状态管理
java·开发语言
不爱吃糖的程序媛2 小时前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
利刃大大2 小时前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus