HTML基础 - 常用标签

1.标题和段落标签

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

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

段落标签：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.超链接

页面跳转

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

锚点跳转

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

示例如下：

扫描二维码关注公众号，回复： 16223319 查看本文章

<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 >`	文字上标签，如：2²
`<sub >`	文字下标签，如：O₂

示例如下：

<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 >`	——

有序列表：

语法：<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>

无序列表：

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

type属性有以下几个值：

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

自定义列表：<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.块级元素和内联元素

块级元素：独占一行，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 >`	下拉菜单	包裹标签实现、 multiple(选择多行)、size(展示的行数)
`<label >`	标签	for
`<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相关联，在图像和地图间创建关系。
- 子标签，单标签，定义图片上的热点区域，实现热点区域的位置、大小及形状
  - 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属性关联