HTML介绍
（注：本人只是对前端简单的介绍，而且也只是达到会用的水平，前端工作者勿吐槽）
本文是前端部分的第一篇，在开始介绍html之前先做一些简单的说明
前端概述
首先我们需要了解什么是前端。简单来说，前端就是网站的前台部分。这里顺便介绍一下C/S和B/S结构。
C/S又称Client/Server或客户/服务器模式。服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软件。这个客户端软件就是上面提到的前端部分。
B/Ｓ是Brower/Server的缩写，客户机上只要安装一个浏览器（Browser），如Netscape
Navigator或Internet Explorer，服务器安装Oracle、Sybase、Informix或 SQL
Server等数据库。浏览器通过Web Server 同数据库进行数据交互。这里的前端部分则是指浏览器。
两者比较一下：C/S模式响应快，但是需要安装软件，而B/S模式只需要有浏览器就可以和服务器之间进行交互。本文介绍的也就是有关B/S模式中前端部分的内容。
html、css、js的关系
如果把一个网页当成一场皮影戏的话，这场皮影戏对应的四个部分：舞台、皮革、皮革上的色彩、皮影的动作就分别对应浏览器、html、css和js
浏览器是一个舞台；
html相当于一个模板；
css则是给这个模板进行渲染；
js则是让这个网页动起来。
html学习
啰嗦了一大堆，现在开始正式的html介绍
html是什么
html的全拼是htyper text markup language ，即超文本标记语言
普通文本只能包括文字，而超文本则指的是可以包括图片、链接甚至音乐、程序等非文字的元素。
如果详细的看浏览器和服务器之间传输的数据的话，只是一串字符串，而浏览器的作用就是将这一串字符串变成一个展示给用户的网页。
标签是什么
直观上看是由一对尖括号括住的单词，如<html>
标签也是不区分大小写的，但是推荐使用小写
标签分为两种：
普通标签：分为两个部分：开始标签和结束标签，如<html></html>，结束部分一般用“/”标识，而两个标签中间的部分称之为标签体
自闭和标签：功能比较单一的使用一个标签即可，如：<br/、<hr/>等
注意标签使用的时候不可以交叉嵌套，如：<a><b></a></b>
标签的属性
通常以键值对的形式出现在开始标签或者自闭标签中，如：name="name"
注：
1、属性名全部小写
2、属性值要用双引号括起来
3、属性名和属性值完全一样的时候，直接写属性名，如：checked
常用标签介绍
<!DOCTYPE html>标签介绍
<head>标签
<head>
<meta name="keywords" content="学校，廊坊，师范，廊坊师范"> <!--搜索引擎关键字-->
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> <!--两秒后跳转到目标地址，没有目标地址就是刷新本页面 -->
<meta http-equiv="content-Type" charset="utf-8"> <!--设置编码格式-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <!--兼容IE规范-->
<title>Document</title> <!--网页的名字-->
<link rel="stylesheet" type="text/css" href="css.css"> <!--引入css文件-->
<link rel="icon" href="http://www.jd.com/favicon.ico"> <!--标签上的图标设置，本地图片和网络的都可以-->
<script></script> <!--用于写入js代码-->
<style></style> <!--用于写入css代码-->
<script src="Hello.js"></script> <!--引入js文件-->
</head>
上面是head中常用的标签和对应的注释。
既然说到注释这个问题，这里就把html中常用的注释说明一下：
注释：<!--注释内容 -->
标签分类
标签分为块级标签和内联标签
块级（block）标签的特点：
总是在新行开始
宽度缺省则是占容器的的100%
可以容纳其他块级标签和内联标签
常见的块级标签：<p>、<h1>、<table>、<ol>、<ul>、<form>、<div>
内联（inline）标签特点：
不另开一行
宽度就是文字或者图片的宽度，不可改变
只能容纳文本或者其他内联标签
常见的内联标签：<a>、<input>、<img>、<sub>、<sup>、<textarea>、<span>
基本标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容会换行.并且也与上下内容之间有一行空白.
<b>、<strong>: 加粗标签.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角标.
<br>:换行.
<hr>:显示一条水平线
含样式和语义的标签
图形标签<img>
常见属性：
超链接标签<a>
常见属性：
<ul> <!--无序列表-->
<li></li>
<li></li>
<li></li>
</ul>
<ol> <!--有序列表-->
<li></li>
<li></li>
<li></li>
</ol>
<dl> <!--自定义列表-->
<dt></dt> <!--列表头-->
<dd></dd> <!--列表体-->
<dd></dd>
</dl>
表格标签<table>
<table border="1px"><!--表格
属性：
border:表格属性
cellpadding:内边距
cellspacing:外边距
注：<thead>和<tbody>也可以不加
-->
<thead>
<tr> <!--表示一行-->
<th>1</th> <!--列表表头，内容会加粗、居中-->
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">111</td><!--跨两行-->
<td>222</td> <!--列表体内容-->
<td>333</td>
</tr>
<tr>
<td>111</td>
<td colspan="2">222</td><!--跨两列-->
</tr>
</tbody>
</table>
表单标签<form>
表单是最重要的一个标签，因为它可以用于向服务器传输数据，实现和服务器的交互
常用属性：
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，如www.baidu.com
method: 表单的提交方式 post/get 默认取值 就是 get
get：提交的内容以键值对的形式放在地址栏中url后面，安全性相对较差，对提交内容的长度有限制.
post：提交的内容不在地址栏，安全性相对较高，对提交内容的长度理论上无限制.
get和post是最常用的，还有其他的提交方式。
表单元素：
<form action="127.0.0.1:8080" method="get">
<!--单写下面的input是没有任何意义的，必须写在form中。
属性：
action:来将数据提交到指定地址中
method:提交方式，post，即不在地址栏显示，get，即在地址栏显示，默认是get
-->
姓名：<input type="text" name="name" placeholder="请输入姓名"><!--文本框，name相当于键值-->
<!--其他属性：
placeholder：属性是设置文本框中提示内容
readonly：只读
disabled:不允许操作，感觉和只读是一样的，但是这个对所有的input都有用
-->
密码：<input type="passwod" name="pwd">
爱好：音乐<input type="checkbox" name="hobby" value="music">电影<input type="checkbox" name="hobby" value="movie"><!--多选,传的时候传的是value的值-->
性别： 男<input type="radio" name="gender" value="men" checked>女<input type="radio" name="gender" value="women"><!--单选，这个时候需要将name设置一致 checked表示默认选中-->
<input type="file" name="file">
<!--选择上传文件
需要注意的点，这个需要在form中设置一个enctype="nultipart/form-data" 的属性，
而且在服务器端接收的时候用的是对象.FILES来进行接收
django中对上传文件的下载是：
for item in req.Files:
fileObj = req.FILES.get(item)
f = open(fileObj.name,"wb")
iter_file = fileObj.chunks()
for line in iter_file:
f.write(line)
f.close()
-->
省<select name="province"><!--下拉列表框
其他属性：
multiple：可以实现列表的多个选择
size:可以设置列表的显示个数
-->
<option value="beijing">北京市</option>
<option value="hebei">河北省</option>
<option value="henan" selected="selected">河南省</option><!--selected表示默认选中-->
<option value="shanxi">山西省</option>
</select>
简介：<textarea name="desc" rows="5" cols="5"></textarea>
<label for="">名字</label><!--for中写入下面id和下面的input中的id一样的话，就能实现点击名字的的时候也能实现光标在文本框效果-->
<input id="" type="text">
<fieldset><!--相当于做了个简单的样式-->
<legend>登陆吧</legend>
<input type="text">
</fieldset>
<input type="submit" value="提交"><!--提交到服务端-->
<input type="button" value="按钮"><!--没有任何操作-->
<input type="reset" name="重置"><!--重置-->
<!-- readonly:只读，只限于text和password
disabled：对所有input都有用。 -->
</form>
表单中还需要注意的就是哪些标签需要name，哪些需要value。当要用户输入的时候，有name就可以了，如果需要进行选择的时候，则需要value值，把用户的选择转换成值，上传到服务器。