什么是WEB前端？
简单来说就是网页，只是这个网页它是由多种技术参与制作的，用来向用户展示的页面。
第一款浏览器MOSIAC
第一款商用的浏览器是netscape（网景）的navigator（导航者）
W3C制定了web的相关规范。
一、HTML的运行环境和开发环境
开发环境只需要一个记事本即可
运行环境只需要有浏览器即可
二、标签的语法结构
结构：<标签 属性=“属性值”> 内容部分或称区域
1、标签大多成对出现又开始<>和结束。（自结束标签除外）
2、标签内可以有属性，有属性必有值。（布尔型属性除外如muted）
3、开始和结束标签之间包含的内容被称为区域。
4、标签不区分大小写。
三、页面的分类
静态页面：是指不修改网页源码的前提下，无论何时何地去访问都会得到同样的结果。
动态页面：网站会根据信息做出的实时反馈。例如注册，论坛等等。
四、常用标签
（一）head中常用标签
1、标签
charset属性：用来设置页面的编码方式（常见编码有GBK,UTF-8,BIG,bg2312）；
name属性：可以有keyword，description，这两个属性可以影响到网页的排名。
2、
标签</p>
<p>用来定义页面的主体，影响选项卡显示的内容。</p>
<h2>（二）body中的常用标签</h2>
<table align="center" border="1" style="width:500px;">
<tbody>
<tr>
<td><b></td>
<td>加粗</td>
<td><div></td>
<td>块标签</td>
</tr>
<tr>
<td><strong></td>
<td>加粗</td>
<td><span></td>
<td>行内标签</td>
</tr>
<tr>
<td><i></td>
<td>斜体</td>
<td><pre></td>
<td>格式化标签</td>
</tr>
<tr>
<td><em></td>
<td>斜体</td>
<td><sup></td>
<td>上标签</td>
</tr>
<tr>
<td><u></td>
<td>下划线</td>
<td><sub></td>
<td>下标签</td>
</tr>
<tr>
<td><del></td>
<td>中划线</td>
<td><hr></td>
<td>加一条灰线</td>
</tr>
<tr>
<td><br></td>
<td>换行</td>
<td><h1、h2、、、></td>
<td>逐渐变小的字体</td>
</tr>
<tr>
<td><p></td>
<td>段落</td>
<td><small></td>
<td>比前面的字体更小</td>
</tr>
</tbody>
</table>
<h2></h2>
<h2>（三）特殊符号</h2>
<p><a href="http://img.e-com-net.com/image/info8/281cb817879b4824aaa339f75f41c68a.jpg" target="_blank"><img alt="【wed前端初级课程】第一章 什么是HTML_第1张图片" src="http://img.e-com-net.com/image/info8/281cb817879b4824aaa339f75f41c68a.jpg" width="650" height="379" style="border:1px solid black;"></a></p>
<h1>五、多媒体标签</h1>
<h2>（一）图片标签</h2>
<p>格式：<img src="资源路径" alt=“资源不存在时显示的内容”></p>
<p>（路径填写方式：绝对路径、相对路径、网络路径）</p>
<h3>图片的格式都有哪些</h3>
<p>1、jpg：现在多为无损格式，并且它是不支持透明通道。</p>
<p>2、png：无损格式，并且它支持透明通道。</p>
<p>3、bmp：无损，支持透明，体积大。</p>
<p>4、gif：动图，只支持256色</p>
<h2>（二）视频标签</h2>
<p>格式：<video src="day1.mp4" controls="controls"></p>
<p>属性：</p>
<table border="1" style="width:500px;">
<tbody>
<tr>
<td>controls</td>
<td>显示控制界面</td>
</tr>
<tr>
<td>autoplay</td>
<td>自动播放，但要在开启mutde的前提下</td>
</tr>
<tr>
<td>width=“800”</td>
<td>设置宽度为800px</td>
</tr>
<tr>
<td>loop</td>
<td>自动循环播放</td>
</tr>
<tr>
<td>muted</td>
<td>静音</td>
</tr>
</tbody>
</table>
<h2>（三）音频标签</h2>
<p>格式：<audio src="./歌.mp3" controls="controls" ></p>
<p>（属性与视频标签一致）</p>
<p></p>
<h1>六、表格标签</h1>
<p>表格标签：是由table、tr、td三个标签构成，同时可以使用语义化标签thead、tbody、tfoot进行规划。</p>
<h2>（一）表格的合并</h2>
<p>行合并：rowspan属性用于进行表格的行合并</p>
<p>列合并：colspan属性用于进行表格的列合并</p>
<h2>（二）表格的背景</h2>
<p>设图片为背景：<table background="图片路径”></p>
<p>设置背景底色：<table bgcolor=“#ccc”> (#ccc的背景为灰色）</p>
<p></p>
<h2>七、超链接标签</h2>
<p>1、格式：<a href="超链接" > 显示的内容 </a></p>
<p>2、属性：</p>
<p>href：所需要跳转的网页链接</p>
<p>target：为_blank的时候 跳转的网页会新建选项卡</p>
<h3>锚链接</h3>
<p><a id="top" href="#bottom"> 跳到底部 </a></p>
<p><a id="bottom" href="#top"> 回到顶部 </a></p>
<h3>热区超连接</h3>
<p>一个图片多个链接，可将分割出多个链接区域，每个区域叫一个热区。</p>
<p> <img src="images/china.jpg" usemap="#Map"> <br> <map name="Map"> <br> <area shape="rect" coords="456,251,485,319" href="shaanxi.html"> #矩形<br> <br> <area shape="circle" coords="402,299,23" href="shanxi.html"> #圆形<br> <br> <area shape="poly" coords="400,365,446,268,446,381" href="ningxia.html"> #多边形</p>
<p> </map></p>
<p></p>
<h1>八、相关练习</h1>
<h2 style="text-align:center;">练习1：</h2>
<p style="text-align:center;"></p>
<h2 style="text-align:center;">练习1代码：</h2>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>工商银行汇款单
工商银行电子汇款单
| 回单类型 |
网上转账汇款 |
指令序号 |
HQH00000000000000013878172 |
收
款
人 |
户名 |
老牟 |
付
款
人 |
户名 |
老刘 |
| 卡号 |
000000000001 |
卡号 |
000000000002 |
| 地区 |
南京 |
地区 |
杭州 |
| 网点 |
工商江苏南京业务处理中心 |
网点 |
江苏徐州业务中心 |
| 币种 |
人民币 |
钞汇标志 |
钞票 |
| 金额 |
1.00元 |
手续费 |
0.57元 |
| 合计 |
人民币（大写）：壹圆整 |
| 交易时间 |
2017年6月1日 |
时间戳 |
2017-06-01-13.00.00。00000 |
票据打印时间：2017-06-01 15:00:12
票据打印单位：江苏徐州业务中心
操作员：大曾
