块级标签

2018-09-13 18:59 更新

一、标题标签

标题大小有<h1>至<h6>

<h1>···</h1>

<h2>···</h2>

①作用:

显示为标题


①语法:

<h1>林珊</h1>


③显示效果:

林珊



二、段落标签

<p>···</p>

①作用:

显示为一个段落效果,段与段之间有间隙


②语法:

<h1>索尼大法好</h1>

<p>索尼xp全机身防水,IP68,裸露usb接口。</p>

<p>前置1300w像素,后置2300w像素,全金属后背,支持指纹解锁,3G运存,64G机身内存,你值得拥有,现在只要998,只要998</p>


③显示效果:

索尼大法好

索尼xp全机身防水,IP68,裸露usb接口。

前置1300w像素,后置2300w像素,全金属后背,支持指纹解锁,3G运存,64G机身内存,你值得拥有,现在只要998,只要998


块级标签


三、水平线标签

<hr/>

①作用:

分隔文字或段落


②语法:

<h1>索尼大法好</h1>

<hr/>

<p>索尼xp全机身防水,IP68,裸露usb接口。</p>

<p>前置1300w像素,后置2300w像素,全金属后背,支持指纹解锁,3G运存,64G机身内存,你值得拥有,现在只要998,只要998</p>


③显示效果:

索尼大法好


索尼xp全机身防水,IP68,裸露usb接口。

前置1300w像素,后置2300w像素,全金属后背,支持指纹解锁,3G运存,64G机身内存,你值得拥有,现在只要998,只要998



四、有序列表标签

<ol>

   <li>···</li>

</ol>

①作用:

显示序列号

1、

2、

3、


②语法:

<h1>林珊的小名有:</h1>

<ol>

  <li>珊妹</li>

  <li>珊珊</li>

  <li>八嘎</li>

</ol>


③显示效果:

林珊的小名有

  1. 珊妹
  2. 珊珊
  3. 八嘎


五、无序列表标签
<ul>
  <li>···</li>
</ul>
①作用:
在每一行文字前显示一个小圆点●

②语法
<h1>w3cschool教程目录</h1>
<ul>
  <li>《html5》</li>
  <li>《php》</li>
  <li>《java》</li>
</ul>


③显示效果:

w3cschool教程目录

  • 《html5》
  • 《php》
  • 《java》

w3cschool

六、定义描述标签
<dl>
  <dt>标题</dt>
  <dd>描述</dd>
<dl>
①作用:
对一个标题进行解释描述

②语法:
<dl>
  <dt>索尼手机</dt>
  <dd>颜值高</dd>
  <dd>拍照媲美单反</dd>
  <dd>三防效果好</dd>
<dl>

③显示效果:

索尼手机

颜值高
拍照媲美单反
三防效果好



七、分区标签

<div>头部内容</div>

<div>导航内容</div>

<div>底部内容</div>

①作用:

一般作为结构化块状元素使用,常见用途是对网页进行整体分块布局,当做“容器”使用。


②语法:

<div id="Programmers-favorite-website">  注:id="······"的作用是标记这一样式的“唯一性”,相当于“身份证”的作用,用于区分不同的div样式。也可写入长宽等样式,如:

</div>
<div id="header-r">
<div id="searchui" class="searchbox">


<div id="Programmers-favorite-website"> 

       <h1>程序员最喜欢的网站</h1>

       <p>第一名:w3cschool.cn</p>

       <p>第二名:w3cschool.cn</p>

       <p>第三名:zhimiyun.com</p>

</div>


③显示效果:

程序员最喜欢的网站

第一名:w3cschool.cn

第二名:w3cschool.cn

第三名:zhimiyun.com

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号