写一些博客用来记录我学习HTML5+CSS3，好吧我也不是个什么牛逼的大神，所以我就只能用一些很通俗的语言把话说明白吧哈哈哈哈哈…那直接开始吧
1.HTML概述
HyperText MarkUp Language超文本标记语言，HTML不区分大小写，它是制作网页的标准语言
2.第一个HTML程序
直接用记事本写下：
```bash
<!DOCTYPE html>
<html>
<head>
<title>第一个程序</title>
</head>
<body>
<h1>hello world</h1>
<p>emmm...</p>
</body>
<html>
然后将.txt后缀名改成.html然后打开就会有：
2.1 标签和元素
从上面的代码我们可以看到很多<>这样的东东都是些啥类？？？
(1) 标签
(1)由<>包围,比如说 < title >
(2) 通常成对出现
标签嵌套：
< html >< body >< /body >< /html >正确
< html >< body >< /html >< /body >相互交叉错误
(3)<标签名 属性1=“值” 属性2=“值2”>
一个标签可能有多个属性，属性先后顺序无关.
关于属性，后面会提到~
(2) 元素
标签和内容构成元素：
< title >百度一下，你就知道< /title >
标签嵌套：
< html >< body >< /body >< /html >正确
< html >< body >< /html >< /body >相互交叉错误
2.2 解释一下第一个html程序
大概了解了标签元素后，我们可以解释一下第一个程序啦
```bash
<!DOCTYPE html>
<html>
<head>
<title>第一个程序</title>
</head>
<body>
<h1>hello world</h1>
<p>emmm...</p>
</body>
<html>
(1) <!DOCTYPE html>是一个声明，表示该文档是由 HTML5 进行编写的。
(2) head标签用于定义文档的头部，它是所有头部元素的容器。
- 下面这些标签可用在 head 部分：
<base>, <link>, <meta>, <script>, <style>，<title>。其中<title>标签是必须的。 - 我们的代码中是这样写的：
<title>第一个程序</title>. 所以我们可以看到：
(3)body标签定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。 - 像我们写的hello world 和emmm这两句话是写在body中的，最后也显示在了网页上。
(4)<h1>是表示标题，一共有h1~h6这6个级别的.
3.a标签
3.1 a标签作用
<a>标签用于定义超链接，超链接可以让用户从一个网页跳转到另一个网页。
在浏览器中，你可能会见到这样的东东;
就是利用a标签弄出来的超链接啦！
3.2 a标签属性
其实就扫一眼就行哈哈哈哈哈哈
| 属性 | 值 | 描述 |
|---|---|---|
| download | filenam | 指定被下载的超链接目标。 |
| href | URL | 指定链接指向页面的 URL。 |
| hreflang | language_code | 指定被链接文档的语言。 |
| media | media_query | 指定被链接文档是为何种媒介/设备优化的。 |
| rel | text | 规定当前文档与被链接文档之间的关系。 |
| target | _blank、_parent、_self、_top、framename 指定在何处打开超链接。 | _blank：在新窗口中打开_parent：在当前的父窗口中打开，如果不存在父窗口，此选项的行为方式与 _self 等同_self：当前窗口打开（默认）_top：在整个窗口中打开framename：在指定的框架中打开 |
| type | MIME type | 指定被链接文档的的 MIME 类型。 |
看到那么多属性是不是很晕哈哈哈哈，其实没关系，我们常用的其实很少，看看下面的实例好了~
3.3 使用a标签的实例
来看两个常见的~
(1) href属性
<a>标签最重要的属性是 href 属性，它指定了链接目标的 URL。
<!DOCTYPE html>
<html>
<head>
<title>第一个程序</title>
</head>
<body>
<h1>hello world</h1>
<a href="https://www.baidu.com/">这是一个跳转到百度的超链接</a>
<p>emmm...</p>
</body>
<html>
然后将txt文件改成html打开：
点进去那个链接就可以跳转到百度廖~
可是自己尝试的时候就会发现，点开这个链接后，并没有新打开一个标签页，而是在现有的网页上跳转的~
这时就可以用target属性——在新窗口中打开~
(2) target属性
从前的表格可以看到该属性可以有很多值，_blank代表在新窗口中打开.
<!DOCTYPE html>
<html>
<head>
<title>第一个程序</title>
</head>
<body>
<h1>hello world</h1>
<a href="https://www.baidu.com/" target="_blank">这是一个跳转到百度的超链接</a>
<p>emmm...</p>
</body>
<html>
从这个例子也可以看到一个标签可以有多个属性，不同的属性直接用空格隔开，不分先后顺序。
4.img标签
4.1 img标签作用
<img>标签用于向网页中嵌入一幅图像。
从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。
4.2 img标签属性
<img>标签有两个必需的属性：src 属性 和 alt 属性。
属性表：
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 指定图像的替代文本。 |
| src | URL | 指定显示图像的 URL。 |
| width | px(pixels)、% | 设置图像的宽度（像素或百分比）。 |
| height | px(pixels)、% | 定义图像的高度（像素或百分比）。 |
| ismap | URL | 将图像定义为服务器端图像映射。 |
| longdesc | URL | 指定包含长的图像描述文档的 URL。 |
| usemap | URL | 将图像定义为客户器端图像映射。 |
好吧，我承认我们用不到这么多害，就是弄个表上来，看起来气派（狗头）
4.3 使用img标签的实例
我们就先来用用src和alt属性吧~
回顾一下：
src：指定显示图像的url
alt：指定图像的替代文本（随便起都行啦）
(我是复读机~~~)
<!DOCTYPE html>
<html>
<head>
<title>第一个程序</title>
</head>
<body>
<h1>hello world</h1>
<img alt="图片" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1009133939,739955578&fm=26&gp=0.jpg">
<p>emmm...</p>
</body>
<html>
然后就可以显示出：（咳咳）
当然你也可以不用连接的方式，而是直接用一个路径，那么这样你就可以用电脑文件夹中的图片了：（不放图片了，怕被打哎）
<!DOCTYPE html>
<html>
<head>
<title>第一个程序</title>
</head>
<body>
<h1>hello world</h1>
<img alt="图片" src="E:\deep learning\bqb.jpg">
<p>emmm...</p>
</body>
<html>
如果你想调整图片的大小还可以加上width和height属性：
<!DOCTYPE html>
<html>
<head>
<title>第一个程序</title>
</head>
<body>
<h1>hello world</h1>
<img alt="图片" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1009133939,739955578&fm=26&gp=0.jpg" width="500px" height="500px">
<p>emmm...</p>
</body>
<html>
5. 编码问题&meta元素的一些作用
5.1 指定网页编码
在写html的时候必须还要在head部分加上一句：
<meta charset="utf-8">以解决编码问题，你在本地打开你的html文件可能没啥子问题，但是如果挂在服务器上的话就很容易出现乱码。
5.2 实现网页尺寸 “自适应”
所谓的自适应，就是无论你是使用 PC 端，还是使用手机、平板电脑来浏览这个网页，看到的内容都是令人感到舒适的。
实现这么牛逼的功能，只需要在 head 元素中添加一句代码就可以了：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5.3 搜索引擎优化
建议百度 “搜索引擎优化指南”
什么叫搜索引擎优化嘞？？？比如看下面：
显然第二个更好，因为它应用了meta description：
看看下面几个用法：
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学"> 为搜索引擎提供关键词：
<meta name="description" content="《零基础入门学习Web开发》案例演示"> 描述网页内容
<meta name="author" content="小甲鱼"> 定义作者
5.4 实现网页跳转
比如我们打开我们写好的网页，我们可以设置过了多少秒跳转到我们指定的网站中：(这段代码就是5秒后跳转到度娘)
<!DOCTYPE html>
<html>
<head>
<title>略略略</title>
<meta http-equiv="refresh" content="5; http://www.baidu.com">
</head>
<body>
<p>略略略</p>
</body>
</html>
6. style标签的使用
6.1 作用
style标签用于为 HTML 文档定义样式信息。
style元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个style元素。
6.2 实例
style标签里面分别对body，标题h1，标题h2，段落p进行了设置，可以设置的东西有很多，这里只写了一丢丢。。。。
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>略略略</title>
<style>
body{
background-image:url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1300926590,1111430851&fm=26&gp=0.jpg")
<!--设置背景图片-->
}
h1{
margin-left:40%;<!--标题位置-->
color：black;
}
h2{
margin-left:60%;<!--设置位置 距离左侧60%-->
color:black;
}
p{
text-indent:32px;
font-size:16px;
line-height:32px;
color:black;
}</style>
</head>
<body>
<h1>鸡汤文</h1>
<h2>不知道谁是作者</h2>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
那么效果是这样的：（是不是比之前牛逼了许多呢~）
6.3 style标签其他属性
style标签有很多属性：(虽然可能用不上，但是写出来显得高大上咳咳)
| 属性 | 值 | 描述 |
|---|---|---|
| media | screen、tty、tv、projection、handheld、print、braille、aural、all | 指定样式适用的媒体。 |
| scoped | scoped | 指定样式的作用范围（如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素）。 |
| type | text/css | 指定样式的类型。 |
比如用用media属性，可用来表明文档在什么情况下应该使用该元素中定义的样式。
<style media="print">
h1{
color：blue;
}
h2{
color:blue;
}
</style>
<style media="screen and (min-width:512px) and (max-width:1024px)">
body{
background-image:url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1324599319,280065416&fm=26&gp=0.jpg")
}
}
</style>
media="print"表示的是在打印模式下，选择一个网页，点击右键打印，一般默认模式是会出去背景颜色，只剩下文字，那么这个时候你可以改变字体的颜色或者其他属性，来调整打印模式下的情况;
media="screen and (min-width:512px) and (max-width:1024px)"表示在浏览模式下，当宽度在这个范围的时候，调整页面的字体或者什么其他巴拉巴拉的东西~
看这里当我改变宽度的时候背景就改变了（我只调了背景）：
我承认这个背景挺土的~~~- 如果你的style没有写任何属性，就是默认为任何情况。
7. LINK标签
7.1 作用
link标签用于指定外部资源。注意他不是成对出现的！！！
link 元素最常见的用途是链接样式表。（后面会提到，请往下看）
7.2 属性
link元素定义了 6 个属性，其中 rel 属性是必选的，它说明了当前文档与被链接资源之间的关系。
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 指定被链接资源的 URL。 |
| hreflang | language_code | 指定被链接资源使用的语言。 |
| sizes | HeightxWidth | 指定图标的大小（比如 sizes=“16x16”）。 |
| media | media_query | 指定被链接的资源将被显示到什么设备上。 |
| rel | alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag | 指定当前文档与被链接资源之间的关系。 |
| type | MIME_type | 规定被链接文档的 MIME 类型。 |
看到表格是不是又懵逼了呢（狗头）
7.3 链接外部样式表
如果你用style元素设置的样式表太长了，那么写在html代码里就显得很喧宾夺主了。这样就很不妥！
我们可以将css样式表保存为外部文件，然后使用 link 元素将其链接进来。如果你的样式表内容比较多，建议是存放为单独的文件。
link元素也是支持 media属性的，该属性指定被链接的资源将针对哪一种媒体或者设备进行优化。
在上一个部分的内容中，我写了三对style标签，一对不带属性，另外两个带了media属性，那我们可以把这三个style样式分别弄成三个后缀名为.css的文件。
（注意只用将style中的文字剪切进去即可，标签不用弄进去）
html代码可以写成如下：
- 这里都是
rel="stylesheet"表示关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用。 - 后面两个link标签都跟上了一个
media属性。
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>略略略</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<link rel="stylesheet" type="text/css" href="screen.css" media="screen and (min-width:512px) and (max-width:1024px)">
</head>
<body>
<h1>鸡汤文</h1>
<h2>不知道谁是作者</h2>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
可以自己试验一下，这种方式就比之前的简单了许多，效果也是一样的~~~：
7.4 使用链接网站图标
link最常见的另一个用法就是链接网站图标 —— favicon。
各种浏览器处理图标的方式有所不同，常见的做法是将其显示在相应的标签页左侧的位置。
关联网站图标，只需要将 rel属性设置为 icon，然后设置type 属性为 image/x-icon，最后在 href 属性中指定图标的位置即可，自己去试试吧~~~