引言：对于一个计算机相关专业的，又一直对编程不太感冒的女生来说，h5是一门比较好上手的语言，适合女生，也适合还想在编程路上走一走的人。
先贴几张我目前用h5做的东西，后面会给代码（学习过程会一直记录，本文为第一篇）
接下来开始介绍H5入门该掌握的基础内容
一.html的基本结构
html主要包括head和body两个部分，网页中的几乎所有内容都在body中，然后这些内容是怎样布局的都是由head中的内容决定的。
二.head中的标签及其属性
head常用标签主要有三个：title, meta, link。
1.title：就是网页标题。
2.meta：可提供有关页面的元信息，比如针对搜索引擎的描述和关键词。
meta 标签常用属性：
（1）charset：设置字符集编码格式。
（2）http-equiv:将我们的信息写给浏览器看。如：content-type（文档类型），refresh（网页定时刷新），set-cookie(设置浏览器cookie缓存）。
（3）name：将我们的信息写给搜索引擎看。
其中name的应用如下：
<meta name="auther" content="http://www.jredu100.com"/>
<meta name="keywords" content=“HTML5,网页制作,杰瑞教育/>
<meta name="description" content="这是我的第一个网页"/>
3.link：定义文档资源与外部的关系，最常见的用途是链接样式表。
link标签中的三个属性：
（1）rel声明连接文件的类型。
（2）type可省略。
（3）href表示图片的路径地址。
应用如下：
<link rel="icon" type="image/x-icon href="img/icon.png"/>
三.body中的标签及属性（此中内容比较多，是重点要多花时间）
首先body中的标签分为行级标签和块级标签：
块级标签：显示为块级，前后隔一行（自动换行）。
行级标签：从左往右逐一显示。
1.常见块级标签：
代码中使用如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见块级标签</title>
</head>
<body>
<!--h1最大，h6最小。自动加粗-->
<h1>h1标题标签</h1>
<h2>h2标题标签</h2>
<h3>h3标题标签</h3>
<h4>h4标题标签</h4>
<h5>h5标题标签</h5>
<h6>h6标题标签</h6>
<hr />
<p>这是段落标签:<p/>
<p>这是<br/>段落标签,水平线标签和换行标签这种中间不含内容的标签,都是自闭和<p/>
<p>标题标签和段落标签都有俩</p>
<!--引用标签-->
<!--cite表示引用来源，这里面一般写网址-->
<blockquote cite="http://www.jredu100.com">blockquote引用标签</blockquote>
<!--预格式标签
浏览器默认显示样式：
1.显示等宽字体（里面的回车，空格都好使）
2.代码中换行空格等元素在浏览器中都好使（可直接显示）
-->
<pre>1.显示 等宽字体
2.代码中换行空格等元素 在浏览器中都好使</pre>
<!-- 不建议用，因为每个浏览器对空格大小表现不一样-->
<!--有序列表-->
<ol>
<!--列表项-->
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<!--无序列表-->
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<!--定义列表-->
<!--标题顶格写，描述项对标题进行缩进显示-->
<dl>
<dt>标题</dt>
<dd>
描述1
</dd>
<dd>
描述2
</dd>
</dl>
<!--组合标签：<figure></figure>用于显示图片及图片标题
两个子标签：<img/>
<figcaption>这是图片标题</figcaption>
显示效果：图片下面一个标题，且俩都缩进。
-->
<figure>
<img src="../img/icon.png"/>
<figcaption>这是图片标题</figcaption>
</figure>
<!--分区标签-->
<div style="">这是一个Div</div>
</body>
</html>
运行效果如下：
2常用行级标签
span（文本）Day2-复习.note
img（图片）
em（强调）和i（倾斜）
strong（强调）和b（加粗）
q（短引用）blockquote(引用）
a（超链接）
small（缩小字体）
备注：
1 em和i的区别就是，前者有强调。
strong和b同上。strong的强调程度比em高
2 small可以多层嵌套，直到字号达到极限。（不常用，一般用font-site）
3.img中：
Src里面地址的写法：
① 直接写绝对路径，但是不建议。因为上传服务器后，绝对路径会变化；
② 相对路径： 指这幅图片相对于你所写的html文件的位置；文件夹的下一层用/表示，“文件夹名字/图片名字”，文件夹的上一层用“../文件夹名字/图片名字”；与图片同一级，直接写文件名。
③ 网络链接：直接将网上图片的地址放在src中。（网上图片删除的话，链接也会失效）
img中的属性：
src,alt,title,height,width,align(=“top”,bottom,center):图片周围文字相对于图片的位置。
应用如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="top"></a>
<!--span(文本)无实际意义，用于包裹某部分内容，修改特别样式-->
<span style="color:red;font-size: 36px;">Span</span>
<br /><!--em（强调）-->
<em>这是em中的标签</em>
<br /><!--i（倾斜）-->
<i>这是i中的标签</i>
<br /><!--strong（强调）-->
<strong>这是strong中的标签</strong>
<br /><!--b(加粗)-->
<b>这是b中的标签</b>
<br /><!--q（短引用）-->
<q cite="http://www.jredu100.com">这是短引用中的标签</q>
<br /><!--small（缩小字体）-->
<small>这是small中的标签</small>
<br />
<big>这是big中的标签</big>
<br />
<!--img(图片)-->
<!--<img src="file:///E:/icon.png"/>绝对路径，不建议-->
<img src="../img/icon.png"/><!--上一级文件夹内部-->
<img src="icon.png" /><!--同级-->
<img src="img/icon.png"/><!--同级文件夹内部-->
<a name="you"></a>
<img src="img/icon.png" height="20px" width="15px"/>
<img src="img/icon.png" title="这是图片" alt="图片不显示"/>
<br />
<!--a（超链接）-->
<!--本地文件也可以用-->
<!--href-->
<!--target（用来表示打开页面的位置）:_self自身（默认）,_blank新页面打开-->
<!--title=“”鼠标指上去看到的文字；-->
<a href="http://www.jredu100.com" target="_blank" title="这是一个超链接">这是一个超链接</a>
<a href="#top" target="_self">跳转到指定位置</a>
<a href="mailto://[email protected]" target="_self">给指定邮箱发送邮件</a>
</body>
</html>
运行效果：
下面重点介绍一下a标签：
1.href
2.target
3.title
4.rel:被连接文档与当前文档的关系(了解)
rel的属性值有:
(1)*icon
(2)prev
(3)next
(4)*stylesheet：被连接文档是当前文档的样式表。
(5)prefetch ：利用空余时间预加载
5.锚链接：
（1）本页面锚链接：a.设置锚点<a name="top"></a>
b.使用 <a href="#top" target="_self">跳转到指定位置</a>
（2）页面间锚链接：
a：在即将跳转的页面，设置锚点<a name="top"></a>
b:使用页面地址.html#name:如下：
<a href="常见的行级标签.html#top">跳转到常见行级标签页面</a>
6.功能性链接：
用于给指定邮箱发送邮件:mailto://[email protected]
<a href="mailto://[email protected]" target="_self">给指定邮箱发送邮件</a>
3.表格
Table常用属性展示：
<table border="5" width="500" cellspacing="10" style="border-collapse:collapse;" cellpadding="10"
align="center" bgcolor="red" background="../img/computer.jpg" bordercolor="green">
<p>哈哈哈哈哈哈</p>
<!--border给表格添加边框，属性值变大时，只有外围增加，内部始终为一个像素-->
<!--cellspacing="10",单元格之间的缝隙，当其值为0时，间隙为0，是两条线的宽度叠加>
<!--style="border-collapse:collapse ;边框合并，这是样式，不是属性-->
<!--cellpadding单元格里的内容与边框线的距离（不常用）-->
<!--align="center",left，right:表格浮动，打破后面的元素的位置。（很常用，在Div）-->
<!--bgcolor="red"背景色，等同于style="background-color"-->
<!--background：背景图片，等同于style="background-image"-->
<!--bordercolor:边框颜色-->
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table width="500">
<tr>
<td align="center">
<h2 ><u>特别休假请假单</u></h2>
</td>
</tr>
</table>
<h2 style="text-decoration: underline;text-align:center;width:500px;" >特别休假请假单</h2>
<br />
<p>申请日期： 年 月 日</p>
<!-- <table border="1" cellspacing="0" width="500" height="300">-->
<table border="1" style="border-collapse: collapse;" width="500" height="300">
<col style="background-color: aquamarine;" />
<colgroup style="background-color: gainsboro;">
<col />
<col />
<col />
<col />
<col />
</colgroup>
<col style="background-color: yellowgreen;"/>
<thead>
<tr>
<td >所属单位</td>
<td >部组</td>
<td>职称</td>
<td>111</td>
<td >姓名</td>
<td >111</td>
<td>厂长</td>
</tr>
</thead>
<tr>
<td rowspan="2">期间</td>
<td colspan="3">年月日</td>
<td colspan="2" rowspan="2">天数</td>
<td>111</td>
</tr>
<tr>
<td colspan="3">年月日</td>
<td>主管</td>
</tr>
<tr>
<td colspan="2">职务代理人</td>
<td colspan="4">盖章</td>
<td>111</td>
</tr>
<tr>
<td colspan="1">到期日期</td>
<td colspan="3">年月日</td>
<td colspan="2">审核意见</td>
<td>组长</td>
</tr>
<tr>
<td colspan="2">全年特别休假</td>
<td colspan="2">天</td>
<td >111</td>
<td >111</td>
<td >111</td>
</tr>
<tr>
<td colspan="2">已请假数</td>
<td colspan="2">天</td>
<td >人事主任</td>
<td >人事经办11</td>
<td>班长</td>
</tr>
<tr>
<td colspan="2">本次申请日数</td>
<td colspan="2">天</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
</tr>
<tr>
<td colspan="2">尚剩假期日数</td>
<td colspan="2">天</td>
</tr>
</table>
</body>
</html>
运行效果如下
后续内容及补充请见H5-新手入门2