时隔多年，我又开始写技术博客了
记得上一次写技术博客还是在四年前，刚刚步入大学的我接触到了第一门编程语言c++，在老师的要求下写下第一篇技术博客，然而四年过去了，那博客还是只有那孤零零的一篇，c++之hellow world，真的是惭愧啊，四年的时光倏忽而过，来不及回首来不及感伤，终于我打开电脑，写下了四年来的第二篇技术博客……
既然是技术博客，我就不赘言了，下面都是帅里帅气的姜老师带领我们这些萌新整理的干货呦，字字珠玑，如果有错误，还请大家指正哟
一、HTML简介
超文本标记语言，标准通用标记语言下的一个应用。
二、HTML文档的基本结构
HTML级的本结构由三的部分构成，文档声明部分、<head>头部部分、<body>主体部分。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 </body>
9 </html>
其中第一行高亮标记的是文档声明，这是HTML5语言简化后的写法，文档声明必须有，而且必须在文档页面的第一行！
三、HTML的基本标签
1、head标签：Head用于表示网页的元数据：即描述网页的基本信息
meta标签常用属性：
①、charset:设置文档的字符集编码格式
HTML5中设置字符集编码：<meta charset="UTF-8">
HTML4.01之前...: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
>>>常见的字符集编码格式：
a.GB-2312:国标码，简体中文
b.GBK：扩展的国标码
c.UTF-8：万国码 Unicode 常用
②、http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：Content-Type(文档类型) refresh(网页定时刷新) set-
cookie(设置浏览器 cookie缓存)
需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）
例如：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
③、name属性：使用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且需要掌握的属性值：author（作者） keywords（网页关键字） description（网页描述） 这两个属性设置，网页必不可少。
title标签：
网页的标题，即网页选项卡上的文字。
link标签：链接网页图标（title前的小logo）：
①rel属性：声明链接文件的类型，此处选icon 属性值还有很多 icon只是一个图标
②type属性：可以省略
③href属性：表示图片的路径地址
2、body标签
常见的块级标签：
1、h标签：标题标签，自动加粗，h1最大，h6最小
1 <h1>h1标题标签</h1>
2 <h2>h2标题标签</h2>
3 <h3>h3标题标签</h3>
4 <h4>h4标题标签</h4>
5 <h5>h5标题标签</h5>
6 <h6>h6标题标签</h6>
2、hr:水平线标签
在相应位置出现一条横线
3、p标签：段落标签
p标签内的换行和多个空格在网页内都视为一个空格
4、blockquote引用标签：
cite属性，表明引用来源，一般表明引用网址，浏览器默认为首行缩进
5、pre预格式标签：浏览器默认显示样式
①.显示为等宽字体。
②.代码中的换行、空格元素之间在浏览器中显示。
6、ol有序列表
列表项：<li>可以有N多个</li>
1 <ol>
2 <li>1.第一项</li>
3 <li>2.第二项</li>
4 <li>3.第三项</li>
5 </ol>
7、ul无序列表：unorder list
列表项：<li>可以有N多项</li>
1 <ul>
2 <li>1.无序第一项</li>
3 <li>2.无序第二项</li>
4 <li>3.无序第三项</li>
5 </ul>
8、dl定义描述列表：
列表标题：<dt>一般只有一项</dt>标题顶格显示
列表描述项：<dd>可以有N多项</dd>描述项相对标题进行缩进显示
1 <dl> 2 <dt>这是定义列表的标题</dt> 3 <dd>描述项第一项</dd> 4 <dd>描述项第二项</dd> 5 <dd>描述项第三项</dd> 6 </dl>
9、组合标签figure：用于显示图片与图片标题
两个子标签：<img />
<figcaption></figcaption>
10、div分区标签：
<div></div>可以包裹任何标签，也可以被任何标签包裹
常用块级结构：div-ul(ol)-li常用于分类导航或菜单
div-dl-dt-dd(figure)常用于图文混编场合
table-tr-td:图文布局表述数据
form-table-tr-td
常见的行级标签：
1、span(文本)<span></span>：
无实际意义，用于包裹某段或某个文字，修改特定样式
2、em(强调)
3、strong(加粗)
4、i(倾斜)
5、b(加粗)
tips：
【Strong、em、b、i标签的区别】
1.strong和em都表示强调，strong显示为粗体，em倾斜。而且strong的强调程度比em要高
2.strong和b都能加粗，em和i都能倾斜。但是，strong和em多了一层强调的语义。HTML5要求标签尽可能的实现语义化。
6、q(短引用)：
<q></q>显示文字用""引起来
7、small(缩小)：
small和big(增大)都可以嵌套，直到字号达到上限和下限
8、img(图片)：
1.路径地址的写法：
①.相对路径：以当前文件为准，去寻找图片地址
a.与当前文件处于同一层的图片，直接写图片名
b.图片在当前文件下一层：文件夹名/图片名.后缀
c.图片在当前文件的上一层的文件夹内：../文件夹名/图片名.后缀
②.绝对路径：file：///盘符：/文件夹/图片.后缀名。但是，严禁使用
③.网络地址：网络上的图片链接。但是一般不使用。
2.height,width,图片的高度和宽度。可以用css样式代替
3.title：鼠标指上后显示的文字
4.alt：当图片无法加载的时候显示的文字，不同于文字，无法被选中
5.align:设置图片左右的文字相对于图片的位置 属性值：top center bottom(默认)
9、a(超链接)：
1.href:超链接的路径 可以选择链接的1和3，可以是网络连接，可以是文件的相对路径
2.target：超链接打开的位置_self自身页面(默认) _blank新页面
3.title：鼠标指上去显示的文字
4.rel：用于表明被链接文档与当前文档的关系,对浏览器没作用，对搜索引擎友好
rel="prev"被链接文档是前一篇文档
rel="next"被连接文档是后一篇文档
rel="icon"被链接图片是当前文档的图标
rel="stylesheet"被链接文档是当前文档的样式表
rel="prefetch"利用空余网速预加载
5.锚链接：1.本页面锚链接：a.设置锚点：<a name="top"></a>
b.在超链接，使用#name进行跳转<a href="#top">我在这里呀</a>
2.页面间锚链接：a.在即将跳转的页面设置锚点<a name="top"></a>
b.在超链接的href属性中，使用"页面地址.html#name"
<a href="03常见的行级标签.html#top" target="_self">我在这里呀</a>
6.功能性链接：mailto://是href的属性值，用于给指定邮箱发送邮件
file///:E:/img/1.jpg打开本地文件
tencent://message/?uin=452014986 给指定qq发消息
10、其他行级标签
s：有误文本，删除线
cite：浏览器显示为倾斜，常用于书画等作品的引用
code：只是表示计算机代码。但是不会保留代码格式(没有空格和回车)，需要配合pre使用
bdo：表示文本方向：属性dir 属性值：ltr：left to right rtl：right to left
kbd：表示需要用户用键盘输入的内容，浏览器显示为等宽字体
u：下划线
mark：改背景颜色，高亮和标记文本，浏览器显示为背景色，黄色
四、表格与表单
表格 table：
表格的行：tr 每行中的列：td
表格的表头：<th></th> 默认加粗，单元格居中
【常用属性】
1、border:给表格添加边框。当border属性增大时，只有外围框线增加，单元格的边框始终为1px
2、Cellspacing：单元格与单元格之间的间隙距离。当cellspacing="0"，只会使单元格间隙为0，但不会合并边框线。【表格边框合并】 style="border-collapse: collapse;",无
需再写cellspacing="0"
3、Cellpadding：每个单元格中的内容，与边框线的距离。
4、Width、 Height：表格的宽高
5、align：表格在屏幕的左中右位置显示，left center right
>>>注意：给表格加上align属性，相当于让表格浮动。会直接打破表格后面元素的原有排列方式
6、bgcolor:背景色 等同于style="background-color:;"
7、background:background="img/computer.jpg" 背景图片 等同于style="background-image:;" 且背景图会覆盖背景色
8、bordercolor="blue" 边框颜色
【tr和td相关的属性】
1、width/height: 单元格的宽高
2、bgcolor:单元格的背景颜色
3、align: left center right 单元格中的文字，水平对齐方式
4、valign:top center bottom 单元格中的文字，垂直对齐方式
5、nowrap="nowrap" 单元格中文字不换行
注意：1、当表格属性与行列属性冲突时，以行列属性为准。（近者优先）
2、表格的align属性，是控制表格自身在浏览器的显示位置；
行和列的align属性，是控制单元格中文字在单元格中的对齐方式；
3、表格的align属性，并不影响表格内，文字的水平对齐方式
tr的align属性，可以控制一行中所有单元格的水平对齐方式
【表格的结构化】
完整的表格结构：thead tbody tfoot
无论各部分在表格什么位置，显示时，caption均在表格外最上方
thead均会在表格内最上方，tfoot在表格内最下方
【表格的直列化】
col属性，改变每一列的样式
colgroup,选择某几列分组
1 <colgroup style="background-color: yellow;">
2 <col style="background-color: red;"/>
3 <col style="background-color: blue;"/>
表单：
【form】表单
1.两个重要属性：action-表单提交的服务器地址 method-表单提交数据的方法
2.get和post的区别
①get：使用URL传参：http：//服务器地址?name1=value1&name2=value2
(?问号表示传递参数，?后面采用name=value的形式传递，多个参数之间，用&链接)
>>>缺点，url传参不安全，所有信息可在地址栏看到
url注入方式攻击数据库服务器
url传参数据量有限，会把超过的字符截去
>>>优势：传参速度快
②post：使用http请求传递数据，URL地址栏不可见，安全，且传递数据量没有限制
3.【input标签及属性】
①type：表示input输入框的类型，可选值有：
②name：input输入框的别名。一般情况下必填。因为传递数据时会有name=value
起名规范只能使用字母数字 下划线，开头不能为数字
③value：inpue输入框的默认值，没写value默认value有值但是为空
④placeholder：input的提示内容，当输入框有value的时候，提示内容不显示
⑤size和maxlength
⑥tabindex：控制tab的跳转顺序，属性值为1,2,3,4,5...从小往大跳
【input特殊属性】
①checked="checked"默认选中
②disabled="disabled"设置控制不能使用。用在按钮上不能点击，用在输入框上不能修改
而且，如果输入框disabled，则输入信息不能往后台传递
④hidden="hidden"隐藏。等同于<input type="hidden" name="username" value="1234" />
常用于配合disabled，或者根据其他需要，使用隐藏域传递数据。hidden标签和disable标签的name需要相同
4.【input的type属性的属性值】
①text：文本输入框
②password：密码输入框，输入内容时显示小黑点
③radio：单选按钮
>>>name和value属性需同时存在，提交时，提交的是value中的属性值。
例如：<input type="radio" name="sex" value="男"/>提交时，显示"sex=男"
>>>radio凭借name属性区分是否为同一组。name相同，为同组，同组只能选一个
>>>checked="checked"默认选中。(radio可以选一个，checkbox可以选多个)
④file：文件上传按钮
⑤submit：提交按钮，提交表单数据
⑥reset：重置按钮。将表单数据设置为初始状态
⑦image：图形提交按钮。功能同submit，可以提交数据。
⑧button：普通按钮，没有任何功能
5.【下拉选单的写法select】
①写法：
1 <select>
2 <option></option> //可以有N多个
3 </select>
②name属性：应该写在select上，所有选项只有一个name
③mutiple属性：mutiple="mutiple"多选时使用control键进行多选,一般不用
④option常用属性:
value="":写在option的头标签内，
当option没有value属性时，往后台传递的是<option>...</option>中间的文字
当option有value属性时，向后台传递的是value 的值
title：鼠标指上后显示显示的文字
selected：默认选中的项 selected="selected"
⑤
1 <optgroup label="山东省">
2 <option >淄博市 </option>
3 <option >济南市 </option>
4 <option >烟台市 </option>
5 </optgroup>
6 <optgroup label="北京市">
7 <option >朝阳区 </option>
8 <option >海淀区 </option>
9 <option >怀柔区 </option>
10 </optgroup>
用于将option分组，用label属性表示optgroup的组名
6.【文本域textarea】
①写法<textarea></textarea>
②设置宽高style="width: 200px; height: 100px;"自身也有cols=""和rows=""控制
③readonly="readonly";只读不能编辑
④设置大小不可修改：style="resize: none;"
⑤style="overflow: ; "设置文字超出区域时的处理方法
>>>也可以通过overflow-x和overflow-y分别设置水平垂直方向的滚动条显示方式
>>>常用属性值：hidden超出区域的文字无法显示
scoll无论多少文字均会显示横向和纵向滚动条
auto自动，根据文字的多少自动决定是否显示滚动条
7.【表单的边框与标题】
1 <fieldest>//表单边框
2 <legend></legend>//表单标题
3 </fieldest>
>>>如果想让标题嵌在边框里面，需要将标题标签写在边框标签内
>>>一个表单可以有多组边框+标题的组合，一个边框内只能包含一个table
8.【h5智能表单】
①H5新增input的form属性，用于指向特定form表单的id，
实现input无需放在form标签之中，即可通过表单进行提交。
<form id=form1>
...
</form>
<input form="form1"/>
②type新增属性：详见表格
③
Autocomplete：自动完成功能：记录用于之前输入的内容，并在下次输入时在动提示完成输入。
>>>属性值 on off
>>>可以再form表单上使用，对整张表单的的所有控件进行自动完成的开关
也可以在input上使用，对特定输入框进行修改。
>>> 绝大多数浏览器，默认开启
Autofocus：自动获得焦点：autofocus="autofocus"只能设置input元素自动获得焦点
Form：所属表单：通过form表单的id确定此input输入哪张表单
Required：必填：required="required"设置input必填，否则阻止提交
Pattern：验证input的模式：使正则表达式验证input的模式(后续讲解)
Placeholder：提示：当有value时取消提交
五、示例和源码
1 <h3 style="text-align: center;text-decoration: underline;background-color: yellow;width: 380px;"> 2 特别休假请假单 3 </h3> 4 5 <p>申请日期： 年 月 日</p> 6 7 <table border="3" cellspacing="0" width="380"> 8 <tr> 9 <td>所属单位</td> 10 <td>部 组 班</td> 11 <td>职称</td> 12 <td>111</td> 13 <td>姓名</td> 14 <td>111</td> 15 <td>厂长</td> 16 </tr> 17 <tr> 18 <td rowspan="2">期间</td> 19 <td colspan="3" align="right">年 月 日</td> 20 <td colspan="2" rowspan="2">天数</td> 21 <td>111</td> 22 </tr> 23 <tr> 24 <td colspan="3"align="right">年 月 日</td> 25 <td>主管</td> 26 </tr> 27 <tr> 28 <td colspan="2">职务代理人</td> 29 <td colspan="4">盖章</td> 30 <td>111</td> 31 </tr> 32 <tr> 33 <td>到职日期</td> 34 <td colspan="3" align="right">年 月 日</td> 35 <td colspan="2">审核意见</td> 36 <td>组长</td> 37 </tr> 38 <tr> 39 <td colspan="2">全年特别休假</td> 40 <td colspan="2" align="right">天</td> 41 <td>111</td> 42 <td>111</td> 43 <td>111</td> 44 </tr> 45 <tr> 46 <td colspan="2">已请假数</td> 47 <td colspan="2" align="right">天</td> 48 <td>人事主任</td> 49 <td>认识经办</td> 50 <td>班长</td> 51 </tr> 52 <tr> 53 <td colspan="2">本次申请日数</td> 54 <td colspan="2" align="right">天</td> 55 <td rowspan="2">111</td> 56 <td rowspan="2">111</td> 57 <td rowspan="2">111</td> 58 59 </tr> 60 <tr "> 61 <td colspan="2">尚剩假期日数</td> 62 <td colspan="2" align="right">天</td> 63 </tr> 64 </table>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>表单练习2</title>
6 </head>
7 <body>
8
9 <img src="img/用户注册.png" />
10 <form action="" method="post">
11 <table height="380">
12 <tr>
13 <td style="text-align: right;">用户名：</td>
14 <td colspan="3"><input type="text" name="username" placeholder="请输入用户名"/><span style="color: red;">*</span> <a href="01.html基本结构.html">检测是否有相同的用户名</a> </td>
15 </tr>
16
17 <tr>
18 <td style="text-align: right;">密码：</td>
19 <td style="color: gray; "><input type="password" name="password" /><span style="color: red;">*</span> (至少6位)</td>
20 <td style="text-align: right; "> 真实姓名：</td>
21 <td><input type="text" name="realname"/ placeholder="请输入真实姓名"><span style="color: red;">*</span></td>
22 </tr>
23
24 <tr>
25 <td style="text-align: right;">确认密码：</td>
26 <td><input type="password" name="password1" /><span style="color: red;">*</span></td>
27 <td style="text-align: right;"> 性别：</td>
28 <td>
29 <select name="sex" >
30 <option value="male" selected="selected">男</option>
31 <option value="female">女</option>
32 </select><span style="color: red;">*</span>
33 </td>
34 </tr>
35
36 <tr>
37 <td style="text-align: right;">证件类型：</td>
38 <td>
39 <select name="cardtype" >
40 <option value="idcard" selected="selected">身份证</option>
41 <option value="stcard">学生证</option>
42 </select><span style="color: red;">*</span>
43 </td>
44 <td style="text-align: right;"> 出生日期：</td>
45 <td><input type="text" name="birth" /><span style="color: red;">*</span> <span style="color: gray;">(格式为2010-02-05)</span></td>
46 </tr>
47
48 <tr>
49 <td style="text-align: right;">证件号码：</td>
50 <td><input type="text" name="cardnum" placeholder="请输入证件号码" /><span style="color: red;">*</span></td>
51 <td style="text-align: right;"> 国家：</td>
52 <td><input type="text" name="nation" /> </td>
53 </tr>
54
55 <tr>
56 <td style="text-align: right;"> 联系号码：</td>
57 <td><input type="text" name="phone"/><span style="color: red;">*</span> </td>
58 <td style="text-align: right;"> 城市：</td>
59 <td><input type="text" name="city" /> </td>
60 </tr>
61
62 <tr>
63 <td style="text-align: right;">手机号码：</td>
64 <td colspan="3"><input type="text" name="mobilephone" />(建议填写，以便进行联系通知)</td>
65 </tr>
66
67 <tr>
68 <td style="text-align: right;">e-mail：</td>
69 <td><input type="text" name="e-mailaddress"/><span style="color: red;">*</span></td>
70 <td style="text-align: right;"> 邮编：</td>
71 <td><input type="text" name="mailaddress" /> </td>
72 </tr>
73
74 <tr>
75 <td style="text-align: right;">联系地址：</td>
76 <td colspan="3"><input type="text" name="address" size="75px"/><span style="color: red;">*</span></td>
77 </tr>
78
79
80 <tr>
81 <td style="text-align: center;" colspan="4"><input type="reset" name="reset" value="重置" disabled="disabled"/> <input type="submit" style="color: white; background-color: #AC1616;" value="注册"/> </td>
82 </tr>
83
84 </table>
85 </form>
86 <img src="img/广告.png" style="text-align: center;" />
87 </body>
88 </html>
六、总结
这是一个新的开始，也是对过去自己的一个告别，善始才能善终，最重要的是希望自己不断坚持努力学习，回头再看这些博文时，希望脑海中浮现的是自己的坚持和汗水！
