【HTML】常用的元素标签

【HTML】常用的元素标签

1、Html中基本的标签分类

html中标签是灵魂,基本上html中的基本标签分为三类,分为

  • 块级标签:独占一行,可以对快级标签设置宽度,高度,对齐方式等属性,设置完后依旧独占一行

    • 最经典的块级标签:div
    <!-- div中的内容换了行,说明div是块级比奥钱 -->
    <body>
    我是div外面的标签
    	<div>
        	我是div里面的标签
    	</div>
    </body>
    
    • 常见的块级标签:h1-h6、p、ul、li
  • 行内标签:不独占一行,大小不能够自己设定,设定了也没效果,大小是根据自身内容撑开的

    • 最经典的行内标签:span
    <!-- span标签中内容显示在了同一行 -->
    <body>
      <span>我是第一行的内容</span>
      <span>我还是第一行的内容</span>
    </body>
    
    • 注意:行内标签里面不能够去嵌套块级标签,除了a标签
  • 行内块级标签:结合了块级和行内标签,不独占一行,并且可以设置大小,默认的大小随着内容的撑开

    • 最经典的行内块级标签:image

2、标题标签

标签:<h1-h6></h1-h6>,数字越大表示文字字体越小

属性:(默认居左且加粗)
align = “left | center | right”

设置元素内容水平对齐方式

Html示例:

<body>
  <!--属性:(默认居左且加粗)
            align = "left | center | right"
            设置元素内容水平对齐方式
    -->
  <h1 align="center">一级标签</h1>
  <h2 align="right">二级标签</h2>
  <h3>三级标签</h3>
  <h4>四级标签</h4>
  <h5>五级标签</h5>
  <h6>六级标签</h6>
</body>

结果:

在这里插入图片描述


3、段落标签

标签:<p></p>

属性:(默认居左且加粗)
align = “left | center | right”

设置元素内容水平对齐方式

Html示例:

<body>
  <!--属性:(默认居左且加粗)
    align = "left | center | right"
    设置元素内容水平对齐方式-->
  <p align="center">
    我是居中的段落
  </p>
  <p>
      我是默认的段落
  </p>
  我是在p标签外面的
</body>

结果:

在这里插入图片描述


4、特殊的标签

  • 换行标签:<br/>

  • 水平线标签:<hr/>

    属性:

    align = “left | center | right”设置元素内容水平对齐方式
    color = “”设置水平线的颜色
    width = “”设置水平线的长度,水平方向
    size = “”设置水平线的宽度,垂直方向

    注意:HTML默认单位是像素(px),当单位为px时可以不写

Html示例:

<body>
  <!--换行标记 br -->
  <p>单独的飞机 <br/> 颠三倒四</p>

  <!-- 水平线 hr-->    
  <p align="center">我在水平线上</p>
  <hr color="red" width="500px" size="10px"/>
  <p align="center">我在水平线下</p>
</body>

5、实体字符

概念:实体字符就是当页面一些特殊的字符产生了歧义或者html不识别,就可以使用实体字符代替,实体字符都是由&开始的

&nbsp;空格
&copy;版权 ©
&gt;大于 >
&lt;小于 <

Html示例:


<body>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;/p&gt;
	版权 &copy;
</body>

结果:

在这里插入图片描述


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值