HTML:相关概念以及标签

目录

什么是网页?

什么是HTML语言?

语法规范

 HTML基本结构标签

 DOCTYPE,lang以及字符集

HTML常用标签

5>图像标签(重要)

 除此之外还有几个调整图片属性的标签

 图像标签总结

什么是网页?

我们平时使用电脑和手机都是离不开网站和网页的,那么什么是网页呢?什么又是网站呢?

网页就是网站的一页,网页就是一个后缀为html的文件,通过浏览器读取然后就是我们所看到的各中有画面的网页了;不信?我们在一个网页中右键点击打开网页源代码,你就会发现源代码就是就是使用的html语言写的;

 网站就是指在因特网上根据一定的规则,使用HTML等制作的作用于展示特定内容相关的网页集合;

网页是构成网站的基本元素,它通常是由图片,链接,文字,声音,视频等元素组成.就是通常我们看到的网页常见以.htm和.html后缀结尾的文件,因此将其俗称为HTML文件;

什么是HTML语言?

HTML语言并不是一门编程语言,而是一种标记语言,叫做超文本标记语言(Hyper Markup Language),他是用来描述网页的一种语言;

html里面有着一套标签;

现在让在下展示下一个简单的html文件;
第一步:打开记事本复制下面的代码;

<html>
<title >
这里是html文件的标签</title>
<body>
正文部分:最简单的html文件
</body>
</html>

第二步:保存(ctrl+s),然后把这个文件的后缀从txt改为html; 

第三步:点击"是",然后就成功创建了一个html文件;双击之后就会使用默认浏览器打开;show time!

我们会发现<title>标签里的文字出现在了最顶部的标签上;网页的正文部分是在<body>标签之中的最外层的<html>就是表示现在写的是html文件,并且可以使用标签(html有着一套标签);所以我们只要是写html文件最外层一定要有html的双标签;

还是有点清楚?没关系,在下后面会一步步剖析的;

语法规范

我们先来认识几个最重要的标签:title,head,body;
1.在HTML中大都是成对出现的标签,少数的单标签;所以后面不做说明的,默认是双标签;
2.标签是由尖括号包围的关键词,例如<html>; 

1>html标签

html标签是成对出现的,例如<html>和</html>;诸如此类,前者是开始标签,后者是结束标签,缺一不可 ;

2>标签关系

 所以,综合上述的几个标签,基本的框架就出来了;

<html>
<head>
<title>......</title>#标题标签在<head>标签之中,<head>和<title>是包含关系
</head>
<body>...</body>#网页中的正文部分是在<body></body>之中;与 <head>是并列关系
</html>

 HTML基本结构标签

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

<html>
   <head>
      <title>我的第一个页面</title>
   </head>
   <body>
        你我之间,一飞冲天
   </body>
</html>

 下面我们来试一下:还是刚才的步骤,开个新记事本->复制代码->改后缀名->打开;
创建成功,是不是很简单?

我们在日常使用时其实并不是这样用记事本写html文件的;我们通常是使用vscode,上面有专门用来写html文件的配置;使用起来更加的方便;当然vs studio 2022也是可以使用的,不过相对要更加的麻烦些;这里我推荐大家使用vscode;

 DOCTYPE,lang以及字符集

首先我们打开vscode创建好一个html文件之后一开始是什么都没有的,这时候我们需要打出一个'!',然后'回车';html框架就会自动出来啦;

 我们发现这个框架的代码比我上面的写的要多啊!上面我写的只是个最简单的基本框架,其功能不够全面;现在这个框架中功能和限制更完善;下面我们来认识一下几个新的关键字;

1><!DOCTYPE html>

DOCTYPE是文档类型的意思;<DOCTYPE html>就使用最新的html文档类型(html5);
注意:这个标签一定要写在代码的开头;并且独占一行;

2><html lang ="en">

lang就是language的英文缩写,这个标签的意思是网页使用的语言种类,英语就是"en",汉语就是"zh-cn"等等;如果不是中文或英文语言,网页就会提供文本翻译;

注意:对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-cn也可以显示英文;这个属性对于浏览器和搜索引擎(百度,谷歌等)还是有作用的;

3><meta charset ="UTF-8"/>

meta有元标签之义,至于元标签是啥,我们先不用关心,我们只需要知道元标签具有属性;charset就是元标签的属性,char是字符,set是设置,所以这个标签的作用就是设置字符;charset是多个字符的集合,以便计算机能够识别和存储各种文字;

<meta>标签是写在<head></head>标签之中的,通过此种标签的属性可以来规定html文档的字符编码;

charset的常用值有:GB2312,BIG5,GBK和UTF-8,其中UTF-8也被称为万国码;基本包含了全世界所有国家需要用到的字符;也就是在任何国家访问不会出现乱码的情况;

HTML常用标签

根据标签语义,在合适的地方给一个最为合理的标签,可以是页面的结构更加的清晰;

左边是没有使用对应标签的网页,当我们添加了对应的标签,显示就会发生变化,合理的标签(像分段,换行,字体大小,字体颜色等)会使页面的结构更加的美观清晰; 

1>标题标签<h1>~<h6>

标题在html中分为六级,h1是字体最大的同时也是最重要的,向后字体依次变小;注意标题标签的使用方法是<h1></h1>...<h6></h6>;下面来展示下;

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

 注意:标题是独占一行的;

2>段落标签<p></p>和换行标签<br/>

这两个标签直接演示下大家就明白了;

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    元宵节这天晚上，我到外婆家做汤圆、吃汤圆。我先把一小块面团搓成一个圆
    球，再用小手指在球上戳了个小洞，然后两手大拇指放入洞，其余八个手
    指绕着球转，随着不停地转动，小球变成了一个“小碗”。接着我把馅放进这
    个“小碗”内,外婆准备的有豆沙馅、肉馅，还有芝麻馅。馅放好以后，我一只手
    握住球，另一只手用虎口把“小碗”的大口捏紧。“小碗”又成了个圆球，只是它
    的“肚子”里有东西了。外婆还教我在甜汤圆上捏个小尖尖儿，这样一个雪白
    的、圆咕隆咚的汤圆就做成了!
    水烧开了，准备下汤圆了，只见汤圆宝宝们迫不及待地潜入锅底。
    过了几分钟，汤圆宝宝们全都浮了上来，汤圆熟了，出锅喽。我们大家津津有味地吃
    着汤圆，聊聊新年的喜事，说说新年的愿望。我度过了一个难忘快乐的元宵节!
</body>
</html>

这是我从网上随便找到部分文章,现在我们不分段看看是什么效果;

我们可以看到不分段的话,就是纯文字一个挨着一个,结构十分的不清楚;

使用段落标签后: 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>元宵节这天晚上，我到外婆家做汤圆、吃汤圆。我先把一小块面团搓成一个圆
    球，再用小手指在球上戳了个小洞，然后两手大拇指放入洞，其余八个手
    指绕着球转，随着不停地转动，小球变成了一个“小碗”。接着我把馅放进这
    个“小碗”内,外婆准备的有豆沙馅、肉馅，还有芝麻馅。馅放好以后，我一只手
    握住球，另一只手用虎口把“小碗”的大口捏紧。“小碗”又成了个圆球，只是它
    的“肚子”里有东西了。外婆还教我在甜汤圆上捏个小尖尖儿，这样一个雪白
    的、圆咕隆咚的汤圆就做成了!</p>
    水烧开了，准备下汤圆了，只见汤圆宝宝们迫不及待地潜入锅底。
    过了几分钟，汤圆宝宝们全都浮了上来，汤圆熟了，出锅喽。我们大家津津有味地吃
    着汤圆，聊聊新年的喜事，说说新年的愿望。我度过了一个难忘快乐的元宵节!
    
</body>
</html>

特点:1.每行的字数会随着网页的宽度,自动调整;
2.分段后段与段之间会有空隙;

换行标签<br />是一个单标签;使用起来也很简单,类似于编程语言中的/n;这个就不解释了,大家可以自己尝试下;

3>文本格式化标签

在网页中,有时需要为文字设置粗体,斜体或下划线等效果,这时就要用到html中的文本格式化标签,使文字以特殊的方式显示;

标签语义:突出重要性,比普通的文字重要;

4>div和span标签

div和span没有语义,可以看成是盒子,什么意思呢?我们来看一下京东的页面;

就像这样,他们三个虽然是在一行上,但是并不属于同一段代码;只是排列在了一行上;看起来就像是摆了一排的盒子一样; 

div是单词division的缩写,意为分割,分区.我们来看一下div的效果;

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>我来展示下div的效果</div>
    <div>我来展示下div的效果</div>
</body>
</html>

我们发现div的效果就是div里面的内容写完后就会自动换行;与<p>不同的是div换行之后没有空隙; 

 span意为跨度;

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>我来展示下div的效果</span>
    <span>我来展示下div的效果</span>
</body>
</html>

span与div不同的是写完标签中的内容之后不会换行,而是稍微留一点的空隙,然后继续开始后面的写作;刚才的京东的那种排列方式想必就是使用了此种方式吧; 

5>图像标签(重要)

所谓"一图胜千言",在网页中我们几乎离不开各种各样的图片,没有图片,图标的网页是十分的枯燥的;所以图像标签是十分重要的;后续我将以本人照片为大家演示;

那怎么将图片插入网页呢?

使用标签<img >;img 是image的缩写;

<img src ="图像URL"/>

这里注意了,必须是src;最后面还有一个/不要忘记了;
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名;
所谓属性:简单了解就是属于这个图像标签的特性;

下面我来演示下:
1>首先呢,我们需要先把图片和该html文件放在同一个目录下;(这样使用的是相对路径,方便)

2> 然后呢,我们使用<img>标签把图片插入到网页去;(复制下面的代码)

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>图像标签的使用:</h1>
    <img src="pyy.jpg"/>
</body>
</html>

来吧,展示:

 除此之外还有几个调整图片属性的标签

 

下面我们来验证下

1>alt标签

这里我们只需要改一下图片的名字就成不存在的图片了;

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>图像标签的使用:</h1>
    <img src="pyy1.jpg" alt ="我是彭于晏"/>
</body>
</html>

 2> title(图像提示标签)

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>图像标签的使用:</h1>
    <img src="pyy.jpg" alt ="我是彭于晏" title ="我是彭于晏(图像提示标签)" />
</body>
</html>

我们把鼠标放在图片上,就会有图片对应的提示; 

3>height和width标签

这两个是调整图片的长度和宽度的;单位是像素;

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>图像标签的使用:</h1>
    <img src="pyy.jpg" alt ="我是彭于晏" title ="我是彭于晏(图像提示标签)"
    height ="300" width="300" />
</body>
</html>

4>border标签 

border的作用的控制图片边框的粗细大小;

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>图像标签的使用:</h1>
    <img src="pyy.jpg" alt ="我是彭于晏" title ="我是彭于晏(图像提示标签)"
    border ="100" />
</body>
</html>

 图像标签总结

1.图像标签可以拥有多个属性;
2.属性之间不分先后顺序,标题名与属性,属性与属性之间均可以用空格分开;
3.属性采取键值对的格式,即key="value"的格式,属性="属性值";
4.标签的src路径属性是必须写的;

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/886722.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

cocotb报错收集

cocotb报错收集

1、原因是定义测试类的时候&#xff0c;idle_inserter的名字不一样 函数修正后 函数修正前
阅读更多...
电脑显示mfc140u.dll丢失怎么办,分享4个有效的解决方法

电脑显示mfc140u.dll丢失怎么办,分享4个有效的解决方法

1. mfc140u.dll 简介 1.1 定义与作用 mfc140u.dll 是 Microsoft Foundation Class (MFC) 库中的一个动态链接库文件&#xff0c;它是 MFC 库在 Unicode 版本中的一个特定实现。MFC 是微软为 Windows 平台开发的一套 C 类库&#xff0c;封装了众多 Windows API 函数&#xff0…
阅读更多...
定时器定时中断定时器外部中断

定时器定时中断定时器外部中断

基础背景&#xff1a;TIM定时中断-CSDN博客 TIM的函数 // 恢复缺省设置 void TIM_DeInit(TIM_TypeDef* TIMx); // 时基单元初始化&#xff0c;第一个参数TIMx选择某个定时器&#xff0c;第二个参数是结构体&#xff0c;包含了配置时基单元的一些参数。 void TIM_TimeBaseInit…
阅读更多...
了解华为计算产品线，昇腾的业务都有哪些？

了解华为计算产品线，昇腾的业务都有哪些？

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 随着 ChatGPT 的现象级爆红&#xff0c;它引领了 AI 大模型时代的深刻变革&#xff0c;进而造成 AI 算力资源日益紧缺。与此同时&#xff0c;中美贸易战的持续也使得 AI 算力国产化适配成为必然趋势。 …
阅读更多...
golang grpc初体验

golang grpc初体验

grpc 是一个高性能、开源和通用的 RPC 框架&#xff0c;面向服务端和移动端&#xff0c;基于 HTTP/2 设计。目前支持c、java和go&#xff0c;分别是grpc、grpc-java、grpc-go&#xff0c;目前c版本支持c、c、node.js、ruby、python、objective-c、php和c#。grpc官网 grpc-go P…
阅读更多...
Visual Studio 字体与主题推荐

Visual Studio 字体与主题推荐

个人推荐&#xff0c;仅供参考&#xff1a; 主题&#xff1a;One Monokai VS Theme 链接&#xff1a;One Monokai VS Theme - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemNameazemoh.onemonokai 效果&#xff1a; 字体&#xff1a;JetBrain…
阅读更多...
[RabbitMQ] Spring Boot整合RabbitMQ

[RabbitMQ] Spring Boot整合RabbitMQ

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…
阅读更多...
Scrapy 爬虫的大模型支持

Scrapy 爬虫的大模型支持

使用 Scrapy 时&#xff0c;你可以轻松使用大型语言模型 (LLM) 来自动化或增强你的 Web 解析。 有多种使用 LLM 来帮助进行 Web 抓取的方法。在本指南中&#xff0c;我们将在每个页面上调用一个 LLM&#xff0c;从中抽取我们定义的一组属性&#xff0c;而无需编写任何选择器或…
阅读更多...
C++和OpenGL实现3D游戏编程【连载13】——多重纹理混合详解

C++和OpenGL实现3D游戏编程【连载13】——多重纹理混合详解

🔥C++和OpenGL实现3D游戏编程【目录】 1、本节要实现的内容 前面说过纹理贴图能够大幅提升游戏画面质量，但纹理贴图是没有叠加的。在一些游戏场景中，要求将非常不同的多个纹理（如泥泞的褐色地面、绿草植密布的地面、碎石遍布的地面）叠加（混合）起来显示，实现纹理间能够…
阅读更多...
多区域OSPF路由协议

多区域OSPF路由协议

前言 之前也有过关于OSPF路由协议的博客&#xff0c;但都不是很满意&#xff0c;不是很完整。现在也是听老师讲解完OSPF路由协议&#xff0c;感触良多&#xff0c;所以这里重新整理一遍。这次应该是会满意的 一些相关概念 链路状态 链路指路由器上的一个接口&#xff0c;链路状…
阅读更多...
YOLOv9最全详细翻译【人工校对版】

YOLOv9最全详细翻译【人工校对版】

阅读更多...
【社保通-注册安全分析报告-滑动验证加载不正常导致安全隐患】

【社保通-注册安全分析报告-滑动验证加载不正常导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…
阅读更多...
新手教学系列——爬虫异步并发注意事项

新手教学系列——爬虫异步并发注意事项

引言 爬虫是网络数据采集中不可或缺的工具，很多程序员在入门时会遇到这样的问题：为什么我的爬虫这么慢？尤其在面对大量数据时，单线程爬虫的速度可能让人捶胸顿足。随着爬虫规模的增大，异步并发成为了提高爬取效率的关键。然而，异步并发并不像表面看起来那么简单，如果没…
阅读更多...
初识Linux · 进程替换

初识Linux · 进程替换

目录 前言&#xff1a; 1 直接看代码和现象 2 解释原理 3 将代码改成多进程版本 4 认识所有函数并使用 前言&#xff1a; 由前面的章节学习&#xff0c;我们已经了解了进程状态&#xff0c;进程终止以及进程等待&#xff0c;今天&#xff0c;我们学习进程替换。进程替换我…
阅读更多...
Python：import语句的使用（详细解析）（一）

Python：import语句的使用（详细解析）（一）

相关阅读 Pythonhttps://blog.csdn.net/weixin_45791458/category_12403403.html?spm1001.2014.3001.5482 import语句是Python中一个很重要的机制&#xff0c;允许在一个文件中访问另一个文件的函数、类、变量等&#xff0c;本文就将进行详细介绍。 在具体谈论import语句前&a…
阅读更多...
hbuilderx+uniapp+Android宠物用品商城领养服务系统的设计与实现 微信小程序沙箱支付

hbuilderx+uniapp+Android宠物用品商城领养服务系统的设计与实现 微信小程序沙箱支付

目录 项目介绍支持以下技术栈&#xff1a;具体实现截图HBuilderXuniappmysql数据库与主流编程语言java类核心代码部分展示登录的业务流程的顺序是&#xff1a;数据库设计性能分析操作可行性技术可行性系统安全性数据完整性软件测试详细视频演示源码获取方式 项目介绍 顾客 领养…
阅读更多...
设计模式、系统设计 record part02

设计模式、系统设计 record part02

软件设计模式&#xff1a; 1.应对重复发生的问题 2.解决方案 3.可以反复使用 1.本质是面向对象 2.优点很多 1.创建型-创建和使用分离 2.结构型-组合 3.行为型-协作 571123种模式 UML-统一建模语言-Unified Modeling Language 1.可视化&#xff0c;图形化 2.各种图&#xff08;9…
阅读更多...
PostgreSQL 任意命令执行漏洞(CVE-2019-9193)

PostgreSQL 任意命令执行漏洞(CVE-2019-9193)

记一次授权攻击通过PostgreSql弱口令拿到服务器权限的事件。 使用靶机复现攻击过程。 过程 在信息收集过程中&#xff0c;获取到在公网服务器上开启了5432端口&#xff0c;尝试进行暴破&#xff0c;获取到数据库名为默认postgres&#xff0c;密码为1 随后连接进PostgreSql …
阅读更多...
【CSS in Depth 2 精译_043】6.5 CSS 中的粘性定位技术 + 本章小结

【CSS in Depth 2 精译_043】6.5 CSS 中的粘性定位技术 + 本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09;第二章 相对单位&#xff08;已完结&#xff09;第三章 文档流与盒模型&#xff08;已完结&#xff09;第四章 Flexbox 布局&#xff08;已…
阅读更多...
项目定位与服务器(SERVER)模块划分

项目定位与服务器(SERVER)模块划分

目录 定位 HTTP协议以及HTTP服务器 高并发服务器 单Reactor单线程 单Reactor多线程 多Reactor多线程 模块划分 SERVER模块划分 Buffer 模块 Socket模块 Channel 模块 Connection模块 Acceptor模块 TimerQueue模块 Poller模块 EventLoop模块 TcpServer模块 SE…
阅读更多...
最新文章

Copyright @ 2022~2023