HTML基础（对标签的用法的简单说明）

html

html基本标签

<h1>:一级标题，再一个网页中只能够出现一次，如果出现两次，会实现，但对搜素引擎不友好
如果实在想用两个h1，要用hgroup标签——他可以只保留h1样式，而不认为是标题。 hgroup标签的作用是用于对网页或区段（section）的标题进行组合。所以连用多个标题标签，也必须使用hgroup标签包起来，这样对浏览器搜素引擎更友好。

<p>:段落标签，独占一行

<br />:换行（早期经常使用）

<hr />:水平线（没用过）

<pre>:预定义文本标签（保留文本格式输出，很实用，但也不常用，不利于进行样式设计）

文本格式化标签：<strong>：加粗(还是在css里面改为font-weight：700;比较好)，<i>：斜体，<small><big>：缩小和放大，<sub><sup>:上标字和下标字，<ins><del>:插入字（有下划线）和删除字。
<img>:行内元素，有src设置地址，alt代替文本（图片加载失败时，输出的文字），title提示文本，width，height设置图片高度和宽度，border图片边框（默认无，可以用border来设置边框属性）

<a>：行内元素，有href为链接地址，target设置打开方式（_self——默认，在当前页面打开。_blank在新页面打开），还有很多其他的属性，前期用不上。
<a href=“id名”>：锚链接，是给页面的其他元素设置id和name属性，然后用链接可以直接跳到id和name所指的地方。

html列表<ul><ol><dl>：<ul>是无序列表，可以用type：来设置前面那个小圆点的样式（默认为disc实心圆，还有square实心正方形），在<ul>里面用<li>来代表列表项。
<ol>是有序列表，样式也可以用type来改（默认是1（数字1、2、3…））<li>用作列表项的定义。
<dl>是自定义列表，其中有<dt>作为列表项（没有前面丑陋的符号了），还有<dd>作为列表项的说明，（与<dt>中文字相比缩进差不多八个半的 ，…在谷歌浏览器中）
对于列表，美化是十分重要的。

html表格

（ps：行内元素的padding-top，padding-bottom和margin-top,margin-bottom是无效的
在csdn博客中输出空格是在全角状态下才可以）
先来一套表格属性
　　HTML表结构:从语义结构上划分表格为：表头、表主体、表尾
　　table标签标识表格标签
　　tr标签标识行标签
　　td标签标识单元格标签
　　th标签标识表格头部标签 自带文本居中
　　border标识表格边框属性
　　width属性设置表格宽度
　　bgcolor属性设置表格背景颜色
　　background属性设置表格的背景图片
　　caption：表格的标题
　　thead标签标识表格头部元素
　　tbody标签标识表格表体元素
　　tfoot标签标识表格表尾部分
　　cellpadding:表格中内容和单元格之间的距离
　　cellspacing:表格中单元格和单元格之间的距离
　　在默认情况下，如果不设置表格的边界，表格不显示边界的，可以用border属性设置表格边框

最常用的属性设置就是
1、设置表格居中margin: auto;
2、设置标签合并（也就是框与框之间只有一条线）：border-collapse: collapse;
3、合并行：rowspan="行数"
4、合并列：colspan="列数"
5、表格也可以嵌套

html表单

表单使用<form>定义的，在其中可以添加<input>标签
form表单的属性有：
　　Name:表单的识别名称。通过表单的名称来辨认页面提交的是哪个表单的数据。
　　Action:处理表单程序的地址。action=“index.html”
　　Method:将表单中的数据提交到服务器的方法。Method是常用的两个取值get和post。
　　
对于method，有get方法和post方法，其区别如下
　　get方法：默认的一种传递数据的方法(查询用get)，get传输速度比较快☆
　　　　　　特点：
　　　　　　　　1.通过地址来传递表单中的数据
　　　　　　　　2.不能传递敏感的数据,如:密码
　　　　　　　　3.不能传递大量的数据,每次只能传递1024字节
　　　　　　　　4.不能上传附件。☆
　　post方法:不是通过地址传递数据,数据传给文件处理程序。（增删改用post）
　　　　　　特点:
　　　　　　　　1.相对安全
　　　　　　　　2.可以传递海量的数据
　　　　　　　　3.能上传附件
所以：
１、如果表单提交是被动的(比如搜索引擎查询),并没有敏感信息，则使用get。（当你使用get时,表单数据在页面地址栏中是可见的。比如：search.html?name=john&age=25）
注：get最适合少量数据的提交，浏览器会设定容量限制。
2、如果表单正在更新数据，或者包含敏感信息。如：密码则使用Post的安全性更好，因为在页面地址栏中被提交的数据时不可见的。

input

<input>标签，有好几种type属性，有text：文本框，password：密码框，image：图片按钮，radio：单选按钮，checkbox：多选按钮，file：上传 　　等等。
在密码框中输入字符会以*的形式显现出来，从而不会泄露密码。多个单选框进行单选需要设置单选框的name值相同，多选框也是如此。如果使用上传必须把 enctype属性值改为“multipart/form-data”。

列表框

列表框由<select>定义，用<option>来定义选项，还可以在<option>中设置selected属性规定选项（在首次显示在列表中时）表现为选中状态（属性值为select）。

多行文本域

<textarea>来定义多行文本域，用rows：设置文本域可见宽度，cols：设置文本域可见高度。

提交按钮

1、<sumbit>:提交按钮——点击这个按钮,表单中的数据将会被发送到通过action属性指定的地址上
2、<reset>：重置按钮——将表单元素的值重置为默认值
3、<button>：普通按钮，又来设置点击事件，还可以设置disable属性禁用按钮

html5新特性

html新特性

首先：新的语义元素，比如 <header>, <footer>, <article>, 和 <section>。一个页面中可以有多个头部，也可以有多个尾部。
新的表单控件，比如数字、日期、时间、日历和滑块。强大的图像支持（借由 <canvas>和<svg>）
强大的多媒体支持（借由 <video> 和 <audio>）
强大的新 API，比如用本地存储取代 cookie。
<article>：定义页面独立的内容区域。
<aside>：定义页面的侧边栏内容。
<header>:定义了文档的头部区域
<footer>:定义 section 或 document 的页脚。
<nav>:定义导航链接的部分
<section>:代表独立的块，section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段
（ps：
　　1、如果article、nav、aside元素都符合某条件，那么就不要用section元素定义
　　2、一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素
　　３、section元素中的内容可以单独存储到数据库中或输出到word文档中
　　４、section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素）

html表单

新增表单type属性
color：颜色
time：时间
data：日期
email：邮箱，必须包含@符号
tel：电话（用于手机端，弹出数字键盘）
number：数字，可以设置最大最小值

htmlWeb存储

1、sessionStorage：存储数据到本地，存储大小在5m左右
　　特点：
　　　(1)数据本质是存储在当前页面的内存中，不是存储在浏览器内存中。
　　　(2)它的生命周期：当用户关闭当前浏览器窗口时数据就会被删除
2.localStorage:
　　特点：
　　　(1)存储20m
　　　(2).不同浏览器不能共享数据，同一个浏览器可以共享数据
　　　(3).存在硬盘中，永远有效，不会随着浏览器关闭而失效

两者的方法相同：
　　setItem(key,value):存储数据，以键值对的形式存储
　　getItem(key):获取数据，根据Key获取对应的数据
　　removeItem(key):删除数据，通过Key值删除
　　clear():清空所有存储数据
使用方法：
　　例：window.sessionStorage.removeItem("userName");
（ps：script中window.onload表示这个脚本在整个页面加载完才会实现）

结束此回合