2021-11-16

一、HTML基础标签

1.HTML简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言

标记语言是一套标记标签

HTML 使用标记标签来描述网页

HTML 文档包含了HTML标签及文本内容

HTML 运行在浏览器上，由浏览器来解析

HTML文档也叫做web 页面

文档的后缀名：xxx.html或 xxx.htm

2.HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现 的，比如 <b> 和</b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

3.HTML基础标签

html

html是网页的根标签，网页的所有内容，都必须要写在该标签里面

head

head是头部标签，用于导入外部的资源信息和描述网页自身信息

title

title是网页自身的标题标签，它里面的内容会在网页的浏览器的选项卡上显示

body

body是主体标签，网页中能看到到所有内容，都必须要写在该标签里面

代码：

<html>

<head>

<title>我的第一个HTML网页</title>

</head>

<body>

好好学习，天天向上

</body>

</html>

页面显示为:

文档声明，是告诉浏览器采用什么标准去解析下面的网页，这里表示html5的标准。如果没有文档声明标签，浏览器会根据网页中具体的标签去判断使用什么标准。

其他标准：

HTML 4.01

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

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

meta

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务

meta标签是单标签，不需要闭合标签，规范写法，单标签需要自闭合

声明编码：

utf-8 包含全世界所有国家需要用到的字符 gb2312 包含全部中文字符

页面关键词：

页面描述：

代码：

<!DOCTYPE html>

<html>

<head>

<!-- meta标签提供关于HTML文档的元数据，元数据指定是网页自身的数据，

元数据不会显示在页面上，但是对于机器是可读的 -->

<!-- charset="UTF-8" 表示设置字符编码类型为UTF-8，

UTF-8编码类型：包含全世界所有国家需要用到的字符，

gb2312编码类型：包含全部中文字符 -->

<!-- 页面关键词，设置name属性值为keywords，通过content属性设置具体的关键词，

作用：当用户通过搜索引擎搜索对应的关键词时，能够提高网站被搜索到的概率。 -->

酒店团购,旅游度假,旅行,商旅管理" />

<!-- 页面描述，设置name属性值为description，通过content属性设置具体的描述内容，

作用：也是为了提高网页的搜索率。 -->

飞机票查询、时刻表、票价查询、航班查询、度假预订、商旅管理、为您的出行提供全方位旅行服务" />

<title>meta标签的用法</title>

</head>

<body>

</body>

</html>

页面重定向和刷新：

content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页

移动设备：

如果不是响应式网站，不要使用initial-scale或者禁用缩放

大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px

width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）

height：高度（数值 / device-height）（范围从223 到10,000）

initial-scale：初始的缩放比例（范围从>0 到10）

minimum-scale：允许用户缩放到的最小比例

maximum-scale：允许用户缩放到的最大比例

user-scalable：用户是否可以手动缩 (no,yes)

注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容

代码：

<!DOCTYPE html>

<html>

<head>

<title>设置网页选项卡图标</title>

</head>

<body>

</body>

</html>

页面显示为:

h1~h6

h1~h6是网页的内容标题标签，h1最大，h6最小。标题标签的特点是：字体会加粗

<!-- 这里的第一个标签是文档声明，是告诉浏览器采用什么标准去解析下面的网页，这里表示html5的标准

如果没有文档声明标签，浏览器会根据网页中具体的标签去判断使用什么标准 -->

代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

页面显示为:

p标签是段落标签，用于描述一段内容

hr是水平线标签，用于对网页中的内容进行分隔

在网页中，无论打多少空格，或者换多少次行，默认都只是一个空格如果需要手动换行，需要使用br标签

strong

strong是加粗标签，用于突出一段内容里面的部分信息

代码：

<!DOCTYPE html>

<html>

<head>

<title>常用的内容标签</title>

</head>

<body>

<h2>段落标签、水平线标签、换行标签</h2>

<hr/>

<p>我正在学习HTML语言</p>

<!-- 注意：在网页中无论打多少个空格，换多少次行，都只是一个空格。

通过br标签对文本换行。 -->

<p>

到荆州去，摸一摸城墙，城砖<br>

它们牙关紧咬，两千年了不曾开口<br><br>

并非因为仇恨而咬牙切齿<br>

只是像一个病人那样说不出话来

</p>

<h2>加粗和倾斜标签</h2>

</body>

</html>

页面显示为:

em是倾斜标签，也用于突出一段内容里面的部分信息

特殊符号

  空格

< 小于号

> 大于号

" 双引号

代码：

<!DOCTYPE html>

<html>

<head>

<title>常用的特殊符号</title>

</head>

<body>

<p><html>标签，是网页的根标签</p>

</body>

</html>

页面显示为:

img

img是图片标签，src属性设置图片的地址，地址可以是本地地址，也可以是网络地址

title属性设置鼠标悬停提示信息，alt属性设置图片的替代文字，当图片无法显示时，显示对应的文字

width属性设置图片宽度，height属性设置图片高度，如果只设置了其中一个属性，另一个属性会等比缩放

代码：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br>

<!-- title属性设置图片的标题，鼠标悬停在图片上显示

width属性设置图片的宽度，height属性设置图片的高度，如果需要对图片的大小重新调通，设置这两个属性。

注意1：设置设置width和height属性，可以会导致图片失真和变形。

注意2：width和height属性，如果只设置一个，另一个会等比调整。-->

<!-- 当图片无法打开时，如果有title属性并且没有alt属性，显示title的内容。

如果有alt属性，显示alt的内容，alt是图片的替代文字，当图片无法正常显示时，显示对应的文字。 -->

</body>

</html>

页面显示为:

超链接标签，根据链接类型可以分为：页面间链接，锚链接，功能性链接

1.页面间链接：

href属性设置链接的地址，可以是本地地址，也可以是网络地址

target属性设置目标窗口打开的位置，属性值_self替换自身窗口，_blank是打开新窗口

<a href="./index06.html" target="_blank">打开新窗口</a>

代码：

<!DOCTYPE html>

<html>

<head>

<title>超链接-页面间链接</title>

</head>

<body>

<hr>

<a href="../L01/index07.html" target="_blank">查看图片(_blank)</a>

</body>

</html>

页面显示为:

2.锚链接：

用于当前页面的跳转，从页面的某个区域，跳转到另一个区域

通常需要两个a标签，一个a标签通过name属性设置锚标记，另一个a标签通过href属性跳转到对应的锚标记处

注意：href属性值需要加一个#号

如果需要跨页面，在href属性中，显示设置地址，在地址的后面在设置对应的锚标记

代码：

<!DOCTYPE html>

<html>

<head>

<style>

font-size: 30px;

}

</style>

</head>

<body>

<!-- 一组锚链接需要写两个a标签，一个a标签定义锚标记，另一个a标签定义链接，

标记通过name属性定义，链接地址通过#标记名称的方式定义。 -->

<hr>

<p>保持恒定低温的一种制冷设备，也是一种使食物或其他物品保持恒定低温状态的民用产品。</p>

<p>箱体内有压缩机、制冰机用以结冰的柜或箱，带有制冷装置的储藏箱。</p>

<p>家用电冰箱的容积通常为20～500升。</p>

<p>1910年世界上第一台压缩式制冷的家用电冰箱在美国问世。</p>

<p>1925年瑞典丽都公司开发了家用吸收式冰箱。1927年美国通用电气公司研制出全封闭式冰箱。</p>

<p>1930年采用不同加热方式的空气冷却连续扩散吸收式电冰箱投放市场。1931年研制成功新型制冷剂氟利昂12。</p>

<p>50年代后半期开始生产家用热电冰箱，中国从50年代开始生产电冰箱。</p>

<p>空调即空气调节器（Air Conditioner）。是指用人工手段，</p>

<p>对建筑或构筑物内环境空气的温度、湿度、流速等参数进行调节和控制的设备。</p>

<p>一般包括冷源/热源设备，冷热介质输配系统，末端装置等几大部分和其他辅助设备。</p>

<p>主要包括，制冷主机、水泵、风机和管路系统。末端装置则负责利用输配来的冷热量，</p>

<p>具体处理空气状态，使目标环境的空气参数达到一定的要求。</p>

<p>空调是现代生活中人们不可缺少的一部分，空调为人们提供了凉爽，</p>

<p>但同时空调常开也易引起疾病，如“空调病”等，需要慎用。</p>