前端成长之路:HTML(1)

ops/2024/12/15 0:23:17/
htmledit_views">

每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。

基本结构标签(骨架标签)

<html></html>标签是HTML标签,是页面中最大的标签,被称为根标签。

<head></head>标签是文档头部标签,在head标签中必须要设置的标签是<title></title>。

<title></title>标签是文档的标题,作用是让页面拥有一个属于自己的网页标题。

<body></body>标签是文档的主题,文档中所有的内容,页面内容,几乎都是放置在body标签中的。

HTML文档的的后缀名必须是.html或.htm,浏览器的作用是读取HTML文档,并以网页的形式显示出它们。

文档中的特殊标签

<!DOCTYPE>标签

<!DOCTYPE>标签,这个标签是用于文档类型声明,其作用是告诉浏览器使用的哪个版本的HTML显示网页。比如说<!DOCTYPE html>,这个代码的意思是:当前页面采取的是 HTML5 版本来显示网页。特别注意:1.<!DOCTYPE>标签声明必须位于整个HTML文档的最前面的位置(必须位于第一行),其位于<html>标签之前。2.<!DOCTYPE>标签并不是HTML中的标签,只是文档类型声明的标签。

lang语言种类

通过html标签中的lang属性,可以定义当前HTML文档的默认显示语言,其默认是en(也就是英文),可以将其修改为zh-CN(简体中文)。但其实这并不影响文档显示:定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文。但是这个属性对于浏览器和搜索引擎还是有影响的。

字符集

字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。在标签内,可以通过<meta>标签的charset属性来规定当前HTML文档应该使用哪种字符编码。比如:

html"><meta charset="UTF-8">

 这个属性就是将这个文档的字符集设置为“UTF-8”。需要特别注意的是:一般情况下,统一使用“UTF-8”编码,必须统一写成标准的 "UTF-8",不要写成"utf8"或 "UTF8"。并且,指定字符集这个meta标签是必须写的。

HTML中常用的标签

标题标签

为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题,分别是<h1>-<h6>。在标题标签中定义的文字会加大加粗,字号也会变大,并且一个标题独占一行。并且,标题的文字加大加粗效果从h1-h6依次递减,重要性也是依次降低,这就实现了多级标题的需求。

 

段落和换行标签

在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。p标签是单词paragraph(段落)的缩写。顾名思义,其作用就是像人们平时阅读分段一样,将HTML文档分割为若干段落,便于阅读。 文本在p标签(也就是在一个段落中)中会根据浏览器窗口的大小自动换行,并且段落之间会保持空隙,这很大程度上符合人们的阅读习惯。

 

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br>,br是单词break的缩写。这个标签的作用就是强制换行。 br标签还是一个单标签(单标签只需要一个标签就可以,它是自闭合的。);br标签只是简单的开启新的一行,和段落标签的换行不一样,段落p标签的换行会插入一些垂直的间距。

 

可以明显的看出段落之间的换行是有明显的间距的。

文本格式化标签

在网页中,有时需要为文字设置粗体、斜体或下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。文本格式化标签的作用是:突出当前文字的重要性。

加粗

文字想要加粗可以使用<strong></strong>标签或者使用<b></b>标签,但是一般推荐使用strong标签,使用strong标签的语义更加强烈。

倾斜

文字想要倾斜可以使用<em></em>标签或者使用<i></i>标签,但是一般推荐使用em标签,使用em标签的语义更加强烈。

删除线

文字想要添加删除线效果可以使用<del></del>标签或者使用<s></s>标签,但是一般推荐使用del标签,使用del标签的语义更加强烈。

下划线

文字想要添加下划线效果可以使用<ins></ins>标签或者使用<u></u>标签,但是一般推荐使用ins标签,使用ins标签的语义更加强烈。

div和span标签

div和span标签是本身是没有任何语义的,它们两个就像是一个盒子,可以用来装内容。div是division的缩写,division的意思是分割、分区;span的意思是跨度、跨距。可以将div标签理解为一个大盒子,是用来布局的(后面的盒子模型会用到),一行只能放一个div标签;span可以理解为一个小盒子,也是用于布局,但是一行可以放多个span。

图像标签

在HTML中,用<img>标签定义页面中的图像。src是img标签的必须属性,其用于指定图像文件的路径和文件名。 除了src这个必须属性之外,img标签还具有一些其他属性:alt属性的作用是替换文本:提供一段文本,若图像加载失败,那么就会显示alt中的文本;title属性的作用是提示文本:提供一段文本,当鼠标放置于图像上,就会显示title中的文字;width和height属性是设置图片的宽高(一般宽高只会设置一个,另外一个会自动调整);border属性可以设置图像的边框粗细(单位是像素px)…… 这些属性都是根据需要自己设置。

 

需要注意的是:

1.图像标签可以拥有多个属性,必须写在标签名的后面。

2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。(这里尤其注意:属性之间不是用“,”分隔的,直接使用空格分隔即可!)

3.属性采取键值对的格式,即key=“value"的格式,属性=“属性值”。

img标签的属性有很多(HTML的有些标签也具有很多属性,但是并非每一个属性都是必须的。),但是必须要写的属性只有src(并且src中的路径必须写相对路径,必须!),其他属性是根据需求使用的。

超链接

在HTML标签中,<a></a>标签用于定义一个超链接,其作用就是超链接的作用:从一个页面连接到另外一个页面。a是anchor(锚)的缩写。a标签有两个常见的属性:href和target:href是连接目标的URL,这是必须属性;target是指定连接页面的打开方式,默认是_self,就是在当前页面打开;可以通过target指定打开方式为_blank,在新窗口中打开。

连接分类

1.外部链接:例如<a href="http:// www.baidu.com ">百度</a>。

2.内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 <a href="index.html">首页</a>。

3.空链接:如果当时没有确定链接目标时,<a href="#">首页</a>。

4.下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。

5.网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。

6.锚点链接:当点击连接时,可以快速定位到页面中的某个位置。

(1).在超链接的href属性中,设置属性值为#名字的形式,如<a href=#two>第二集</a>

(2).找到目标位置标签(想要通过超链接跳转的标签),里面添加一个id属性,id设置为a标签中href中定义的名字,如:<h1 id="two">第二集介绍</h1>。这样通过点击超链接中的文本“第二集”(href指定为#two),就可以跳转到id为“two”的标签处。

 这样就可以完成锚点链接。其主要实现方法可以概括为:超链接中的href属性要和想要通过超链接跳转到的标签的id属性相同。


http://www.ppmy.cn/ops/141954.html

相关文章

渗透测试工具 -- SQLmap安装教程及使用

随着网络安全问题日益严峻&#xff0c;渗透测试成为了保护信息安全的重要手段。而在渗透测试的众多工具中&#xff0c;SQLmap凭借其强大的自动化SQL注入检测和利用能力&#xff0c;成为了网络安全专家必备的利器。那么&#xff0c;你知道如何高效地使用SQLmap进行漏洞扫描吗&am…

又细又长的马尾:tail

英语里边有一个单词 tail&#xff0c;意为“尾巴”&#xff0c;这应当是众所周知的事情了。 不过&#xff0c;tail 这条尾巴&#xff0c;并不简单&#xff0c;因为它还是一个词根&#xff0c;也就是说 tail 其实是自由词素。 事实上&#xff0c;tail 最初来自 马尾 这样一个概…

使用WPF和C#绘制覆盖网格的3D表面

这个例程展示了如何使用 C# 代码和 XAML 绘制覆盖有网格的 3D 表面。 示例使用 WPF 和 C# 将纹理应用于三角形展示了如何将纹理应用于三角形。 此示例只是使用该技术将包含大网格的位图应用于表面。 在类级别&#xff0c;程序使用以下代码来定义将点的 X 和 Z 坐标映射到 0.0…

【第一节】Git的简介和安装

目录 一、git的介绍 二、git 的安装 2.1 Linux 平台安装 2.2 源码安装 2.3 Windows 平台安装 2.4 Mac 平台安装 2.5 Git 配置 2.5.1 配置文件 2.5.2 用户信息配置 2.5.3 文本编辑器配置 2.5.4 差异分析工具配置 2.5.5 查看配置信息 一、git的介绍 Git 是一种开源的…

日常健康:点滴积累,守护生命活力

在现代社会的快节奏生活中&#xff0c;日常健康往往容易被忽视&#xff0c;然而&#xff0c;它却是我们享受美好生活、实现人生价值的基石。 饮食方面&#xff0c;注重营养均衡是关键。每日三餐应合理搭配&#xff0c;保证碳水化合物、蛋白质、脂肪、维生素和矿物质的充足摄入。…

docker简单私有仓库的创建

1&#xff1a;下载Registry镜像 导入镜像到本地中 [rootlocalhost ~]# docker load -i registry.tag.gz 进行检查 2&#xff1a;开启Registry registry开启的端口号为5000 [rootlocalhost ~]# docker run -d -p 5000:5000 --restartalways registry [rootlocalhost ~]# dock…

postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求)

接口完成之后,自己使用postman测试了一下,没有问题; 可是在和小组前端调试接口的时候,他却说访问不了; 信息如下:(我自己写的一个打印请求信息的拦截器) 发现报错信息是: Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported 也就是说…

【Vulkan入门】13-Render

目录 先叨叨Git信息关键代码VulkanEnv::RenderOneFrame(uint32_t* pixels)VulkanEnv::CreateSyncObjects()main() 编译运行 先叨叨 经过快两周的努力&#xff0c;终于可以开始渲染了。 Git信息 repository: https://gitee.com/J8_series/easy-car-uitag: 13-Renderurl: http…