HTML:相关概念以及标签

news2024/10/4 17:17:12

目录

什么是网页?

什么是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.coloradmin.cn/o/2188400.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Yolov8改进轻量级网络Ghostnetv2

Yolov8改进轻量级网络Ghostnetv2

1，理论部分 轻量级卷积神经网络 （CNN） 专为移动设备上的应用程序而设计，具有更快的推理速度。卷积运算只能捕获窗口区域中的局部信息，这会阻止性能进一步提高。将自我注意引入卷积可以很好地捕获全局信息，但会在很大程度上阻碍实际速度。在本文中，我们提出了一种硬件友好…
阅读更多...
【技术分析】嘉楠科技SoC芯片K230

【技术分析】嘉楠科技SoC芯片K230

概述 K230是嘉楠科技Kendryte系列AIoT芯片中的最新一代SoC芯片&#xff0c;该芯片采用全新的多异构单元加速计算架构&#xff0c;集成的玄铁C908具有2个高能效RISCV计算核心&#xff0c;内置新一代KPU&#xff08;Knowledge Process Unit&#xff09;智能计算单元&#xff0c;…
阅读更多...
【cpp/c++ summary 工具】 Hunter 报错 CMake hunter error: Unexpected MSVC_VERSION

【cpp/c++ summary 工具】 Hunter 报错 CMake hunter error: Unexpected MSVC_VERSION

原因&#xff1a;使用的MSVC编译器版本较高&#xff0c;而Hunter版本较低&#xff0c;可在https://github.com/cpp-pm/hunter/releases配置高版本Hunter # HunterGate( # URL "https://github.com/cpp-pm/hunter/archive/v0.23.297.tar.gz" # SHA1 "33…
阅读更多...
【解决办法】git clone报错unable to access ‘xxx‘: SSL certificate problem:

【解决办法】git clone报错unable to access ‘xxx‘: SSL certificate problem:

使用git clone 时报错unable to access xxx: SSL certificate problem: 这个报错通常是由于SSL证书问题引起的。通常可以按照以下步骤进行排查&#xff1a; 检查网络连接&#xff1a;确保你的网络连接正常&#xff0c;可以访问互联网。尝试使用其他网站或工具测试网络连接是否正…
阅读更多...
netty之Netty集群部署实现跨服务端通信的落地方案

netty之Netty集群部署实现跨服务端通信的落地方案

前言 在一些小型用户体量的socket服务内&#xff0c;仅部署单台机器就可以满足业务需求。但当遇到一些中大型用户体量的服务时&#xff0c;就需要考虑讲Netty按照集群方式部署&#xff0c;以更好的满足业务诉求。但Netty部署集群后都会遇到跨服务端怎么通信&#xff0c;也就是有…
阅读更多...
【PS】删除自定义形状，添加自定义形状

【PS】删除自定义形状，添加自定义形状

删除自定义形状 在这里选择删除形状为灰色的时候&#xff0c;是不能直接删除的&#xff0c;需要打开形状窗口后才能删除。 找到形状窗口&#xff0c;打开它 然后就可以删除形状了。 导入形状 右键&#xff0c;导入形状 选择你要导入的形状包&#xff08;我这个是某宝买…
阅读更多...
Stable Diffusion绘画 | 来训练属于自己的模型：秋叶训练器使用

Stable Diffusion绘画 | 来训练属于自己的模型：秋叶训练器使用

花了不少时间搜索尝试&#xff0c;都没有找到解决上一篇文章遗留问题的解决方案&#xff0c;导致无法使用 cybertronfurnace 这个工具来完成炼丹&#xff0c;看不到炼丹效果。 但考虑到&#xff0c;以后还是要训练自己的模型&#xff0c; 于是决定放弃 cybertronfurnace&…
阅读更多...
数据结构与算法——Java实现 28.二叉树的锯齿形层序遍历

数据结构与算法——Java实现 28.二叉树的锯齿形层序遍历

努力成为你想要成为的那种人&#xff0c;去奔赴你想要的生活 —— 24.10.4 103. 二叉树的锯齿形层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 锯齿形层序遍历 。&#xff08;即先从左往右&#xff0c;再从右往左进行下一层遍历&#xff0c;以此类推&#xff…
阅读更多...
【Unity】双摄像机叠加渲染

【Unity】双摄像机叠加渲染

一、前言 之前我在做我的一个Unity项目的时候&#xff0c;需要绘制场景网格的功能&#xff0c;于是就用到了UnityEngine.GL这个图形库来绘制&#xff0c;然后我发现绘制的网格线是渲染在UI之后的&#xff0c;也就是说绘制出来的图形会遮盖在UI上面&#xff0c;也就导致一旦这些…
阅读更多...
第十八章（数据在内存中的储存）

第十八章（数据在内存中的储存）

1. 整数在内存中的存储 2. ⼤⼩端字节序和字节序判断 3. 浮点数在内存中的存储 我本将心向明月&#xff0c;奈何明月照沟渠正文开始 一、.整数在内存中的储存 整数的2进制的表示方法有三种 1.原码 2.反码 3.补码 这里在第十章我们有详细讲解&#xff0c;有需要的同学可以自…
阅读更多...
网络编程项目框架内容

网络编程项目框架内容

基于TCP的云端书阅管理系统 通过网络实现图书借阅网站&#xff0c;包括服务器与客户端&#xff0c;客户端与服务器是基于TCP连接。 客户端描述&#xff1a;客户端运行会与服务器端进行连接&#xff0c;连接成功后&#xff0c;显示注册登录界面。此时&#xff0c;客户端可以选…
阅读更多...
算法: FriendShip - Kruskal+并查集判环

算法: FriendShip - Kruskal+并查集判环

题目 A-Friendship_2024.5.7 (nowcoder.com) 思路分析 求所有符合题意情况的最大值中的最小值&#xff1b;符合题意是指保证图的连通性。那么贪心思路&#xff0c;将所有已存在的关系和可能存在的关系存储起来&#xff0c;利用Kruskal贪心算法每次取权值最小的且不构成回路的…
阅读更多...
从零开始讲PCIe（2）——PCI总线传输模型与机制

从零开始讲PCIe（2）——PCI总线传输模型与机制

一、前言 在之前的内容中&#xff0c;我们已经对PCI有了一些基本的认识&#xff0c;我们了解了PCI的一般架构&#xff0c;标准传输周期等相关的内容&#xff0c;接下来我们会进一步了解PCI具体的传输模型和传输机制。 二、PCI传输模型 PCI一共有三种数据传输模型&#xff0c;分…
阅读更多...
Windows安装ollama和AnythingLLM

Windows安装ollama和AnythingLLM

1、Ollama安装部署 1&#xff09;安装ollama 官网下载&#xff1a;https://ollama.com/download&#xff0c;很慢 阿里云盘下载&#xff1a;https://www.alipan.com/s/jiwVVjc7eYb 提取码: ft90 百度云盘下载&#xff1a;https://pan.baidu.com/s/1o1OcY0FkycxMpZ7Ho8_5oA?…
阅读更多...
Python-初识Python

Python-初识Python

前言&#xff1a;在这篇博客当中&#xff0c;我们将步入Python知识的殿堂&#xff0c;Python以其简单、易学、开发效率高在近些年的发展可谓是迅猛&#xff0c;在许多领域都可以见到它的场景&#xff0c;例如&#xff1a;人工智能/机器学习、大数据开发、后端开发等都会用到。 …
阅读更多...
仕考网：公务员国考有三不限岗位吗?

仕考网：公务员国考有三不限岗位吗?

国家公务员考试中的“三不限”岗位&#xff0c;即不限制专业背景、政治面貌、基层工作经验的职位。在国考中&#xff0c;是有的但是数量比较少。 这些岗位主要集中在省级及以下单位&#xff0c;以民航空警和铁路公安为主。其中&#xff0c;有一半的职位是面向四项目人员&#…
阅读更多...
基于STM32的蓝牙音乐播放器设计

基于STM32的蓝牙音乐播放器设计

引言 本项目将基于STM32微控制器设计一个简易的蓝牙音乐播放器&#xff0c;通过蓝牙模块接收手机的音乐信号&#xff0c;并使用音频解码芯片播放音乐。该项目展示了STM32在嵌入式音频处理与蓝牙通信方面的应用。 环境准备 1. 硬件设备 STM32F103C8T6 开发板&#xff08;或其…
阅读更多...
基于Java,SpringBoot,Vue智慧校园健康驿站体检论坛请假管理系统

基于Java,SpringBoot,Vue智慧校园健康驿站体检论坛请假管理系统

摘要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&#xf…
阅读更多...
持续更新：当前最好用的AI 编程工具，Cursor 编程指南

持续更新：当前最好用的AI 编程工具，Cursor 编程指南

本文持续更新&#xff0c;敬请期待更多内容。 文章目录 这一次&#xff0c;AI真懂你的代码关注该关注的&#xff0c;忽略该忽略的1. 创建.cursorignore文件2. 重新索引代码库 参考资料 这一次&#xff0c;AI真懂你的代码 如果你偶尔关注一些AI编程相关的内容&#xff0c;想必你…
阅读更多...
介绍多环境开发-分组(springboot-profile)

介绍多环境开发-分组(springboot-profile)

背景 在使用 Spring Boot 进行开发时&#xff0c;多环境配置是一项非常常见的需求。通常&#xff0c;我们会在开发、测试、生产等不同环境下部署同一个应用程序&#xff0c;而这些环境可能需要不同的配置&#xff0c;例如数据库连接、日志级别等。Spring Boot 通过 profile&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023