HTML常用标签（示范加说明）

HTML常用标签

标题标签<h1>-<h6>

• H标签为head的缩写，作为网页标题使用
• 依据1-6字号缩减

代码范例：

<h1>一级标题</h1>

注意：

1. 加了h标签的字体会加粗
2. 一个标题独占一行

段落标签<p>

• P标签为网页中的段落标签，独占一行上下有空白行

代码范例：

<p>段落</p>

注意：

1. 上下有空白行
2. 根据浏览器窗口大小自动换行

换行标签<br />

• br是用于强制换行的单标签

代码范例：

<p>段落</p>

注意：

1. 单标签

文本格式化标签

• 文本格式化标签用于设置文本加粗、斜体、下划线等效果

注意：

1. 常用为“加粗”和“倾斜”

盒子标签<div>与<span>

• 用来装内容的盒子标签，用于网页分区使用

代码范例：

<div>每日要点</div>
<span>今日头条</span>

注意：

1. div每行只能放一个
2. span一行可以放多个

图片标签<img>

• 用来往网页中插入图片

代码范例：

    <img src="logo.jpg"/>

img标签属性:

注意：

1. src为必须属性，用于指定图片文件路径
2. 图像标签可以有多个属性，属性不分前后顺序，多个属性之间以空格分开

img的相对路径：

音频与视频标签<audio>与<video>

• 用来在网页中插入音频的标签

代码范例：

  <audio src="url"></audio>  
  <video src="url"></video>    

注意：

1. src为必须属性，用于指定音视频文件路径

2. 音视频标签可以有多个属性，属性不分前后顺序，多个属性之间以空格分开

   属性：

• 以上属性可不以键值对输入，直接加属性就可以
• “autoplay自动播放”属性在谷歌浏览器无效，配合“muted静音”属性可自动播放
• 不加“controls播放控件”网页为空

超链接标签<a>

• 用来添加网页超链接元素
• 使用“href”属性设置目标路径

代码范例：

    <a href="url">百度</a>

注意：

1. “href”属性必填
2. 可设置内部链接和外部链接
3. “href”属性内填写“#”可设置空链接
4. 默认为“_self”在当前窗口打开，设置“_blank”可在新窗口打开

表格标签<table>

• 用来制作网页中的表格
• 用来展示数据使用

表格内属性：

table标签内结构：

1. thead 表格头部
2. tbody 表格主体
3. tfoot 表格尾部

• 表格使用tr设定行
• td设定单元格
• th替换首行td设定表首行，td会居中并加粗

代码范例：

    <table border="1" width="100" height="100">
      <tr>
        <th>首行<th>
      </tr>
      <tr>
        <td>第二行<td>
      </tr>
    </table>

注意：

1. 跨行合并：使用rowspan属性写在合并的第一个单元格中，再删除合并的单元格
2. 跨列合并：使用colspan写在合并的第一个单元格中，再删除合并的单元格

表单标签<input>

• 写在form里用来收集用户信息的一系列表单控件

• 用来展示数据使用

input属性：

type属性内容：

表单相关标签：

• select 下拉框双标签

  • 标签内使用option设置下拉选项
• textarea 文本域双标签

• label 绑定控件标签

  • 使用for属性与input中id属性进行绑定
  • 使用标签包含控件，删除for属性

代码范例：

    <form>
        文本框：<input type="text">
        多选框：<input type="radio">
    </form>