什么是HTML？
HTML ： Hyper Text MarkUp Language （超文本标记语言）
文本：文字、有格式的文本
超文本：文字，图片，音频，视频，动画、定位…….
标记语言 ： <>
用来写网页的语言
我是用IDEA来编写的，如果电脑上没有它推荐的那几种浏览器，你可以设置一下，如图：
将它的浏览器地址改为你自己浏览器的地址即可（来个偷梁换柱hhh~）
发展史
HTML 1993年
HTML2.0 1995年
HTML3.2 1996年 （W3C推荐标椎）
HTML4.0HTML4.01 （微小改进）
XHTML1.0 2000年
XHTML2.0 由于改动过大，学习成本高了，胎死腹中！
HTML5 （最新版） 2004 2007正式纳入新成立的HTML工作团队！
2013 HTML 5.1 草案~
HTML5 所有的知名（很多杂的浏览器，并不支持 HTML5）浏览器厂商都支持（毕竟是写网页嘛，在浏览器里打开肯定需要人家浏览器的支持）这是一大优势
W3C标准
W3C： 万维网联盟
万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。http://www.chinaw3c.org/
.com 国际的 .cn 中国的 .org 开源的
结构化标准 （XHTML、HTML）
表现标准 （CSS）
行为标准 （Dom、ECMAScript标准==> JavaScript）
很多浏览器还停留在ES5规范上，但是开发人都使用的是ES6规范
用IDEA的人需要调一下这个就行（最新的规范）
下来，我先举一个小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大号之狂欢</title>
</head>
<body>
<h1>菊部地区爆发大量泥石流</h1>
<em>公元2019年</em> <strong>作者：sissi</strong><br/>
<hr/>
<p>
手拿机密文件，<br/>
脚踏黄河两岸，<br/>
前面机枪扫射，<br/>
后面炮火连天。<dl/>
</p>
©版权所有：sissi
</body>
</html>这样，一个简单的静态网页就写好啦，如图，效果如下：
大家第一次接触HTML的可能有点懵，没关系，接下来我就给大家好好剖析一下
HTML的基本结构
正常的HTML 标签 都以 <> 开始 </> 结尾，是成对出现的，但我们从上面的例子发现还有的标签是单独出现的，这种标签就叫做自闭合标签
<!DOCTYPE html>
<html lang="en">
<head>
<!--自闭合标签-->
<meta charset="UTF-8">
<!--正常的标签都是需要成对出现的-->
<title>Title</title>
</head>
<body>
hello,world
</body>
</html>正常网页的所有内容都需要放在 < body> 标签中；
DOCTYPE文档类型，默认声明：表示告诉浏览器这个网页使用什么规范，我们默认使用的是HTML
Title 标签，就是网站的小标题名称；
meta 描述信息，SEO：网站搜索
<!--这是注释的写法-->
<!--建议规范编码，统一使用UTF-8（全世界） gb2312：包含了所有的中文字符-->
<meta charset="UTF-8">
<!--网站关键字描述-->
<meta name="keywords" content="哈哈">
<!--网站的描述-->
<meta name="description" content="呵呵">先大致了解一下他的结构，接下来我们就来看看一些基本的标签
网站的基本标签（重点）
1、标题标签
<!--标题标签 h1 + tab键 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>2、段落标签
<!--p：段落标签-->
<p>
诸葛亮兵出祁山，收姜维后继续向魏国进军，魏国派司马懿抵挡蜀军，在街亭打败马谡，而诸葛亮城中空无一人，兵都出去解围去了，城中只有一些老弱病残，诸葛亮心生一计，命令打开城门，派几个老兵在打扫卫生，自己带两个儿童在城楼上面弹琴，司马懿的兵来到城外，看到四个城门大开，诸葛亮又在上面唱歌，司马懿命令按兵不动，自己上前一看，看诸葛亮神情自若、琴声不乱，怀疑有伏兵，这才命令撤军。
</p>
<p>诸葛亮随叔父逃乱来到襄阳，结草庐而居，躬耕苦读。孤独的诸葛亮游走襄阳，结交朋友，拜见师长，见识和学业大长。诸葛亮偶然听说黄家湾有一位才女黄月英，就想求见结交。不料被黄月英的父亲黄承彦挡在门外。诸葛亮被黄承彦考来考去，显示出学识才华，但他曝出自己女儿非常丑。诸葛亮若想娶一个漂亮媳妇的话，就另请高就。诸葛亮下定决定，再次登门求婚，黄月英提出一系列难题难住了诸葛亮。为了和才女黄月英成婚，诸葛亮用毅力、智慧并巧借朋友之势，终于战胜了黄家父女设立的一道道难关，最终赢得美人心。诸葛亮在隆中完成了学业、交友、成婚大事，磨砺成才，策略惊天，智慧盖世。刘备三顾茅庐，诸葛亮发表了千古流传的《隆中对》，毅然出山，谱写出惊天动地的传奇。</p>3、换行标签
<br/>4、水平线标签
<hr/>5、字体样式标签
<!--字体样式-->
<!--strong:粗体-->
<strong>马云 （阿里巴巴集团创始人）</strong>
<p>
<!--em:斜体-->
<em>马云，男，汉族</em> <br>
<em>现担任日本软银董事</em> <br>
<em>1988年毕业于杭州师范学院外语系</em> <br>
<em>....</em> <br>
</p>6、 特殊符号标签
<!--打一个空格，他会显示出来-->
<p>你就站在此地 不要走动</p>
<!--打多个空格，他只显示一个空格-->
<p>你就站在此地 不要走动</p>
<!--空格 所以我们还是用这个标签比较靠谱-->
<p>你就站在此地 不要走动</p>
<!--大于小于号-->
>
<
<!--版权符号-->
© 版权所有：sissi
<!--万能的公式 & ;-->
☎好了，介绍了这么多的标签，上面的例子大家应该都可以看懂了吧！
图像标签
常见的图片格式： .png .jpg .jpeg .bmp .gif…
png 会有浏览器兼容问题
一般使用 .jpg .gif多一点
图片：静态资源 单独放
一般就是创建ststic\imgage文件夹，放在这里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--标签中带有参数的 key=value -->
<!--
src： 资源图片 ： 图片的路径
alt： 图片加载失败，表示图片的问题，也即图片描述
title： 鼠标放在图片上的悬浮提示
width： 宽
height：高
-->
<!--图片标签 img-->
<img src="../static/imgage/1575722200933.png" alt="出错了哟" title="被你发现了" height="100" width="200">
</body>
</html>超链接
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--标
<!--
超链接：表示从一个地方跳转到另外一个地方 hao123导航
href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
_self : 在自己的窗口打开
_blank： 在新窗口中打开
和图片嵌套使用
-->
<!--超链接：a-->
<!--单独使用：点击百度就可以跳转到百度-->
<a href="https://www.baidu.com/" target="_self">百度</a>
<!-- 和图片嵌套使用：点击图片就可以跳转到百度-->
<a href="http://www.baidu.com" target="_blank">
<img src="../static/imgage/1575722200933.png" alt="出错了哟" title="被你发现了" height="100" width="200">
</a>
</body>
</html>
特殊用法：锚链接
用于页面间指定位置跳转 ： 快速定位目录
可以在同一页页面中跳转
也可以在不同页面中跳转 ：（需要掌握）
先设置锚点
<!--标记A-->
<a name="markerA">A</a>然后就可以跳转到锚点
<a href="#markerA">A</a> <br><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
<a href="#aaa">点我</a>
<a href="#bbb">来啊</a>
<hr>
<a name="aaa"><h1>第一段</h1></a>
<p>
诸葛亮兵出祁山，收姜维后继续向魏国进军，魏国派司马懿抵挡蜀军，在街亭打败马谡，而诸葛亮城中空无一人，兵都出去解围去了，城中只有一些老弱病残，诸葛亮心生一计，命令打开城门，派几个老兵在打扫卫生，自己带两个儿童在城楼上面弹琴，司马懿的兵来到城外，看到四个城门大开，诸葛亮又在上面唱歌，司马懿命令按兵不动，自己上前一看，看诸葛亮神情自若、琴声不乱，怀疑有伏兵，这才命令撤军。
</p>
<a name="bbb"><h1>第二段</h1></a>
<p>诸葛亮随叔父逃乱来到襄阳，结草庐而居，躬耕苦读。孤独的诸葛亮游走襄阳，结交朋友，拜见师长，见识和学业大长。诸葛亮偶然听说黄家湾有一位才女黄月英，就想求见结交。不料被黄月英的父亲黄承彦挡在门外。诸葛亮被黄承彦考来考去，显示出学识才华，但他曝出自己女儿非常丑。诸葛亮若想娶一个漂亮媳妇的话，就另请高就。诸葛亮下定决定，再次登门求婚，黄月英提出一系列难题难住了诸葛亮。为了和才女黄月英成婚，诸葛亮用毅力、智慧并巧借朋友之势，终于战胜了黄家父女设立的一道道难关，最终赢得美人心。诸葛亮在隆中完成了学业、交友、成婚大事，磨砺成才，策略惊天，智慧盖世。刘备三顾茅庐，诸葛亮发表了千古流传的《隆中对》，毅然出山，谱写出惊天动地的传奇。</p>
</body>
</html>
``还有功能性标签
例如：邮件链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮件链接</title>
</head>
<body>
<!--点击联系我们会自动跳转到邮箱，给我们发消息-->
<a href="mailto:2413629853@qq.com">联系我们</a>
</body>
</html>借助第三方平台
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮件链接</title>
</head>
<body>
<!--QQ推广-->
<!--https://shang.qq.com/v3/widget.html-->
<a href="mailto:2413629853@qq.com">联系我们</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2413629853&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:2413629853:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
</body>
</html>
这图片是人家设定好的，点击图片就可以和我聊天啦！（你要想推广自己QQ，就搜索QQ推广，用自己账号登陆，他会自己给你生成链接标签）
块元素、行内元素
块元素：无论内容多少，都是独占一行的 （p，h1~h6）
行内元素：只根据内容的长度来扩展。 （a，strong，em….），所以要注意换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>
<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>
</body>
</html>
总结
- HTML5的基本结构
- W3C结构
- 网页的基本标签
- 标题
- 段落
- 换行
- 水平线
- 注释
- 特殊符号
- 图像标签 img
- 超链接
- 基本用法
- 锚链接
- 功能性链接
- 邮件
- 概念： 行内元素和块元素
列表
无序列表 （ul-li）
- 你
- 我
- 他
有序列表 (ol-li)
1.你
2.我
3.他
自定义列表 (dl-dt-dd)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--无序列表-->
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>Java</li>
</ul>
<hr>
<!--有序列表-->
<ol>
<li>我</li>
<li>你</li>
<li>他</li>
</ol>
<hr>
<!--自定义列表-->
<dl>
<dt>水果</dt>
<dd>葡萄</dd>
<dd>梨</dd>
<dd>苹果</dd>
</dl>
</body>
</html>结果如图
表格
为什么要使用表格？
- 结构简单
- 通用
基本结构：表格 table
行 tr rowspan
列 td colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格标签table
border="1px" 边框属性
-->
<table border="1px">
<!--行和列-->
<!--第一行 tr,列 td-->
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
</body>
</html>跨行
<table border="1px">
<tr>
<!--rowspan 所跨的行数-->
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>0</td>
</tr>
<tr>
<td>数学</td>
<td>0</td>
</tr>
</table>跨列
<table border="1px">
<tr>
<!--实现跨列
colspan 对应的值:就是要跨几列
-->
<td colspan="2">学生成绩</td>
<td>学生成绩</td>
</tr>
<tr>
<!--科目名称-->
<td>语文</td>
<td>100</td>
</tr>
<tr>
<!--成绩-->
<td>数学</td>
<td>100</td>
</tr>
</table>结合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1xp">
<tr>
<td>流量</td>
<td>访客</td>
<td>会员</td>
<td>游客</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>平均流量</td>
<td colspan="3">100</td>
</tr>
</table>
</body>
</html>效果图
下篇继续~
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
