HTML5是用来描述网页的一种语言，被称为超文本标记语言(Hypertext Markup Language)。用HTML5编写的文件，后缀以.html结尾HTNL是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如<html>
标签有两种表现形式：
1.双标签，例如：<html></html>
2.单标签，例如：<img>
HTML5的DOCTYPE声明
DOCTYPE是document type（文档类型）的缩写。<!DOCTYPE html>是H5的声明位于文档的最前面，处于标题之前。他是网页必备的组成成分，避免浏览器的怪异模式。
1.<! DOCTYPE html>
HTML5基本骨架
html标签
定义HTML文档，这个元素我们浏览看到后就明白这个是HTML文档了，所以你的其他元素要包裹在它里面，标签限定了文档的开始点和结束点。
1.<!DOCTYPE html>
2.<html>
3.</html>
head标签
head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题，在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<!DOCTYPE html>
<html>
<head>
</head>
</html>
body标签
body元素定义文档的主体。
body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
他会直接在页面中显示出来，也就是用户可以直接观看到的内容
<!DOCTYPE html>
<html>
<head>
</head>
<body>
//我会显示在浏览器中
</body>
</html>
title标签
1.可定义文档的标题
2.它显示在浏览器的标题栏或状态栏上。
3.<title>标签是<head>标签中唯一必须包含的东西，就是说head一定要写title
4.<title>增加有利于SEO优化
SEO是搜索引擎优化的英文缩写，通过对网站内容的调试，满足搜索引擎的排名需求。
<!DOCTYPE html>
<html>
<head>
<title>页面的名字</title>
</head>
<body>
//我会显示在浏览器中
</body>
</html>
meta标签(单标签）
meta标签是用来描述一个HTML网页文档的属性，关键词等，例如：charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式，通常使用utf-8.
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8">
<title>页面的名字</title>
</head>
<body>
//我会显示在浏览器中
</body>
</html>
标签之标题
标题介绍与应用
标题（heading)是通过<h1>-<h6>标签进行定义的。
<h1>定义最大的标题<h6>定义最小的标题
生成h1~h6快捷键：h$*6
正确使用标题
请确保将HTML标题标签只用于标题
不要仅仅是为了生成粗体或大号的文本而使用标题
正确使用标题有益于SEO
应将<h1>用作主标题（最重要的），其后是<h2>（次重要的）
标题标签位置摆放
在标签中添加属性：align="left | center |right"默认居左
标签之段落、换行、水平线
标签之段落
段落是通过<p>标签定义的
1.<p>这是一个段落</p>
2.<p>这是另一个段落</p>
换行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用<br>
<br>是一个空的HTML元素
1.<p>这个<br>段落<br>演示了分行的效果</p>
这个
段落
演示了分行的效果
水平线
<hr/>在HTML页面中创建水平线
1.<hr color="" width="" size="" align=""/>
size:设置水平线的高度（单位是px）
标签之图片
<img>标签定音HTML页面中的图像
1.<img src="" alt="" title="" width="" height="">
注意事项：<img>是单标签，不需要进行闭合操作
属性：
1.scr:路径（图片地址与名字）（图片一定要与源码在一个文件夹下）
2.alt:规定图像的替代文本
3.width:规定图像的宽度
4.height:规定图像的高度
5.title:鼠标悬停在图片上给予的提示
图片路径详解
绝对路径
绝对路径是电脑盘符存储与访问的具体地址
相对路径
两者相对关系，两者在同一路径下可以直接访问
1.子级关系：/
2.父级关系：../
3.同级关系./（可以省略）
网络路径
具体网络地址：//网络的地址
标题之超文本链接
超链接描述
HTML使用标签<a>来设置超文本链接
超文本链接可以是一个字，一个词，或者一组词，也可以是一副图像，您可以点击这些内容来跳转到新的文档或者当前文档的某个部分。
<a href="ur1（完整的地址） ">链接文本</a>
超链接属性
默认情况下，链接将以，以下形式出现在浏览器中：
1.一个未访问过的链接显示为蓝色字体并带有下滑线
2.访问过的链接显示为紫色并带有下划线。
3.点击链接时，链接显示为红色并带有下划线。
特别提醒
后期我们会通过CSS样式修改掉这些效果
超链接的表现
当您把鼠标指针移动到网页中某个链接上时，箭头会变成一只小手。
标签之文本
常用的文本标签（可以嵌套使用）
| 标签 | 描述 |
|---|---|
| <em> | 定义着重文字 |
| <b> | 定义粗体文字 |
| <l> | 定义斜体字 |
| <strong> | 定义加重语气 |
| <del> | 定义删除字 |
| <span> | 元素没有特定含义 |
特别提示
常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示词汇。
列表标签之有序列表
有序列表
有序列表是一个项目，列表项目用数字进行标记。有序列表始于<ol>标签。每个列表始于<li>标签
<ol>
<li>京东</li>
<li>淘宝</li>
</ol>
type属性
<ol>的属性type拥有的选项
1、 1表示列表项目用数字表示（1、2、3....)
2、 a表示列表项目用小写字母标号（a,b,c...)
3、 A表示列表项目用大写字母标号
4、 i表示列表项目用小写罗马数字标号（i，ii，iii，...)
5、I表示列表项目用大写的罗马数字标号
列表标签之无序标签
无序列表实现
无序列表是一个项目列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于<ul>标签。每个列表始于<li>标签。
<ul>
<li>尚学堂</li>
<li>淘宝</li>
</ul>
type属性
<ul>的属性type拥有的选项
1、disc默认实心圆
2、circle空心圆
3、square小方块
4、none不显示
无序列表嵌套
列表是可进行嵌套的
<ul>
<li>淘宝</li>
<li>京东</li>
<ul>
type属性
<ul>的属性type拥有的选项
1、disc默认实心圆
2、circle空心圆
3、square 小方块
4、none 不显示
无序列表也是可以嵌套的
常见应用场景
1、无序的列表效果
2、导航效果
快捷键
快速生成ul+li的布局：ul>li*3(数字根据自己的需要li数量修改）
标签之表格
表格标签
表格：<table>
行：<tr>单元格（列）:<td>
<table>
<tr>
<td>京东</td>
<td>淘宝</td>
</tr>
<tr>
<td>腾讯</td>
<td>网易</td>
<tr>
快捷键
快捷键生成表格结构：table>tr*2>td*3{单元格}
表格属性
1、border:设置表格边框
2、width:设置表格的宽度
3、height:设置表格的高度
</table>
表格单元格合并
单元格合并属性
水平合并：colspan
垂直合并:rowspan
水平合并：保留左边，删除右边
垂直合并：保留上边，删除下边
HTML5新增标签
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（w3c)完成标准制定
在HTML5出现之前，我们一般采用DIV+css布局我们的页面，但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了许多新的语义化标签。
扩展知识
div
容器元素，也是页面中见到的最多的元素
1、<header></header>头部
2、<nav></nav>导航
3、<section></section>定义文档中的节、比如章节、页眉、页脚
4、<aside></aside>侧边栏
5、<footer></footer>脚步
6、<article></article>代表一个独立的、完整的相关内容块、例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
