HTML概述

最新推荐文章于 2024-01-03 14:18:55 发布

foreverHanhan

最新推荐文章于 2024-01-03 14:18:55 发布

阅读量130

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/foreverHanhan/article/details/119656030

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML

HTML概述

HTML历史介绍

首先在讲HTML的概述之前，我们有必要了解一下html的历史发展。

从1993到2019年，html发展总共16个年头，语言的版本也在不断的更新迭代。

那么，在1999年12月份，w3c推荐了此标准，此时html4.01版本诞生。这个版本一直维持了15个年头，在2014年10月份，w3c推荐了HTML5的标准。

html5的诞生更加让我们更加适宜时代要求。在HTML5中视频、音频、图像、动画都会标准化，会解决浏览器兼容这个令人头疼的问题。

HTML

HTML全称HyperText Mackeup Language，超文本标记语言。

什么是超文本？

比如网页的超链接、图片、音频、视频都称为超文本。

什么是标记？

举个栗子

打开sublime（前端轻便的编程工具），新建index.html,输入一下文字内容。用Chrome浏览器打开。
在这里插入图片描述

如果我们在网页中看到这篇文章。我们只有在阅读完这段文字之后，才能正常的发现原来描述的是吉泽明步这个人的资料。

但是大部分的文章内容，是通过对刘亦菲加粗加黑才凸显描述的标题。那么在html中我们可以将此内容用标记包裹起来，与我们的文字内容混合使用。

比如我们可以用<h1>刘亦菲</h1>,会发现

在这里插入图片描述

刘亦菲
	1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科。 
	2002年，因出演电视剧《金粉世家》中白秀珠一角踏入演艺圈 。
	2003年因主演武侠剧《天龙八部》王语嫣崭露头角 。
	2004年凭借仙侠剧《仙剑奇侠传》赵灵儿一角获得了高人气与关注度 。
	2005年因在武侠剧《神雕侠侣》中饰演小龙女受到广泛关注 。
	2006年发行首张国语专辑《刘亦菲》和日语专辑《All My Words》

那么，不仅仅是对文字加粗加黑，还可以设置图片，网页的超链接等等。

在这里插入图片描述

什么是语言？

很简单，假如我是个包工头，工地的工人来自全国各地，那么有河南人，另外还有外国人，工地还有一条狗

如果我要让他们干活，说：好好干活

对河南人说：‘好好干活’

对外国人说：“Do you work”

对狗说：’汪汪汪‘

一样的，我们现在电脑有台计算机，现在在html文件中写的内容，计算机上的浏览器会去解析你编写的代码，这写的内容，我们就称为标记语言。浏览器可以直接解析这种语言

HTML结构

介绍完HTML之后，对于一个网页来说，我们在HTML中主要来学习一些常用的标签。通过学习这些标签，我们能把90%的网站都可以慢慢搭建。

首先打开sublime,新建index.html,输入html回车

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
  </body>
</html>

我们发现，生成这么一坨内容，一眼懵逼！那么接下来我们慢慢剖析这段代码。

文档声明头

准确的说，<!DOCTYPE html>，它并不是 HTML 标签，它是指明了该页面使用哪个 HTML 版本进行编译。

html4.01版本文档声明头

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html5版本文档声明头

<!DOCTYPE html>

随着html的发展，w3c在定义文档声明头的时候更加的简洁。另外，DTD(Document Type Definition)规定了标记语言的规则，这样浏览器才能正确地呈现内容。

文档就是一个html页面

html标签

每一个页面中的结构，都会有一个最外层的标签，它表示文档内容的开始。

html标签包含两部分：头部声明(<head>)和内容部分(<body>)。

如果把网页比作洋葱，一层包一层，那<html>标签就是洋葱最外层的皮， <html> 元素是一张网页的根标签，所以其他所有元素都是是此元素的后代。

head标签

把一个网页比作一个人的话，那么head标签就是这个人的基本信息，虽然这个没法直接观察到，但这些内容确实存在，并且是在网页中必不可少的。head用于表示网页的中的一个基础的信息(元信息)

body标签

把一个网页比作一个人的话，那么body标签就是这个人的身体，肤色，痔疮。它里面的内容是看得见摸得着的。对于人的性格，意淫的想法，性取向等body是管不着的。那么body标签包含页面中所有的可见元素，比如网页中的文本的展示内容，漂亮meinv ，动听的音乐，炫酷的电影等都属于body所管。

以上就是对HTML结构的一些介绍。

总结

快捷键
html tab键，快速生成html5的文档
html:xt tab键，快速生成html4.01的文档
<!DOCTYPE html> html5的文档声明头
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html4.01的文档声明头
html 网页的最外层的标签，也是网页的根标签。
head 网页的头部标签，网页的声明，看不见摸不着的内容，用于网页的基础信息(元信息)
body 网页的身体标签，网页中所有能看得见摸得着的内容，都在body中声明。

那么，这个结构是我们网页的最基本的配置，如果把网页比作盖一座房子，那么这些相关的配置，就是开始打地基，后续我们慢慢学习head和body中的相关标签，通过这些内容，将我们最“美丽的房子”(网页)搭建好。

HTML规范

HTML不区分大小写，也就是说<head>和<HEAD>都可以
HTML页面的后缀名是html或者htm(win32时代，系统只能识别3位扩展名时使用的。现在一般都使用.html
HTML的结构
- 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
- head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
- body部分：我们所写的代码必须放在此标签內。

编写HTML的规范

所有标签都要正确的嵌套，不能交叉嵌套

什么是交叉嵌套呢?
```
<html>
<head>
</html>
<head>
```
正确写法
```
<html>
    <head>
    <head>
</html>
```
所有的标签尽量都小写，当然也可以大写，因为html中不区分大小写，但是小写相对比大写来说，它更易于阅读。
所有的标签要闭合
- 双闭合比如<html></html>
- 单闭合比如<meta />，下节课马上讲解

HTML注释

在页面中，凡是被注释掉的代码，浏览器都不会去解析。

html中的注释

<!--这是我关键性的内容-->

注释的作用：

给自己看。随着页面的内容越多，高效的注释能让我们的代码更易阅读，并且关键性的代码我们可以用注释标注出来。
给别人看。比如自己写的html代码，有的地方代码需要说明一下，同时要转给别人看和解读分析的，这个时候就有必要使用html注释。

正确使用注释

<!--<!--这是我关键性的内容-->-->

不能一个html注释中，再放一个html注释，不然浏览器会如下解析。
在这里插入图片描述

注释快捷键：windows上ctrl+/,mac上command+/

meta标签和title标签

head标签中的相关标签，是看不见摸不着的，仅仅是对应用于网页的一些基础信息(元信息)。
比如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

它提供的信息是用户不可见的。

meta标签的组成

meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

常用的meta标签属性

http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

在html4.01版本中，我们使用下面配置来规定HTML 文档的字符编码。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

但在html5版本中，我们使用更简化的方式来规定HTML 文档的字符编码。

<meta charset="UTF-8">

什么是字符集

活字印刷术，所有的汉字都有一个个小印章，需要哪个字，就取哪个字。
但是，有两个人都发明了字库。老王发明了一个，老李也发明了一个。
比如同一个汉字，“传”字在老王的字库里面是第2个大盘子第4行第43列的。
而这个汉字“传”在老李的字库里面是第5个大盘子第6行第13列的。

计算机，不能直接存储汉字，而是存储的是编码，所以，计算机记录“传”这个字，就是这么记录的：

老王：20443
老李：50613

有两个字库UTF-8和gb2312。

UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、其他……

gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。

字库规模：UTF-8 （字全）> gb2312（只有汉字）

我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点）

当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型：文件→ set File Encoding to → Chinese Simplified(GBK)

注意，由于UTF-8里面保存了世界上所有人类语言，所以描述一个汉字需要的码更多。

UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。

保存大小： UTF-8**（更臃肿、加载更慢） > gb2312** （更小巧，加载更快）

总结：

UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；

gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。

列出2个使用情形：

（1）你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。

（2）你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。

qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
新华网藏语频道，使用的是UTF-8，保证字符集的数量。

浏览器就是通过meta来看你是什么字符集的，比如你保存的时候meta写的，和声明的不匹配，那么浏览器就是乱码。

name

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化)。

title标签

主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

比如我们打开百度。
在这里插入图片描述
注：

目前仍处于自学阶段，以上是学习时候的总结，可能会有相互补充的来自不同的地方的资源，目前跟随学习的地方:https://www.luffycity.com/

foreverHanhan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML概述

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar
复制链接

扫一扫