目录
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标签是网页的根标签，网页中的所有内容，都要放置在该标签中-->
<html>
<!-- head是头部标签，用于导入外部的资源信息和描述网页自身信息 -->
<head>
<!-- title是网页自身的标题标签，它里面的内容会在网页的浏览器的选项卡上显示 -->
<title>我的第一个HTML网页</title>
</head>
<!-- body是主体标签，网页中能看到到所有内容，都必须要写在该标签里面 -->
<body>
好好学习，天天向上
</body>
</html>页面显示为:
<!DOCTYPE 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 包含全部中文字符
<meta charset='utf-8' />页面关键词：
<meta name="keywords" content="web前端" />页面描述：
<meta name="description" content="Web前端" /><!DOCTYPE html>
<html>
<head>
<!-- meta标签提供关于HTML文档的元数据，元数据指定是网页自身的数据，
元数据不会显示在页面上，但是对于机器是可读的 -->
<!-- charset="UTF-8" 表示设置字符编码类型为UTF-8，
UTF-8编码类型：包含全世界所有国家需要用到的字符，
gb2312编码类型：包含全部中文字符 -->
<meta charset="UTF-8">
<!-- 页面关键词，设置name属性值为keywords，通过content属性设置具体的关键词，
作用：当用户通过搜索引擎搜索对应的关键词时，能够提高网站被搜索到的概率。 -->
<meta name="keywords" content="酒店预订,特价酒店, 机票,机票预订,飞机票查询,航班查询,
酒店团购,旅游度假,旅行,商旅管理" />
<!-- 页面描述，设置name属性值为description，通过content属性设置具体的描述内容，
作用：也是为了提高网页的搜索率。 -->
<meta name="description" content="携程旅行网是中国领先的在线旅行服务公司，向超过9000万会员提供酒店预订、酒店点评及特价酒店查询、机票预订、
飞机票查询、时刻表、票价查询、航班查询、度假预订、商旅管理、为您的出行提供全方位旅行服务" />
<title>meta标签的用法</title>
</head>
<body>
</body>
</html>页面重定向和刷新：
content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页
<meta http-equiv="refresh" content="30;url=" />移动设备：
如果不是响应式网站，不要使用initial-scale或者禁用缩放
大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->- 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，则用户将不能放大/缩小网页来看到全部的内容
<link>标签用于导入外部资源，比如：网页选项卡图标，外部样式
<link rel="icon" href="favicon.ico"><!DOCTYPE html>
<html>
<head>
<title>设置网页选项卡图标</title>
<!-- meta标签，用于给网页自身添加数据 -->
<meta charset="UTF-8">
<!-- link标签，用于给网页导入外部资源，比如：外部样式，选项卡图标 -->
<!-- 下面是通过link标签，导入一个选项卡图标，rel属性设置外部资源类型，href属性设置资源路径 -->
<link rel="icon" href="./favicon.ico">
</head>
<body>
</body>
</html>页面显示为:
h1~h6
h1~h6是网页的内容标题标签，h1最大，h6最小。标题标签的特点是：字体会加粗
<!-- 这里的第一个标签是文档声明，是告诉浏览器采用什么标准去解析下面的网页，这里表示html5的标准
如果没有文档声明标签，浏览器会根据网页中具体的标签去判断使用什么标准 -->
<!DOCTYPE html>
<html>
<head>
<!-- title是网页自身的标题标签 -->
<title>内容标题</title>
</head>
<body>
<!-- h1~h6是网页的内容标题标签，h1最大，h6最小。标题标签的特点是：字体会加粗 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>页面显示为:
p
p标签是段落标签，用于描述一段内容
hr
hr是水平线标签，用于对网页中的内容进行分隔
br
在网页中，无论打多少空格，或者换多少次行，默认都只是一个空格如果需要手动换行，需要使用br标签
strong
strong是加粗标签，用于突出一段内容里面的部分信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用的内容标签</title>
</head>
<body>
<!-- h2是二级标题 -->
<h2>段落标签、水平线标签、换行标签</h2>
<!-- hr是水平线标签，注意：hr是单标签，单标签的规范写法需要自闭合 -->
<hr/>
<!-- p是段落标签 -->
<p>我正在学习HTML语言</p>
<p>好好学习，天天向上</p>
<!-- 注意：在网页中无论打多少个空格，换多少次行，都只是一个空格。
通过br标签对文本换行。 -->
<p>
到荆州去，摸一摸城墙，城砖<br>
它们牙关紧咬，两千年了不曾开口<br><br>
并非因为仇恨而咬牙切齿<br>
只是像一个病人那样说不出话来
</p>
<h2>加粗和倾斜标签</h2>
<!-- strong是加粗标签，em是倾斜标签，加粗和倾斜可以嵌套使用 -->
<p>如果有<strong>时间</strong>，一定要在<em>趁年轻</em>到处驾车<strong><em>旅游</em></strong></p>
</body>
</html>页面显示为:
em
em是倾斜标签，也用于突出一段内容里面的部分信息
特殊符号
空格
< 小于号
> 大于号
" 双引号
© 版权符号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用的特殊符号</title>
</head>
<body>
<!-- 在网页中无论打多少个空格，默认都只是一个空格，如果需要多个空格，就需要使用特殊符号 -->
<p>好好学习 天天向上</p>
<!-- <是小于号，>是大于号 -->
<p><html>标签，是网页的根标签</p>
<!-- "是双引号 -->
<p>"好好学习，天天向上"</p>
<!-- ©是版权符号 -->
<p>©前端学习</p>
<!-- 更多特殊符号，可以到用到时再查一下 -->
<p>❤</p>
</body>
</html>页面显示为:
img
img是图片标签，src属性设置图片的地址，地址可以是本地地址，也可以是网络地址
title属性设置鼠标悬停提示信息，alt属性设置图片的替代文字，当图片无法显示时，显示对应的文字
width属性设置图片宽度，height属性设置图片高度，如果只设置了其中一个属性，另一个属性会等比缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<!-- img是图片标签，通过src属性设置图片地址，地址可以是本地地址，也可以是网络地址 -->
<img src="./img/bkhm.jpg">
<img src="https://img2.baidu.com/it/u=3132957431,311755709&fm=26&fmt=auto">
<br>
<!-- title属性设置图片的标题，鼠标悬停在图片上显示
width属性设置图片的宽度，height属性设置图片的高度，如果需要对图片的大小重新调通，设置这两个属性。
注意1：设置设置width和height属性，可以会导致图片失真和变形。
注意2：width和height属性，如果只设置一个，另一个会等比调整。-->
<img src="./img/cl.jpg" title="大家好！我是C罗" width="200" height="100">
<img src="./img/cl.jpg" title="大家好！我是C罗" width="200">
<!-- 当图片无法打开时，如果有title属性并且没有alt属性，显示title的内容。
如果有alt属性，显示alt的内容，alt是图片的替代文字，当图片无法正常显示时，显示对应的文字。 -->
<img src="./img/cl2.jpg" title="大家好！我是C罗" alt="图片加载中..." width="200">
</body>
</html>页面显示为:
a
超链接标签，根据链接类型可以分为：页面间链接，锚链接，功能性链接
1.页面间链接：
href属性设置链接的地址，可以是本地地址，也可以是网络地址
target属性设置目标窗口打开的位置，属性值_self替换自身窗口，_blank是打开新窗口
<a href="./index06.html" target="_self">替换自己</a>
<a href="./index06.html" target="_blank">打开新窗口</a><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接-页面间链接</title>
</head>
<body>
<!-- a是超链接标签，href属性设置跳转地址，地址可以是本地地址，也可以是网络地址 -->
<a href="http://www.baidu.com">到百度</a>
<!-- 在设置本地路由时，./表示当前目录，../表示上一级目录 -->
<a href="../L01/index07.html">查看图片</a>
<hr>
<!-- target属性设置跳转方式，属性值包括：_self(替换自身窗口)、_blank(打开新窗口) -->
<a href="../L01/index07.html" target="_self">查看图片(_self)</a>
<a href="../L01/index07.html" target="_blank">查看图片(_blank)</a>
</body>
</html>页面显示为:
2.锚链接：
用于当前页面的跳转，从页面的某个区域，跳转到另一个区域
通常需要两个a标签，一个a标签通过name属性设置锚标记，另一个a标签通过href属性跳转到对应的锚标记处
注意：href属性值需要加一个#号
如果需要跨页面，在href属性中，显示设置地址，在地址的后面在设置对应的锚标记
<a href="#bj">北京</a>
<!-- 这里的a标签，只是做一个锚标记，通过name属性设置标记名 -->
<a name="bj"></a><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接-锚链接</title>
<!-- 这里是给p标签定义样式 -->
<style>
p{
font-size: 30px;
}
</style>
</head>
<body>
<!-- 锚链接，用于当前页面的跳转，从页面的某个区域，跳转到另一个区域 -->
<!-- 一组锚链接需要写两个a标签，一个a标签定义锚标记，另一个a标签定义链接，
标记通过name属性定义，链接地址通过#标记名称的方式定义。 -->
<a href="#bx">冰箱</a>
<a href="#kt">空调</a>
<a href="#ds">电视</a>
<a href="#xyj">洗衣机</a>
<hr>
<!-- 注意：这里的a标签通过name属性定义标记的名称 -->
<h1><a name="bx">冰箱</a></h1>
<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>50年代后半期开始生产家用热电冰箱，中国从50年代开始生产电冰箱。</p>
<p>50年代后半期开始生产家用热电冰箱，中国从50年代开始生产电冰箱。</p>
<h1><a name="kt">空调</a></h1>
<p>空调即空气调节器（Air Conditioner）。是指用人工手段，</p>
<p>对建筑或构筑物内环境空气的温度、湿度、流速等参数进行调节和控制的设备。</p>
<p>一般包括冷源/热源设备，冷热介质输配系统，末端装置等几大部分和其他辅助设备。</p>
<p>主要包括，制冷主机、水泵、风机和管路系统。末端装置则负责利用输配来的冷热量，</p>
<p>具体处理空气状态，使目标环境的空气参数达到一定的要求。</p>
<p>空调是现代生活中人们不可缺少的一部分，空调为人们提供了凉爽，</p>
<p>但同时空调常开也易引起疾病，如“空调病”等，需要慎用。</p>
<p>但同时空调常开也易引起疾病，如“空调病”等，需要慎用。</p>
<p>但同时空调常开也易引起疾病，如“空调病”等，需要慎用。</p>
<p>但同时空调常开也易引起疾病，如“空调病”等，需要慎用。</p>
<h1><a name="ds">电视</a></h1>
<p>电视 (Television 、TV）指使用电子技术传送活动的图像画面和音频信号的设备，即电视接收机，</p>
<p>也是重要的广播和视频通信工具，最早由英国工程师约翰·洛吉·贝尔德在1925年发明。</p>
<p>电视 (Television 、TV）指使用电子技术传送活动的图像画面和音频信号的设备，即电视接收机，</p>
<p>也是重要的广播和视频通信工具，最早由英国工程师约翰·洛吉·贝尔德在1925年发明。</p>
<p>电视 (Television 、TV）指使用电子技术传送活动的图像画面和音频信号的设备，即电视接收机，</p>
<p>也是重要的广播和视频通信工具，最早由英国工程师约翰·洛吉·贝尔德在1925年发明。</p>
<p>电视 (Television 、TV）指使用电子技术传送活动的图像画面和音频信号的设备，即电视接收机，</p>
<p>也是重要的广播和视频通信工具，最早由英国工程师约翰·洛吉·贝尔德在1925年发明。</p>
<p>电视 (Television 、TV）指使用电子技术传送活动的图像画面和音频信号的设备，即电视接收机，</p>
<p>也是重要的广播和视频通信工具，最早由英国工程师约翰·洛吉·贝尔德在1925年发明。</p>
<h1><a name="xyj">洗衣机</a></h1>
<p>洗衣机是利用电能产生机械作用来洗涤衣物的清洁电器，按其额定洗涤容量分为家用和集体用两类。</p>
<p>中国规定洗涤容量在6千克以下的属于家用洗衣机：家用洗衣机主要由箱体、</p>
<p>洗涤脱水桶（有的洗涤和脱水桶分开）、传动和控制系统等组成，有的还装有加热装置。</p>
<p>洗衣机一般专指使用水作为主要的清洗液体，有别于使用特制清洁溶液，及通常由专人负责的干洗。</p>
<p>洗衣机是利用电能产生机械作用来洗涤衣物的清洁电器，按其额定洗涤容量分为家用和集体用两类。</p>
<p>中国规定洗涤容量在6千克以下的属于家用洗衣机：家用洗衣机主要由箱体、</p>
<p>洗涤脱水桶（有的洗涤和脱水桶分开）、传动和控制系统等组成，有的还装有加热装置。</p>
<p>洗衣机一般专指使用水作为主要的清洗液体，有别于使用特制清洁溶液，及通常由专人负责的干洗。</p>
<p>洗衣机是利用电能产生机械作用来洗涤衣物的清洁电器，按其额定洗涤容量分为家用和集体用两类。</p>
<p>中国规定洗涤容量在6千克以下的属于家用洗衣机：家用洗衣机主要由箱体、</p>
<p>洗涤脱水桶（有的洗涤和脱水桶分开）、传动和控制系统等组成，有的还装有加热装置。</p>
<p>洗衣机一般专指使用水作为主要的清洗液体，有别于使用特制清洁溶液，及通常由专人负责的干洗。</p>
</body>
</html>页面显示为:(页面只显示一部分，下方还有)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接-跨页面锚链接</title>
</head>
<body>
<!-- 如果要跨页面跳转锚链接，href属性要先设置跳转路径，在路径的后面再设置锚标记。 -->
<a href="./index02.html#bx">冰箱</a>
<a href="./index02.html#kt">空调</a>
<a href="./index02.html#ds">电视</a>
<a href="./index02.html#xyj">洗衣机</a>
</body>
</html>页面显示为:
3.功能性链接：
利用超链接打开本地的应用
<a href="mailto:123456789@qq.com">发送邮件</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes">打开QQ</a><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接-功能性链接</title>
</head>
<body>
<!-- 功能性链接，用于打开本地的软件，
比如：可以打开邮箱软件给指定的邮箱地址发右键，可以打开qq软件给指定的qq号发消息 -->
<a href="mailto:10001@qq.com">发送邮件</a>
<a href="http://wpa.qq.com/msgrd?v=3&uin=752169642&site=qq&menu=yes">联系QQ</a>
</body>
</html>页面显示为:
div
div是分区标签，是一个块级标签，通常用于网页的布局
span
span是范围标签，是一个行级标签，通常用于突出显示段落中的部分内容
4.标签分类
所有的标签可以分为两类：块级标签和行级标签(内联标签)
块级标签：该元素独占一行(h2,p)
注意：通常情况下，行级标签要放在块级标签里面使用
注意：p标签不能嵌套p标签
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
