如何操作HTML网页

首先每一个HTMLL网页包含一个基础框架,其他的内容都是在基础框架进行扩充的:

示例代码:

严格来说,HTML并不属于编程语言,而是一种标记语言,其代码以标签的形式来表示网页的内容。

是由角括号( <> )括起来的具有特定语法功能的关键词组合而成的,例如以上示例代码中第5行的 <title>

签通常成对出现,以 <title> 这里是标题 </title> 为例,第1个 <title> 表明 <title> 功能标签的开始,

</title> 的标签名前面有一个 / ,表示 <title> 功能标签的结束,成对标签之间的内容为标签的内容,即"这

题"是 <title> 标签对的内容,一个完整的标签也可以称为网页中的一个元素。

下面来介绍一下常用标签:

在HTML网页中,可以使用标签 <h1> ~ <h6> 来表示网页中正文内容的标题(不同于网页的标题),不同标签的显示效果不同, <h1> 标签的标题级别高于 <h2> 标签的标题级别,依次类推, <h6> 标签的标题级别最低。

1.标题标签

该代码仅编写了网页正文 <body> 部分,整体框架内容可参考14.1.1小节。使用浏览器打开该代码文件,会显示如图14-3所示的内容,其中 <h1> 标签对中的内容显示在网页的上方,且标签的内容显示效果(字体大小)为 <h1> 大于 <h2> 大于 <h3> 大于 <h4> 大于 <h5> 大于 <h6> 。

2.段落标签

在HTML网页中,可以使用 <p> 标签来表示一个段落的内容。

如图示例:

3.超链接标签

超链接标签 <a> 可用于实现在网页中单击某个信息链接后自动跳转到另一个网页。其使用形式如下:

<a href="链接的网址">链接的文字内容</a>

示例代码:

点击链接即可跳转到b站官网

4.注释标签

在HTML中也有和Python相同含义的注释功能,即当运行 .html 格式文件时,文件中的部分代码不会执行,浏览器在读取标签时,也不会将此部分当成元素进行渲染。注释标签常用于开发人员对HTML网页的或备注中。注释标签由 <!-- --> 和 <!-- --> 构成。

其使用形式如下:

<!-在此处写注释 ->

...内容

<!-- -->

注释标签中的两个横线之间(在此处写注释)可用于描述备注,由注释标签包括起来的内容将不会被执行。

5.标签属性

一个标签除了标签名、标签内容外,还可以包含标签属性。标签属性用于给标签设置附加功能,类似于Python语言中类的方法,当通过类创建出一个对象时,如果对象包含其他的属性和方法,该对象便具备更多的功能。同理当给标签赋予多种不同含义的属性后,标签也能具备更多的功能**。**

属性一般位于开始标签的标签名右边,且属性的值为字符串类型,需要用引号引起来。

常用的标签属性有 class 、 id 、 style 和 title :

  • class :为HTML网页元素定义一个或多个类名。

  • id :定义元素的唯一id,此id值在整个网页中是唯一的。

  • style :定义标签的行内样式。

  • title :设置标签的额外信息,当鼠标指针移到此标签上时会显示一段提示文本。

如图示例代码:

当我们把光标放到"YPP"上会显示提示信息

我们如何设置字体的字形与效果呢?

给字体设置粗体格式使用 <b> 标签。

示例代码:

可以看到我们的"段落"已经加粗了

给字体设置斜体格式使用 <i> 标签,设置上标格式使用 <sup> 标签,设置下标格式使用 <sub> 标签,设置下画线格式使用 <u> 标签。

如下示例代码:

给字体设置斜体格式使用 <i> 标签,设置上标格式使用 <sup> 标签,设置下标格式使用 <sub> 标签,设置下画线格式使用 <u> 标签。

示例代码:

第2行代码在 <h1> 标签中嵌套使用斜体格式标签 <i> 将"我是"设置为斜体格式,嵌套使用上标格式 <sup> 将"标"设置为上标格式,嵌套使用下标格式标签 <sub> 将"题"设置为下标格式。

第3行代码在 <p> 标签中使用粗体格式标签 <b> 将"段落"加粗,嵌套使用下画线格式标签 <u> 将"文字信息"设置为下画线格式

6.设置字体颜色及大小

HTML颜色由红色、绿色和蓝色混合而成,字体颜色可以通过标签的属性 style 设置。其使用形式如下:
<标签名 style="color:颜色值">内容</标签名>

示例代码:

设置标签内容的字体大小可以通过给样式 style 赋予 font-size 的值来实现。

使用形式:
<标签名 style="font-size:38pt">我是标题1</标签名>

以上形式表示设置"我是标题1"标签的字体大小为38pt,其单位可以有多种形式,例如pt(磅)、cm(厘米)、inches(英寸)、mm(毫米)等。

示例代码:

相关推荐
摇滚侠4 分钟前
《SpringBoot 3:入门与应用实战》第 9 章 使用 WebMvc 开发应用 阅读笔记 22
javascript·spring boot·笔记
AICoder码农王10 分钟前
Vitest 实战:从一个真实项目看懂测试套件
前端·前端框架
xiaominlaopodaren13 分钟前
three.js地图视口瓦片(一):屏幕角点射线
javascript·gis·three.js
律宏阔19 分钟前
Electron Forge 在 macOS M4 打包踩坑:Node.js 26 导致 make 异常中断
前端
木木爱研究22 分钟前
elpis-里程碑四-基于Vue完成动态组件库建设
前端·后端
一水行22 分钟前
博客评论系统搭建回顾
javascript·后端
深念Y25 分钟前
Nuxt 项目 Docker 构建:从 pnpm+node 迁移到全 bun
java·前端·docker
qq_4260039626 分钟前
UI自动化元素定位不到解决方案
前端·pycharm·自动化
EthanChou202033 分钟前
AES67协议笔记
前端·笔记·es6
马优晨34 分钟前
pom.xml 中 jquery webjars 依赖解释
xml·前端·jquery·jquery webjars·webjars依赖