HTML标签

HTML是一种超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括”头”部分（英语：Head）、和”主体”部分（英语：Body），其中“头”部提供关于网页的信息，”主体”部分提供网页的具体内容。

为什么要学习HTML？
浏览器渲染时使用一套HTML规则，所以我们要学习这套规则。

一、HEAD标签
(1)meta标签
主要是用来编码、跳转、刷新、定义关键字、描述

<meta charset="UTF-8">   <!--编码--><meta name="keyword"   content="介绍" />    <!--定义关键字--><meta name="description"  content="介绍"/>   <!--描述--><meta http-equiv="Refresh" content="3;URL='http://www.baidu.com'"/>  <!--刷新和跳转--><meta http-equiv="X-UA-compatible" content="IE9;IE8;..." />  <!--兼容IE浏览器用的，content内容依次匹配-->

(2)非meta标签

#title标签<title>title名称</title>#link标签<link rel="icon" href="images/favicon.ico" />   <!--title头部小图标--><link rel="stylesheet" href="css样式文件的地址"/>  <!-- 引入css样式-->

二、BODY的标签
(1) 块级标签
(2)内联标签；也叫做行业标签

备注：
块级标签特征：独占一行；内联标签特征：只是选中部分

三、 块级标签

<h1></h1>      <!-- h系列从h1到h6,使字体变黑变大变粗--><div></div>    <!-- 白板--><p></p>        <!--隔行和换行--><br />   <!-- 换行，自闭和标签--><hr />   <!--下划线，自闭和标签-->#列表的标签(1)无序列表<ul>      <li>内容</li></ul>(2)有序列表<ol>    <li></li></ol>(3)定义列表<dl>    <dt></dt></dl>#表格：border设置边框粗细，cellspacing外边距，cellpadding内边距<table border="1px" cellspacing="0" cellpadding="0">    <thead>    <tr>        <th>标题</th>    </tr>    </thead>    <tbody>    <tr>        <td>内容</td>    </tr>    </tbody></table>

1、table标签(表格)
(1)横向合并单元格 (colspan)

<table border="1px" >    <thead>    <tr>        <th colspan="2">标题</th>    </tr>    </thead>    <tbody>    <tr>        <td>内容1</td>        <td>内容1</td>    </tr>    </tbody></table>

(2)总向合并单元格 (colspan)

<table border="1px" >    <thead>    <tr>        <th>标题1</th>        <th>标题2</th>    </tr>    </thead>    <tbody>    <tr>        <td rowspan="2">内容1</td>        <td>内容2</td>    </tr>    <tr>        <td>内容2</td>    </tr>    </tbody></table>

三、 内联标签

<span></span>    <!-- 白板--><input />        <!--用户输入--><a href=""></a>   <!--跳转--><img src="" />    <!--图片--><select><option></option></select>     <!--下拉框--><textarea name="test">默认值</textarea>  <!--多行输入数据-->#特殊符号&nbsp;   #空格&gt;     #大于&lt;     #小于&ge;     #大于等于&le;     #小于等于

1、form表单 和 input标签

<form action="url" method="get/post" enctype="multipart/form-data" >    <!--placeholder设置默认值-->    <input type="text" name="username" placeholder="用户名"/>      <input type="password" name="passwd" placeholder="密码"/><!--单选，设置value主要是向后台提交数据的时候用-->    <input type="radio" name="sex" value="1">    <input type="radio" name="sex" value="2"><!--多选，设置默认值checked="checked"，如果不设置value属性，我们在查看其属性的时候为on-->    <input type="checkbox" name="hobby" checked="checked" value="1">    <input type="checkbox" name="hobby" value="2">    <input type="checkbox" name="hobby" value="3">    <input type="checkbox" name="hobby" value="4"><!--上传文件，如果想将文件提交到后台必须在form表达中加上enctype="multipart/form-data"-->    <input type="file" name="test"><!--按钮，单纯的button没有任何意义-->    <input type="button" value="+">    <input type="submit" value="提交">    <input type="reset" value="重置"></form>

备注：
(1)action为向后台url的地址
(2)method方法

get:将用户输入的内容以URL方式提交      #在url后面加上?user=www&passwd=123456post:将用户输入的内容放到body里面提交

2、textarea标签 (多行数据输入)

<textarea name="test">默认值</textarea>

备注:
name的值 是将输入内容提交到后台的名称

3、select标签

<!--#下拉框--><select>    <option>北京</option>    <option>上海</option></select><!--#多选选项，设置默认值selected="selected"--><select name="city" size="10px" multiple="multiple">    <option value="1">北京</option>    <option value="2" selected="selected">上海</option></select>

4、a标签 (超链接和锚的作用)
(1)超链接

<!--设置_blank是在新的标签页打开--><a href="http://www.baidu.com" target="_blank">百度</a>

(2)锚

<!--点击标签跳转到对应的章节--><a href="#i1">第1章</a><a href="#i2">第2章</a><a href="#i3">第3章</a><div id="i1" style="height: 60px">内容1</div><div id="i2" style="height: 90px">内容2</div><div id="i3" style="height: 70px">内容3</div>

5、img标签

<!--点击图片跳转到百度，tile是当鼠标放到图片上显示的标题，alt是当图片不显示的时候下面的框显示的内容--><a href="http://www.baidu.com">    <img src="url" style="height: 50px;width: 20px;" title="图片" alt="美女"></a>

四、 很少用的标签
1、lable标签
lable标签一般和input标签连用

<label for="username">用户名：</label><input id="username" type="text" name="user" />

备注：
lable的for属性和input的id属性做了关联

2、fieldset标签

<fieldset>    <legend>登陆</legend>    内容</fieldset>