目录
什么是网页?
我们平时使用电脑和手机都是离不开网站和网页的,那么什么是网页呢?什么又是网站呢?
网页就是网站的一页,网页就是一个后缀为html的文件,通过浏览器读取然后就是我们所看到的各中有画面的网页了;不信?我们在一个网页中右键点击打开网页源代码,你就会发现源代码就是就是使用的html语言写的;
网站就是指在因特网上根据一定的规则,使用HTML等制作的作用于展示特定内容相关的网页集合;
网页是构成网站的基本元素,它通常是由图片,链接,文字,声音,视频等元素组成.就是通常我们看到的网页常见以.htm和.html后缀结尾的文件,因此将其俗称为HTML文件;
什么是HTML语言?
HTML语言并不是一门编程语言,而是一种标记语言,叫做超文本标记语言(Hyper Markup Language),他是用来描述网页的一种语言;
html里面有着一套标签;
现在让在下展示下一个简单的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
<html>
<head>
<title>......</title>#标题标签在<head>标签之中,<head>和<title>是包含关系
</head>
<body>...</body>#网页中的正文部分是在<body></body>之中;与 <head>是并列关系
</html>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>;下面来展示下;
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>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
注意:标题是独占一行的;
2>段落标签<p></p>和换行标签<br/>
这两个标签直接演示下大家就明白了;
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>
元宵节这天晚上，我到外婆家做汤圆、吃汤圆。我先把一小块面团搓成一个圆
球，再用小手指在球上戳了个小洞，然后两手大拇指放入洞，其余八个手
指绕着球转，随着不停地转动，小球变成了一个"小碗"。接着我把馅放进这
个"小碗"内,外婆准备的有豆沙馅、肉馅，还有芝麻馅。馅放好以后，我一只手
握住球，另一只手用虎口把"小碗"的大口捏紧。"小碗"又成了个圆球，只是它
的"肚子"里有东西了。外婆还教我在甜汤圆上捏个小尖尖儿，这样一个雪白
的、圆咕隆咚的汤圆就做成了!
水烧开了，准备下汤圆了，只见汤圆宝宝们迫不及待地潜入锅底。
过了几分钟，汤圆宝宝们全都浮了上来，汤圆熟了，出锅喽。我们大家津津有味地吃
着汤圆，聊聊新年的喜事，说说新年的愿望。我度过了一个难忘快乐的元宵节!
</body>
</html>这是我从网上随便找到部分文章,现在我们不分段看看是什么效果;
我们可以看到不分段的话,就是纯文字一个挨着一个,结构十分的不清楚;
使用段落标签后:
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的效果;
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>
<div>我来展示下div的效果</div>
<div>我来展示下div的效果</div>
</body>
</html>
我们发现div的效果就是div里面的内容写完后就会自动换行;与<p>不同的是div换行之后没有空隙;
span意为跨度;
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>
<span>我来展示下div的效果</span>
<span>我来展示下div的效果</span>
</body>
</html>
span与div不同的是写完标签中的内容之后不会换行,而是稍微留一点的空隙,然后继续开始后面的写作;刚才的京东的那种排列方式想必就是使用了此种方式吧;
5>图像标签(重要)
所谓"一图胜千言",在网页中我们几乎离不开各种各样的图片,没有图片,图标的网页是十分的枯燥的;所以图像标签是十分重要的;后续我将以本人照片为大家演示;
那怎么将图片插入网页呢?
使用标签<img >;img 是image的缩写;
html
<img src ="图像URL"/>这里注意了,必须是src;最后面还有一个/不要忘记了;
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名;
所谓属性:简单了解就是属于这个图像标签的特性;
下面我来演示下:
1>首先呢,我们需要先把图片和该html文件放在同一个目录下;(这样使用的是相对路径,方便)
2> 然后呢,我们使用<img>标签把图片插入到网页去;(复制下面的代码)
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>
<h1>图像标签的使用:</h1>
<img src="pyy.jpg"/>
</body>
</html>来吧,展示:
除此之外还有几个调整图片属性的标签
下面我们来验证下
1>alt标签
这里我们只需要改一下图片的名字就成不存在的图片了;
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>
<h1>图像标签的使用:</h1>
<img src="pyy1.jpg" alt ="我是彭于晏"/>
</body>
</html>
2> title(图像提示标签)
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>
<h1>图像标签的使用:</h1>
<img src="pyy.jpg" alt ="我是彭于晏" title ="我是彭于晏(图像提示标签)" />
</body>
</html>我们把鼠标放在图片上,就会有图片对应的提示;
3>height和width标签
这两个是调整图片的长度和宽度的;单位是像素;
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>
<h1>图像标签的使用:</h1>
<img src="pyy.jpg" alt ="我是彭于晏" title ="我是彭于晏(图像提示标签)"
height ="300" width="300" />
</body>
</html>
4>border标签
border的作用的控制图片边框的粗细大小;
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>
<h1>图像标签的使用:</h1>
<img src="pyy.jpg" alt ="我是彭于晏" title ="我是彭于晏(图像提示标签)"
border ="100" />
</body>
</html>
图像标签总结
1.图像标签可以拥有多个属性;
2.属性之间不分先后顺序,标题名与属性,属性与属性之间均可以用空格分开;
3.属性采取键值对的格式,即key="value"的格式,属性="属性值";
4.标签的src路径属性是必须写的;
