04-HTML标签详解

在本章博客中，笔者将详细的记录所有HTML中遇到的功能标签以及各种用法。

1. 标题标签

标题语义：作为标题使用，并且依据重要性递减

注：一个标题标签独占一行。

标题标签的作用类似于在写word中的一二三级标题。在html中一共提供了六种等级的标题从 h1 - h6 ，按照数字从小到大排列，数字越小级别越高，对应的字体也会越大。

    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
    <p>我是段落p</p>

下面演示下具体显示效果。

2. 段落和换行标签

2.1 段落标签

标题语义：用于定义段落，将文章分成若干段落

特点：
1.段落文字会根据浏览器窗口大小自动换行。
2.段落和段落之间保有空隙

<p>相传在一千六百多年前，荷兰巴里地方有一个老人名叫尼古拉斯，他一生最爱帮助贫穷的人家。
</p>
<p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。
</p>

2.2 换行标签

标题语义：用于文本强制换行

特点：
1.换行标签是个单标签。
2.换行标签只是简单的开始新的一行，与上下文没有行间距

注：br 或者 br/ 均可

```cpp 在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头。
然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。 ```

3. 语义化（字体格式）标签

注：推荐标签语义要比另外一个强一些。

3.1加粗标签

	<strong>推荐加粗</strong>
    <b>加粗</b>

3.2倾斜标签

	<em>推荐倾斜</em>
    <i>倾斜</i>

3.3删除线标签

    <ins>推荐下划线</ins>
    <u>下划线</u>

3.4下划线标签

    <ins>推荐下划线</ins>
    <u>下划线</u>

4. div与span标签

标题语义：两者无语义，只是一个盒子用来装内容的。

特点：
1.div 标签用来布局，但是一行只能放一个标签（大盒子）。
2.span 标签用来布局，一行可以放多个标签（小盒子）

注：div 中可以包含 span。

    <div>占据一行</div>   <div>div 2</div>
    <span>占一小格，一行可以放多个</span>   <span>span 2</span>

5. 图片标签和路径

5.1 图片标签

特点：
1. alt: 替换文本，图像显示不出来的时候用文字替代。
2.title: 提示文本，鼠标放在图像上，提示的文字。
3.width,height: 图像的宽度和高度，两者设置一个后将等比例缩放。

<img src="t5.jpg" alt="加载出错" title="我是圣诞树" width="200" >

5.2 路径

目录文件夹：存放着我们做网页所需的相关素材，例如HTML文件，图片等
根目录：打开目录文件夹的第一层就是根目录
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。简单来说就是图片相对于HTML页面所在位置

6. 超链接标签

特点：
1. href: 用于指定连接目标的url地址。
2.target: 指定链接页面的打开方式。_self（默认值）：在当前窗口打开；_blank:在新窗口中打开。

<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

链接分类：

1. 外部链接：例如：

 <a href="http://www.baidu.com"> 百度</a>

2. 内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可。例如：

<a href="index.html">首页</a>

3. 空链接：如果当时没有确定链接目标时。例如

<a href="#">首页</a>

4. 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。

5. 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。例如

	<p id="JianJie">个人简介</p>
	<a href="#JianJie"></a>

注：给要跳转的元素添加 id 号，超链接的 href 为 “#id”

6. 图片链接：点击图片跳转到指定位置或者网页。

<a href="http://www.baidu.com">
	<img src="baidu.jpg">
</a>

7. 注释、特殊字符

<!-- 注释语句 -->      快捷键：ctral + /

8. 表格标签

  注：用作数据展示使用

<table>
	<tr>
		<td>单元格内的文字</td>
	</tr>
<table>

特点：
1. table: 定义表格的标签。
2. tr: 用于定义表格中的行。
3. td:（table date）定义表格中的单元格，必须嵌套在单元格中。
4. th: 类似于tr,定义表头，内容会剧中并且加粗

注：单元格里可以放任何元素，文字链接图片等都可以

<table border="1" width="300" height="300" align=center cellspacing="0" cellpadding="3">
        <tr align=center>
            <th>姓名</th><th>性别</th><th>年龄</th><th>爱好</th>
        </tr>
        <tr align=center>
            <td>李四</td><td>女</td><td>20</td><td>羽毛球</td>
        </tr>
        <tr align=center>
            <td>张三</td><td>男</td><td>21</td><td>编程</td>
        </tr>
    </table>

注：单元格合并(写在td括号内)
行：colspan  列：rowspan

<table border="1" width="300" height="300" align=center cellspacing="0" cellpadding="3">
        <tr align=center>
            <th>姓名</th><th>性别</th><th>年龄</th><th>爱好</th>
        </tr>
        <tr align=center>
            <td>李四</td><td rowspan="2">女</td><td>20</td><td>羽毛球</td>
        </tr>
        <tr align=center>
            <td>张三</td><td>21</td><td>编程</td>
        </tr>
        <tr>
            <td colspan="4">娜美</td>
        </tr>

9. 列表标签

  注：表格用来显示数据，列表用来布局页面。

分类：
1. 无序列表：行之间没有先后顺序的排列。
2. 有序列表：行之间有先后顺序的排列。
3. 自定义列表：列围绕行做展开描述

9.1 无序列表

特点：
1. ul 标签表示HTML页面中的无序列表，一般以项目符号呈现列表选项。
2. li 标签用来定义列表中的列表项。
3. ul 标签中只能放 li 标签，不能加入其他标签或文字。
4. li 标签中可以嵌套任意标签，包括嵌套 ul 标签（li 不能嵌套 li）。
5. 无序列表带有自己的样式属性，可以使用CSS设置。

<h4>您最喜欢的实物</h4>
<ul>
	<li>榴莲</li>
	<li>臭豆腐</li>
	<li>鲱鱼罐头</li>
</ul>

<ul>
      <li>吃的</li>
      <li>喝的<ul>
              <li>可乐</li>
              <li>榴莲</li>
          </ul>
      </li>
      <li>玩的</li>
    </ul>

9.2 有序列表

特点：
1. ol 标签表示HTML页面中的有序列表，一般以数字排列形式呈现。
2. li 标签用来定义列表中的列表项。
3. ol 标签中只能放 li 标签，不能加入其他标签或文字。
4. li 标签中可以嵌套任意标签，包括嵌套 ol 标签（li 不能嵌套 li）。
5. 无序列表带有自己的样式属性，可以使用CSS设置。

<h4>比赛排名</h4>
    <ol>
        <li>第一名</li>
        <li>第二名</li>
        <li>第三名</li>
    </ol>

9.3 自定义列表

注：常用于对术语或名词进行解释和描述，定义列表项前没有任何项目符号。
特点：
1. dl 标签表示HTML页面中的自定义列表，无符号。
2. li 标签用来定义列表中的列表项。
3. dl 标签中只能放 li 标签，不能加入其他标签或文字。
4. li 标签中可以嵌套任意标签，包括嵌套 dl 标签（li 不能嵌套 li）。

10. 表单标签

注：表单是为了收集用户信息。
       一个表单由表单域，表单控件，提示信息三部分组成。

10.1 表单域

注：表单域是一个包含表单元素的区域。

<form action="url地址"method="提交方式"name="表单域名称">
	各种表单控件
<form>

常用属性：

注：
1. 写表单元素之前应该有一个表单域把他们包含起来。
2. 表单域是from标签。

10.2 表单控件

分类：

1. input输入表单元素
2. select下拉表单元素
3. textarea文本域元素

10.2.1 input表单元素

注：input 标签用于收集用户信息。

<input type="属性值" />

• input 标签为单标签
• type 属性设置不同的属性值用来指定不同的控件类型

注：除type熟悉外，input 还有其他常用属性。

• name和value 是每个表单元素都有的属性值，为后台人员使用
• name 是表单的名字，每个单选按钮和复选框都要有相同的name值
  • 相同name的单选按钮实现单选效果
  • 相同name的复选框表示为同一组
• checked 属性主要针对单选按钮和复选框，实现打开页面显示的默认值
• maxlength 是用户可以在表单元素输入的最大字符数，一般较少使用

<form>
        <!-- text 文本框 用户可以里面输入任何文字 -->
        <!-- maxlength属性 用户文本框最大可输入的字符长度 -->
        用户名：<input type="text"maxlength="6"value="请输入用户名">
        <br>用户名：<input type="text" maxlength="6" placeholder="请输入用户名">
        <!-- password 密码框 用户看不见输入的密码 -->
        <br>密码：<input type="password">
        <!-- radio 单选按钮 可以实现多选一 -->
        <!-- name属性 实现多选一 -->
        <!-- checked属性 页面打开时单选或者复选时候默认选中按钮 -->
        <br>性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<input type="radio" name="sex"
            checked="checked">人妖
        <!-- checkbox 复选框 可以实现多选效果 -->
        <br>爱好：抽烟<input type="checkbox" name="sex"> 喝酒<input type="checkbox" name="sex" checked="checked"> 烫头<input
            type="checkbox" name="sex">
        <!-- submit 提交按钮 可以通过value修改按钮显示的值 -->>
        <!-- submit 可以将表单域from里面的表单元素 里面的值提交给后台服务器 必须配合form表单域使用 -->
        <br><input type="submit"><input type="submit" value="免费注册">
        <!--reset 重置表单中所有数据 必须配合form表单域使用 -->
        <br><input type="reset"><input type="reset" value="重新填写">
        <!-- image 图片按钮 必须要用src属性 配合form表单域也可以进行提交效果 -->
        <br><input type="image" src="xxx.gif">
        <!-- button 普通按钮 -->
        <br><input type="button"value="点击">
        <!-- button 双标签 默认type值为submit(可提交) ，改为button不可提交-->
        <br><button>提交按钮</button><button type="button">不提交按钮</button>
        <!-- file 文件域 -->
        <br>请上传你美美哒头像：<input type="file">
        <!-- hidden 隐藏域 用于存放某些用户看不见的变量 配合JS使用-->
        <input type="hidden">
    </form>

实用小贴士：

• 表单元素刚打开默认显示几个文字？

  答：1.可以给这些表单元素设置value值，但是需要手动删除。
         2.使用placeholder属性添加默认显示文字，输入文字后自动消失。

用户名：<input type="text"maxlength="6"value="请输入用户名">

• 如何改变提交按钮中的字？

  答：使用value值修改。

<input type="submit" value="免费注册">

10.2.2 label标签

注：
1. label 标签为input元素定义标注。
2. label 标签用于绑定一个表单元素，当点击标签内的文本时，浏览器会自动将光标选择到对应的表单元素上，增加用户体验。

语法：

<!-- 语法一：直接嵌套 -->
<label>账号：<input type ="text"></label>
<!-- 语法二：id关联 -->
<label for="test">男</label>
<input type="radio" name="sex" id="test"/>

• label 标签的for属性应当与相关元素的id属性相同

10.2.3 select标签

注：页面中将多个选项放在下拉选项中选择。

语法：

<form>
	籍贯：
	<select>
		<option selected = "selected">请选择</option>
		<option>济南</option>
		<option>南京</option>
		<option>广州</option>
	</select>
</form>

注：
1.每个 select 中至少要有一个 option 。
2. option 中定义 selected = "selected"时，当前选项为默认值。

10.2.4 textarea 文本域标签

注：
1.当输入内容较多的时候就应该使用文本域，例如投诉建议。
2.其与 input 中 text 属性的区别是 textarea 标签可以输入大量文字并且换行处理，但是text属性只能输入一行文字。

语法：

<form>
	反馈：
	<textarea row="3" col="20">请输入要反馈内容</textarea>
	建议：
	<textarea placeholder="千纸鹤NB！"></textarea>
</form>

注：
1.被 textarea 标签包裹的文字是刷新后默认显示的文字(需要手动删除)。
2. cols：每行中的字符数，rows：显示的行数(文本框大小)
3. 可以使用 placeholder 属性实现未输入时的显示文字。