分享一下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>