嗯，这是本人的第一篇博客……比较稚嫩，望各位大神见谅。
以下是本人对H5前端基本标签学习的一些学习笔记，与诸君分享。
文档声明格式：
<!DOCTYPE html>
注意：文档声明必有，而且必须在文档页面的第一行！HTML5已经简化了，H4以前较为繁琐，本着便(tou)捷(lan)的心思，就不重复描述以前繁琐的格式。
meta标签：描述文档的类型和编码；描述搜索关键字的描述（charset; content; http-equiv; name ;）
meta标签中的属性：
1，charset:设置文档的字符集编码格式
HTML5中设置字符集编码：<meta charset="UTF-8">
>>>常见的字符集编码格式：a.GB2312：国标码，简体中文；
b.GBK,扩展的国标码；
c.UTF-8,万国码Unicode
2，http-equiv:将我们的信息写给浏览器看，按照里面的要求去执行，需要配合content属性使用。
（http-equiv属性只是表明需要设置哪一部分，具体的设置内容放到content属性中）
可选属性值：content-type(文档类型) ;refresh（网页定时刷新） ;
set-cookie（设置浏览器cookie缓存）
3，name属性：使用方法同http-equiv。常用且需要掌握的属性值：author（作者） keyword（网页关键字） description（网页描述）。
keyword（网页关键字） description（网页描述）这两个属性设置，网页必不可少
<!--作者-->
<meta name="author" content="http://www.jredu100.com" />
<!--网页关键字用英文逗号分隔-->
<meta name="keywords" content="HTML5,网页,web前端开发,Day1" />
<!--网页描述：搜索网站时，title下面的解释至关重要！！-->
<meta name="description" content="这是准备工作的第一天的学习内容，来自杰瑞教育" />
详细属性如下图（上面介绍的是主要常用属性）：
使用link标签，链接网页图标（title前的小logo）
rel属性：声明链接文件的类型，此处选icon
type属性：可以省略
href属性：表示图片的路径地址
<link rel="icon" type="imag/x-icon" href="img/day1标题图标.png" />
标签的分类
块级标签：显示为块，前后隔行（自动换行）；
行级标签：从左往右按行逐一显示；
常见的块级标签
<h1>-<h6>：标题标签，自动加粗，h1最大，h6最小。
<hr />:水平线标签，哪里需要放哪里。
<p></p>：段落标签。
<br />,放在p标签之中（块级标签中唯一不会换行的标签）。
<blockquote cite="http://www.******.com">天道好轮回，苍天绕过谁？（其中的换行和空格不好使）</blockquote>引用标签：cite 属性，表明引用的来源和网址。
<pre></pre> 预格式标签pre:浏览器默认显示样式：1·显示为等宽字体
2·代码中的换行，空格等元素可在浏览器直接显示
【补充】HTML文件中，空格表示： 
<ol></ol>:有序列表。其中包含<li>为列表项。
<ul></ul>:无序列表。其中包含<li>为列表项。
<dl></dl>:定义描述列表。<dt>列表标题。一般仅一项，标题顶格；<dd>列表描述项。可以有多项，对比标题缩进显示。
<figure></figure>：组合标签。用于显示图片及图片标题
<figcaption></figcaption>图片的标题
<div></div>:分区标签。在H5中具有重要地位，所有需要做的样式都可以被div包裹呈现不同的样式。
常见的行级标签：
<!--span（文本）无实际意义，用于包裹某段或某个部分文字，修改特定样式-->
<span>SPAN中的文字</span>
这是<span style="color: #F80;font-size: 45px;">Span</span>中的文字
<!--em（强调）-->
<em>这是EM中的标签</em>
<br />
<!--strong（强调）-->
<strong>这是strong中的文字</strong>
<br />
<!--i（倾斜）-->
<i>这是I中的文字</i>
<br />
<!--b（加粗）-->
<b>这是B中的文字</b>
【strong,en,b,i标签的区别】
1·Strong和em都表示强调，strong显示为粗体，em显示为倾斜。且strong的强调程度要比em更高。
2·strong和b都能表示加粗，em和i都能倾斜。但是strong和em多了一层强调的语义。
HTML5语言，要求标签尽可能的实现语义话。
<!--q（短引用）:显示为文字用“”引起来-->
<q cite="www.*******.com">这是短引用标签Q中的文字</q>
<br/>
<!--small（缩小字体）small可以嵌套，big同理，直到字号最小或最大为止-->
<small>其间的文字会被small缩小一号</small>
<br />
<big>这是big标签的效果</big>
<br />
<a>:（超链接）href="http//:www.jerui100.com"
href:超链接的路径，可以是网络链接，也可以是本地文件（路径同img）。
target:超链接打开的位置。—self自身页面（默认） —blank 新页面。
title：鼠标指上时显示的文字。
rel:用于标明被链接文档与当前文档的关系。
rel="prev"(被链接文档是)前一篇文档 rel="next"后一篇文档
rel="icon"被链接图片是当前文档的图标rel="stylesheet"被链接文档是当前文档的样式表
rel="prefetch"预加载，在当前文档加载完成后利用空余时间预加载即将链接的文档。
锚链接
(1)本页面锚链接设置：a.设置锚点：<a name="top"></a>
b.在超链接上，使用#name跳转到对应锚点。<a href="#top" target="_self">这是一个超链接</a>
(2)页面间锚链接：a.在即将跳转的页面的指定位置，设置锚点
b.在超链接的href属性中，使用“页面地址.html#name”
<a href="地址#name">跳转到知指定地址
功能型链接：mailto:*******@***.com给指定邮箱发邮件
tencent://message/?uin=845870427给指定QQ发消息
file:///e:/***.*** 打开指定文件
<!--<s>有误删除线-->
<s>S标签中的文字</s>
<!--cite标签；浏览器显示倾斜，常用语书，画作，作品的引用-->
<cite>这是cite标签</cite>
<!--code表示计算机代码。只是表示是计算机代码，但是不会保存代码格式，需要配合pre使用-->
<pre>
<code>
setLayout(new BorderLayout());
setLocation(dimen.width / 3, dimen.height / 3);// dimen.width/3,dimen.height/3
setSize(FWIDTH, FHEIGHT);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setResizable(false);
setVisible(true);
</code>
</pre>
<!--bdo表示文本方向,dir="ltr"左往右；dir="rtl"右往左-->
<bdo dir="rtl">123456789</bdo>
<bdo dir="ltr">123456789</bdo>
<!--kbd:表示需要用户用键盘输入的内容，但是浏览器仅显示为等宽字体-->
请输入“<kbd>ESC</kbd>”退出系统
<!--sup:上标文本 sub下标文本-->
X<sup>4</sup>
X²
<!--版权符号-->
© ©
下划线
<u>传说中的下划线</u>
<!--mark:高亮或标记文本，浏览器显示为黄色背景。-->
<mark>笑而不语</mark>
效果：
表格：
表格的行：tr 每行中的列：td
表格的表头：<th></th>单元格居中，默认加粗
【常用属性】：
border:给表格添加边框。当border属性增大时，仅外围框线增加，单元格的边框始终为1px.
<table width="500" border="10">
【表格边框合并】style="border-collapse: collapse;"
cellpadding:每个单元格中的内容，与边框线的距离。
cellpadding="10"
aligh:表格在屏幕的左中右位置显示，left，center，right
注意：给表格加速align属性，相当于让表格浮动。会直接打破表格后面元素的原有排列方式。
bgcolor:背景颜色，等同于style=“background-color：；”
bgcolor="blanchedalmond"
background:背景图片background=“img/aaa.png”等同于style="background-image:;"且背景图会覆盖背景颜色。
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属性，可以控制一行中所有单元格的水平对齐方式。
【表格的跨行与跨列】--td
colspan跨列，当某个格跨N列时，其右边N-1个单元格需删除
rowspan跨行，当某个格跨N行时，其下边N-1个单元格需删除
【表格的结构化】
完整表格结构：thead tbody tfoot
无论各部分在表格什么位置，显示时，caption都会在表格外最上方；thead会在表格内最上方；tfoot会在表格内最下方
【表格的直列化】
<colgroup><col>
效果：
【form表单】
1.两个重要属性：action-表单提交的服务器地址，method-表单提交数据的方法（get/post）
2.get和post的区别：
(1)使用URL传参：http://服务器地址？name1=value1&name2=value2（?表示传递参数?后面采用name=value的形式传递，多个参数之间，用&链接）
so,URL传参不安全，所有信息可以在地址栏看到，并且可以通过地址栏随意传递其他数据。
URL传递数据量有限，只能传递少量数据。
（2）使用HTTP请求传递数据。URL地址栏不可见，比较安全。且传递数据量没有限制。
综上所述：常用post传递数据
【input标签及属性】
（1）type：表示input输入框的类型。可选值有：
（2）name：input输入框的别名。一般情况下，必填。因为传递数据时，使用name=value的形式传递
（3）value：input 输入框的默认值
（4）placeholder：input的提示内容,当输入框有value的时候，placeholder消失。
【input特殊属性值】
（1）checked=“checked”默认选中。
（2）disable=“disable”设置控键不能使用。用在按钮上不能点击，用在输入框上不能修改。
而且，如果输入框disable，输入框信息不能往后台传递。
（3）hidden=“hidden”隐藏。等同于<input type="hidden" name="username" value="1234">
常用于配合disable，或者根据其他需要，使用隐藏域传递数据。
【input-type属性详解】
（1）text：文本输入框
（2）password：密码输入框，输入内容是显示小黑点。
（3）radio：单选按钮；
checkbox：多选按钮。
》》》》name和value必须同时处在，提交的是value中的属性值。例如：<input type="radio" name="sex" value="男" />男；提交时“sex=男”
》》》》radio凭借name属性来区分是否为同一组。name相同，为同组，同组中只能选一个。
》》》》checked=“checked”默认选中。（radio只能选一个，checkbox可以选多个）
(4)submit：提交按钮。提交表单数据。
(5)Reset：重置按钮，将表单数据重置为初始状态。
(6)file：文件上传按钮。
(7)image:图形提交按钮。功能同submit，可以提交数据。
（8）buttom:普通按钮。无任何功能。
【下拉选择控件select】
(1)写法：<select>
<option></option>//可以有很多；
</select>
(2)name属性应该写在<select>上，所有选项只有一个name
(3)multiple=“multiple”可在选择页面按住Ctrl使用多选。
（4）option常用属性：
value=“”：当option没有value属性值时，提交的是<option></option>中间的文字；
当option有属性值时，提交的是value的值。
title：鼠放上的时候显示的文字。
selected="selected"默认选中。
（5）<optgroup label="山东省"></optgroup>:用于将option个标签进行分组，label属性表示分组名。
代码：
<td>
<select name="city">
<optgroup label="山东省">
<option value="1" title="青岛市**区**地段**居民委员会" >青岛</option>
<option value="2" selected="selected" title="烟台市莱山区烟台大学东门">烟台</option>
<option value="3">济南</option>
</optgroup>
<optgroup label="北京市">
<option value="1" >朝阳区</option>
<option value="2" selected="selected">海淀区</option>
<option value="3">。。。</option>
</optgroup>
</select>
</td>
效果：
【文本域textarea】
（1）写法<textarea></textarea>
（2）设置宽高style="width:200px;height:150px"自身有row和col两个属性，但不常用。
（3）readonly=“readonly”只读属性。不允许编辑。
（4）style="resize:none";设置为宽高不允许修改。
（5）style="overflow:;"设置当前文字超出区域时如何处理（滚动条）。
也可以通过overflow-x和overflow-y分别设置水平垂直方向的显示方式。
常用属性值：hidden 超出区域的文字，隐藏无法显示。
scroll 无论文字多少，均会显示滚动条
auto 自动，根据文字多少决定是否显示滚动条。（默认为此）
代码：
<td colspan="2">
<textarea style="width: 200px; height: 100px; resize: none; overflow-y: auto;
" readonly="readonly" >文本框内的内容。</textarea>
</td>
效果：
【表单的边框与标题】
<fieldset></fieldset>边框
<legend></legend>边框标题
//如果想要让标题嵌入到边框中，需要标题标签写到边框里面
//一个表单可以有多组边框加标题的组合。
新添加input的属性：tabindex=“1”，设置TAB键的顺序（类似优先级。）
【H5智能表单】
（1）H5新增input的form属性，用于指向特定from表单的id,实现input无需放在form标签之中，即可通过表单进行提交。
<FORM id=foo>
...
</FORM>
<input ....form="foo">
(2)type新增属性详见表单。
input元素的新属性：
input元素的新增属性：
Autocomplete：自动完成功能，记录用户之前输入的内容，并在下次输入时自动提示完成输入。
>>>属性值：on/off
>>>可以在from表单上使用对整张表单的所有控件进行自动完成的开关
也可以在input上使用对特定输入框进行修改
>>>绝大部分浏览器默认开启。
Autofocus：自动获得焦点,autofocus="autofocus",只能设置input元素中的一个自动获得焦点。
Form：所属表单。通过form表单的ID，确定次input输入哪张表单。
Required：必填，required="required"，设置input必填，否则阻止提交。
Pattern：验证input的模式使用正则表达式验证input的模式。
Placeholder：提示，当有value时，取消提示。
