html常用元素细说1

文本与链接

文本元素

标签 描述
<p> 段落内容
<pre> 按源码格式原样显示
<br> 换行(源码中的换行会被解析来空格)
<span> 与<div>类似,无语义, 主要用作内容的样式钩子
<time> 描述日期或时间
<abbr> 缩写
<sub> 下标
<sup> 上标
<address> 地址,通常用在<footer>中
<s> / <del> 删除线, <s>无语义
<code> 显示代码块,通常与代码格式化插件配合,才能高亮关键字
<progress> 进度条
<b> / <strong> 加粗, <b>无语义
<i> / <em> 斜体, <i>无语义
<mark> 高亮标记, 默认为内容添加黄色背景
<q> / <blockquote> 引用, 内容加双引号
  1. <p>标签
    <p>这是一个段落标签</p>
  2. <pre>标签
    <!--值得注意的是pre标签之中的内容会被预格式化，也就是说pre标签内的内容可以被当做源码来进行解析。例如&lt；&gt
可直接转化为<;>符号-->
<pre>&ltpre标签源码格式展示&gt</pre>

    图片展示：
    pre.png

  3. <br>标签
    <p>这是上一行<br>这是下一行</p>

    图片展示：
    br.png

  4. <span> 标签
    <!--<span>与`<div>`类似,无语义, 主要用作内容的样式钩子，在无样式的情况下类似于一个段落-->
<span>与div类似,无语义, 主要用作内容的样式钩子</span>
  5. <time>标签
    <time>2020-09-30</time>

    图片展示：
    time.png

  6. <abbr>标签
    <!--title="文本或内容（鼠标放上去的提示语）"
<abbr title="这是我的第二次作业">第二次作业abbr标签</abbr>

    图片展示：
    abbr.png

  7. <sub>标签
    <p>2<sub>1</p>

    图片展示：
    sub.png

  8. <sup>标签
    <p>2<sup>1</sup>=2</p>

    图片展示：
    sup.png

  9. <address> 标签
    <p>地址：<address>中国大陆</address></p>

    图片展示：
    address.png

  10. <s> / <del>
    <p>苹果11pro不要<s>11000</s>元也不要<del>100</del>元，现在免费领取</p>

    图片展示：
    PS:第一个11000为<s>的删除线效果，第二个100为<del>的删除线效果
    删除.png

  11. <code>标签
    PS:文本内容将显示为等宽、类似电传打字机样式的字体。
    <code> print("hello python") </code>

    图片展示：
    code.png

  12. <progress> 标签
    <!--max是进度条的总长，此处设定为100%。value为当前进度50%-->
<!--但是如果浏览器不支持进度条的话，就只会显示一个文本：已完成50%-->
<progress max="100" value="50">已完成</progress>

    图片展示：
    progress.png

  13. <b> / <strong>标签
    <b>加粗效果展示1</b><br />
<strong>加粗效果展示2</strong>

    图片展示：
    加粗.png

  14. <i> / <em> 标签
    <em>斜体效果展示1</em><br />
<i>斜体效果展示2</i>

    图片展示：
    斜体.png

  15. <mark> 标签
    <p>高亮效果展示：<mark>这里面是高亮的</mark></p>

    高亮.png

  16. <q> / <blockquote>标签
    <p>后面这句话加双引号：<q>给我加</q></p>
<p>后面这句话引用blockquote标签：<blockquote>给我加333</blockquote></p>

    图片展示：
    引用.png

最后修改：2020 年 10 月 30 日 03 : 47 PM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏