常用标签学习

最新推荐文章于 2023-08-20 11:26:25 发布

清温

最新推荐文章于 2023-08-20 11:26:25 发布

阅读量61

点赞数 1

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/m0_67554048/article/details/127212094

版权

学习目标：

学习HTML常用标签

学习内容：

一级标题

<h1>今天天气不错</h1>

二级标题

<h2>这是我的页面</h2>

三级标题

<h3>同学们你们好</h3>

2、段落标签 p

默认样式：段落与段落之间有空白的间距；

独占一行

语义：一个自然段

3、强调标签 em

默认样式：有一点斜体；没有独占一行

强调语音语调

4、强调标签 strong

默认样式：有加粗的效果；没有独占一行

强调内容的重要性

5、换行标签 br 自结束标签

6、分割线 hr 自结束标签

7、标题分组标签 hgroup

8、引用标签

9、居中标签 center

10、del标签删除标签

11、div 没有任何语义的块标签/块元素，会独占一行

12、span 没有任何语义的行内元素/行内标签一般只用来包裹文字

代码学习展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 整个页面的标题 -->
    <title>Document</title>
  </head>
  <body>
    <!-- html标签重点是关注它的语义用标签包裹 -->
    <!-- 1、标题标签  h1,h2,h3,h4,h5,h6
           默认样式：字体放大、字体加粗、独占一行了
           语义：就是个标题，h1==>h6,语义是逐步降低的
               h1的语义是最重的，一般情况一个页面只有1个h1
               常用的就是h1-h3
        -->
    <!-- 一级标题 -->
    <h1>今天天气不错</h1>
    <!-- 二级标题 -->
    <h2>这是我的页面</h2>
    <!-- 三级标题 -->
    <h3>同学们你们好</h3>
    <!-- 2、段落标签   p 
        默认样式：段落与段落之间有空白的间距；
                独占一行
        语义：一个自然段
    -->
    <p>
      辜你志身薪见巴谋姑考己，韦来家死回是了单一流特，落只德是说战说，朗大到是锐司了水丑对感谓好，变洪使雷斗说但准之罚即办而的艳生生当，陈然子法币书备他完，书谓事是才至的谭竟快通五气畴不也婵，尘学订已沫使重婵才年者，承后慷完到无他仅看非于恨说，的慷九德杨，最这。
    </p>
    <p>报定第入，的书到他。</p>
    <p>由家领愿是家预付洪何谓胆乡司了，故娟气。</p>
    <!-- 3、强调标签 em 
        默认样式：有一点斜体；没有独占一行
               强调语音语调
    -->
    <!-- 4、强调标签 strong
        默认样式：有加粗的效果；没有独占一行
              强调内容的重要性
    -->
    <!-- 面试题：em标签和strong标签都是强调标签，那它们有什么区别？
         首先默认样式、然后强调的重点不一样。
         其实在实际的开发过程，不会做这么细致的区分
    -->

    <p>同学们，你们可<em>真帅</em></p>
    <p>同学们，你们可<strong>真帅</strong></p>
    <p>同学们，你们可 <em>真</em><strong>帅</strong></p>

    <hr />

    <!-- 5、换行标签  br  自结束标签  -->
    <h1>古诗一首</h1>
    <h3>杜甫</h3>
    离离原上草，<br />
    一岁一枯荣， <br />
    野火烧不尽， <br />
    春风吹又生。<br />
    <!-- 6、分割线  hr 自结束标签 -->
    <hr />

    <!-- 7、标题分组标签  hgroup  -->
    <hgroup>
      <h1>古诗一首</h1>
      <h3>杜甫</h3>
    </hgroup>
    离离原上草，<br />
    一岁一枯荣， <br />
    野火烧不尽， <br />
    春风吹又生。<br />
    <hr />

    <!-- 8、引用标签 -->
    孔子曰：<q>学而时习之</q>

    <!-- 9、居中标签  center -->
    <hr />

    <center>
      <hgroup>
        <h1>古诗一首</h1>
        <h3>杜甫</h3>
      </hgroup>
      离离原上草，<br />
      一岁一枯荣， <br />
      野火烧不尽， <br />
      春风吹又生。<br />
    </center>
    <hr />
    <!-- 10、del标签  删除标签 -->
    原价：<del>19999元</del> <br />
    现价：1.9元

    <!-- 11、div 没有任何语义的块标签/块元素 ，会独占一行 -->
    <div>大家晚自习结束后，不要忘记打扫卫生</div>

    <!-- 12、span  没有任何语义的行内元素/行内标签   一般只用来包裹文字-->
    <span> 打扫完后，大家可以拍照发群里，大家一起监督 </span>
  </body>
</html>