1. 什么是HTML
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。
一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。
2、HTML版本变迁
HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
HTML历史上有如下版本：
- HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
- HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
- HTML 3.2：1997年1月14日，W3C推荐标准。
- HTML 4.0：1997年12月18日，W3C推荐标准。
- HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
- HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。
3、一个hello world网页
<!--
doctype 是页面的头信息，用来描述该页面遵循的HTML标准，
如下面所示，<!doctype html>表示该页面遵循h5的标准
-->
<!doctype html>
<html>
<!--
html标签是页面的根标签，表示页面的根
HTML有两个子标签
head 部分，主要用来包裹页面的不可见部分，主要做页面是属性设置
body 部分，表示页面的内容部分
-->
<head>
<title>这个是页面的标题---我的第一个HTML页面</title>
</head>
<body>
Hello Word
</body>
</html>4. 编码问题
当浏览器默认编码与网页编码不同时，网页会出现乱码的现象，我们在head标签中添加
<meta charset="UTF-8">将网页设置为UTF-8（常用）
在网页中除了可显示常见的美国信息交换标准代码（外语缩写：ASCII）字符和汉字外，HTML还有许多特殊字符，它们一起构成了HTML字符集。有2种情况需要使用特殊字符，一是网页中有其特殊意义的字符，二是键盘上没有的字符。HTML字符可以用一些代码来表示，代码可以有2种表示方式。即字符代码（命名实体）和数字代码（编号实体）。字符代码以“&”符开始，以分号";"结束，其间是字符名，如®。数字代码也以“&#”符开始，以分号";"结束，其间是编号，如®。
5.数据类型
超文本标记语言定义了多种数据类型的元素内容，如脚本数据和样式表的数据，和众多类型的属性值，包括ID、名称、URI、数字、长度单位、语言、媒体描述符、颜色、字符编码、日期和时间等。所有这些数据类型都是专业的字符数据。
6.常见标签
p # 段落标签
hn(1~6) # 段落标签
div # 标准块标签，主要用于网页布局
span # 标准行内标签
b/strong # 加粗
i/em # 加斜
u # 下划线
del # 删除线
br # 换行
hr # 分割线
HTML5提供的语义化标签
article # 文章标签
header # 头部标签
section # 正文标签
footer # 尾部标签
aside # 侧列内容
nav # 导航标签
标签分类：
块标签：默认占据一行的标签
行内标签：只占据内容部分
7.多媒体标签
图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多媒体标签</title>
</head>
<body>
<!--
图片标签
img 用来承载和展示图片所用
src属性用来指定要展示的图片
src的值可以是url，网络图片路径
也可以值本地图片，如是本地图片，一定注意：
建议使用相对路径
title表示图片的标题
alt表示当图片不可见的时候，会出现的文字描述
-->
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2350171032,3227234175&fm=26&gp=0.jpg" width="500" title="狼" alt="这个是狼"/>
<!--相对路径: <img src="img/a.jpg" width="500" title="狼" alt="这个是狼"/>-->
</body>
</html>
设置图片长宽时，尽量只指定一边，同时指定长和宽时如不按照比例，图片会出现拉长或者拉宽
视频
<body>
<!--
video 用来承载视频标签
controls属性用来表示视频的控制组件
controls="controls"遇到类似于键等于值的属性，
在h5的标准下，都可以写成controls
sourse 视频兼容性处理，当浏览器不支持当前视频格式会试着播放下面格式，
autoplay属性表示自动播放
-->
<video src="./img/01.HTML的概念.mp4" height="500" controls autoplay></video>
<video height="500" controls autoplay>
<source src="img/01.HTML的概念.mp4" />
<source src="img/01.HTML的概念.avi" />
<source src="img/01.HTML的概念.xx" />
</video>
</body>音频
<body>
<!--
audio 音频标签
-->
<audio src="img\音阙诗听、赵方婧 - 芒种.flac "controls autoplay ></audio>
</body>8.列表标签
有序列表<ol>
<body>
<div id="news">
<h4>实时热点</h4>
<ol>
<!--
自动生成5行
$计数
<li>
第一层列表
ol>li*5>{第二层列表$}
</li>
-->
<li>
第一层列表
<ol>
<li>第二层列表1</li>
<li>第二层列表2</li>
<li>第二层列表3</li>
<li>第二层列表4</li>
<li>第二层列表5</li>
</ol>
</li>
<li>第一层列表</li>
<li>第一层列表</li>
<li>第一层列表</li>
<li>第一层列表</li>
</ol>
</div>
</body>无序列表及样式调整<ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
<style>
/*写css文件*/
#school{
/*去掉无序列表中li前面的点，加自定义样式，并调整间隔*/
}
#school>li{
list-style: none;
list-style-image: url("img/dian.png");
/* border: 3px solid red; */
width: 400px;
height: 30px;
font-size: 18px;
}
/*鼠标移上去字体变红*/
#school>li:hover{
color: red;
}
</style>
</head>
<div>
<ul id="school">
<li>学生</li>
<li>学生</li>
<li>学生</li>
<li>学生</li>
<li>学生</li>
</ul>
</div>
</body>
</html>数据列表<dl>
<div>
<dl>
<dt>国内热点新闻</dt>
<dd>儿童安全座椅是一种专为儿童设计,安装在汽车内,能有效提高儿童乘车安全的椅子。</dd>
<dd>儿童安全座椅是一种专为儿童设计,安装在汽车内,能有效提高儿童乘车安全的椅子。</dd>
<dd>儿童安全座椅是一种专为儿童设计,安装在汽车内,能有效提高儿童乘车安全的椅子。</dd>
<dd>儿童安全座椅是一种专为儿童设计,安装在汽车内,能有效提高儿童乘车安全的椅子。</dd>
<dd>儿童安全座椅是一种专为儿童设计,安装在汽车内,能有效提高儿童乘车安全的椅子。</dd>
</dl>
</div>9.表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签 </title>
</head>
<body>
<h1 align="center">用户信息</h1>
<!--排列居中，边框为1，填充和间距为0，宽800-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="800">
<thead><!--语义化标签，表头的意思 ,可不写-->
<tr>
<th>用户名称</th><!--th居中，加粗，一般表头用-->
<th>用户性别</th>
<th>用户年龄</th>
<th>用户地址</th>
<th>用户邮箱</th>
<th>用户操作</th>
</tr>
</thead>
<tbody><!--语义化标签，数据，表体的意思-->
<tr>
<td>张三</td>
<td rowspan="2">男</td> <!--合并2行单元格-->
<td>21</td>
<td>陕西</td>
<td>3123123@163.com</td>
<td>无</td>
</tr>
<tr>
<td>李四</td>
<!-- <td>男</td> 已合并无意义-->
<td>21</td>
<td>陕西</td>
<td>3123121@163.com</td>
<td>无</td>
</tr>
</tbody>
</table>
</body>
</html>10.超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<!--
a 标签是超链接标签，主要用于页面之间的跳转和数据传递
href属性是用来指定跳转的地址，支持网络地址和本地地址
网络地址必须完整的url地址
target属性用来指定页面的打开方式，
默认使用_self，表示在当前选项卡打开
当值为_blank，表示使用一个新的选项卡打开
-->
<h1>超链接标签</h1>
<a href="https://www.baidu.com/" target="_self">百度</a>
<a href=""></a><!--表示跳转到当前页面(刷新);加 #，不跳-->
</body>
</html>11.超链接锚点定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接锚点定位</title>
</head>
<body>
<header style="height: 200px;border: 1px solid red"; id="top">
<a href="#footer">去底部</a> <!--根据id超链接-->
</header>
<section style="height: 1600px;border: 1px solid red"></section>
<header style="height: 200px;border: 1px solid red"; id="footer">
<a href="#top">去顶部</a>
</header>
</body>
</html>
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
