前端学习之基础篇——标签（一）

最新推荐文章于 2022-08-03 19:52:38 发布
最新推荐文章于 2022-08-03 19:52:38 发布
阅读量659 收藏 2
点赞数
分类专栏： 前端学习篇 标签 基础篇 文章标签： html css html5 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/emmmmm__/article/details/111143793
版权

前端学习之基础篇——标签（一）

一、本章简介

标签分为三类：块级标签、行内标签、行内块标签

标签的嵌套规则与转换

二、块级标签

1、列举

<div></div>  <p></p> 

<h1></h1>……<h6></h6> 

<ul> <li></li> </ul>  <ol> <li></li> </ol>

<dl> <dt></dt> <dd></dd> </dl>

2、特点

  • 总是从新行开始

  • 高度、行高、内边距、外边距 可以控制

  • 宽度默认是容器的100%

  • 可以容纳内联标签和其他块级标签

3、应用

1、<div></div>  <p></p>  <h1></h1>……<h6></h6> 

<body>
    <!-- 块级标签特点：默认独占一行，垂直上下排列 -->
    <!-- div默认没有任何多余样式 -->
    <div>我是一个div</div><div>我是一个div</div>

    <!-- 段落标签：自带外边距 -->
    <p>段落</p>
    <p>段落</p>

    <!-- 标题标签：自带字体大小和加粗效果 -->
    <!-- h1 一个文档最多只能拥有一个 -->
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>
</body>

2、<ul> <li></li> </ul> 

<body>
    <!-- 
        无序列表
            1、块级标签
            2、结构ul>li
            3、前面默认自带圆点符号
            4、list-style-type:none; 可以去掉圆点符号
     -->
     <ul>
        <li>小蓝</li>
        <li>小绿</li>
        <li>小红</li>
        <li>小黄</li>
        <li>小棕</li>
        <li>小紫</li>
        <li>小青</li>
     </ul>
</body>

3、<ol> <li></li> </ol>

<body>
    <!-- 
        有序列表
            1、块级标签
            2、结构ol>li
            3、前面自带1、2、3、4
            4、list-sytle-type:none;可以去掉符号
        自带属性
            type
                1 A a I i
            start
                设置起始值，需为数字
            reversed
                设置为倒数
     -->
    <ol type="1" start="5" reversed>
        <li>小蓝</li>
        <li>小绿</li>
        <li>小红</li>
        <li>小黄</li>
        <li>小棕</li>
        <li>小紫</li>
        <li>小青</li>
    </ol>
</body>

4、<dl> <dt></dt> <dd></dd> </dl>

<body>
    <!-- 
        自定义列表
            1、块级标签
            2、dl > dt或dd
            3、dd自带外边距
     -->
     <dl>
         <dt>html</dt>
         <dd>结构层</dd>
         <dt>css</dt>
         <dd>表示层</dd>
         <dt>html</dt>
         <dd>行为层</dd>
     </dl>
</body>

 

三、行内标签（内联标签）及特点

1、列举

<span></span>

<b></b>  <strong></strong>

<i></i>  <em></em>

<s></s>  <del></del>

<u></u>  <ins></ins> 

<sub></sub>  <sup></sup>

<a href="链接路径"></a>

2、特点

  • 会和其他行内标签处在同一行
  • 高、宽无效，内边距、外边距水平方向有效，垂直方向无效
  • 默认宽度就是他本身内容的宽度
  • 只能嵌套文本和其他行内标签

3、应用

  • <body>
    <!-- 
        行内标签特点：
            默认在一行排列，当一行排不开时会折行
            行内标签换行默认会解析一个空格
     -->
    <!-- span 最常用的行内标签，没有任何多余的样式 -->
    <span>span标签</span>
    <span>span标签</span>

    <!-- strong b 加粗标签：strong具有语义化，b不具有语义化 -->
    <strong>你好</strong>
    <b>你好</b>

    <!-- em i 斜体标签：em标签具有语义化，i标签不具有语义化 -->
    <em>你好</em>
    <i>你好</i>

    <!-- del s（基本淘汰） 删除标签：del标签具有语义化，s标签不具有语义化 -->
    <del>你好</del>
    <s>你好</s>

    <!-- ins u 下划线标签：ins标签具有语义化，u标签不具有语义化 -->
    <ins>nihao</ins>
    <u>nihao</u>

    <!-- sub 下标字 -->
    H2O
    H<sub>2</sub>O

    <!-- sup 上标字 -->
    2<sup>2</sup>+2<sup>3</sup>=12
</body>

 

 

运行结果：

  • <head>
    <!-- 改变默认样式 -->
    <base target="_blank">
</head>
<body>
    <!-- 
        链接标签：关键字是 a ( anchor )
            自带属性：
                href 链接的路径（如果链接是网络路径，要加http://或者http://）
                target 打开链接页面的方式
                    _self 当前页面打开，默认
                    _blank 新页面打开
     -->
     <a href="http://www.baidu.com" target="_self">百度</a>
     <a href="http://www.taobao.com" target="_blank">淘宝</a>

     <!-- 同级目录链接 -->
     <a href="./01-css属性.html">css属性</a>

</body>

     

四、行内块标签

1、列举

<img></img>

<td></td>（此为表格单元格，会在表格章节列举）

<input>（此为表单内输入标签，为空标签，会在表单章节列举）

2、特点

  • 与相邻的行内标签处在同一行上，但之间会有白色缝隙（换行的时候有）
  • 高度、行高、内边距、外边距可以控制
  • 宽度就是他本身内容的宽度

3、应用

<body>
    <!-- 
        图像标签 img
        自带属性：
            src 引入文件的路径
                绝对路径
                    网络路径 http:// https://
                    本地磁盘路径 C:/ D:/

                相对路径
                    同级目录下 ./(可以省略)
                    上级目录 ../(上上级目录 ../../)

                alt 友好提示
                title 鼠标悬停时展示
                width 图片宽度，只设置宽度时，高度会等比例缩放
                height 图片高度

     -->

     <!-- 网络路径 -->
     <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607336951547&di=5fb56a8628d0cf32cc8fdee532365730&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg" alt="">

     <!-- 本地磁盘路径 -->
     <img src="D:\一个有趣的库\图\001.jpg" alt="" title="小和尚" width="500px">

     <!-- 同级目录 ./ -->
     <img src="./002.jpg" alt="" width="500px" title="我是玫瑰左左">

     <!-- 上级目录 ../ -->
     <img src="../002.jpg" alt="" width="500px" title="我是玫瑰右右"> 
     <img src="../003.jpg" alt="图片加载失败">

</body>

 

五、其他标签

1、列举

<br>  <hr>

2、应用

<body>
<!-- 其他标签 -->
    <!-- br 换行标签 -->
    <p>
        鹅鹅鹅，<br>
        曲项向天歌，<br>
        白毛浮绿水，<br>
        红掌拨清波。
    </p>

    <!-- hr 水平分割线 -->
    <hr>
</body>

 

六、标签的嵌套规则

  1. h、p 只能嵌套其他行内标签或文本，不能嵌套其他块级标签
  2. a 标签是特殊的行内标签，可以嵌套除 a 之外的任何标签
  3. 其他行内标签只能嵌套行内标签或文本，不能嵌套块级标签
  4. ul 和 ol 的子标签必须是 li

 

七、标签的转换

  • 块转行内：display : inline;

  • 行内转块 ： display : block;

  • 块、行内转行内块 ： display : inline-block;

    <head>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: burlywood;
            display: inline;
            /* 
                转换为行内块
                display；inline-block
             */
             display: inline-block; 
        }
        span{
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            display: block;
            /* 
                转化为块级
                display:block;
             */
        }
        img{
            width: 200px;
            height: 200px;
            /* display: inline-block; */
        }
    </style>
</head>
<body>
    <!-- 
        块级 display:block;
        行内 dispaly:inline;
        行内块 display:inline-block;
     -->
     <div>div</div>
     <div>div</div>
     <div>div</div>
     <span>span</span>
     <span>span</span>
     <span>span</span>
     <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1282406071,187117223&fm=26&gp=0.jpg" alt="">
     <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1282406071,187117223&fm=26&gp=0.jpg" alt="">
     <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1282406071,187117223&fm=26&gp=0.jpg" alt="">
</body>

     

     

     

     

     

     

     

     

     

梨花不负韶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dl和dt标签是什么意思_HTML dt标签教程和示例
cunjiu9486的博客
10-14 6418
dl和dt标签是什么意思HTML provides the <dt> element in order to add a term in description or definition list. <dt> element is used inside a <dt> element and generally followed by a <dt>...
前端基础学习笔记（一）
qq_40484618的博客
02-01 223
HTML + CSS基础 课程简介 软件的架构 C/S – 客户端/服务器 软件使用前必须在本地安装 软件更新时，服务端和客户端同时需要更新 软件客户端不能跨平台使用 客户端和服务器通信采用的是自由协议，相对比较安全 B/S – 浏览器/服务器 软件不需要安装，直接使用浏览器访问指定的网址即可 软件更新时，客户端不需要更新 浏览器可以跨平台，只要系统中有浏览器，就可以使用 浏览器和服务...
前端学习之基础篇——盒模型
小绿的博客
12-13 183
前端学习之基础篇——盒模型 一、简介 概念、内容 content、内边距 padding、边框 border、外边距 margin 二、盒模型 1、概念 css盒模型本质是一个盒子，封装周围的html标签 2、内容 content width: 设置宽度 height: 设置高度 3、内边距（填充区域）padding 单边内边距：padding-top padding-bottom padding-left padding-right 简写 : 一个值：表示四个方向的内边距.
HTML标签dl dt dd用法简介
qq_43511299的博客
09-13 1565
我们知道，在使用HTML列表时，有无序列表<ul>，有序列表<ol>，这两种列表的列表项都是用的<li>。 至于<dl>，是一种自定义标签。 自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。 <dl> <dt>Coffee</dt> <dd>Black hot d
html中的<DL><DT>标签
litchoi的专栏
12-01 694
dl标记：定义列表（definition list） dt标记：定义标题（definition title） dd标记：定义描述（definition description） dl dt dd是一个组合型标签。dl标记定义了一个定义列表，定义列表中的条目是通过使用dt标记和dd标记创建的。dt给出了术语名，dd标记给出了术语的定义。 dt dl元素前有段空白，可通过style="marg
9、HTML：有序列表（ol），无序列表（ul），描述列表（dl、dt、dd）详解
热门推荐
qq_43535992的博客
02-01 1万+
1、什么是列表 什么是列表？ 什么是有序列表？ 什么是无序列表？ 上面写的 3 句话就是一个列表，你懂得。。。 2、有序列表 有序列表：英文叫做 ordered list，所以标签也是取这个词组的首字母 ol。ol标签括起来的范围就是有序列表的范围，而里面的每一项都是一个list（列表项），所以，也是取这个单词的一部分，li，作为标签名。如下： <!--有序列表--> &lt...
web前端基础知识——HTML常用标签篇
01-08
二、HTML常用标签的学习： head标签 头标签 title标签 显示在网页的选项卡区域 body标签 显示网页的所有内容 meta标签 信息标签 charset=utf-8 meta 标签在head里面 标注当前网页的编码格式 utf-8
vue初学者资料基础篇和项目学习
03-19
Vue.js 是一款轻量级的前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。Vue的基础教学和项目实践是学习过程中至关重要的部分，对于初学者来说，掌握这些内容能帮助快速上手并深入理解Vue的核心...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
最新发布
01-20
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
HTML5+CSS3 Web前端设计基础教程-PPT.rar
06-22
这篇教程——"HTML5+CSS3 Web前端设计基础教程-PPT"，显然是一个旨在帮助初学者和进阶者理解这两种语言基本概念和实践应用的资源。 HTML5（超文本标记语言第五版）是网页内容的结构化标准，它增强了对多媒体的支持...
第十一个范例——Button家族
03-05
这篇名为“第十一个范例——Button家族”的博文深入探讨了按钮组件的各种类型及其在不同场景下的应用。博主lwj9922在iteye博客上分享了关于按钮设计和实现的详细知识，这对于我们理解UI设计和编程实践具有重要意义。...
dl dt dd 用法
11-12 1万+
 释义：    dl: Definition List (定义列表)    dt: Definition Term （定义项）    dd: Definition Description （定义描述）作用：    dl表示一个定义列表    dt表示一个定义的名称，可以理解为词典中的条目    dd 表示对一个定义的解释，可以理解为词典中对条目的解释。注意：    这三个标签必须同时出
html[css盒子模型、块级标签、行内(内联)标签、行内块标签，自闭合标签]
墨水白云的博客
03-17 1241
关于css盒子模型 用一句话概括就是： css盒子模型是一个拥有margin(外边距)、border(边框)、padding(内边距)、和content(内容)的盒子，用来封装周围的HTML元素。 可以通过box-sizing属性改变盒子模型的结构 box-sizing: content-box | padding-box | border-box(又称IE怪异盒模型) 1.标准的盒子模型 box-sizing:content-box(默认值)。 此时： width宽度 = content(内容宽度)
＜dl＞、＜dt＞、＜dd＞ 的使用
琳琳的博客
05-07 3689
<dl>、<dt>、<dd>这三个html标记是一个组合，它们很很像<ul><li>这个标签组合，但<dl>、<dt>、<dd>通常是用来描述一些术语定义，比如附录里的词汇表，或用来显示key-value这样成对的键和值。 <dl>、<dt>、<dd>通常被称为定义性列表。 用于一个术语对应一条解释或定义 <dl> <dt>Firefox&l
02块级标签和内联标签的区别
m0_51453764的博客
03-21 907
块级标签和内联标签的区别 块级标签：宽度和内容有关 1）每一个块级标签独占一行，可以实现自动换行 2）有多个块级标签存在时，默认的排列方式从上往下 3）设置宽高有效 4）可以容纳内联元素或者其他元素 内联标签：内联标签在不设置宽度的情况下，宽度始终和浏览器宽度保持一致 1）不会自动换行 2）出现多个内联标签时，默认的排列方式是从左往右 3）设置宽高无效 4）只能容纳内联元素 常见的块级标签： <!DOCTYPE html> <html lang="en"> <head>
html标签——内联标签(行内元素)
dhx36675的博客
09-18 1701
阅读目录 字体 粗体 斜体 上下标 划线 b em sup del strong i sub u 排版 span br 超链接 a 图片 img 回到顶部 字体标签 粗体标签<b>或<strong>(已废弃) 示例： 娃哈哈 <b>娃哈哈</b> <str...
前端之dl dt dd vs tr td th
basycai的博客
01-07 4952
dl dt dd认识及dl dt dd使用方法  标签用于定义列表类型标签。 dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一、dl dt dd认识   -   TOP html 是一组合标签，使用了dt dd最外层就必须使用dl包裹，此组合标签我们也又叫表格标签，与table表格类似组合标签，
Web前端开发——HTML之HTML标签（Ⅵ）语义化 em、strong、dl、dt、dd、
wq_ocean_的博客
02-01 868
目录 1. Web语义化 2. em和strong标签 2.1 测试代码 2.2 效果图 3. 自定义列表dl、列表项dt、 描述dd 3.1 测试代码 3.2 效果图 1. Web语义化 让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容 2. em和strong标签 2.1 测试代码 <!DOCTYPE html> <html la...
前端面试那些事【dt/dd、audio、onerror、标签、类、ID选择器、伪类选择器......
qq_46906413的博客
08-03 1505
列表项为"这是dt标签"且列表项内容也为"这是dd标签"的自定义列表。 < dt > 这是dt标签 < dt /> < dd > 这是dd标签 < dd /> < dd > 这是第二个dd标签 < dd /> < dt > 这是dt标签 < dt /> < dd > 这是dd标签 < dd /> < dd > 这是第二个dd标签 < dd /> ......
groovy 字符串截取最后一个_Java基础篇——字符串详解
06-03
def str = "Java_基础篇——字符串详解" def lastIndex = str.lastIndexOf("_") def result = str.getAt(lastIndex+1..-1) println result ``` 输出结果为： ``` 字符串详解 ``` 这段代码首先使用 lastIndexOf() ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值