标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

     

这是一些文本。

这是一些文本。

　　

br:

标签插入一个简单的换行符。

标签是一个空标签，意味着它没有结束标签。

使用 br 元素
在文本中
换行。

　　

----------------------------------------------------------------------------
　2、图片标签

img：图片，属性：

src(路径)、width、height、border(边框)、title(鼠标悬停提示)、alt(图片描述)；

　　

-----------------------------------------------------------------------

 　**3、链接标签
**

a：超链接标签

属性：href(网址)、target(打开方式)、title(鼠标悬停提示)、name(定位锚点)，功能：链接网络资源、本地定位；

访问菜鸟教程!

　　

 ---------------------------------------------------------------------------

　　　　　4、列表标签

ul-li：无序列表，属性：type（符号的样式）；

ol-li：有序列表，属性：type、start、value；

dl-dt-dd：自定义列表；

---------------------------------------------------------------------------------------------------------------------------------------------

　　　5、表格标签

table：表格根标签，属性：border(边框)、width、height、align；

tr：一行；

td：一列，属性：rowspan(合并行)、colspan(合并列)；

th：标题；

----------------------------------------------------------------------------------------------------------------------------------------

三、html表单标签（重点）

1、form标签

form标签

属性：
name 表单名称
action 提交的路径地址
method 常用提交方式（get和post），默认是get提交

get和post的区别（重点）： (1) get提交：将数据加在地址栏的后面，格式：

file:///D:/learn/Java/MyEclipse/Workspaces/MyEclipse%202017%20CI/day01_html/WebRoot/表单标签/form.html?username=zhangsan&password=123&sex=male&hobby=football&hobby=paiqiu&city=bj#
即：?name=value&name=value…#

post提交：将数据封装在请求体中(http中会学)，格式：

file:///D:/learn/Java/MyEclipse/Workspaces/MyEclipse%202017%20CI/day01_html/WebRoot/表单标签/form.html#
即：#

**(2) get提交相对不安全，post提交相对安全。
(3) get提交有大小限制，根据浏览器不同而不同，post提交不限制大小。 **
示例：

---

2、input标签

        <input type=" "/>  
            type 根据type的值不同实现各种不同功能的表单项  
            text 普通的文本输入框  
                name="username"  
                value="张三"    <!--张三是文本输入框的默认值-->  
            password 密码输入框；特点是显示的是掩码  
                name="password"  
                value="123456" <!--123456是密码输入框的默认值-->

            radio 单选按钮  
                name 如果想让一组单选按钮互斥，就用指定相同的name属性值，再加value属性值（提交的时候用）  
                checked 默认被选中  
            checkbox 复选框（多选）  
                name 组的概念，就用指定相同的name属性值，再加value属性值（提交的时候用）  
                checked 默认被选中

            file 上传文件的控件  
            button 普通按钮，没有任何内置的功能  
                value="注册"    <!--注册是普通按钮上的默认值(名字)-->  
            submit 内置功能，点击会按照action地址提交  
            reset 重置，点击会清空之前填写的内容，恢复默认值

            image 图片按钮，功能类似与submit  
                src 加载图片  
                alt 图片的提示文字

            hidden 隐藏表单和内容，作用是在提交数据的时候，服务器需要这个数据，但是用户看不到（开发中常用）  
                <input type="hidden" name="hide" value="xxxx"/>  
                <p hidden="hidden">这是一段隐藏的段落。</p>        <!--这句话用户看不到-->  
                <p>这是一段可见的段落。</p> **注意：****开发中name属性必须要写。

**

     

用户名:

　

　 

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

3、select标签

        <select></select> 用于下拉菜单  
        属性：  
            name 表单项的名称（提交的时候用）  
        <option></option> 可选项（下拉菜单之间的级联）  
            属性：  
                value 表单项的值  
                selected 默认被选中  
        示例：  
            <select name="city">  
                <option value="bj">北京</option>  
                <option value="sh" selected="selected">上海</option>  
                <option value="gz">广州</option>  
                <option value="sz">深圳</option>  
            </select>  
            <select>  
                <option>海淀</option>  
                <option>朝阳</option>  
                <option>昌平</option>  
            </select>

     

Volvo Saab Fiat Audi

　　

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

4、文本域标签

        <textarea></textarea>  
        属性：  
            rows 行数  
            cols 列数  
       ** 注意：**  
            **默认的文本值在标签体当中。**  
        示例：  
            <textarea name="textarea" rows="20" cols="50">这是文本区域</textarea>

     

我是一个文本框。

　　

5、刷新/跳转

6、滚动

This is a slide effect

7、自动跳转

8、头标签

title：标题；

meta：配置信息，属性：name；

link：引入外部文件；

在title里添加图标：

script：JavaScript脚本程序；

style：css代码；

base：对超链接的全局设置；

------------------------------------------------------------------------------------------------------------------------------------------------------

四、html框架标签及其他

1、框架标签

        <frameset></frameset>  
        属性：  
            rows 按行划分  
            cols 按列划分  
                划分格式： rows="120,\*"  
    <frame/>  
        属性：  
            name 名称，方便target根据name值进行定位  
            src 加载的页面地址

iframe：内联框架

frameset-frame：使用该框架结构时，要删除body标签；

    **注意：  
       ** **<frameset></frameset>与<body></body>****会打架，二者不能共存。  

----------------------------------------------------------------------------**

2、其他标签

    <meta/>  
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>  
        <meta http-equiv="description" content="this is my page"/>  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>  
    <link/>  
        <link rel="stylesheet" type="text/css" href="./styles.css"/>  
            href 引入css文件的地址  
    <script></script>  
        <script type="text/javascript" src=""></script>  
            src 引入js的文件地址

pre：原文输出；

code：在页面中添加代码；

video：添加视频；

embed：添加音频；

----------------------------------------------------------------------------------------------------------------

3、特殊字符

           一个英文空格  
      >        大于号  
      <        小于号  
    ©      版权符号（圈C）  
     ®       注册符号（圈R）

------------------------------------------------------------------------------------------------------------------------------------------------

五、HTML5  Web存储

---

HTML5 web 存储,一个比cookie更好的本地存储方式。

---

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

• localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码…..
} else
{
// 抱歉! 不支持 web 存储。
}

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

     

　　

实例解析：

• 使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。
• 检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。

以上实例也可以这么写：

// 存储 localStorage.sitename = "菜鸟教程"; // 查找 document.getElementById("result").innerHTML = localStorage.sitename;

移除 localStorage 中的 "sitename" :

localStorage.removeItem("sitename");

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

下面的实例展示了用户点击按钮的次数。

代码中的字符串值转换为数字类型:

点我！

点击该按钮查看计数器的增加。

关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。

　　

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个 sessionStorage：

点我！

点击该按钮查看计数器的增加。

关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。

　　

本人原创，转载请说明出处https://www.cnblogs.com/zyx110/

如若对你有用，记得推荐，如若有误，欢迎改正!