关于块级标签，列表，分区标签的使用（实例代码）
来源：互联网 发布：淘宝网商城清仓特价 编辑：程序博客网 时间：2024/06/06 14:12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级标签</title>
</head>
<body>
<!--标签的分类
1：块级标签 特点：独占一行
2：行级标签 特点：宽度跟自己的内容等宽-->
<p style="font-size: 32px;font-weight: bolder">杰瑞教育</p>
<!--hx标签 标题-->
<h1>杰瑞教育</h1>
<h2>杰瑞教育</h2>
<h3>杰瑞教育</h3>
<h4>杰瑞教育</h4>
<h5>杰瑞教育</h5>
<h6>杰瑞教育</h6>
<!--hr标签：分割线-->
<hr>
<!--p标签：段落-->
<p>这是一个普通的段落</p>
<!--引用标签,cite属性，表明引用的来源，一般表明引用网址。浏览器默认显示为首行缩进。-->
<blockquote cite="www.baidu.com">
横眉冷对千夫指，俯首甘为孺子牛。
</blockquote>
<!--预格式标签 保留文本默认的样式-->
<pre>
var fun = function () {
console.log("杰瑞教育！");
}
</pre>
<!--有序列表
1：修饰符是数字，它会随着项目的增多，自动增加。
2：有序列表也是可以嵌套的。-->
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
<!--无序列表：
1：修饰符是默认的原点，
2：可以嵌套，嵌套的修饰符会与外层产生区别，以示区分。-->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<ul>
<li>子列表1</li>
<li>子列表2</li>
<li>子列表3</li>
</ul>
<li>列表项3</li>
</ul>
<!--定义列表:
1:子标签分两个 dt dd
2：dt:列表的标题 没有缩进
3：dd：列表的描述 有缩进-->
<dl>
<dt>列表标题</dt>
<dd>列表内容1</dd>
<dd>列表内容2</dd>
<dd>列表内容3</dd>
</dl>
<!--组合标签：<figure></figure> 用于显示图片及图片标题
两个子标签：
<img /> 图片
<figcaption></figcaption> 图片的标题
显示效果：图片下面一个标题，同时图片和标题前带缩进。
-->
<figure>
<img src="../../img/lenovo2.jpg" alt="图片不存在" width="150px" height="100px"/>
<figcaption>这是图片标题</figcaption>
</figure>
<!--分区标签-->
<hr>
<div>
<header style="height: 80px">
<img src="../../img/logo.png" alt="" style="margin-left: 20px;margin-top: 10px">
<img src="../../img/logo_kouhao.png" alt="" style="margin-left: 20px">
<img src="../../img/logo_Tel2.png" alt="" align="right" style="margin-top: 20px">
</header>
<nav style="height: 40px;background-color: yellow">菜单区域</nav>
<section style="height: 500px;background-color: blue">详情区域</section>
</div>
<!--补充：
start:指定列表的开始索引
reversed：列表索引倒序显示
type：指定列表索引的类型-->
<!--添加锚点-->
<a name="ccy"></a>
<ol start="3" reversed type="a">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
</ol>
<figure>
<img src="../../img/lenovo2.jpg" alt="lianxiang">
<figcaption>
这是联想电脑!
</figcaption>
</figure>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级标签</title>
</head>
<body>
<!--标签的分类
1：块级标签 特点：独占一行
2：行级标签 特点：宽度跟自己的内容等宽-->
<p style="font-size: 32px;font-weight: bolder">杰瑞教育</p>
<!--hx标签 标题-->
<h1>杰瑞教育</h1>
<h2>杰瑞教育</h2>
<h3>杰瑞教育</h3>
<h4>杰瑞教育</h4>
<h5>杰瑞教育</h5>
<h6>杰瑞教育</h6>
<!--hr标签：分割线-->
<hr>
<!--p标签：段落-->
<p>这是一个普通的段落</p>
<!--引用标签,cite属性，表明引用的来源，一般表明引用网址。浏览器默认显示为首行缩进。-->
<blockquote cite="www.baidu.com">
横眉冷对千夫指，俯首甘为孺子牛。
</blockquote>
<!--预格式标签 保留文本默认的样式-->
<pre>
var fun = function () {
console.log("杰瑞教育！");
}
</pre>
<!--有序列表
1：修饰符是数字，它会随着项目的增多，自动增加。
2：有序列表也是可以嵌套的。-->
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
<!--无序列表：
1：修饰符是默认的原点，
2：可以嵌套，嵌套的修饰符会与外层产生区别，以示区分。-->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<ul>
<li>子列表1</li>
<li>子列表2</li>
<li>子列表3</li>
</ul>
<li>列表项3</li>
</ul>
<!--定义列表:
1:子标签分两个 dt dd
2：dt:列表的标题 没有缩进
3：dd：列表的描述 有缩进-->
<dl>
<dt>列表标题</dt>
<dd>列表内容1</dd>
<dd>列表内容2</dd>
<dd>列表内容3</dd>
</dl>
<!--组合标签：<figure></figure> 用于显示图片及图片标题
两个子标签：
<img /> 图片
<figcaption></figcaption> 图片的标题
显示效果：图片下面一个标题，同时图片和标题前带缩进。
-->
<figure>
<img src="../../img/lenovo2.jpg" alt="图片不存在" width="150px" height="100px"/>
<figcaption>这是图片标题</figcaption>
</figure>
<!--分区标签-->
<hr>
<div>
<header style="height: 80px">
<img src="../../img/logo.png" alt="" style="margin-left: 20px;margin-top: 10px">
<img src="../../img/logo_kouhao.png" alt="" style="margin-left: 20px">
<img src="../../img/logo_Tel2.png" alt="" align="right" style="margin-top: 20px">
</header>
<nav style="height: 40px;background-color: yellow">菜单区域</nav>
<section style="height: 500px;background-color: blue">详情区域</section>
</div>
<!--补充：
start:指定列表的开始索引
reversed：列表索引倒序显示
type：指定列表索引的类型-->
<!--添加锚点-->
<a name="ccy"></a>
<ol start="3" reversed type="a">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
</ol>
<figure>
<img src="../../img/lenovo2.jpg" alt="lianxiang">
<figcaption>
这是联想电脑!
</figcaption>
</figure>
</body>
</html>
0 0
- 关于块级标签，列表，分区标签的使用（实例代码）
- Html 标签的使用小结（实例代码）
- html入门（块级元素——列表标签）
- html基本标签，列表标签，超链接标签，表格标签，块级标签，行级标签，表单标签，文本域标签，表单标签
- 关于a 标签变为块级元素的作用
- 关于标签的使用
- css块级标签，行内标签，行内块标签的转换（2）
- html标签--块级标签
- JSF标签的使用实例
- html标签做代码块
- Select标签下拉列表二级联动级联实例代码
- freemarker 标签使用 （实例）
- 行级标签和块级标签的区别
- 块级标签、行级标签的特点
- 一些常用的行级标签和块级标签
- 块级标签
- 块级标签和内联标签之间的嵌套规则
- 关于base标签的使用
- R语言做文本挖掘 Part2分词处理
- 工具类-JSON串自动加前缀
- strcpy 和strlen函数的模拟实现
- ZOJ 3962 Seven Segment Display(数位dp）
- postman的使用
- 关于块级标签，列表，分区标签的使用（实例代码）
- LayoutInflater源码分析与应用
- 有道云笔记网络异常
- win10怎么卸载自带的APP
- 【笔记】formvalidtor 关于passwordValidator 函数的参数详细
- 《CSS权威指南》读书笔记1
- 修心悟道：清心寡欲：厚积薄发
- 一个完整的通过encoding/json信息传递格式，采用http.POST利用进行与服务器通信，并对返回结果进行解析处理的典型案例
- mysql#1045错误如何消除
