如何操作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(毫米)等。

示例代码:

相关推荐
San30.2 小时前
从零构建坚固的前端堡垒:TypeScript 与 React 实战深度指南
前端·react.js·typescript
yunhuibin2 小时前
VideoPipe环境搭建及编译ubuntu240403
前端·人工智能
CHANG_THE_WORLD2 小时前
PDF文档结构分析 一
前端·pdf
2601_949833393 小时前
flutter_for_openharmony口腔护理app实战+知识实现
android·javascript·flutter
东东5163 小时前
果园预售系统的设计与实现spingboot+vue
前端·javascript·vue.js·spring boot·个人开发
rainbow68893 小时前
Python学生管理系统:JSON持久化实战
java·前端·python
打小就很皮...3 小时前
React Router 7 全局路由保护
前端·react.js·router
起风的蛋挞3 小时前
Matlab提示词语法
前端·javascript·matlab
有味道的男人3 小时前
1688获得商品类目调取商品榜单
java·前端·spring