【HTML常用标签,基础篇】

一 文本标签

1. 文本标题 (h1,h2,h3,h4,h5,h6)
   如:

<h1>一级文本标题</h1>
<h2>二级文本标题</h2>
<h3>三级文本标题</h3>
<h4>四级文本标题</h4>
<h5>五级文本标题</h5>
<h6>六级文本标题</h6>

效果如下:

一级文本标题

二级文本标题

三级文本标题

四级文本标题

五级文本标题

六级文本标题

2. 文本内容需要的标签

<p>段落文本内容</p>
<b>加粗的内容</b> <!--或 --><strong>加粗的内容</strong>
<i>倾斜的内容</i> <!--或 --> <em>倾斜的内容</em>
<del>删除线</del>
<u>下划线</u>
<sup>上标</sup>
<sub>下标</sub>
<br>         <!-- 强制换行  -->
<hr>         <!--  水平线    -->

效果如下:

段落文本内容

加粗的内容 加粗的内容 倾斜的内容 倾斜的内容 删除线 下划线 ^上标 _下标

---

常用文本标签实例:

<p>相传在<b>一千六百多年</b>前，<strong>荷兰</strong>巴里地方有一个<i>老人</i>，名叫<em>尼古拉斯</em>，他一生最<del>喜欢</del>爱帮助<u>贫穷</u>的人家。<br>其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。<hr></p>

如下：

相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最喜欢爱帮助贫穷的人家。
其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。

---

上标 、下标实例:

<p>H<sub>2</sub>SO<sub>4</sub></p>
<p>5<sup>2</sup>+b<sub>2</sub>=a<sup>2</sup> </p>

效果如下:

H₂SO₄

5²+b₂=a²

二 列表标签

1. 无序列表

<!-- 空心圆 -->
     <ul type="circle">   
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    <!--实心圆  -->
    <ul type="disc">   
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    <!-- 方形 -->
    <ul type="square">   
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

例子: (无序列表的嵌套)

<ul type="disc">
    <li>米饭类
        <ul>
            <li>宫保鸡丁</li>
            <li>红烧肉</li>
            <li>茄子</li>
        </ul>
    </li>

    <li>面食类
        <ul>
            <li>老碗面</li>
            <li>烤冷面</li>
            <li>卤面</li>
        </ul>
    </li>
</ul>

效果如下:

• 米饭类
  • 宫保鸡丁
  • 红烧肉
  • 茄子
• 面食类
  • 老碗面
  • 烤冷面
  • 卤面

2. 有序列表

 <ol type="1">
       <li>有序列表</li>
       <li>有序列表</li>
       <li>有序列表</li>
       <li>有序列表</li>
    </ol>

<ol type="A">
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

<ol type="I">
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

<ol type="i">
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

有序列表嵌套有序列表
例子如下:

<ol type="1" start="3">
    <li>米饭
        <ol>
            <li>饭</li>
            <li>馒头</li>
        </ol>
    </li>
    <li>面
        <ol>
            <li>汤面</li>
            <li>拌面</li>
        </ol>
    </li>
</ol>

运行结果如下:

3. 米饭
   1. 饭
   2. 馒头
4. 面
   1. 汤面
   2. 拌面

注意: start指从第几个数开始,例子中是第三个数开始,所以是 3

3. 自定义列表

<dl>
    <dt>可以是文字也可以是图</dt>
    <dd>相关文字(对相应文字或图的描述)</dd>
</dl>

例子如下:

<dl>
    <dt>北京</dt>
    <dd>北京是首都</dd>
</dl>

效果如下:

北京

北京是首都

三 图片标签

<img src="" alt="" title="" width="" height="" >

src指图片所在地址即路径
路径分为:
绝对路径: 如D:\总结\小结
相对路径: 如 …/图片
( …/ 返回上一级
…/…/ 返回上一级的上一级(返回两级)
…/…/…/ 返回上一级的上一级的上一级(返回三级)
)
alt 指图片不显示时的文字提示
title 指鼠标悬停图片上面的提示信息
width 指图片的宽
height 指图片的高

超链接

<a href="想要跳转的目的地" target="_self"></a>

<a href="想要跳转的目的地" target="_blank"></a>

href想要跳转的目的地, 可以跳转到哪个网站, 也可以跳转到需要的文件中.

target是超链接打开的窗口, 是在原有窗口打开,还是新窗口打开.
_self 原有窗口打开
_blank 新窗口打开