HTML常用标签_html中dd标签双标签还是单标签-CSDN博客

本文链接：https://blog.csdn.net/qq_43547725/article/details/133801466

2.特点上 :块标签、行内标签、行内块标签

一、常用标签

1.标题标签 h1~h6

语义：表示一个标题

可以帮助推广部门推广，其中h1语义最重，一般情况下一个页面只用一个h1。最常用的是 h1~h3

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

2.段落标签 p

语义：表示一个段落

默认样式：行与行之间有间隔，独占一行

注意：p标签里一般只放文本或图片

     <p>
         斯长低量，到未时向气可真妄订人地王斯后。
     </p>
     <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, sunt.
     </p>
     <p>
         明小的币珍后那上是。
     </p>

3. 强调标签 strong em

strong 文字加粗强调

em 文字倾斜强调

<strong>你好</strong>
<em>hello</em>
你们<em>很</em><strong> 没意思</strong>

strong em都是强调标签，区别是什么

1.默认形式有区别

2.语义有区别

strong强调文本内容

em强调语音语调

实际开发过程中，一般不作区分

4.居中标签 center

语义：使内容居中

默认样式：独占一行

<center>
        <h1>乌刑连措</h1>
        <p>自国是秦，话融严少招的真好真乏第，你说今六下其，明侯程身们燕师马书洪变事快是者易化他， 
           斗谭话，普未。
        </p>
</center>

5.强制换行 br

<p>付我么了不太又报尝倒的谭拿的，<br>
   过作尝在作，<br>
   内自得是沉有定他韦，<br>
   郭说方担向创而己范，感交望变明沾你所盲小说是我前，一得天活连一应即导极他罪。
</p>

6.分割线 hr

7.删除线 del (不会独占一行)

<del>99999</del>
<del>88888</del>
<hr>

8.没有任何语义的标签

div: 独占一行

span : 不会独占一行

<div>专份策家略劫战弟就。</div>
<div>感路褒娘而升锐，要。</div>
<span>作而小为。</span>
<span>你用丈且。</span>

二、标签分类

1.形式上：单标签、双标签

单标签：有<br>、<hr>、<img>、<input>、<param>、<meta>、<link> ...

双标签：有<html>、<head>、<title>、<body>、<table>、<tr>、<td>、<span>、<p>...

2.特点上 :块标签、行内标签、行内块标签

块标签（块元素）：主要用来布局

1.会独占一行

2.默认情况，块标签宽度是父元素的100% ，高度是被内容撑开的

3.可以设置高度

例如：div h1~h6 p center ...

行内标签（行内元素）：主要用来包裹文字

1.不会独占一行

2.默认情况，行内标签宽度和高度是被内容撑开的

3.不可以设置高度和宽度，宽度和高度只会被内容撑开

例如：a span strong em del ...

行内块标签

1.兼具块标签和行内标签的特点，即不会独占一行，可以设置宽高

2.标签和标签之间大概3像素的空白间隙

例如：img

标签布局注意点：

1.块元素里可以放任何内容，包括块元素、行内元素、行内块元素

2.行内元素里面一般只放文字，不能放块元素

3.特殊块元素 <p>，里面只放文字或图片，不能放块元素

4.特殊行内元素 <a> ，里面什么都能放

元素之间相互转换

display: block ;

display 可选值:

block 将元素转为块元素

inline 将元素转为行内元素

inline-block 将元素转为行内块元素

none 将元素去除

三、结构标签

html5 新增的结构标签，用来布局，都是块标签

head (网页头部区域)

main (网页主题区域)

footer (网页底部区域)

nav (网页导航区域)

aside (网页侧边栏)

article (网页文章区域)

section (表示一个区块，没有特殊语义，类似 div )

新标签语义很清晰，浏览器解析速度会更快，效率更高

四、列表标签

1.有序列表

用 < ol >创建，< li >表示每个列表项

默认样式：默认加项目符号，列表项前面有一定间距

    <h3>起床三件事</h3>
    <ol type="1">
        <li>穿衣</li>
        <li>洗漱</li>
        <li>吃饭</li>

    </ol>

2.无序列表

用< ul >创建，< li >表示每个列表项

默认样式：默认加黑心圆点，列表项前面有一定间距

    <h3>超市购物</h3>
    <ul type="disc">
        <li>牙膏</li>
        <li>牙刷</li>
        <li>毛巾</li>
    </ul>

3.定义列表

用< dl >创建，< dt >表示下定义，< dd > 表示具体内容

    <h3>课程介绍</h3>
    <dl>
        <!-- 下定义 -->
        <dt>web前段</dt>
        <dd>html/css</dd>
        <dd>js</dd>
        <dd>vue</dd>
        <dt>java课程</dt>
        <dd>java 基础</dd>
        <dd>JavaWeb</dd>
    </dl>

五、img标签

img标签引入图片

src ：指向图片引入的路径

绝对路径：线上固定网址图片

相对路径：下载下来，在电脑里的图片

alt ： 对图片的描述，当图片引入不成功的时候，文字会出现

有助于推广部门推广，浏览器收录图片时会对照alt属性

width 设置图片宽度

height 设置图片高度

<img src="" alt="">

img{
      width: 100px;
      height: 80px;
}

注意：一般情况下不会同时设置width属性何height属性，防止图片变形，只会设置其中一个，另一个浏览器会自适应调整比例。

六、超链接

可以被点击，有一定功能的部分，可以是文字、图片，也可以是一个段落...

功能：

1.可以从一个页面跳转到另一个页面

2.可以再当前页面进行跳转（锚点功能）

3.下载

属性：

href属性：指向跳转的网址

绝对路径：已经上线的固定网址，跟文件所处的位置无关

相对路径：程序员自己写的电脑里还没固定网址的页面，跟文件所处的位置有关

./ 文件所处的位置跟你要跳转的位置在同一个目录下（./ 可省略）

../ 文件所处的位置跟你要跳转的位置不在同一个目录下，跳出当前文件夹，来到

上一级目录下，若上一级目录下没有跳转地址，继续../，只到寻找到跳转页面为止

target属性：控制超链接打开方式

可选值：_self 在当前页打开超链接跳转页面

_blank 新开页面打开超链接页面

锚点功能：

回到顶部 <a herf="#">回到顶部<a>

去任意位置

第一步：在对应位置打一个id属性，配置一个id属性值

第二步：在超链接herf属性值里输入 #id属性值

注意：id属性值不能以数字开头，最好不要写汉字（不规范）

HTML常用标签

一、常用标签

1.标题标签 h1~h6

2.段落标签 p

3. 强调标签 strong em

4.居中标签 center

5.强制换行 br

6.分割线 hr

7.删除线 del (不会独占一行)

8.没有任何语义的标签

二、标签分类

1.形式上：单标签、双标签

2.特点上 :块标签、行内标签、行内块标签

三、结构标签

四、列表标签

1.有序列表

2.无序列表

3.定义列表

五、img标签

六、超链接

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