首页 前端知识 HTML:相关概念以及标签

HTML:相关概念以及标签

2024-10-30 20:10:32 前端知识 前端哥 126 512 我要收藏

目录

什么是网页?

什么是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路径属性是必须写的;

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19616.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!