HTML中常用标签

时间：2020-03-17 22:25:01 阅读：59 评论：0 收藏：0 [点我收藏+]

1.标题标签

<!DOCTYPE html>　　声明
- <!DOCTYPE html> 是 html5 标准网页声明，全称为 Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持 html5 标准的主流浏览器都认识这个声明，表示网页采用 html5，<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html> 

<!DOCTYPE HTML>

<meta charset="utf-8">　　中文编码
- 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
- 不要忘记结束标签，虽然没有结束标签页面也能正常显示

<h> 标题标签
- HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的
- <h1> 定义最大的标题， <h6> 定义最小的标题。
- <h1>这是一个标题</h1>
- 注意：
  - 请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
  - 搜索引擎使用标题为您的网页的结构和内容编制索引。
  - 因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
  - 应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My HTML</title>
    </head>
    <body>
        <h1>This is h1 heading</h1>
        <h2>This is h2 heading</h2>
        <h3>This is h3 heading</h3>
        <h4>This is h4 heading</h4>
        <h5>This is h5 heading</h5>
        <h6>This is h6 heading</h6>
    </body>
</html>

<p> 段落标签
- HTML 段落是通过标签 <p> 来定义的.
- &nbsp 表示一个空格

    <body>
        <p >这是一个段落&nbsp;这是一个段落</p>
    </body>

<em> 标签（斜体）
- <em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

    <body>
        <em>这是一个段落&nbsp;这是一个段落</em>
    </body>

<i> 标签（斜体）
- <i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字显示。

    <body>
        <i>这是一个段落&nbsp;这是一个段落</i>
    </body>

<strong> 标签（加粗）
- <strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。　　
- 如果常识告诉我们应该较少使用 <em> 标签的话，那么 <strong> 标签出现的次数应该更少。

    <body>
        <em>这是一个段落&nbsp;这是一个段落</em>
        <strong>这是一个段落&nbsp;这是一个段落</strong>
    </body>

<b> （粗体）

    <body>
        <b>这是一个段落&nbsp;这是一个段落</b>
        <strong>这是一个段落&nbsp;这是一个段落</strong>
    </body>

<font> 标签
- <font> 规定文本的字体、字体尺寸、字体颜色。　
- size 属性（可能的值：从 1 到 7 的数字。浏览器默认值是 3。）　
- color 属性，色值

    <body>
        <h1><font size="10" color="red">这是一个段落&nbsp;这是一个段落<font></h1>
        <p><font size="10" color="blueviolet">这是一个段落&nbsp;这是一个段落<font></p>
        <i><font size="10" color="#0000FF">这是一个段落&nbsp;这是一个段落<font></i>
    </body>

<br> 换行标签
- <br> 来输入空行
- <br> 标签没有结束标签

    <body>
        <b>这是一个段落&nbsp;这是一个段落</b><br><br>
        <strong>这是一个段落&nbsp;这是一个段落</strong>
    </body>

<hr> 水平线标签
- 创建水平线　　
- <hr> 标签没有结束标签

    <body>
        <b>这是一个段落&nbsp;这是一个段落</b><hr>
        <strong>这是一个段落&nbsp;这是一个段落</strong>
    </body>

<img> 图片标签
- src 属性：规定显示图像的 URL。　　　　
- alt 属性：如果无法显示图像，浏览器将显示替代文本
- title 属性：定义鼠标移动到元素上显示的文本　
- width 属性：设置图像的宽度
- height 属性：定义图像的高度　
- align 属性：规定如何根据周围的文本来排列图像
- border 属性：定义图像周围的边框

    <body>
        <img src="../project01/images/banner/banner3.jpg" alt="banner" width="1000px" height="300px" align="right" border="2px"/>
    </body>

- hspace 属性：定义图像左侧和右侧的空白　　
- vspace 属性：定义图像顶部和底部的空

    <body>
        <img src="../project01/images/banner/banner3.jpg" alt="banner" width="1000px" height="300px" align="right" hspace="200px"/>
        <img src="../project01/images/banner/banner3.jpg" alt="banner" width="1000px" height="300px" align="right" vspace="20px"/>
    </body>

<a> 链接标签
- target 属性：新窗口打开链接

    <body>
        <a href="https://www.baidu.com/">百度</a>
        <a href="https://www.jd.com" target="_blank">京东</a><br>
        <!-- 死链接 -->
        <a href="#" target="_blank">天猫</a><br>
        <!-- 带图片 -->
        <a href="https://www.taobao.com"><img src="../project01/images/activity/img4.jpg"><br>淘宝</a>
    </body>

列表标签
<ol> 有序列表标签
- 列表项目使用数字进行标记。　　
- 有序列表始于 <ol> 标签，结束于</ol> ；每个列表项始于 <li> 标签，结束于</li>标签　　
- type 属性：规定在列表中使用的标记类型，默认值 = 1
- start 属性：规定有序列表的起始值
- reversed 属性：规定列表的顺序为降序，默认为正序排列

    <body>
        <ol type="I">
            <li>水果</li>
            <ol type="A">
                <li>苹果</li>
                <li>橘子</li>
                <li>香蕉</li>
            </ol>
            <li>蔬菜</li>
            <ol type="a" start="3" reversed="reversed">
                <li>大白菜</li>
                <li>空心菜</li>
                <li>包心菜</li>
            </ol>
        </ol>
    </body>

<ul> 无序列表标签
- 此列项目使用粗体圆点（典型的小黑圆圈）进行标记。　　
- 有序列表始于 <ul> 标签，结束于</ul> ；每个列表项始于 <li> 标签，结束于</li>标签。　　
- type 属性：规定在列表中使用的标记类型
  - disc 实心圆（默认）　　
  - square 实心方正
  - circle 空心圆
  - none 取消前缀

    <body>
        <ul type="circle">
            <li>水果</li>
            <ul type="square">
                <li>苹果</li>
                <li>橘子</li>
                <li>香蕉</li>
            </ul>
            <li>蔬菜</li>
            <ul type="disc">
                <li>大白菜</li>
                <li>空心菜</li>
                <li>包心菜</li>
            </ul>
        </ul>
    </body>

<dl> 自定义列表标签
- 自定义列表不仅仅是一列项目，而是项目及其注释的组合。　　
- 自定义列表以 <dl> 标签开始，以</dl>结尾；每个自定义列表项以 <dt> 开始，以 </dt>结尾；每个自定义列表项的定义以 <dd> 开始，以 </dd> 结尾。　　
- 提示：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

    <body>
        <dl>
            <dt>水果</dt>
                <dd>苹果</dd>
                <dd>橘子</dd>
                <dd>香蕉</dd>
            <dt>蔬菜</dt>
                <dd>大白菜</dd>
                <dd>空心菜</dd>
                <dd>包心菜</dd>
        </dl>
    </body>

HTML中常用标签

原文：https://www.cnblogs.com/ZhengYing0813/p/12513781.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)