HTML基础 - 常用标签

1.标题和段落标签

<mark>标题标签</mark>，只有h1 ~h6 这6个标题标签，字体大小依次减小。

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

<mark>段落标签</mark>：p标签

<p>
  段落内容
</p>

2.图片标签

支持图片格式：gif、jpg、jpeg、png、bmp、webp。

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo">

属性：
src：图片的资源地址，支持本地图片、网络图片；
alt：图片说明，当图片加载失败时会显示该内容
title：用于鼠标放到图片上时显示文字；

3.超链接

<mark>页面跳转</mark>

标签：<a>

<!-- 超链接 -->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_blank">新标签打开百度</a>
<a href="http://www.baidu.com" target="_parent">parent方式打开百度</a>
<a href="http://www.baidu.com" target="_top">top方式打开百度</a>

属性：

href：超链接跳转地址，可以是本地路径/相对路径、url地址，若是url地址时务必添加http或https，否则无法正常跳转页面；
target：定义超链接页面的打开方式，有以下几个值：

• _self：内容在<mark>当前页面</mark>显示
• _blank：内容在<mark>新的页面</mark>显示；
• _parent：在父窗体中打开链接，在窗口与顶级框架中，等同于_self
• _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架

<mark>锚点跳转</mark>

即页面内部位置跳转，通过给超链接的href属性设置以#{id值}的方式实现页面内部锚点跳转。

示例如下：

<p id="p0">
   <a href="#p1">锚点跳转1</a>
   <a href="#p2">锚点跳转2</a>
</p>
<p>
    ...
    <p id="p1">
        ...
    </p>
    <p id="p2">
        ...
    </p>
</p>
<p>
    <a href="#p0">回到顶部</a>
</p>

上述代码定义了几个p标签，给其设置了id值，然后给超链接a标签的属性href设置跳转锚点。

4.文本修饰标签

标签	标签功能说明
<b >	bold的缩写，文字加粗
<strong >	文字加粗，阅读时会被加重读音，推荐使用
<i >	italic的缩写，字体倾斜
<em >	字体倾斜，有加强语气
<u >	underline的缩写，文字下划线
<s>	strike的缩写，文字带删除线
<del>	delete的缩写，文字带删除线
<sup >	文字上标签，如：22
<sub >	文字下标签，如：O2

示例如下：

<p><b>b标签 文字加粗</b></p>
<p><strong>strong标签 文字加粗，阅读时会被加重读音</strong></p>
<p><i>我会倾斜</i></p>
<p><em>我会倾斜，有强调作用</em></p>
<p><u>我是下划线标签</u></p>
<p><s>删除线标签</s></p>
<p><del>del删除线标签</del></p>
<p>π * 3<sup>2</sup></p>
<p>CO<sub>2</sub></p>

5.列表标签

HTML中列表分为：有序列表、无序列表、自定义列表。

类型	标签	说明
有序列表	<ol >、<li >	有顺序
无序列表	<ul >、<li >	无序
自定义列表	<dl >、<dt >、<dd >	——

<mark>有序列表</mark>：

语法：<ol><li></li></ol>，

规定ol标签中不能有其它内容，若想添加其它内容，必须放在li标签中。

列表的序号默认为阿拉伯数字，从1开始。

可以通过ol标签的type属性进行设置序号的类型。

• 1，阿拉伯数字顺序
• A，大写字母顺序
• a，小写字母顺序
• I，大写罗马数字顺序，I、II、III、IV、V、VI、VII、VIII、IX、X ······
• i，小写罗马数字顺序，i ii iii iv v vi vii viii ······

可以通过ol标签的start属性进行设置列表的起始序号，数值形式。

如下示例：

<ol type="i" start="2">
    <li>小米</li>
    <li>华为</li>
    <li>OPPO</li>
</ol>

<mark>无序列表</mark>：

<p>无序列表</p>
<ul type="disc">
    <li>小米</li>
    <li>华为</li>
    <li>OPPO</li>
</ul>

type属性有以下几个值：

• disc：实心圆
• circle：空心圆
• none：无样式
• square：方块

<mark>自定义列表</mark>：<dl>、<dt>、<dd>
dl：definition list的缩写，定义列表；
dt：definition term的缩写，可以理解为标题，定义术语；
dd：definition description的缩写，定义描述

如下示例：

<p>自定义列表</p>
<dl>
    <dt>自定义列表的标题</dt>
    <dd>小米</dd>
    <dd>华为</dd>
    <dd>OPPO</dd>
</dl>

6.table标签

涉及标签

标签	描述
<table >	表格
<caption>	表格头部，标题
<tr >	行
<td >	单元格
<th >	单元格，文字加粗
<thead >	表格头，内包含
<tbody >	表格正文内容，内包含
<tfoot >	表格尾，内包含
<colgroup >	列分组

table属性

• border：表格边框粗细；
• cellspacing：单元格的间距；
• cellpadding：单元格的内边距；
• width：表格宽度
• height：表格高度
• align：表格在父布局中居中
• bgcolor：表格背景色
• bordercolor:表格边框颜色

td属性

• rowspan：单元格跨行的数量
• colspan：单元格跨列的数量
• bgcolor：单元格背景色
• align：单元格文字居中

示例：

<table border="1" align="center" width="600" cellspacing="0" cellpadding="0" bordercolor="#fff" bgcolor="#d8eaef" >
        <caption>阿里职级与薪资</caption>
        <colgroup span="1" bgcolor="#92c5d5"></colgroup>
        <thead bgcolor="#66a9be">
            <tr >
                <th rowspan="2">序号</th>
                <th colspan="6">技术岗与管理岗的职级薪资</th>
            </tr>
            <tr>
                <th>P序列</th>
                <th>P级名称</th>
                <th>M序列</th>
                <th>M级名称</th>
                <th>薪资</th>
                <th>股票</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <th>1</th>
                <td>P6</td>
                <td>资深工程师</td>
                <td>M1</td>
                <td>主管</td>
                <td>20W-35W</td>
                <td>几乎不授予</td>
            </tr>
            <tr>
                <th>2</th>
                <td>P7</td>
                <td>技术专家</td>
                <td>M2</td>
                <td>经理</td>
                <td>30W-50W</td>
                <td>2400股</td>
            </tr>
            <tr>
                <th>3</th>
                <td>P8</td>
                <td>高级专家</td>
                <td>M3</td>
                <td>高级经理</td>
                <td>45W-80W</td>
                <td>6400股</td>
            </tr>
            <tr>
                <th>4</th>
                <td>P9</td>
                <td>资深专家</td>
                <td>M4</td>
                <td>总监</td>
                <td>80W-100W</td>
                <td>16000股</td>
            </tr>
            <tr>
                <th bgcolor="#92c5d5">5</th>
                <td>P10</td>
                <td>研究员</td>
                <td>M5</td>
                <td>高级总监</td>
                <td>150W+</td>
                <td>20000股</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th bgcolor="#acc47a">说明</th>
                <td colspan="6" bgcolor="#d8e1c6">P-Profession M-Manager,马云在阿里的级别是M10</td>
            </tr>
        </tfoot>
    </table>

7.块级元素和内联元素

<mark>块级元素</mark>：独占一行，block块元素

常见块级元素：

• 标题元素：h1 ~ h6
• 段落元素：p
• 列表元素：ol、ul、li、dl、dt、dd
• 表格元素：table、tr、td、th、thead、tbody、tfoot、caption
• 分块元素：div

inline内联元素：不会独占一行，只占用必要的宽度。

常见内联元素：

• 文本修饰元素：b、strong、i、em、sub、sup、u、del、s
• 链接元素：a
• 换行元素：br
• 图片元素：img
• 范围元素：span

**注意：内联元素不能嵌套块级元素

8.表单

标签：<form>

form属性

• action，用来指定处理提交表单格式，通常是一个url地址或一个电子邮件地址
• method，默认为get，值为post/get，数据提交方式
• name，对表单进行标记
• enctype，数据提交给服务器时的形式，默认：application/x-www-form-
  urlencoded
• target，指定提交后文档显示位置，值：_blank、_self、_parent、_top
• accept-charset="gbk"，设置编码格式，针对非IE浏览器
• _charset="gbk"，设置编码格式，针对IE浏览器

表单标签需要放在<form>标签内使用，常用标签如下

标签	描述	属性
<input >	单行文本框	type(值参考后内容)、name、id、readonly(只读)、disable禁用
<textarea >	多行文本输入框	name、id、cols(列数)、rows(行数)
<input type="radio" >	单选框	name(控制分组)、id、checked(选中)
<input type="checkbox" >	复选框
<input type="file" >	文件选择控件
<select >	下拉菜单	包裹<option>标签实现、 multiple(选择多行)、size(展示的行数)
<label >	标签	for
<fieldset >	表单控件分组	<fieldset><legend>标题</legend><fieldset>
<button >	双标签按钮

type属性，可以分为文本输入框、密码输入框、按钮、单选框、复选框等，其值如下：

• text，普通文本输入框，默认值
• password，密码输入框，以·替代实际输入值
• email，邮件地址文本输入框
• tel，用于提供输入电话号码的文本框，tel类型通常会和 pattern属性配合使用
• url，用于输入URL地址的文本框
• number：数字输入框，value初始值，max最大值,min最小值，sep数字间隔
• button，普通按钮
• submit，提交按钮，value属性改变按钮的文本
• reset，重置按钮，value属性改变按钮的文本
• radio：单选框，通过name属性值控是否同组，checked设置选中
• checkbox，复选框，通过checked属性指定默认选中项
• image，图像形式的提交按钮，同button，通过src属性指定图像
• hidden，隐藏域对于用户是不可见的，通常用于后台的程序
• file，文件选择器
• search，用于输入搜索关键词的文本框
• color，颜色设置框，选择颜色值
• range，提供一定范围内数值的输入范围，在网页中显示为滑动条，属性类似number
• datetime，以下几个属性是日期、时间相关选择器
• datetime-local
• date
• month
• week
• time

示例：

<form action="">
        <!-- 输入框 -->
        输入文字：<input type="text">
        <br>
        敏感信息：<input type="password">

        <br>
        <!-- 多行文本框 -->
        多行文本框：<textarea name="" id="" cols="30" rows="3"></textarea>
        <br>
        <!-- 单选 -->
        选择性别：<input type="radio" name="sex" checked>男
        <input type="radio" name="sex">女

        <br>
        <!-- 多选框 -->
        选择科目：<input type="checkbox" name="subjects" id="1" checked>语文
        <input type="checkbox" name="subjects" id="2">数学
        <br>
        <!-- 下拉单选择框 -->
        下拉单选择框：
        <select name="" id="">
            <option value="1">语文</option>
            <option value="2" selected>数学</option>
        </select>
        <br>
        <!-- 下拉多选选择框 -->
        下拉多选选择框：
        <select name="" id="" multiple>
            <option value="1">语文</option>
            <option value="2" selected>

9.其它标签

• 分割线：<hr>

  • width/size：分别控制水平线的宽度和高度

  • noshade：用来去掉水平线阴影

  • color：用于定义水平线颜色

  • align：用来调整水平线水平对齐方式，默认水平居中

• 预格式化的文本：<pre>，将完全安装HTML源代码的内容显示。

• <map>，定义一个图像的映射，在不同区域实现点击不同位置的跳转

  • name，与img标签的属性usemap相关联，在图像和地图间创建关系。

  • <area>子标签，单标签，定义图片上的热点区域，实现热点区域的位置、大小及形状

    • herf：用来定义热点区域链接的目标地址

    • shape：用来定义区域的形状，取值：default(所有区域)、rect、circle、poly(多边形)

    • coords：用来定义可点击区域的坐标。与shape属性搭配使用

10.iframe

碎片化处理的，类似Android的fragment。

语法：<iframe ></iframe>

属性有：

• src：定义页面路径

• width：定义宽度

• height：定义高度

• frameborder：定义边框，默认有边框，通过设置0取消边框

• scrolling：控制是否显示框架的滚动条，值有：

  • yes，始终显示滚动条

  • auto，在需要的情况下显示滚动条

  • no，从不显示滚动条

• name：通常与<a>的target属性关联