web前段基础之HTML
前言
当前文档主要针对web后台开发者html的入门课程，涵盖绝大部分常用标签，学习完毕之后便可以独立完成一些未修饰的网页。
Html简介
什么是Html?
html全称：Hyper Text Markup Language(超文本标记语言)
备注：
a.超文本:页面内可以包含图片、链接，甚至音乐、程序等非文字元素
b.标记:标签，不同的标签实现不同的功能
c.语言:人与计算机的交互工具
html使用标记标签来描述网页,展示信息给用户。
网页，是网站中的一个页面，而网站就是由网页组成的。
我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。
Html的版本
html随着web的发展也历经多个版本的迭代，目前开发主流的是HTML 4.01与HTML5，近几年开发都以HTML5为主。下面列出众多版本的列表，了解即可：
| 版本 | 年份 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
Html基础语法
Html初体验
创建我们的第一个html文件，也就是第一个网页。可在任意目录下创建文本文档，然后将其后缀修改为.html，我们便得到了一个html文档文件，当然实际开发中我们推荐使用ide。
下面是最简单的html代码，演示了基本的结构。
<!DOCTYPE html>
<html>
<head>
<!--设置页面的字符集编码 -->
<meta charset="utf-8" />
<!--设置页面的标题 -->
<title></title>
</head>
<body>
<!--需要展示的信息-->
</body>
</html>
Html标签语法规范
html是一种标记语言，在上面的代码中我们也体验了标记，那么标记的语法如下:
html标签是以尖括号包围的关键字
html标签通常是成对出现的，有开始就有结束
html通常都有属性，格式:属性＝‘属性值’(多个属性之间空格隔开)
html标签不区分大小写,建议小写
常用标签
结构标签
<html><html>:根标签
<head>
<title></title>:页面的标题
</head>
<body></body>：内容
可用部分属性:
text:文本的颜色
bgcolor:背景色
background:背景图片
颜色的表示方式：
第一种方式：red green blue
第二种方式：#000000 #ffffff #325687 #377405
排版标签
注释标签：<!--注释-->
换行标签：<br/>
段落标签：<p>文本文字</p>
特点：段与段之间有空行
属性：align对齐方式 (left center right)
水平线标签:<hr/>
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color:水平线的颜色
align:水平线的对齐方式
块标签
<div></div>:行级块标签，独占一行
<span></span>:行内块标签，所有内容都在同一行
作用于区别解释:
div和span可以理解成一个容器，这个容器可以放段落、标题、图片等各种HTML元素，
不同的是div中所有标记构成的容器不与其他标签存在于同一行，而span可以。
文字标签
基本文字标签
<font></font>
属性：
size:设置字体大小
color:设置蚊子颜色
face:设置字体
标题标签
<h1></h1>—-<h6></h6>
随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行
文本格式化标签
知道了解即可，不需要强制记忆。
<b>粗体</b>
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
图形标签
<img/> 单标签，用于展示图片
属性:
src：图形地址
width:宽度
height:高度
title:鼠标悬停提示文字
alt:图片的文字说明
链接标签
链接标签实现网页间或者网页面内的跳转，比如点击新闻列表进入新闻详情页，点击“返回顶部”自动切换到页面的顶部，使用<a>标签实现，我们也习惯叫链接标签为a标签。
<a>跳转</a> a标签可包裹文字，图片等，构成一个超链接
属性：
href:跳转页面的地址或者锚点(跳转到外网需要在路径上添加协议http:)；
target: _self(自己) _blank(新页面，之前页面存在) 默认_self
锚点可以理解为当前页面的某个位置，我们需要为位置上的标签进行标记，
通过name属性取名，就可以在a标签进行访问，访问锚点的书写格式:href=“#name”的值。
列表标签
列表(List)，就是在网页中以条目的形式有序或者无序排列而形成的表，比如新闻列表。常用的列表有无序列表、有序列表。
有序列表
order list 排序的列表
有序列表标签：<ol></ol>
属性：type：1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>
示例如下：
<ol type="I">有序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
无序列表
unorder list 不排序列表
无序列表标签： <ul></ul>
属性：type :三个值，分别为
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>
示例如下：
<ul type="square">无序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
列表嵌套
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ol>
<li>中国茶</li>
<li>非洲茶</li>
</ol>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
表格标签
表格在数据展示的时候也是一种常见的多数据展示格式，html中表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格中可以包含文本、图片、列表、段落、表单、水平线、表格等等。
普通表格
<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距-->
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
表格的表头
这里用到了<th>标签和<caption>标签。
<table border="1" bordercolor="red" cellspacing="0" align="center">
<caption>学生表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
表格合并(合并行)
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>语文成绩</td>
<td>数学成绩</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">aa</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
</tr>
</table>
表格合并(合并列)
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td colspan="2">各科成绩</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
<td>80</td>
<td>90</td>
</tr>
</table>
表单标签
以上的标签的功能大多是用于数据的展示，有些场景是数据的提交，比如注册用于，我们需要在网页上填写数据，并且将数据提交到服务器。此时我们需要一些标签可以承载用户输入的不同格式的数据。这些标签就是表单标签。
html表单用于搜集不同类型的用户输入。
form标签
form标签本身是没有显示效果的，它相当于一张白纸，白纸内可随意定义用户输入项。
常用属性：action表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
method:请求方式：get 和post
enctype:表示是表单提交的类型
默认值：application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)
说明:这里有一个十分重要的知识点就是请求方式get 和post，我们不在这里详细说明。因为假设你还未具备基础的后端知识，那么我们这里即使进行讲解你也未必完全理解。假如你已经具备了后端知识，那么get和post对于你来说应该已经无需学习，小菜一碟。
input标签
input一般书写在form内，一个input就是可以接受用户数据录入的标记，input可接受多种数据录入方式，比如文字，日期，文件,单选，多选等，通过input标签的type属性来实现不同效果。
type属性:
type: 以下为type可能要取的值：
1.1 text 普通文本 默认值是text
1.2 password 密码框 密文或者掩码
1.3 radio 表示是单选，name必须一致，
表示同一组中只能选中一个( checked ="checked" 表示选中)
1.4 checkbox 表示多选 ，name必须一致，
表示同一组中可以选多个，返回值是个数组( checked ="checked" 表示选中)
1.5 file ：表示上传控件
以上具有输入性质的必须要有name属性,一开始写value表示是默认值(以后获取输入框的内容要根据name来取)
以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
1.6 submit 提交
1.7 reset 重置
1.9 image 图片按钮
以上所有input的属性： width 设置宽度，height 设置高度 border 设置边框、
1.10 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
其他属性:
name="xxx" 自定义属性值，用于为提交的数据指定键，还可用于单选多选的分组。
value="xxx" 指定真实值。
readonly="readonly" 只读
required="required" 必填
checked="checked" 单选多选默认选中
placeholder="placeholder" 占位符，用于文本框内的提示文字
disabled="disabled" 失效
select 标签(下拉列表)
<select name="city"> <!--select标签添加该属性multiple="multiple"表示多选-->
<!--option表示下拉列表项-->
<option value="北京">北京</option>
<!--selected="selected"表示选中该项-->
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
<option value="杭州">杭州</option>
</select>
textarea标签(多行文本)
<textarea cols="100" rows="5"></textarea >
表示5行100列的区域可以输入内容，该元素没有value属性
通过以上学习，你应该可以独立完成以下demo，提示，这里使用able表格标签会简单很多。
框架标签
过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
经典场景:
实现代码:
<!--1.框架标签不能和body同时出现
2.frameset: border去除框架标签的框 ，示例：border="0"
border="10px" bordercolor="yellow"
3.frame框大小不变：两种情况:
第一种：border ="0"
第二种： noresize="noresize" 不改变大小
备注:scrolling是否显示滚动条
yes 显示
no 不显示
auto 如果内容高度超过屏幕高度直接显示滚动，
4. frame 是框，内容使用src来填充，
定位显示到指定位置： 使用name属性
例如：
点击left.html的标签跳转内容显示在right.html
1.给right.html的frame添加name属性，方便定位。
2.在left.html中使用target目标定位，根据name名查找
-->
<frameset rows="200,*" border="10px" bordercolor="yellow">
<frame src="top.html" scrolling="yes" noresize="noresize" />
<frameset cols="200,*">
<frame src="left.html" scrolling="yes" noresize="noresize" />
<frame src="right.html" name="content" scrolling="yes" />
</frameset>
</frameset>
其它标签和特殊字符
其他标签
<!--该网页的关键字-->
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
特殊字符
< 小于号
> 大于号
& 与字符
" 引号
® 己注册
© 版权
™ 商标
空格
效果图:
h5新标签
html5版本中提供了一些十分新颖的标签和属性，
比如上面学习input的type的可选值在h5就提供了新的属性，color,email等。
新的标签<footer><header><nav> <canvas>等，我们这里不一一介绍，演示几个多媒体标签。
video和audio分别用来在网页展示视频和音频播放器。
<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>
<audio src="http://www.w3school.com.cn/i/horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
注意:video和audio的出现可解决浏览器对flash的依赖，但是可能会出现兼容性问题，随着发展也会慢慢解决。真实开发大部分公司会采用成熟的第三方封装的播放器，我们这里仅仅作为演示。
结语
当前章节我们学习了常见的html标签，我们目前发现虽然可以实现简单的页面，但是缺乏美感，样子丑陋，如果想要对网页进行美化，我们需要使用到另一个技术叫做css,这也是我们下一个章节要学习的内容。