HTML5 - 分组元素

最新推荐文章于 2022-09-08 11:21:13 发布

app支持博客

最新推荐文章于 2022-09-08 11:21:13 发布

阅读量1k

点赞数

分类专栏： HTML5 文章标签： html5 分组元素

本文链接：https://blog.csdn.net/Fly_study/article/details/51818795

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第二课分组元素加油加油

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>分组元素</title>
</head>
<body>
<!-- 段落 p -->
段落
<p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。皇后大道西，皇后大道东</p>
<p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。皇后大道西，皇后大道东</p>
<!-- 段落 div 间隙缩小 -->
通用分组
<div>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。皇后大道西，皇后大道东</div>
<div>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。皇后大道西，皇后大道东</div>
<!-- 引用大段文本 blockquote 居中 -->
大段文本
<blockquote>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。皇后大道西，皇后大道东</blockquote>
<blockquote>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。皇后大道西，皇后大道东</blockquote>
<!-- 分割线 hr -->
分割线<br>
<hr>
<!-- 编辑器格式 简单排版pre -->
简单排版<br>
<pre>
     春眠不觉晓，
              处处闻啼鸟。
     夜来风雨声，
              花落知多少。</pre>
<!-- 分组 ul ol dl -->
分组 无序ul
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ul>
有序  ol
<!-- 倒序 reversed -->
<ol reversed>   
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>
<!-- 制定开始 -->
<ol start="3">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>
<!-- 排列方式 -->
<ol type="I">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>
<!-- 制定value -->
<ol>
    <li>张三</li>
    <li>李四</li>
    <li value="4">王五</li>
    <li>赵六</li>
</ol>
生成说明 dl
<dl>
    <dt>内容简要1</dt>
    <dd>这是一段说明</dd>
    <dd>这是另一段说明</dd>

    <dt>内容简要2</dt>
    <dd>这是一段说明</dd>
    <dd>这是另一段说明</dd>

</dl>
<!-- 加入图片 figure -->
<figure>
    <figcaption>这是一张图片</figcaption>
    <img src="001.jpg">
</figure>

</body>
</html>