HTML简介

1. 网页

1.1 什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本要素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页以常见的.html或者.htm后缀为结尾的文件，因此将其俗称为HTML文件。

1.2 什么是HTML

HTML是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。
HTML不是一种变成语言，而是一种标记语言（markup language）。
标记语言是一套标记语言。

所谓超文本，有两层含义：

它可以加入图片、声音、动画、多媒体等内容（超越了文本的限制）;
他还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

1.3 网页的形成

网页是由网页元素组成的，这些元素是利用HTML标签描述出来的，然后通过浏览器解析来显示给用户的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eJByzRQc-1625215245765)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210702101434090.png)]

前端人员开发代码–>浏览器显示代码（解析、渲染） -----> 生成最后的WEB页面

1.4 网页的总结

网页是图片、链接、文字、声音、视频等元素组成，其实就是一个HTML文件；
网页生成制作：有前端人员书写HTML文件，然后浏览器打开，就能看到网页了；
HTML：超文本标记语言，用来知足网页的一门语言，有标签组成的，比如图片标签、链接便签、视频标签等；

2. 常用浏览器

2.1常用的浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、 Safari和Opera等。平时称为五大浏览器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VfTOn7Y9-1625215245773)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210702101855229.png)]

查看浏览器市场份额：http://tongji.baidu.com/data/browser

2.2 浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sdEl61tT-1625215245785)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210702101935617.png)]

3.Web标准

web标准是由W3C组织和其他标准化组织制定的一些列标准的集合。W3C是国际最著名的标准化组织。

3.1 为什么需要web标准

浏览器不同，他们显示的页面或者排版就有些差异。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nYIVmK8o-1625215245792)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210702102338661.png)]

遵循web标准除了可以让不同的开发人员写出的页面更加标准、更加统一以外，还有两个以下优点：

让web的发展前景更加广阔；
内容能被更加广泛的设备访问；
更容易被搜索引擎搜索；
降低网站流量费用；
使网站更容易维护；
提高页面浏览速度；

3.2 web标准的构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学习的就是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学习的是JavaScript

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uec4vAVz-1625215245795)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210702103543496.png)]

4. HTML语法规范

4.1 基本语法规范

HTML标签是由尖括号包围的关键字，例如。
HTML标签通常是成对出现的，例如和，我们称之为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如
，我们称之为单标签。

4.2 标签关系

双标签关系可以分为两类：包含关系和并列关系。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6V2a3lvF-1625215245798)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210702104924852.png)]

5.HTML基本结构标签

5.1 第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为 HTML 文档.

<html><head><title>我的第一个页面</title></head><body>你我之间，黑马洗脸，月薪过万，一飞冲天</body>
</html>

标签名	定义	说明
	HTML标签	页面中最大的标签，我们称之为跟标签；
	文档的头部	注意在head标签中我们必须要设置的标签是title
	文档的标题	让页面拥有一个属于自己的网页标题
	文档的主体	元素包含文档的所有内容，页面内容基本都是放到 body里面

HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
此时，用浏览器打开这个网页，我们就可以预览我们写的第一个 HTML 文件了。

5.2 基本结构标签总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3e0NJzJ-1625215245801)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210702111241432.png)]

6.网页开发工具

VSCode的使用

Ctrl+加号、Ctrl+减号可以放大和缩小
生成网页骨架结构，输入！按下tab键
利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”

VSCode工具生成骨架标签新增代码

《!DOCTYPE》标签
lang语言
charset字符集

6.1文档类型声明标签

《!DOCTYPE》文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示页面。

<!DOCTYPE html>

这句代码的意思就是：当前页面采取的是HTML5版本来显示页面。

注意：

《！DOCTYPE》声明位于文档中的最前面的位置，处于标签之前。
《！DOCTYPE》不是一个HTML标签，他就是文档类型声明标签。

6.2lang语言种类

用来定义当前文档显示的语言。

en定义语言为英语；
zh-CN定义语言是中文；

简单来说定义为en就是英文网页，定义zh-CN就是中文网页。

其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的

6.3字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

在标签内，可以通过标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset="UTF-8"/>

charset 常用的值有：GB2312 、 BIG5 、 GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.
注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8” 编码，尽量统一写成标准的 “UTF-8”，不要写成 “utf8” 或 “UTF8”。

6.4总结

以上三个代码vscode自动生成基本不需要我们重新写；
《!DOCTYPE html》文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.

7. HTML常用标签

7.1 标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rM4hBJvc-1625215245802)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20210702112917116.png)]

7.2 标题标签

-

为了使网页更具有语义化，我们经常会在页面中用到标题标签。 HTML 提供了 6 个等级的网页标题，即

-

。
词 head 的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。

特点

加了标题的文字会变的加粗，字号也会依次变大；
一个标题独占一行；

<h1>标题一共六级选,  </h1>
<h2>文字加粗一行显。 </h2>
<h3>由大到小依次减， </h3>
<h4>从重到轻随之变。 </h4>
<h5>语法规范书写后， </h5>
<h6>具体效果刷新见。 </h6>

7.3 段落和换行标签

在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示。在HTML标签中，

标签用于定义段落，它可以将整个网页分为若干个段落。

<p>我是一个段落</p>

单词Prograph的缩写，意味段落；
*标签语义：*可以把HTML文档分割成若干段落。

特点：

文本在一个段落中会根据浏览器的窗口的大小自动换行。
段落和段落之间保有空隙。

7.4 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体和下划线等效果，这时就需要用到HTML中的文本格式化标签，是文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更加重要。

语义	标签	说明
加粗	或者	推荐使用
倾斜	或者	推荐使用
删除线	或者	推荐使用
下划线	或者	推荐使用

重点记住加粗strong和倾斜em。

7.5 和标签

《div》和《span》是没有语义的，他们就是一个盒子，就是用来装内容的。

<div>这是头部内容</div>
<span>今日价格</span>

div是division的缩写，标识分割、分区。span意思为跨度、跨径。

特点：

《div》标签用来布局，但是现在一行只能放一个盒子。即为大盒子
《span》标签用来布局，一行上面可以放多个盒子。即为小盒子

7.6 图像标签和路径

7.6.1图像标签

在HTML标签中，标签用于定义HTML页面中的图像。

<img src="图像url或者地址">

单词image的缩写，意思为图像。
src是标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示时的文字；
title	文本	提示文本，鼠标放到图像上，显示的文字；
width	像素	设置图像的宽度；
height	像素	设置图像的高度；
border	像素	设置图像的边框粗细；

图像标签属性注意点：
- 图像标签可以拥有多个属性，必须写在标签名的后面；
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分隔开；
- 属性采取键值对的格式，即key="value"的格式，属性=“属性值”。

7.6.2路径

相对路径：以引用文件所在位置为参考基础，而建立的目录文件；

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级
下一级路径	/	图像文件位于HTML文件下一级
上一级路径	…/	图像文件为与HTML文件上一级

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盼复开始的路径；

7.7 超链接标签

在HTML标签中，标签用于定义超链接，作用是从一个页面链接跳转到另一个页面。

链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"></a>文本或者图像</a>

两个属性的作用如下：

属性	作用
href	用于指定链接目标的url地址，必须属性当为标签应用href属性时，他就有了链接的功能；
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为新窗口中打开方式；

链接的分类
1. 外部链接：例如’<a href=“https://www.baidu.com”;>百度’
2. 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如’<a href=“index.html”;>首页’
3. 空链接：如果当时没有确定链接目标是，‘首页</a’
4. 下载链接：如果href里面地址是一个文件或者压缩包的话，会下载这个文件；
5. 网页元素链接：在网页中的各个网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
6. 锚点链接：当我们点击链接时，可以快速定位到页面中的某个位置。
  - 在连接文本的href属性中，设置属性值为#名字的形式，如第二集</a
  - 找到目标位置标签，里面添加一个id属性=刚才的名字，如：
    
    第二集介绍

8. HTML中的注释和特殊字符

8.1 注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。HTML中的注释以“ ” 结束。

快捷键：Ctrl + /

8.2 特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

特殊字符	描述	字符的代码
	空格符nbsp
<	小于号lt	<
>	大于号gt	>
&	和号amp	&

前端小白-HTML简介相关推荐

四年，如何从前端小白蜕变为前端技术专家？
简介:作者简介:珑晴--淘系技术部前端技术专家,16 年校招实习转正进入的阿里,当时是在聚划算前端团队,随着业务变化一路从聚划算到天猫至今加入淘系技术部,负责日常活动营销的同时,也多次参与大促会场&a ...
前端小白也能快速学会的博客园博客美化全攻略
前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点"推荐"或关注本人喔~ 美化方法论简介一般而言,需要选一个默认的 ...
前端小白也能快速学会的博客园博客美化全攻略[附源码]
前端小白也能快速学会的博客园博客美化全攻略[附源码] 文章目录前端小白也能快速学会的博客园博客美化全攻略[附源码] 美化方法论简介准备工作 js权限申请如何模仿一个博客园的自定义风格(样式css ...
Web前端小白入门指迷
大前端之旅大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR 前端等.当然在这篇文章,集中讨论一下身为小白,我们怎样去了解 Web 前端,以至达到 ...
bootstrap设计登录页面_前端小白如何在10分钟内打造一个爆款Web响应式登录界面？...
对于前端小白(例如:专注后端代码N年的攻城狮),自己编写一个漂亮的Web登录页面似乎在设计上有些捉襟见肘,不懂UI设计,颜色搭配极度的混乱(主色,辅助色,配色,色彩渐变,动画效果等等,看起来一堆乱七八 ...
一个新进前端小白实习僧的初次探索
我不怕万人阻挡,只怕自己投降一个新进前端小白实习僧的初次探索在学校的时候写过几个静态页面.用过一些简单的JavaScript,写过一些基础的CSS,去应付课程项目,却也仅仅于此. 谁也没想到会阴差 ...
2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...
前端小白系列之——导言
博主前端小白一枚,接触前端有小半年了,此次希望能专心从零开始做一个有自己特色本地页面,鞭挞下自己以严谨的规范代码写页面,顺便写成个系列,仅此而已. 这个页面一开始只是想着要实现前端常用的一些组件,像是 ...
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（三）
续上一小节,我们回到newgame()这个函数,我们之前只做了init()内函数,相当于一个初始化操作现在,我们需要再随机两个两个生成数字. 随机生成数字在这个游戏里会经常出现,用户移动一步,也会产 ...

前端小白-HTML简介