目录
HTML简单介绍
现在,我们经常可以用到网页,小游戏,app等等,这些都是得益于前端开发的技术发展。而HTML正是完成这些的基础
这里的编译器,我选择功能强大visual studio。
学习HTML前,需要了解三个问题:
- 什么是网页 ?
- 什么是HTML ?
- 网页怎么形成 ?
1.什么是网页 ?
首先了解网站,网站是网页的集合,而网页,是“页”,是网站的一页,通常是HTML格式的文件,需要通过浏览器来阅读。
网页是构成网站的基本元素,通常由图片,链接,文字,声音,视频等元素组成。通常的网页是以.htm 或.html为后缀的文件,称为HTML文件。
2.什么是HTML ?
HTML指的是超文本标记语言(Hyper Text Markup Language),用来描述网页的一种语言。
注意,HTML不是编程语言,是一种标记语言(markup language)。
标记语言是一套标记标签(markup tap)
所谓超文本,有2层含义:
1.它可以加入图片,动画等内容(不仅是文本)。
2.它可以从一个文件跳转到另一个文件(超级链接文本)。
3.网页怎么形成的 ?
通过以上了解,可以知道网页是由图片,文字等许多元素组成,这些元素利用HTML语言描述,通过浏览器解析后,形成Web网页。
常用浏览器及其内核
1.浏览器
浏览器是网页显示,运行的平台。常用的浏览器有谷歌(Chrome)、火狐(Firefox)、Edge、Safari、Opera等等,其中最为常用的是谷歌浏览器。
这里,不建议使用QQ浏览器、360浏览器、2345浏览器等
2.浏览器内核
浏览器内核(渲染引擎):负责读取网页内容,整理讯息等
浏览器 | 内核 | 备注 |
IE | Trident | IE、猎豹、360极速浏览器、百度浏览器等内核 |
Firefox | Gecko | 火狐浏览器内核 |
Safari | Webkit | 苹果浏览器内核 |
Chrome / Opera | Blink | Chrome/Opera浏览器内核。Blink是Webkit的分支 |
Web标准
Web标准是有W3C组织和其他标准化组织制定的一系列标准集合。W3C(万维网联盟)是国际最著名的标准化组织
1.为什么需要Web标准
浏览器不同,他们可能显示页面或者排版就有些许差异。制定Web标准,使得浏览器解析出的内容一致。除此之外还有许多优点:
- 让Web的发展前景更广阔。
- 内容能被更广泛的设备访问。
- 更容易被搜寻引擎搜索。
- 降低网站流量费用。
- 使网站更易于维护。
- 提高页面浏览速度。
2.Web标准的构成
主要包括结构(Structure)、表现(Presentation)、行为(Behavior)三个方面
标准 | 说明 |
结构 | 结构用于对网页元素进行整理和分类(HTML) |
表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式(CSS) |
行为 | 行为是指网页模型的定义及交互方式的编写(JavaScript) |
Web标准提出的最佳体验方案:结构、样式、行为相分离。
即,结构写到HTML文件中,表现写在CSS文件中,行为写在JavaScript文件中。
相较而言,结构更重要。
HTML语法
1.基本语法
所有的标签都是写在尖括号(“< >”)里。
<html></html>
大多数的标签都是成对出现的,其中,第一个(“ <html> ”)称为开始标签,第二个(“ </html> ”)称为结束标签。开始标签与结束标签唯一的区别就是结束标签有一个斜杠(“ / ”)
当然,大多数标签都是成对的,也有单独出现的标签
如
<br />
为单标签,单标签非常少
2.标签关系
标签关系分为包含关系与并列关系
包含关系
如
<head>
<title></title>
</head>
其中<title></title>包含在<head></head>之中,因此它们的关系为包含关系(类似于嵌套)
并列关系
如
<head> </head>
<body> </body>
<head></head>与<body></body>的关系为并列关系
如
<html>
<head></head>
<body></body>
</html>
<html></html>与<head></head>、<html></html>与 <body></body>均为包含关系,而<body></body>与<head></head>为并列关系。
HTML基本结构标签
1.第一个HTML网页
每一个网页都有基本的结构标签(骨架标签),页面内容也在这些标签上书写
HTML页面也称为HTML文档
<html>
<head>
<title>呵呵</title>
</head>
<body>
床前明月光,疑是地上霜。举头望明月,低头思故乡。
</body>
</html>
标签名 | 定义 | 说明 |
<html></html> | HTML标签 | 页面中最大的标签,称为根标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签title |
<title></title> | 文档的标题 | 让页面有一个网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容,页面内容基本都放在body类面 |
可以在记事本中写下以上代码,并将尾缀改为.html
完成后用浏览器打开
即可看到以上网页,这就第一个网页。
其中红色方框为<title></title>内容,黑色方框为 <head></head>的内容,<body></body>为黄色方框的内容
2.开发工具
有Dreamweave(Dw)、Sublime Text,WebStorm、Visual Studio code(VS code)等等。其中Visual Studio Code最为常用
VS Code的使用
打开VS Code,出现以下界面,并点击新建文件
即可创建一个文件,如下图
此时单击文件,保存 ,如下(或ctrl+s)
得到如下界面
此时可以选择保存位置,但注意,一定要将尾缀改为.html!一定要将尾缀改为.html!一定要将尾缀改为.html!一定要将尾缀改为.html!
点击保存后即可得到这个界面
现在就可以编写HTML了。
写下如下代码后,保存。
在点击刚才保存的HTML文件,用浏览器打开,即可得到HTML网页。
或者直接右击鼠标,点击open in default browser,即可进入网页
可以直接输入“ !”,在选择第一个“ !”,就可以获得骨架标签。
选择第一个“ !”,获得的骨架标签如下:
vs code使用总结
- 双击打开软件。
- 新建文件(Ctrl+N)。
- 保存(Ctrl+S),注意尾缀改为.html。
- 右击鼠标,选择Open in Default Browser,即可进入网页。
- 可以输入“ !”,即可快速获得骨架标签。
DOCTYPE和long以及字符集的作用
由上可知,VS Code工具会生成骨架标签以及一些其他代码
1.<!DOCTYPE>标签
2.long语言
3.charset字符集
1.文档类型声明标签
<!DOCTYPE>文档类型声明,作用就是告诉浏览器使用哪种HTML版本显示网页。
其中DOC指的是document(文档),TYPE就是type(类型)。
<!DOCTYPE html>
这句代码就是告诉我们,当前网页采取的是HTML 5版本显示网页。
注意:
1.<!DOCTYPE html>声明位置一定在最前面的位置,位于<html>标签之前。
2.<!DOCTYPE html>不是HTML标签,是文档声明标签。
3.处于<html> </html>之间的标签是HTML标签
2.lang 语言种类
<html lang="en">,其中lang,就是language(语言),en就是English(英语)
<html lang="en">
这局代码表明当前网页是英文网页。
1.en定义语言是英语。
2.zh-CN定义语言为中文。
3.字符集
<meta charset="UTF-8">,其中char指的是character(字符),set(集合),UTF-8就是字符编码。
字符集是多个字符的集合,以便计算机能够识别和存储各种文字
在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset="UTF-8">
charset常用的值有:GB2312,BIG5和UTF-8等,UTF-8称为万国码,基本包含了全世界所有国家所需要的字符
注意UTF-8不要写成utf-8或UTF8。
为防止出现乱码,<meta charset="UTF-8">一定要写。
4.总结
1.以上三个代码VS Code会自动生成。
2.<!DOCTYPE html>文档类型声明标签,告诉浏览器这个页面是采取HTML5显示的。
3.<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站,采取英文显示。
4.<meta charset="UTF-8">告诉我们采取UTF-8来保存文字,若不写,可能会出现乱码。