本人已参与[新人创作礼]活动，一起开启掘金创作之路。
HTML
概念：
1.概念：是最基础的网页开发语言，超文本标记语言。
*超文本:超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
*标记语言：
*1 由标签构成的语言，如html，css。
*2 标记语言不是编程语言。
快速入门：
2.快速入门：
*语法：
1.html文档后缀名：.html或者 .htm
2.标签分为：
*围堵标签：有开始标签和结束标签，如 <html> </html>
*自闭和标签：开始标签和结束标签在一起。如<br/>
3.标签可以嵌套：
#需要正确去嵌套：不能你中有我，我中有你
#错误写法:<a><b></a></b>
#正确写法:<a><b></b></a>
4.在开始标签中可以定义属性，属性由键值对构成，值需要引号（单双都可）引起来。
5.html的标签不区分大小写，但是建议使用小写。
3.标签学习：
1.文件标签：构成html最基本的标签
*html：html文档的根标签
*head：头标签：用于指定html文档的一些属性，引入外部的资源
*title：标题标签
*body：体标签
*<!DOCTYPE html> ：html5中定义该文档是html文档
2.文本标签：和文本有关的标签
*注释：<!-- 注释内容 -->
*<h1> ...</h1> 标题标签：h1~h6字体大小逐渐递减
...
<h6> ... <h6>
*<p>：段落标签
*<br> ：换行标签
*<hr>：段落标签
*属性：
*color：颜色
*width：宽度
*size：高度
*align：对其方式
*center 居中对齐
*left 左对齐
*right 右对齐
*<b> 字体加粗
*<i> 字体斜体
*<font>字体标签
*<center>文本居中
*属性：
*color：颜色
*size：大小
*face：字体
*属性定义:
*color：
1.英文单词：red，green，blue
2.rgb(值1，值2，值3) ：值的范围：0~255 如：rgb(0,0,255)
3.#值1值2值3：值的范围：00~FF之间，如：#FF00FF
*width:
1.数值：with='20',数值的单位：默认是px(像素)
2.数值%：占比相对于父元素的比例
3.图片标签：
<img src="image/p1.jpg" align='right' alt='古镇' width='500' height='500' />
*相对路径：以.开头的路径
*./ 代表当前目录 ./image/1.jpg
* ../ 代表上一级目录
<img src='./image/p1.jpg'>
<img src='../image/p1.jpg'>
4.列表标签：
*有序列表：
*ol:
*li:
*无序列表：
*ul：
*li：
5.链接标签：
*定义一个超链接：
*属性：
*href：指向访问资源的url(统一资源定位符)
*targer:指定打开的资源的方式
*_self:默认值，从当前页面打开
*_blank:在空白页面打开
*例：
<a href="www.baidu.com"> 点我</a>
<a href="www.baidu.com target="_self"> 点我</a>
<a href="www.baidu.com target="_blank"> 点我</a>
<a href="./5_列表标签"_self"> 列表标签</a>
<a href="www.baidu.com"> <img src="image/p1.jpg"></a>
6.表格标签：
*table：定义表格
*width:宽度
*border:边框
*cellpadding：定义内容和单元格的距离
*sellspacing：定义单元格之间的距离，如果指定为0，则单元格的线会合为一条
*bgcolor:背景色
*algn：对齐方式
*tr：定义行
*bgcolor：背景色
*align：对齐方式
*td：定义单元格
*colspan：合并列
*rowspan：合并行
*th：定义表头单元格
*<caption>：表格的头部分
*<tbody>:表示表格的体部分
*<tfoot>：表示表格的脚部分
7.表单标签：
*概念：用于采集用户输入的数据，用于和服务器进行交互。
*form:用于定义表单的，可以定义一个范围，范围 代表采集用户数据的范围
*action：指定提交数据的URL
*method：指定提交方式
*分类：一共7种，2种比较常用
get：
1.请求参数会在地址栏种显示，会封装到请求行中。
2.请求参数大小是有限的，
3.不太安茜
post：
1.请求参数不会在地址栏中显示，会封装在请求体中。
2.请求参数的大小没有限制。
3.较为安全。
8.表单项标签：
*表单项中的数据要想被提交，必须指定其name属性。
*input:可以通过type属性值，改变元素展示的样式
*type属性：
*text: 文本输入框：默认值
placehoder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
*password：密码输入框
*radio：单选框
*注意：
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
2.一般会给每一个单选框提供value属性，指定其被选中后提交的值
3.checked属性，可以指定默认值
*checkbox:复选框
*注意：
1.一般会给每一个单选框提供value值，指定其被选中后提交的值
2.checked属性，可以指定默认值
*file:文件选择框：
*hidden:隐藏域,用于提交一些信息
*按钮:
*submit：提交按钮
*button:普通按钮
*image:图片提交按钮
*src属性指定图片的路径
*label属性：指定输入项的文字描述信息
*注意
*label的for属性一般会和input的id属性值对应，如果对应了，则点击label区域，会让input输入框获取焦点。
*select:下拉列表
*子元素： option，指定列表项
*textarea：文本域
*cols：指定列数
*rows：默认多少行
表单例：
<form action="#" method="post">
<label for="username">用户名</label>:<input type="text" name="username" placeholder="请输入用户名" id="username"></br>
密码:<input type="password" name="password" placeholder="请输入密码"></br>
性别:<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女</br>
爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
<input type="checkbox" name="hobby" value="java" checked> Java
<input type="checkbox" name="hobby" value="game"> 游戏 </br>
生日:<input type="date" name="birthday"></br>
邮箱:<input type="email" name="email"> </br>
年龄:<input type="number" name="age"></br>
图片<input type="file" name="file"></br>
隐藏域: <input type="hidden" name="id" value="aaa"></br>
省份:<select name="province">
<option>请选择</option>
<option value="">北京</option>
<option value="1">上海</option>
<option value="2">陕西</option>
<option value="3" selected>河南</option>
</select>>
自我描述:<textarea cols="20" rows="5"> </textarea>
<input type="submit" value="登录">
<input type="button" value="一个按钮"></br>
<input type="image" src="../img/p1.jpg" width="100" height="100">
</form>
注册案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<!-- 定义表单 form -->
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用户名</label>></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td><input type="text" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label>></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label>></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手机号</label>></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td><label >性别</label>></td>
<td><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label>></td>
<td><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
