【前端】如何制作一个简单的网页(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 - 打断 | |

总结:

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

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

相关推荐
w***95491 分钟前
VScode 开发 Springboot 程序
java·spring boot·后端
iMonster3 分钟前
React 组件的组合模式之道 (Composition Pattern)
前端
呐呐呐呐呢11 分钟前
antd渐变色边框按钮
前端
兔子撩架构25 分钟前
Dubbo 的同步服务调用
java·后端·spring cloud
元直数字电路验证30 分钟前
Jakarta EE Web 聊天室技术梳理
前端
wadesir33 分钟前
Nginx配置文件CPU优化(从零开始提升Web服务器性能)
服务器·前端·nginx
牧码岛34 分钟前
Web前端之canvas实现图片融合与清晰度介绍、合并
前端·javascript·css·html·web·canvas·web前端
灵犀坠35 分钟前
前端面试八股复习心得
开发语言·前端·javascript
9***Y4837 分钟前
前端动画性能优化
前端
网络点点滴39 分钟前
Vue3嵌套路由
前端·javascript·vue.js