HTML 是用来描述网页的一种语言。(说白了,就是写网页的)
HTML 指的是超文本标记语言: Hyper(超级)Text(文本) Markup(标记) Language(语言)
a) 超文本:比普通文本更牛逼的文本 不仅仅可以展示文字 可以展示各种媒体内容(图片、声音)
b) 一般由前端工作人员来完成,后台研发人员不需要编写
c) 标记:(标签/元素/标记)
HTML文件又叫纯文本文件(只放文字)。
标记通常被称为 HTML 标签 (HTML tag)。
· HTML 标签是由尖括号包围的关键词,比如
· 封闭类型标记(也叫双标记),必须成对出现,如
· 标签对中的第一个标签是开始标签,第二个标签是结束标签
· 开始和结束标签也被称为开放标签和闭合标签
· 非封闭类型标记,也叫作空标记,或者单标记,如
总结:我们学习HTML就是学习各种各样的标签,可以达到比普通文本更厉害的功能。那么后续浏览器可以对html文件做解析,就可以在浏览器上展示好看的效果 。
通过使用HTML的各种标签,然后生成一个HTML文件,这个文件可以被浏览器解析,浏览器内部有一个专门的HTML的解析器,解析后我们就可以看到炫酷的页面。(编写网页的超文本标记语言)
这里拿京东首页来说明一下前面所讲的内容。
为什么我们看到的京东首页,不像那种mp3文件之类可以看到的文件呢?
其实我们看到的是浏览器解析出来的。
这里我们并不能实实在在看到文件,这里的文件,被浏览器解析之后,展示出来了。
我们平时在用杀毒软件的时候,可以看到会清理一些“上网残留”。
我们在用浏览器访问各种网站,会加载各种各样的网页。
有的网页就暂时留存在浏览器中,就算没有打开。这样就会造成浏览器有一些上网的垃圾。
那么,既然浏览器可以访问服务器的文件,同样也可以访问我们自己的网页文件。
这个网页文件,就是用“超文本标记语言”编写的。
我们需要学习在本地创建网页,然后用HTML超文本标记语言,去写这个文件。
这个超文本标记语言长啥样呢?
然后就可以看到页面的代码了。
整个网页就是用这样的一些文字来生成的。
明显,网页代码虽然没有任何图片,但呈现出来的却是很生动的网页。这就是超文本的好处。
那么如何创建HTML文件呢?
①首先说明一下扩展名的问题。
文件拓展名 windows 上每个文件都是有拓展名。
文件拓展名代表着文件的类型 windows 可以根据文件的拓展名去自动选择文件打开的程序。
一般win7和win10 默认隐藏文件拓展名 xp默认显示文件拓展名。
那么我们需要将它打上对钩,才能看见文件扩展名。
为啥要呈现文件拓展名?
为了方便之后修改文件的类型(即修改文件拓展名)。
②创建HTML文件
HTML文件:网页文件 拓展名为 .html 或者.htm 的纯文本文件
比如建在桌面吧。
<1>在桌面右键单击“新建”->“文本文档”。
<2>修改扩展名
此时建立的扩展名是以.txt
结尾的文件。
我们将它双击打开。
我们可以看到,直接用记事本打开了。
现在我们在上面写一些文字并保存一下。
现在我们将这个文件的扩展名修改为.html
。
回车之后,图标也会变化(图标就是当前你的电脑默认浏览器的图标)
这个时候,我们双击这个文件。
默认浏览器就会解析这个文件。然后在浏览器上展示出来。
浏览器只能展示HTML文件,而不能修改HTML里面的内容。
那如何修改里面的内容?
右键单击这个文件,“打开方式”选择“记事本”。
然后我们就可以在记事本里面修改信息,并保存一下。
这个时候,再双击打开HTML文件。
通过记事本编辑代码即可,用该语言编写的文件,以 .html或 .htm为文件拓展名。
HTML不区分大小写,建议小写
<3>添加一些简单的效果
刚才我们只是纯输入一些文本,并没有什么效果。
现在咱们来加一些效果。
再次双击打开文件。
会发现文字的样式变化了。
写代码步骤:
(1)新建一个文本文档,将文本文档的后缀改为.html
(2)右键-用记事本打开,编写代码
(3)下载浏览器
(4)选择文本文档,右键-打开方式-浏览器
(5)展示页面效果
(1)根标签 html 最外层的标签 所有其他的标签都放入该标签中。
(2)html根标签有两个一级子标签 分别是head、body
①head中一般放的是不显示在网页上 但是又比较重要的信息
②body中一般放的是显示在页面上的内容
我们将上面写的文件,在浏览器中打开。
那么head头标签在哪儿展示的?
我们这里用title
标签来给大家简单认识一下。
然后双击文件,用浏览器打开,可以看到,这里的名字改了。
代码:
<html>
<head>
<title>这是一个小网页title>
head>
<body>
展示在网页中间的部分
body>
html>
我们再来看一下京东的网页源代码。
Ctrl
+F
查找,我们输入。
然后再输入。
这里是教大家一种查询办法。
同样呢,也是给大家看一下,网页的基本结构,都是这样的啦。
集成开发工具 >>>> IDE
编码工具:
辅助程序员编写源代码的工具,它类似word,我们写文档会打开word文档来编写。
写代码也一样,需要借助工具来开发。
常见的编码工具有记事本、sublime Text、notepad++
集成开发环境(IDE,Integrated Development Environment )是用于提供程序开发环境的应用程序,一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套(组)都可以叫集成开发环境。如微软的Visual Studio系列,Borland的[C++ Builder](https://baike.baidu.com/item/C++ Builder)、Delphi系列等。该程序可以独立运行,也可以和其它程序并用。IDE多被用于开发HTML应用软件。例如,许多人在设计网站时使用IDE(如webstorm、DreamWeaver等),因为很多项任务会自动生成。
我们使用的是Hbuilder。这个软件,比较轻巧,对电脑运行要求不高。
(1) 将我提供的Hbuilder.zip压缩包解压(各种版本大同小异,可以自行到官网下载,也可以用我提供的链接)
戳这里链接提取码: rme9
(2) 在解压后的文件夹中找到Hbuider.exe,直接双击使用,无需安装
(3) 用邮箱注册,用的功能会更多一点
(5) 新建项目:
创建一个普通项目即可。
介绍一下每个文件的含义(可删可不删):
(6) 在项目下新建一个html文件:
选中项目,右击新建.html
文件。
然后任意取一个名字:
可以看到,左边多出来了一个文件。
第一行是文档约束,删了就行,不用管它。
(7) 编写代码:
将原本的代码删掉,按照刚才说的,咱们自己写代码,不如下面的代码。
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
今天天气很热!
body>
html>
怎么看到显示结果呢?
找到该文件在电脑里面的位置,然后双击打开文件,就可以用浏览器打开显示结果啦。
可以看到浏览器的显示结果:
但是这样很麻烦,每次都要打开文件的目录,这里有什么好一点的办法呢?
先将如下的打上对勾:
可以看到,内置浏览器的效果:
还可以点击上方的这个图案,然后选择在外置浏览器打开。
记得先保存文件。(快捷键Ctrl
+S
)
然后在浏览器中,就可以看到效果啦。
有的人会出现乱码
,为啥呢?
数据在存入磁盘和从磁盘读取的时候,所使用的字符集不一致。
具体如下图:
那么,问题又来了。
我们将文件存入磁盘用的是什么字符集呢?
我们可以任意创建一个“文本文档”,用记事本打开,然后“另存为”,如下图:
可以看到你们自己电脑的默认字符集:
那么刚才我们创建的文档,是以什么字符集存储的?
选中文件,鼠标右击“属性”:
我的Win11系统没有显示,奇怪。
你们应该可以看到,是以UTF-8
的形式存的。(没有就算啦,知道就行,一般都是UTF-8)
当前文件存到从磁盘上,是以UTF-8
的形式存储的。
此时,我们要将文件解析出来,从磁盘读取出来,出现乱码就是因为,读取的时候,使用的不是UTF-8
的字符集翻译的。
那我们就需要让它用UTF-8
的字符集翻译。就不会出现乱码啦。
可以手动调整浏览器的文字编码为Unicode
,让浏览器用这种字符集翻译就好。
但每次这样会显得麻烦。
我们可以在head
标签内,添加meta
标签。
meta
是单标签,只有开头没有结尾,在结尾加上一个左斜线就行。
然后在meta
标签内写上charset=""
。
在下拉框中选择utf-8
即可。
代码如下:
<html>
<head>
<meta charset="utf-8" />
head>
<body>
今天天气很热!
body>
html>
总结
这一行的目的,就是为了告诉浏览器,以指定字符集解析文字。
如果文字以UTF-8
形式存储的,浏览器就要用UTF-8
来解析文字。
这个双引号之间的字符集,一定是,当前文件存储的字符集!!!
如果不一致,就会出现乱码。
♻️还有一个小问题,跟大家说明一下。
有些人点开运行的时候,外置浏览器无法打开。
第一种原因,你的电脑里面没有需要的浏览器。
第二种原因,可能是因为,你的浏览器在电脑里面存储的位置动了。
可以手动修改一下。
我们点配置Web服务器。
在之前学习的时候,都有说到,这里也算是总结一下吧,再稍微补充一下。
注释是给人看的提示,不显示出来的内容,是不执行的代码。
是方便给自己看的提示。
用将要注释的内容括住就好。
快速添加注释:先选中文字,然后快捷键Ctrl
+Shift
+/
。(自己试一下,有的版本Ctrl
+/
就可以了)
快速取消注释:先选中文字,然后快捷键Ctrl
+Shift
+/
。(自己试一下,有的版本Ctrl
+/
就可以了)
定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。
<html>
... ...
html>
Head标签用于定义文档的头部,它是所有头部元素的容器。
中的元素可以引用脚本、指示浏览器在哪里找到样式表。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
应该把
标签放在文档的开始处,紧跟在后面,并处于
标签之前。
文档的头部经常会包含一些 标签,用来告诉浏览器关于文档的附加信息。
<html>
<head>
... ...
head>
html>
下面这些标签可用在 head 部分:
、、
、
、
。
title
标签–>标题标签,定义显示在网页左上角的标题。
1.可定义文档的标题。
2.它显示在浏览器窗口的标题栏或状态栏上。
3.title写和你网页相关的关键词有利于SEO优化
注意:
SEO是搜索引擎优化的英文缩写。
通过对网站内容调整,满足搜索引擎的排名需求,从而提高自己网站被搜索引擎平台录取的几率,从而把精准用户带到网站。
网站都有目标群体,通过title
、meta
标签可以让目标群体通过关键词找到你的网站,所以你定义的关键词决定了会吸引什么样的群体。
<html>
<head>
<title>... ...title>
head>
html>
这里之前演示过,就不再示范了,后面一起再演示一次。
META
标签用来描述一个HTML网页文档的属性。
通过meta
标签的属性定义页面的特征。
一般属性都有这样的书写格式:
<标签名 属性1=" " 属性2=" ">标签名> (双标签)
<标签名 属性1=" " 属性2=" "/> (单标签)
charset
就是字符集的意思,charset
属性就是定义当前页面的字符集,告诉浏览器以什么字符集解析当前页面。
刚才我们示范的charset=”utf-8”
是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式。国外一般会用gbk、gb2312,国内通常使用utf-8。
<html>
<head>
<meta charset="utf-8" />
head>
html>
早期,这个写法很复杂。
我们可以新建一个H4的文件,就能看到早期这个字符集的写法。
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
可以看到,非常冗长。
现在有了更简洁的写法,就不必再用这么长的来写了。
这个效果和上面的简洁写法效果一致的。
name
属性一般用于定义当前网页的一些简单描述,便于在搜索引擎上根据描述搜索到当前网页。
元素可提供有关页面的元信息(meta-information),用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常见的name
有:
Keywords
(关键字) :keywords用来告诉搜索引擎你网页的关键字是什么。
author
(作者) :标注网页的作者
description
(网站内容描述): description用来告诉搜索引擎你的网站主要内容。
1)我们来定义一个keywords
和Content
。
keywords
–>关键字
<html>
<head>
<meta name="keywords" content="火影忍者"/>
head>
html>
当我们执行的时候,发现并没有出现在网页上。
这个keywords
究竟是个什么效果呢?
在百度搜索“火影忍者”。可以搜索到一些关于“火影忍者”的条目网页。随便点进去一个网页。
然后咱们在该网页空白处,右键单击“查看网页源代码”。
可以看到,这里的keywords
,有“火影忍者”。
那说了这么多,还是想说明这一点的。
keywords
是添加搜索引擎关键字。当我们要输入content
里面相关文字信息,就会自动查询到这个网页。
如果将来你把自己的网页放到服务器上,想让别人搜索关键字,能自动查询到你的网页。
就可以在这里写上相关的关键字内容。
2)我们再来定义一个author
和Content
。
author
–>作者
<html>
<head>
<meta name="author" content="岸本齐史" />
head>
html>
将来如果想通过作者来搜索网页,就定义author
即可。
3)再来定义一个description
和content
description
–>描述
<html>
<head>
<meta name="description" content="每个忍者都有属于自己的忍道" />
head>
html>
用一段陈述性文字来描述当前网页。
http-equiv
属性里面有这样一个值,叫refresh
。
表示当前网页要进行刷新。
fresh是刷新,refresh是重新刷新。
<meta http-equiv="refresh" content="5,http://www.baidu.com"/>
这个属性的作用,就是,让网页在多少秒之后进行刷新,并刷新到指定地址。
比如:
<html>
<head>
<meta http-equiv="refresh" content="5,http://www.baidu.com"/>
head>
html>
当我们执行上述代码,用浏览器打开,5秒之后,就会自动跳转到“百度”界面。
可以自行试一试哈。
link
标签是学习CSS样式的时候,引入外部CSS样式文件用的。
暂时用不到,后边再介绍。
<link />
script
标签是用于学习JS脚本语言的时候,引入脚本语言文件的。
暂时用不到,后边再介绍。
<script> script>
给meta
添加属性的时候,前面的叫属性名,比如name
/charset
等,是不能用双引号包围的。
后面跟的是属性值,比如name
属性的属性值有keywords
/author
等,是需要用引号包围的。
这个引号,用单引号,双引号 均可。
某些标签,只能使用某些特定的属性。属性并不是通用的。
哪些标签可以用哪些属性,后边再说。