HTML基础

HTML 基础

什么是HTML?

超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。

超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。

HTML语言特点

超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的文件镶入,这也是万维网(WWW)盛行的原因之一,其主要特点如下:

  • 简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便。
  • 可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
  • 平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。
  • 通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

总结

简单的说,HTML是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

而HTML标记 又被称之为HTML标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如
  • HTML 标签通常是成对出现的,比如 
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

通过html标签编写的文档,就是web中的网页。

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。

HTML 文档主体结构

html文档即是网页,而html文档中以标签为主,在通过html标签编写网页文档的时候,需要在文档中首先创建html文档的主体结构标签,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    网页内容
</body>
</html>

在上述代码中, 不同的标签代表不同的意义。
首先:

<!DOCTYPE html>

表示文档声明,告诉浏览器,当前html网页文档是html5的文档格式。

<html lang="en">
</html>

声明html标签的主体,所有的网页标签全部写在html标签中。

<head>
</head>

head标签主要负责网页的一些预定义信息。

<body>
</body>

body 标签里面包括网页显示给用户看的内容。

<meta charset="UTF-8">

meta 标签作用有很多,这一句代码的作用是设置字符集,将网页文档的字符集设置为UTF-8。

<title>Document</title>

title标签主要负责网页的标题,通过title标签设置网页的标题。

HTML 文档 head标签设置内容

在head标签中,主要设置的是网页的一些预定义信息。

css 样式设置

<style>
    /*css代码*/
</style>

在head标签中可以通过style标签来设置网页的样式。

<link rel="stylesheet" href="style.css">

通过link标签可以从外部引入css文件。

JavaScript代码

<script>
    // JavaScript 代码 
</script>

在head标签中还可以通过script标签来设置JavaScript代码。

html文档的基础链接设置

<base href ="">

还可以通过base标签来设置html文档的基础文档。

字符集以及head标签中的字符集的设置

字符编码

编码问题是个大问题,如果不彻底解决,它就会像隐藏在丛林中的小蛇,时不时地咬你一口。
那么到底什么是编码呢?

//ASCII

记住一句话:计算机中的所有数据,不论是文字、图片、视频、还是音频文件,本质上最终都是按照类似 01010101 的二进制存储的。
再说简单点,计算机只懂二进制数字!
所以,目的明确了:如何将我们能识别的符号唯一的与一组二进制数字对应上?于是美利坚的同志想到通过一个电平的高低状态来代指0或1,
八个电平做为一组就可以表示出
256种不同状态,每种状态就唯一对应一个字符,比如A--->00010001,而英文只有26个字符,算上一些特殊字符和数字,128个状态也够
用了;每个电平称为一个比特为,约定8个比特位构成一个字节,这样计算机就可以用127个不同字节来存储英语的文字了。这就是ASCII编码。

扩展ANSI编码
刚才说了,最开始,一个字节有八位,但是最高位没用上,默认为0;后来为了计算机也可以表示拉丁文,就将最后一位也用上了,
从128到255的字符集对应拉丁文啦。至此,一个字节就用满了!

//GB2312

计算机漂洋过海来到中国后,问题来了,计算机不认识中文,当然也没法显示中文;而且一个字节所有状态都被占满了,万恶的帝国主义亡
我之心不死啊!我党也是棒,自力更生,自己重写一张表,直接生猛地将扩展的第八位对应拉丁文全部删掉,规定一个小于127的字符的意
义与原来相同,但两个大于127的字符连在一起时,就表示一个汉字,前面的一个字节(他称之为高字节)从0xA1用到0xF7,后面一个字节(低字节)从0xA1到0xFE,这样我们就可以组合出大约7000多个简体汉字了;这种汉字方案叫做 “GB2312”。GB2312 是对 ASCII 的中文扩展。

//GBK 和 GB18030编码

但是汉字太多了,GB2312也不够用,于是规定:只要第一个字节是大于127就固定表示这是一个汉字的开始,不管后面跟的是不是扩展字符集里的
内容。结果扩展之后的编码方案被称为 GBK 标准,GBK 包括了 GB2312 的所有内容,同时又增加了近20000个新的汉字(包括繁体字)和符号。

//UNICODE编码:

很多其它国家都搞出自己的编码标准,彼此间却相互不支持。这就带来了很多问题。于是,国际标谁化组织为了统一编码:提出了标准编码准
则:UNICODE 。
UNICODE是用两个字节来表示为一个字符,它总共可以组合出65535不同的字符,这足以覆盖世界上所有符号(包括甲骨文)

//utf8:

unicode都一统天下了,为什么还要有一个utf8的编码呢?
大家想,对于英文世界的人们来讲,一个字节完全够了,比如要存储A,本来00010001就可以了,现在吃上了unicode的大锅饭,
得用两个字节:00000000 00010001才行,浪费太严重!
基于此,美利坚的科学家们提出了天才的想法:utf8.
UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,它可以使用1~4个字节表示一个符号,根据
不同的符号而变化字节长度,当字符在ASCII码的范围时,就用一个字节表示,所以是兼容ASCII编码的。

这样显著的好处是,虽然在我们内存中的数据都是unicode,但当数据要保存到磁盘或者用于网络传输时,直接使用unicode就远不如utf8省空间啦!
这也是为什么utf8是我们的推荐编码方式。

Unicode与utf8的关系:
一言以蔽之:Unicode是内存编码表示方案(是规范),而UTF是如何保存和传输Unicode的方案(是实现)这也是UTF与Unicode的区别。

字符编码设置

在对网页进行预定于设置的时候,需要将网页的字符串设置为utf-8,可以通过meta标签来进行设置。如下:

<meta charset="UTF-8">

需要注意的是,网页中的title标签最好设置在meta标签的下面,防止标题乱码。

网页ico设置

在通过浏览器打开网页的时候,在浏览器的标题栏里面通常会显示网页的ico文件,设置方式如下:

<link rel="SHORTCUT ICON" href="favicon.ico"/>

通过上述的设置来设置网页的ico文件。

原文地址:https://www.cnblogs.com/yujihaia/p/7468214.html