块级标签
1.块级标签的特点:独占一行
2.块级标签的种类:
(1)
<!--hx标签 标题-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
(2)
<!--hr标签:分割线-->
<hr>
(3)
<!--p标签:段落-->
<p>这是一个普通的段落</p>
(4)
<!--引用标签,cite属性,表明引用的来源,一般表明引用网址。浏览器默认显示为首行缩进。-->
<blockquote cite="www.baidu.com">
横眉冷对千夫指,俯首甘为孺子牛。
</blockquote>
(5)
<!--预格式标签 保留文本默认的样式-->
<pre>
var fun = function () {
console.log("html!");
}
</pre>
(6)
<!--有序列表
1:修饰符是数字,它会随着项目的增多,自动增加。
2:有序列表也是可以嵌套的。-->
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
(7)
<!--无序列表:
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>
(8)
<!--定义列表:
1:子标签分两个 dt dd
2:dt:列表的标题 没有缩进
3:dd:列表的描述 有缩进-->
<dl>
<dt>列表标题</dt>
<dd>列表内容1</dd>
<dd>列表内容2</dd>
<dd>列表内容3</dd>
</dl>
(9)
<!--组合标签:<figure></figure> 用于显示图片及图片标题
两个子标签:
<img /> 图片
<figcaption></figcaption> 图片的标题
显示效果:图片下面一个标题,同时图片和标题前带缩进。
-->
<figure>
<img src="../../img/lenovo2.jpg" alt="图片不存在" width="150px" height="100px"/>
<figcaption>这是图片标题</figcaption>
</figure>
(10)
<!--分区标签-->
<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>
这是html!
</figcaption>
</figure>