1、HTML——初识HTML、HTML的定义、HTML5

恰似情书

于 2022-11-11 17:18:56 发布

阅读量1.1k

点赞数 2

分类专栏：前端Java Web 文章标签： html 前端 Java Web HTML5

本文链接： https://blog.csdn.net/CSDN_Loveletter/article/details/127795799

版权

前端Java Web 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、初识HTML

二、HTML的定义

三、HTML5

四、HTML整体结构

1、头部内容：

1.1 元数据标签：

1.2 网页标题标签：

1.3 头部内容的其他标签

2、实体内容：

2.1 六个标题等级标签

2.2 换行标签：

2.3 段落标签：

2.4 字体标签：斜体，斜体

2.5 字体标签：加粗，加粗

2.6 字体标签：上标标签，下标标签

一、初识HTML

HTML（Hyper Text Markup Language）的全称为超文本标记语言，是一种标记语言。它包括一系列的标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等

用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX,Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。

二、HTML的定义

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

三、HTML5

HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的

四、HTML整体结构

一个网页对应多个HTML文件，超文本标记语言文件以.htm或.html（外语缩写）为扩展名(其中.htm是因为之前的文件系统只支持最多三位扩展名)。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/> <img/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

部分标记也可以不成对出现，如<p>，但是一般并不赞同这样做。

新建一个HTML文件，看一下HTML文件的初始页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>:写在代码的最前面，他是文档声明，告诉浏览器，以下所有代码都是按照html规范编写的，浏览器编译的时候就按照html规范编译，防止浏览器编译时会陷入怪异模式。

标记符<html>，说明该文件是用超文本标记语言来描述的，它是文件的开头;而</html>，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

1、头部内容：<head></head>

<head></head>：这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用做书签和收藏清单

1.1 元数据标签：<meta>

这个标签了解一下就好，别较真

meta是HTML语言head区的一个辅助性标签，位于文档的头部，不包含任何内容。

<meta>标签的属性定义了与文档相关联的名称/值对。

meta元素可提供相关页面的元数据，比如针对搜索引擎和更新频度的描述和关键词。

（1）name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

语法格式：

<meta name="参数" content="具体的参数值">；

--->参数：keywords、descript、root、author

a、设置网页关键字：keywords

说明：用来告诉搜索引擎网页的关键字

举例：<meta name="keywords" content="明星,歌曲,吃瓜">

b、网站内容描述：description

说明：用来告诉引擎网站的主要内容

举例：<meta name="description" content="吃歌手的瓜">

c、机器人向导：root

说明：用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引

content的参数有all,none,index,noindex,follow,nofollow。默认是all。

举例：<meta name="robots" content="none">

d、网页作者：author

说明：标注网页作者

举例：<meta name="author" content="张三">

（2）http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

语法格式：

<meta http-equiv="参数" content="参数变量值">

--->参数：expires、Pragma、Refresh、Set-Cookie、Window-target、content-Type、content-Language

a、设置网页期限：expires

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输

举例：<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT">

注意：必须使用GMT的时间格式。

b、cache模式：Pragma

说明：禁止浏览器从本地计算机的缓存中访问页面内容

用法：<meta http-equiv="Pragma" content="no-cache">

注意：这样设定，访问者将无法脱机浏览。

c、刷新：Refresh

说明：自动刷新并转到新页面。

用法：<meta http-equiv="Refresh" content="2;URL">；（注意后面的分号，分别在秒数的后面和网址的前面，URL可为空）

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

d、cookie设定：Set-Cookie

cookie：网络或互联网使用者发给中央服务器信息的计算机文件

说明：如果网页过期，那么存盘的cookie将被删除。

用法：<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">

注意：必须使用GMT的时间格式。

e、显示窗口设置：Window-target

说明：强制页面在当前窗口以独立页面显示。

用法：<meta http-equiv="Window-target" content="_top">

注意：用来防止别人在框架里调用自己的页面。

f、显示字符集的设定：content-Type

说明：设定页面使用的字符集。

META标签的http-equiv=Content-Type content="text/html

http-equiv=Content-Type代表的是HTTP的头部协议，提示浏览器网页的信息，

写法为：<meta http-equiv="Content-Type" content="text/html; charset=信息参数" >

meta标签的charset的信息参数如GB2312（或GBK）时，代表说明网站是采用的编码是简体中文；

meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；

meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；

meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；

meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；

meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码。

注：在HTML5中，在表达charset信息时可以简写，前面的内容可以去掉，即写法是： <meta charset="UTF-8">

g、显示语言的设定：content-Language

用法：<meta http-equiv="Content-Language" content="zh-cn" />

1.2 网页标题标签：<title></title>

标签定义文档的标题，在所有 HTML 文档中是必需的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个网页</title>
	</head>
	<body>
	</body>
</html>

1.3 头部内容的其他标签

2、实体内容：<body></body>

网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

2.1 六个标题等级标签

<h1><h1/>定义一级标题

<h2><h2/>定义二级标题

<h3><h3/>定义三级标题

<h4><h4/>定义四级标题

<h5><h5/>定义五级标题

<h6><h6/>定义六级标题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个网页</title>
	</head>
	<body>
		<h1>侠客行</h1>
		<h2>侠客行</h2>
		<h3>侠客行</h3>
		<h4>侠客行</h4>
		<h5>侠客行</h5>
		<h6>侠客行</h6>
	</body>
</html>

2.2 换行标签：<br />

在编辑文档时的回车不会让网页中的内容换行，需要在文档中使用<br />标签使网页中现实的内容换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个网页</title>
	</head>
	<body>
		<h1>侠客行</h1>
		<h3>李白</h3>
		赵客缦胡缨，吴钩霜雪明。<br />
		银鞍照白马，飒沓如流星。
	</body>
</html>

2.3 段落标签：<p></p>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个网页</title>
	</head>
	<body>
		<h1>侠客行</h1>
		<h3>李白</h3>
		赵客缦胡缨，吴钩霜雪明。<br />
		银鞍照白马，飒沓如流星。
		<p>
			十步杀一人，千里不留行。<br />
			事了拂衣去，深藏功与名。
		</p>
		<p>
		闲过信陵饮，脱剑膝前横。<br />
		将炙啖朱亥，持觞劝侯嬴。
		</p>
	</body>
</html>

2.4 字体标签：斜体<em></em>，斜体<i></i>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个网页</title>
	</head>
	<body>
		<h1>侠客行</h1>
		<h3>李白</h3>
		赵客缦胡缨，吴钩霜雪明。<br />
		银鞍照白马，飒沓如流星。
		<p>
			十步杀一人，千里不留行。<br />
			事了拂衣去，深藏功与名。
		</p>
		<p>
		闲过信陵饮，脱剑膝前横。<br />
		将炙啖朱亥，持觞劝侯嬴。
		</p>
		
		<em>三杯吐然诺，五岳倒为轻。</em><br />
		<i>眼花耳热后，意气素霓生。</i>
		
	</body>
</html>

2.5 字体标签：加粗<b></b>，加粗<strong></strong>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个网页</title>
	</head>
	<body>
		<h1>侠客行</h1>
		<h3>李白</h3>
		<b>赵客缦胡缨，吴钩霜雪明。<br />
		银鞍照白马，飒沓如流星。
		</b>
		
		<strong>
			<p>
			十步杀一人，千里不留行。<br />
			事了拂衣去，深藏功与名。
		</p>
		</strong>
	</body>
</html>

2.6 字体标签：上标标签<sup></sup>，下标标签<sub></sub>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个网页</title>
	</head>
	<body>
		X<sup>2</sup>+Y<sup>3</sup>=Z<sup>4</sup><br />
		X<sub>1</sub>=?
	</body>
</html>