HTML5基础学习
分享一下html5的一些基础，小白上路！
一、html5基本结构
<!DOCTYPE html>
↑声明文档类型为HTML5文件。
文档声明，在HTML文档必不可少。且必须放在文档第一行
HTML4.01之前的写法：<！DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "htttp://www.w3.org/TR/html4/strict.dtd">
【meta标签】
1·charset属性：单独使用。设置文档字符集文档字符集编码格式。
>>>写法：<meta charset="UTF-8">
>>>常见的中文编码格式：
GB-2312：国际码，简体中文
GBK：扩展的国标码，简体中文
UTF-8：万国码 Unicode码 基本兼容各国语言
2、http-equiv属性：需配合content属性使用。主要声明浏览器如何解释编译文件。
>>>写法：<meta http-equiv="属性值" content="属性值详细内容">
>>>常见属性值：content-type HTML4.01之前的文档内容编码声明
refresh 网页刷新 set-Cookie设置浏览器cookie缓存
3、name属性：需配合content属性使用。主要用于给搜索引擎提供必要信息。
>>>写法：<meta name="属性值" content="属性值详细内容"
>>>重要属性值：author 作者：声明网站作者，常用公司网址表示
keywords 关键字：网站关键字，多个关键字，用英文逗号分隔
description 网页描述 ：搜索引擎显示在title下的描述内容
*http-equiv和name属性，必须与content属性配合使用。前两者只是用于声明即将修改那些属性值，而实际的属性值内容，在content中描述
<meta http-equiv="set-cookie" content =666666666666666666666666/>
<!--作者-->
<meta name="author" content="http:www.jredu100.com" />
<!--网页关键字-->
<meta name="keywords" content="html5,网页,web前段开发" />
<!--网页描述-->
<meta name="description" content="第一个网页啊" />
<!--声明文档的编码格式-->
<meta charset="UTF-8">
<!--HTML4.01之前的写法：
<!--meta http-equiv="content-type" content="text/html;
charset=UTF-8"/>
link标签
1 作用：用于为网页链接各种文件。
2 常用属性：
rel:用于表明被链接文件与当前文件的关系。此处选icon，表明被链接图片是当前网页的icon图标.
type:报名被链接文件是什么类型。可以省略。
href:表明链接文件的地址。
title：网页的标题，即选项卡的文字
<link rel="icon" type="image/x-icon" href="img/Gfo.png"/>
<title>杰瑞教育</title>
二、常见的块级标签
<title>常见的块级标签</title>
[HTML的标签分类]
1、块级标签：自动换行、前后隔一行
2、行级便签：按行逐一显示
是否自动换行，是我们判断是佛块级标签的标准
[常见的块级标签]
标题标签<h1></h1>……<h6></h6>：默认加粗，H1最大,H6最小
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
水平线<hr/>：水平线标签
<hr />
段落<p></p>
<p>这是一个段落啊</p>
换行<br/>
用于<br />换行
引用<blockquote></blockquote >
1、表明标签的文字为引用的内容，浏览器显示为段落缩进
2、cite属性，表明引用的来源，一般为引用的网址URL
<blockquote cite="表明该文从何处摘录，一般写网址">这里写引用的文字</blockquote>
预格式<pre></pre>
浏览器解析时，会按照等宽字体显示，并且保留标签内的空格和回车。常用于保留代码格式。
<pre>
↖ ↑ ↗
← ㊣ →
↙ ↓ ↘
</pre>
<hr />
<h1>基于布局的块级标签</h1>
[有序列表ol order list]
<ol>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ol>
[无序列表ul unorder list ]
<ul>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ul>
[定义描述列表
<dl>
<dt>标题</dt>
<dd>描述项</dd>
</dl>
一般情况下，标题dt只有一项。描述项dd可以有N多项。
浏览器显示时，标题顶格显示，dd会缩进显示。
<dl>
<dt>这是d1列表的标题</dt>
<dd>描述项</dd>
<dd>描述项</dd>
<dd>描述项</dd>
<dd>描述项</dd>
</dl>
[图片组合标签figure]
1、<figure></figure>标签有两个子标；
<img src="">:一幅图片，src表示图片的路径
<figcaption></figcaption>:图片的标题
2、浏览器显示为：图片与标题上下排列，且整体向后缩进一个单位。
<figure>
<img src="img/Gfo.png">
<figcaption>图片的标题</figcaption>
</figure>
[分区标签div]
常配合CSS使用，为网页中的最常用分区标签，常用于网页布局使用
<div style="width: :100%; height: 100px;background-color: green;">
里面有字啊
<h1>真的有字啊</h1>
</div>
三、常见的行级标签
[常见的行级标签]
span（文本）
img（图片）
em（强调）
strong（强调）
q（短引用）
a（超链接）
i（倾斜）
b（加粗）
small（缩小字体）
span(文本)：用于包裹一部分文字，进行特定样式的修改。
我真帅<span style="color: blue; font-size: 36px;">shuai</span>!!!
<br />
em（强调）：浏览器会显示为倾斜。
strong（强调）：浏览器会显示为加粗。
i(倾斜)：
b（加粗）：
[Strong/em/i/b的区别]
em和strong都表示强调，而且strong的强调程度要大于em，Strong和em标签均可多层嵌套，表示强调程度的递增。
2、em和i都能倾斜，Strong和b都能加粗。但是Strong和em多了一层强调的语义。可以帮助搜索引擎快速抓取网站重点。而且HTML5要求开发者，尽可能的实现代码的语义化。
<em>我被em标签强调了！！！</em>
<br />
<strong>我被strong强调了</strong>
<br />
q(短引用)：常用语一句话的引用，cite属性表示引用来源
浏览器解析时，会在内容的前后插入双引号。
<q cite="www.jredu100.com">我是用q标签声明的一句引用的话</q>
<br />
small（缩小字体）：small标签可以多层嵌套，表示比默认字体小一号，直到字号小到最小号为止.
big(放大字体)：同samll可以多层嵌套，直到字号最大为止。
但是，在最新规范中，samll和big标签，不被提倡使用。提倡使用style="font-size:11px;"CSS样式替代
<small>我被small缩小了</small>
<br />
<big>我被Big放大了</big>
[img 图片标签]
1、src属性：表示图片引用路径。
>>>常见路径的写法：
①相对路径：
>当图片在当前文件下一层时：文件夹名/图片名 src="img/abc.jpg"
>当图片与当前文件在同一层时： 图片名 src="abc.jpg"
>当图片在当前文件上一层时： ../图片名src="../computer.jpg"
使用相对路径时，图片最外层只能放到网站根目录（图片必须要在项目文件夹中）。
②绝对路径:写法file:///E:aaa.png，但是严禁使用。
③网络连接:直接使用图片的网络地址，但是由于图片在别人服务器，不可控。所以不建议使用。
2、title:当鼠标指上时，显示的文字
3、alt：当图片无法加载时，显示的文字
4、width/height:图片的宽度高度，相当于CSS中的style="width: ; height: ;"
5、align:图片周围的文字，相对于图片的排列方式。可选值:top/center/bottom
<img src="img/Gfo.png" title="当鼠标指上时，显示的文字" alt="当图片无法加载时，显示的文字" width="100" height="100" align="center"/>
[超链接a]
1、href:超链接的跳转地址。可以写网络连接或者本地html文件的相对路径，确定方式同img的src路径。
2、target:设置超链接打开窗口的位置。_self 自身页面打开（默认） _blank 新页面打开
3、title：鼠标指上后显示的文字
【功能性连接】
mailto://qq号@qq.com(//可以不带)
tencent://message/?uin=qq号
【锚连接】
1、页面锚连接
①设置一个锚点：<a name="top"></a> 用name属性表示锚点名称
②在超链接的href属性中，使用#name 跳转到指定的锚点位置：
<a href="#top">
2、其他页面锚链接：
①需跳转的页面设置锚链接
②在超链接的href属性，文件名。html#name
<a href="aaa.html#top"></a>
由于谷歌ie的兼容问题，需在锚点中插入一个空格  ；才能生效：
<a name="top"> ；</a>
<a href="#top"" title="鼠标指上后显示的文字" target="_self">这是一个超链接</a>
