HTML入门篇02.常用标签

大白菜·

已于 2022-08-07 13:45:08 修改

阅读量190

点赞数 6

于 2022-08-07 12:06:44 首次发布

本文链接：https://blog.csdn.net/m0_62404129/article/details/126208496

版权

常用标签：

标题标签：

h1---h6 默认样式加粗、变大 h1最大，h6最小

作用：可以帮助浏览器检索页面，推广的重要性仅次于title标签

段落标签：

行与行之间有较大间距，独占一行，是块元素。只放文字或图片

图片标签：

< img src=” ” alt= “ ” width=” ”>

src引入图片的路径 ./（在同一目录下）或../（不在同目录下）

alt对图片的描述，当引入不成功时，显示文字

width 设置图片宽度、hight 设置图片高度

注意：一般情况不会同时设置宽高，防止出现变形

设置一个宽或高，另一个设置自适应

<hgroup>标签：

用来标题分组从样式上看，加不加hgroup没有区别，但从语义上看，两者就有关系了

标签：

表示语气加重默认样式有一点点倾斜，不独占一行，行内元素

标签：

表示强调默认样式有一点点加粗，不独占一行，行内元素

blockquote标签：

引用别人的话，长引用，会换行，块元素

q标签：

短引用

<hr>标签：

分隔线自结束标签

标签：

换行标签，强制换行，自结束标签

<del>标签：

表示一个删除的内容

<center>标签：

文本居中效果

<div>标签：

用来布局，没有意义的块元素，只表示一个区块

标签：

没有语义，一般就用来包裹文字，行内元素

下面就把常用的标签都来演示一遍：

代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>02.常用标签</title>
    <style>
        div{
            background-color: aqua;
            width: 125px;
            height: 125px;
        }
    </style>
</head>
<body>
    <!-- h1到h6标签 -->
    <h1>h1标签</h1>    
    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <h4>h4标签</h4>
    <h5>h5标签</h5>
    <h6>h6标签</h6>
    <!-- 段落标签 -->
    <p>杂上年设以降作气在。</p>
    <!-- 图片标签 -->
    <img src="../../前端学习视频/02.常用H5标签笔记及作业/img/gif/hz.gif" alt="图片">
    <!-- 普通文本和strong标签对比 -->
    <p>
        措上楚三匹话关洪创。
        <strong>措上楚三匹话关洪创。</strong>
    </p>
    <!-- 引用别人的话 -->
    <blockquote>
        此的自不活，为快何人派说韩事龄面当自才杨孔，秦孔。
    </blockquote>
    <!-- 分割线标签和换行标签 -->
    <hr>
    得才拿设他见冇谓秦使说有杨得其高，<br>金尤命面死自他。
    <!-- center标签 文本居中效果 -->
    <center>
        <p>此的自不活，为快何人派说韩事龄面当自才杨孔，秦孔。</p>
    </center>
    <!-- div标签和span标签 -->
    <div>
        <P>
            <span>一山馆的。</span>
        </P>
    </div>
</body>
</html>

效果图如下：

大白菜·

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
HTML入门篇02.常用标签

h1---h6 默认样式加粗、变大 h1最大，h6最小作用：可以帮助浏览器检索页面，推广的重要性仅次于title标签行与行之间有较大间距，独占一行，是块元素。只放文字或图片src引入图片的路径 ./（在同一目录下）或../（不在同目录下）alt对图片的描述，当引入不成功时，显示文字width 设置图片宽度、hight 设置图片高度注意：一般情况不会同时设置宽高，防止出现变形设置一个宽或高，另一个设置自适应。......
复制链接

扫一扫