概述
HTML：Hyper Text Markup Language（超文本标记语言）
由大量的标签组成，每一个标签都有开始和结束标签
- HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
- HTML也有专业的开发工具，例如：DreamWeaver、HBuilder…
- 直接采用浏览器打开HTML文件就是运行
第一个HTML页面
<!--
1.这是HTML的注释
2.加上以下代码的第一行就表示HTML5语法，去掉就表示HTML4.0
3.HTML不区分大小写，语法松散不严格
-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题，显示在网页左上角-->
<title>网页的标题</title>
</head>
<!--体-->
<body>
网页的主体内容，欢迎学习HTML！
</body>
</html>
常用标签
标题标签
（h1/h2/h3/h4/h5/h6）：从大到小顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>h1标签：标题</h1>
<h2>h2标签：标题</h2>
<h3>h3标签：标题</h3>
<h4>h4标签：标题</h4>
<h5>h5标签：标题</h5>
<h6>h6标签：标题</h6>
</body>
</html>
段落标签
p标签
注意：在网页上直接写空格或者分行是不起效果的，必须通过标签或者CSS样式进行决定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落标签</title>
</head>
<body>
<p>《上古卷轴5：天际》是Bethesda出品的史诗性奇幻风格RPG《上古卷轴》系列的第五部作品。</p>
<p>
游戏设定在《上古卷轴4》的200年之后，随着天际省之王的暗杀，诺德内部出现了内战。大部分诺德人意图让天际省脱离帝国。诺德内战是上古卷轴的终极预兆，古诺德毁灭之神Alduin的回归，现已呈现为龙的形态。Alduin拥有一支苍龙军团，名为Jill.本作将会和《上古卷轴4》拥有同等大小的地图。在这广阔的地图之上，Bethesda工作室给玩家提供了超过120个不重复的地下迷宫，以及9个规模宏大的城市供玩家探索，而玩家将在这个奇异自由的世界踏上史诗性的征程，使用自己心仪的武器装备自己擅长的技能，去和巨兽，飞龙战斗。前作作为引领PC硬件新潮流的RPG，续作的配置则平易近人，不过Bethesda依然为该作注入了新元素，那就是新引擎“创造”打造的重峦叠嶂的规模与细节的华丽。
</p>
<p>“我曾经跟你一样是个上古卷轴玩家，直到我发现了这个游戏可以打MOD。。。。。。。”上古卷轴5：天际》又称《少女卷轴》，但这个游戏的MOD只是让这个游戏变得更精彩，并不是主体。老滚5是个充满了魅力的游戏，它让我沉迷到晚上睡觉都睡不着。美丽的场景与配乐，多样的玩法，精彩而丰富的故事，广阔而精彩纷呈的世界，注定了它永远是我心中RPG游戏的王者！
</p>
</body>
</html>
其他标签
<!-- 换行 -->
<br>
<!-- 字体设置 -->
<b>粗体字</b>
<br>
<i>斜体字</i>
图片标签
img标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- scr属性：告知图片的网络地址-->
<img src="http://img1.gamersky.com/upimg/pic/2018/04/27/201804271126192626_small.jpg" alt="静态图-守望先锋">
<!-- scr属性：告知图片的文件地址-->
<img src="E:\Study\Web前端\HTML+CSS\picture\黑百合.gif" alt="动态图-守望先锋">
</body>
</html>
注意：右边那张是动态图
列表标签
- 无序列表ul > li , ul是列表的父元素标签，li是子元素标签
- 有序列表ol
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<!-- 无序列表 -->
<!-- 快捷写法：ul>li*5 再按Tab键 -->
<ul>
<li>新闻标题1</li>
<li>新闻标题2</li>
<li>新闻标题3</li>
<li>新闻标题4</li>
<li>新闻标题5</li>
</ul>
<!-- 有序列表 -->
<!-- 快捷写法：ol>li*5 再按Tab键 -->
<ol>
<li>新闻标题</li>
<li>新闻标题</li>
<li>新闻标题</li>
<li>新闻标题</li>
<li>新闻标题</li>
</ol>
</body>
</html>
链接标签
可用于页面之间和页面内部的跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接标签</title>
</head>
<body>
<!-- 网站网址跳转 -->
<a href="https://www.acfun.cn/">A站</a>
<a href="https://www.bilibili.com/">B站</a>
<!-- 页面跳转 -->
<a href="03图片标签.html">图片标签演示</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a1{
height: 1000px;
background: skyblue;
}
#a2{
height: 1000px;
background: yellow;
}
#a3{
height: 1000px;
background: pink;
}
</style>
</head>
<body>
<!-- href:跳转至页面id为XX的地址 -->
<a href="#a1">第一部分内容</a>
<a href="#a2">第二部分内容</a>
<a href="#a3">第三部分内容</a>
<p id="a1">第一部分</p>
<p id="a2">第二部分</p>
<p id="a3">第三部分</p>
</body>
</html>
注意：图1点击会跳到对应的网站和网页页面，图2会跳到页面对应的部分
DIV标签：容器标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DIV标签</title>
</head>
<body>
<a href="#content1">泳衣女孩1</a>
<a href="#content2">泳衣女孩2</a>
<a href="#content3">泳衣女孩3</a>
<div id="content1">
<h1>泳衣女孩1</h1>
<img src="E:\Study\Web前端\HTML+CSS\picture\泳衣女孩.jpg" >
</div>
<div id="content2">
<h1>泳衣女孩2</h1>
<img src="E:\Study\Web前端\HTML+CSS\picture\泳衣女孩2.jpg" >
</div>
<div id="content3">
<h1>泳衣女孩3</h1>
<img src="E:\Study\Web前端\HTML+CSS\picture\女孩子+水手服+学校丝带草帽.jpg" >
</div>
</body>
</html>
点击泳衣女孩2，跳转到如下部分：
自定义标签
html5可以自定义标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义标签</title>
<style type="text/css">
abo{
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>阿波</h1>
<!-- 自定义标签abo -->
<abo>Hello World</abo>
</body>
</html>
未设定CSS样式前
加入与h1标签相同的CSS样式后如下
表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!--
form表单标签
属性：
1.action：将表单的数据提交至什么地址
2.method:提交的方法，get、post
get方法：将表单的数据直接放置到链接地址上，可以直接看到。不安全，但效率高
post方法：表单数据放置到请求的body里面，不直接显示，安全但效率稍微低，可以提交比较大的表单的数据
input标签
属性：
type：定义输入标签的类型，text/password/submit......
name：提交数据的名称
value：提交数据的输入框的值
placeholder：预置文字
maxlength：规定输入字段中的字符的最大长度（了解即可）
-->
<form action="" method="get">
<input type="text" name="username" placeholder="请输入用户名" id="" value="" />
<input type="password" name="password" id="" placeholder="请输入密码" value="" />
<input type="submit" value="登录" />
</form>
</body>
</html>
输入用户名和密码，点击登录按钮后如下，地址栏会显示出用户名和密码，这是get方法提交
get提交的方法可以用在搜索上，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd" placeholder="请输入搜索的内容" id="" value="" />
<input type="submit" value="百度搜索" />
</form>
<br>
<form action="https://www.sogou.com/tx" method="get">
<input type="text" name="query" placeholder="请输入搜索的内容" id="" value="" />
<input type="submit" value="搜狗搜索" />
</form>
<br>
<form action="https://cn.bing.com/search" method="get">
<input type="text" name="q" placeholder="请输入搜索的内容" id="" value="" />
<input type="submit" value="必应搜索" />
</form>
</body>
</html>
输入搜索内容，点击提交
会跳转到相应的搜索页面
下拉表单
- select中至少包含一对option
- 在option中定义selected = “selected” 时，当前项即为默认选中项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
城市：
<select name="">
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>
</body>
</html>
文本域
用于定义多行文本输入的控件，该控件常用于留言板、评论
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
今日反馈：
<!-- 一行50个字，显示5行，了解即可 -->
<textarea cols="50" rows="5">这个反馈是textarea来做的</textarea>
</form>
</body>
</html>
表格标签
主要作用是用于显示、展示数据
基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<!--
table用于定义表格标签
tr用于定义表格中的行，必须嵌套在table标签中
td用于定义表格中的单元格，必须嵌套在tr标签中
字母td指表格数据（table data），即数据单元格的内容
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr><td>张三</td> <td>男</td> <td>21</td></tr>
<tr><td>李四</td> <td>男</td> <td>22</td></tr>
<tr><td>王五</td> <td>男</td> <td>23</td></tr>
</table>
</body>
</html>
表头单元格标签
<table>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>张三</td> <td>男</td> <td>21</td></tr>
<tr><td>李四</td> <td>男</td> <td>22</td></tr>
<tr><td>王五</td> <td>男</td> <td>23</td></tr>
</table>
<!--
效果：th标签内的内容加粗并且居中
-->
表格相关属性（了解）
<!--
以下标签要写到表格标签table里面去
align : 对齐方式, 属性值：left、center、right
border : 边框，属性值：1或""，""表示默认、无边框
width ： 宽度，属性值：像素值或百分比
-->
排行榜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>热门游戏排行榜</title>
</head>
<body>
<table border="1" align="center" width="500" height="250" cellspacing="0" cellpadding="0">
<tr>
<th>排名</th>
<th>名字</th>
<th>类型</th>
<th>众评</th>
</tr>
<tr align="center">
<td>1</td>
<td>双人成行</td>
<td>AVG</td>
<td>9.7</td>
</tr>
<tr align="center">
<td>2</td>
<td>鬼谷八荒</td>
<td>RPG</td>
<td>8.7</td>
</tr>
<tr align="center">
<td>3</td>
<td>赛博朋克2077</td>
<td>RPG</td>
<td>7.7</td>
</tr>
<tr align="center">
<td>4</td>
<td>刺客信条英灵殿</td>
<td>ACT</td>
<td>7.9</td>
</tr>
<tr align="center">
<td>5</td>
<td>荒野大镖客：救赎2</td>
<td>TPS</td>
<td>9.5</td>
</tr>
<tr align="center">
<td>6</td>
<td>GTA5</td>
<td>ACT</td>
<td>9.5</td>
</tr>
<tr align="center">
<td>7</td>
<td>上古卷轴5</td>
<td>RPG</td>
<td>9.4</td>
</tr>
</table>
</body>
</html>
表格结构标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>热门游戏排行榜</title>
</head>
<body>
<table border="1" align="center" width="500" height="250" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>排名</th>
<th>名字</th>
<th>类型</th>
<th>众评</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>双人成行</td>
<td>AVG</td>
<td>9.7</td>
</tr>
<tr align="center">
<td>2</td>
<td>鬼谷八荒</td>
<td>RPG</td>
<td>8.7</td>
</tr>
...
</tbody>
</table>
</body>
</html>
合并单元格
方式
- 跨行合并：rowspan =“合并单元格的个数”
- 跨列合并：colspan =“合并单元格的个数”
目标单元格
- 跨行：最上侧单元格为目标单元格，写合并代码
- 跨列：最左侧单元格为目标单元格，写合并代码
表单表格综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h4>xx注册页面</h4>
<table width="600">
<!-- 第一行 -->
<tr>
<td>性别：</td>
<td>
<!-- 下面的label把图片、字体包含起来，点击字体或图片也可，不用再只点击选项中的圆圈了 -->
<input type="radio" name="sex" id="nan"> <label for="nan"> <img src="img/男.png" width="30" > 男 </label>
<input type="radio" name="sex" id="nv"> <label for="nv"> <img src="img/女.png" width="30" >女 </label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年份--</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="广州" /></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况：</td>
<td>
<!-- 下面的label把字体包含起来，点击字体也可，不用再只点击选项中的圆圈了 -->
<!-- checked="checked"表示默认选择 -->
<input type="radio" name="marry" id="wh" checked="checked"><label for="wh">未婚</label>
<input type="radio" name="marry" id="yh"><label for="yh">已婚</label>
<input type="radio" name="marry" id="lh"><label for="lh">离婚</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历：</td>
<td><input type="text" value="幼儿园" /></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的游戏类型</td>
<td>
<input type="checkbox" name="love">动作冒险
<input type="checkbox" name="love">FPS
<input type="checkbox" name="love">体育竞技
<input type="checkbox" name="love">RPG
<input type="checkbox" name="love" checked="checked">都喜欢
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>个人介绍</td>
<td>
<textarea>个人简介</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册" >
</td>
</tr>
<!-- 第九行 -->
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁</li>
<li>抱着严肃的态度</li>
<li>真诚</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
扩展–滤镜效果演示
图片灰色效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{
width: 300px;
height: auto;
display: block;
margin: 0 auto;
transition: all 3s;/* 过渡效果的时间：这里设定3秒 */
}
img:hover{
-webkit-filter: none;
}
.img1{
/*
滤镜属性
grayscale：设置灰度，1是百分之百，0是百分之0
*/
-webkit-filter: grayscale(1);
}
</style>
</head>
<body>
<img class="img1" src="img/滤镜-希里.jpg" >
</body>
</html>
鼠标移入变为原色，移出变为灰色
图片亮度效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{
width: 300px;
height: auto;
display: block;
margin: 0 auto;
transition: all 3s;/* 过渡效果的时间：这里设定3秒 */
}
img:hover{
-webkit-filter: none;
}
.img2{
/*
滤镜属性
brightness：亮度，默认值是1，正常亮度
*/
-webkit-filter: brightness(0);
}
</style>
</head>
<body>
<img class="img2" src="img/滤镜-女魔人.jpg" >
</body>
</html>
鼠标移入变为原色，移出变为黑色（此处亮度设置为0）
图片褐色效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{
width: 300px;
height: auto;
display: block;
margin: 0 auto;
transition: all 3s;/* 过渡效果的时间：这里设定3秒 */
}
img:hover{
-webkit-filter: none;
}
.img3{
/*
褐色属性
sepia:1是百分之百褐色，正常为0
*/
-webkit-filter: sepia(1);
}
</style>
</head>
<body>
<img class="img3" src="img/滤镜-双马尾女.jpg" >
</body>
</html>
鼠标移入变为原色，移出变为褐色
图片模糊度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{
width: 300px;
height: auto;
display: block;
margin: 0 auto;
transition: all 3s;/* 过渡效果的时间：这里设定3秒 */
}
img:hover{
-webkit-filter: none;
}
.img4{
/*
模糊度
blur:单位为像素
*/
-webkit-filter: blur(5px);
}
</style>
</head>
<body>
<img class="img4" src="img/滤镜-天使图l.jpg" >
</body>
</html>
鼠标移入变为原色，移出变为模糊
图片对比度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{
width: 300px;
height: auto;
display: block;
margin: 0 auto;
transition: all 3s;/* 过渡效果的时间：这里设定3秒 */
}
img:hover{
-webkit-filter: none;
}
.img5{
/*
对比度
contrast:正常就是1，如果调成0，就没有任何对比度，变为灰色
*/
-webkit-filter: contrast(2);
}
</style>
</head>
<body>
<img class="img5" src="img/滤镜-蔚.jpg" >
</body>
</html>
鼠标移入变为原色，图2移出为对比度2效果
图片饱和度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{
width: 300px;
height: auto;
display: block;
margin: 0 auto;
transition: all 3s;/* 过渡效果的时间：这里设定3秒 */
}
img:hover{
-webkit-filter: none;
}
.img6{
/*
饱和度
saturate:对比度，正常就是1，如果调成0，就没有任何对比度，变为灰色
*/
-webkit-filter: saturate(0);
}
</style>
</head>
<body>
<img class="img6" src="img/滤镜-琴女.jpg">
</body>
</html>
鼠标移入变为原色，图2移出为饱和度0效果
图片胶片底色效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{
width: 300px;
height: auto;
display: block;
margin: 0 auto;
transition: all 3s;/* 过渡效果的时间：这里设定3秒 */
}
img:hover{
-webkit-filter: none;
}
.img7{
/*
胶片底色效果
*/
-webkit-filter: invert(1);
}
</style>
</head>
<body>
<img class="img7" src="img/滤镜-塞尔达公主.jpg" >
</body>
</html>
鼠标移入变为原色，图2移出为胶片底色效果
色相旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{
width: 300px;
height: auto;
display: block;
margin: 0 auto;
transition: all 3s;/* 过渡效果的时间：这里设定3秒 */
}
img:hover{
-webkit-filter: none;
}
.img8{
/*
色相旋转
*/
-webkit-filter: hue-rotate(90deg);
}
</style>
</head>
<body>
<img class="img8" src="./img/滤镜-布里吉塔.jpg" >
</body>
</html>
鼠标移入变为原色，图2移出为色相旋转效果
素描效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{
width: 300px;
height: auto;
display: block;
margin: 0 auto;
transition: all 3s;/* 过渡效果的时间：这里设定3秒 */
}
img:hover{
-webkit-filter: none;
}
.img9{
/* 素描效果 */
-webkit-filter: blur(10px) brightness(7) grayscale(1);
transition: all 5s;
}
.img9:hover{
-webkit-filter: blur(0px) brightness(1) grayscale(1);
}
</style>
</head>
<body>
<img class="img9" src="img/滤镜-护士.jpg" >
</body>
</html>
鼠标移入为素描效果，图2为移出的效果，素描前的效果
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
