html5中行级元素和块级元素及其应用。

最新推荐文章于 2023-10-06 16:02:01 发布
最新推荐文章于 2023-10-06 16:02:01 发布
阅读量759 收藏
点赞数
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36872096/article/details/68954659
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p>块级标签</p>
<div>块级标签</div>
<hr/>
<h1>块级标签</h1>
<h2>块级标签</h2>
<h3>块级标签</h3>
<h4>块级标签</h4>
<h5>块级标签</h5>
<h6>块级标签</h6>
<pre>
    块级
    标签
</pre>

<ol start="3" reversed type="A">
    <!--reversed是列表序号倒序。
      start是开始的序号(索引)为多少。
      type是指定列表序号的类型。-->
    <li>块级标签</li>
    <li>块级标签</li>
    <li>块级标签</li>
    <li>块级标签</li>
    <li>块级标签</li>
</ol><!--块级标签-->
<ul>
    <li>块级标签</li>
    <li>块级标签</li>
    <li>块级标签</li>
</ul>
<dl>
    <dt>块级标签列表标题</dt>
    <dd>块级标签列表描述，又缩进</dd>
    <dd>块级标签列表描述，又缩进</dd>
</dl>
<figure>
    <img src="" alt=""/>
    <figcaption>
        块级标签，图片和内容都有缩进。
    </figcaption>
</figure>
<p><span>行级标签</span></p><!--p当中可以包裹span-->
<img src="" alt=""/>
<p>
    <em>em的实现效果</em>---展示
    <!--em：
        1.显示效果为倾斜，并且有强调的意思，可以更方便的被浏览器搜索到。-->
    <br/>
    <!--i：
        1.显示效果为倾斜，没有强调的意思。-->
    <i>i的实现效果</i>---展示
</p>
<p>
    <strong>strong的实现效果</strong>
    <!--strong：1.显示效果为粗体，并且有强调的意思，可以更方便的被浏览器搜索到。-->
    <br/>
    <b>b的实现效果</b>
    <!--b：1.显示效果为粗体，没有强调的意思。-->
</p>
<p>
    q的实现效果-----<q>q的实现效果</q>
    <!--q：带引号，可以更方便的被浏览器搜索到。-->
</p>
<p>small的实现效果---<small>small的实现效果</small>
    <!--相比与相邻的字体要小。-->
    <br/>
    big的实现效果---<big>big的实现效果</big></p>
<hr/>
<a href="http://book.qidian.com/info/1005401550">页面跳转1</a>
<a href="../1/first.html">页面跳转2</a>
<a href="#top">返回顶部（锚点链接）</a>

<br/>
<!--删除线，用来显示删除数据-->
<s>这是被删除的文本</s>
<br/>
<strike>这是被删除的文本</strike>
<br/>
<span style="text-decoration: line-through">
    这是被删除的文本</span><!--HTML5推荐的方法-->
<br/>
<u>下划线文本</u>
<br/>
<!--HTML5推荐的方法-->
<span style="text-decoration: underline">下划线文本</span>
<br/><br/>
<span style="text-decoration: overline">上划线文本</span>
<br/>
<!--cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用-->
<cite>这是cite标签</cite>
<!--mark：高亮或比标记文本，浏览器显示为黄色背景-->
<br/>
<mark>高亮显示文本</mark>
<br/><br/>
<pre><!--用pre保存代码的格式，光标放在<code>后面，
            按alt+上，就可以将code中的代码整个移动到pre中-->
<code>
    StringBuffer sb=new StringBuffer();
    for(String s:arr){
    sb.append(s);
    }
</code>
</pre><!--pre是块级标签-->
<br/>
<bdo dir="ltr">十盗偷天</bdo>
<br/>
<bdo dir="rtl">十盗偷天</bdo>
<!--bdo表示文本方向的标签，dir是方向，ltr是从左到右，rtl是从又到左-->
<br/><br/>
<!--sup：上标文本-->
X<sup>2</sup>
<br/>
<br/>
<!--sub：下标文本-->
log<sub>2</sub>10
<br/>
S<sub>2</sub>O<sub>4</sub>H<sup>-</sup>
<br/>
<p>十盗&nbsp;&nbsp;&nbsp;&nbsp;偷天</p>
<!--&nbsp;是空格。（符号）-->
<br/>
&copy;
<!--&copy;版权符号-->
<br/>
&lt;<!--左尖括号-->我被尖括号玩了&gt;<!--右尖括号-->
<br/>
&frasl;<!--斜线-->
<br/>
&lt;u&gt;下划线&lt;&frasl;u&gt;<u>下划线</u>
<br/>
<br/>
</body>
</html>
甲戌天火
关注
专栏目录
H5新增的块级的语义元素
06-14 2003
一、aside元素 aside元素表示article元素的内容之外的与article元素的相关内容 HTML5中代码示例： HTML4中代码示例： 二、figure元素 figure元素表示一段独立的流内容，一般表示文档主体流内容的一个独立单元。使用元素为figure元素组添加标题。 HTML5中代码示例：              我是标题              我是内容
前端的块级元素与行内元素
m0_69639625的博客
05-14 969
块级元素:div、p、h1-h6、br、ol、ul 行内元素:a、span、strong、b、em(斜体)、img、input、select（下拉列表） 块级元素的自带特性: 1.从新的一行开始（自动换行），垂直向下 2.高度、宽度、margin（外边距）、及padding（内边距）都可以设计。 3.宽度默认为100% 4.可以包含行内元素 行内元素的特性: 1.和其他元素都在一行。 2.高度、宽度不可设置 3.行内元素不可包含块级元素 演示代码: <!...
html——块级元素和行级元素
wjnjava的博客
09-06 662
标签分为两种类型 块级元素，行级元素 块级元素，行级元素区别： 块级元素：占一行，不与其他元素并列。可设置宽高，如果不设置宽高，默认是父级的宽度100%。 行级元素：可与其他元素并列，不能设置宽高，默认的宽度就是文字的宽度。可以设置（line-height）margin上下无效，padding上下无效。 块级元素和行内元素的分类： 在HTML的角度来讲，标签分为： 　　　　文本级标签：p , span , a , b , i , u , em 　　　　容器级标签：div , h系列...
关于块级元素与行内元素的区别及应用
qq_40937487的博客
04-06 149
标签分为两种等级：块级元素与行内元素 块级元素：p, div , h系列 , li , dt ,dd 行内元素：span , a , b , i , u , em 两者区别 行内元素： 1.与其他行内元素并排； 2.不能设置宽高，默认的宽度就是文字的宽度； 块级元素： 1.霸占一行，不能与其他任何元素并列。 2.能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。 实际应用时发现： span标签作为行内元素可以修改padding，margin-left/right；但不能更改margin上下距离；
html5：块级元素
qq_45158336的博客
08-02 3238
最常见块级元素：div div的属性： <div title="title属性">title属性</div> title属性： 当鼠标悬停在div上时候会有一个小的提示框 <div id="div1">div1</div> id属性可以理解为为当前div提供一个唯一标识，可以理解为我们的身份证号 <div class="box1">box1</div> class属性是为当前div定义一个类名，以后学到css...
H5入门三：块级元素和行内元素
NYC的博客
06-26 1702
H5入门三：块级元素和行内元素 一、行内元素和块级元素概括 块级元素：div，P，form，ul，ol，address，fieldset，hr，menu，table 行内元素：span，strong，em，br，img，input，label，select，textarea，cite， 二、行内元素和块级元素详细 行内元素（inline element） a -锚点 abbr -缩写 acronym -首字 b -粗体（不推荐） bdo -bidi override big -大字体 br
详解HTML常用的标签中行内元素和块级元素
09-28
在HTML中，标签元素被分为块级元素和行内元素两大类，这种分类方式决定了元素在页面上的显示和行为特性。块级元素和行内元素的不同主要体现在它们的布局方式上，以及如何与周围的元素交互。 首先，块级元素（block ...
css中行内元素和块级元素的区别
09-27
在CSS中，元素可以分为两大类：行内元素（Inline Elements）和块级元素（Block Level Elements），它们在布局和显示方式上有显著的区别。 1. **行内元素和块级元素的区别** - **行内元素**：不会占用整行空间，...
H5-行内元素 块级元素（20211008笔记）
Clience01的博客
10-08 177
1、行内元素 （a）—— 标签定义链接 （b）—— 字体加粗 （br）—— 换行 （i）—— 斜体文本效果 （img）—— 在网页中嵌入图片 （input）—— 输入框 （span）—— 组合文档中的行内元素 （small）——呈现小号字体效果 （big）——呈现大号字体效果 （sub）—— 定义下标文本 （sup）—— 定义上标文本 2、块级元素 （div）—— 定义文档中的分区或节 （dl）—— 定义列表 （dt）—— 定义列表中的项
html常见块级元素
qq_39658992的博客
07-21 629
| 标签 描述 div 常用块容器 h1,h2,h3,h4,h5,h6 一，二，三，四，五，六级标题 – – hr 水平分割线 menu 菜单列表 – – ol，ul，li 有序列表，无序列表，列表项 dl,dt,dd 定义列表，定义术语，定义描述 – – table 表格 p 段落 – – form 交互表单 ...
块级元素与行内元素的区别
weixin_30856965的博客
10-13 104
块级元素与行内元素的区别 块级元素和行内元素是布局最基本的两种元素，我们都知道常见的块级元素有div,p,form,ul,li等，行内元素有span，strong，em等，对于这两者的区别，我也只是简单的了解了一番，要正真的理解及掌握，还得在不断的练习中深入体会。下面是他们的区别： 对于块级元素： 他会独占一行，在默认情况下，其其宽度自动填满其父元素的宽度； 块级元素可以设置width、heig...
H5 CSS3 解决块级元素横排时的间隙
一名假人的博客
05-26 519
使用float横排时 使用浮动在这里插入代码片 可以给要横排的元素加上float。这样就可以解决了。但是由于浮动会脱离文档流，一般要在最后清除浮动即可。 使用inline-block横排时 2. 设置全局属性 *{margin:0%; height:0% } 3. font-size:0px; 有的时候2就可以了，但是有时候依然会出现空隙，就可以给这些横排的元素的父div设置font-size...
H5常用的行内元素、块级元素、行内块元素以及它们之间的区别
BenSon.Album
09-15 938
1、行内元素 （a）—— 标签定义链接 （b）—— 字体加粗 （br）—— 换行 （i）—— 斜体文本效果 （img）—— 在网页中嵌入图片 （input）—— 输入框 （span）—— 组合文档中的行内元素 （small）——呈现小号字体效果 （big）——呈现大号字体效果 （sub）—— 定义下标文本 （sup）—— 定义上标文本 2、块级元素 （div）—— 定义文档中的分区或节 （dl）—— 定义列表 （dt）—— 定义列表中的项目 （dd）—— 定义列表中定义条目 （h1 - h6）—— 定义标题
在HTML页面中行标签是,《HTML》
weixin_33886150的博客
06-03 713
一、资料二、简介1、HTML是描述网页的一种标记语言，HTML文档是由 HTML 元素定义的2、HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。开始标签常被称为开放标签(opening tag)，结束标签常称为闭合标签(closing tag)3、没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的4、大多数 HTML 元素可以嵌套(可以包...
html中行和块级标签的区别,css行内元素和块级元素的区别是什么？
weixin_35651102的博客
06-30 229
行内元素和块级元素的区别是什么？下面本篇文章就来给大家介绍一下行内元素和块级元素的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。块级元素和行内元素的定义块级元素？总是在新行上开始；高度，行高以及外边距和内边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。它可以容纳内联元素和其他块元素行内元素？和其他元素都在一行上；高，行高及外边距和内边距不可改变；宽度就是它的文...
HTML中的行内元素、块级元素、空元素
最新发布
前端小白的博客
10-06 437
空元素（void elements）是指没有闭合标签的元素。它们在 HTML 中没有内容，只有一个开启标签。HTML 中的行内元素（inline elements）通常用于在一行内显示，不会独占一行的空间。块级元素（block-level elements）通常会独占一行的空间，并且会在前后创建换行。：用于对文本或其他内联元素进行分组或添加样式。：用于创建用户输入字段。：用于创建用户输入字段。：表示斜体强调的文本。：用于无序和有序列表。：用于指定页面元数据。：用于创建水平分隔线。：用于引入外部资源。
关于HTML5行内元素和块级元素
铭小小
03-04 7992
行内元素： 特点：就可以和其他元素在一行显示，不能自动换行，不能设置宽高 常见行内元素：a，span,i,u,em,sub,sup 块级元素： 特点：不可以和他的元素在一行，可以自动换行，可以设置宽高 常见的块级元素：div,p,h,ul,li,dl,dt,dd 行内块级元素： 特点：可以和其他元素保持在一行，还能设置宽高 常见元素：textarea,input,img,butto...
【HTML5】带你快速了解行级标签
GUIDM的博客
04-29 2400
快速了解行级标签
HTML中行内样式与元素样式的应用实例解析
总结来说，本章节的核心知识点包括行内样式的基本应用、HTML元素的默认样式、以及HTML文档结构的组成部分。学习者应该掌握如何在HTML中使用`style`属性来改变文本样式，同时理解外部样式表和内部样式表的区别，以便...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值