码迷,mamicode.com
首页 > Web开发 > 详细

5.HTML格式标签

时间:2020-02-17 19:44:42      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:空格   组合   文档   嵌套使用   有序   info   属性   其他   网页   

1.br 强制换行标签

让后面的文字、图片、表格等等,显示在下一行

1 码海无际
2 <br>
3 码海无际

技术图片

2.p 换段落标签

在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是

1 <p>码海无际</p>
2 <p>码海无际</p>

技术图片

3.hr 水平分割线标签

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,hr 就是创建横跨网页水平线的标签。

1 码海无际
2 <hr>
3 码海无际

技术图片

4.div 分区显示标签

分区显示标签,也称之为层标签,常用来编排一大段的HTML段落,也可以用于格式化表,和 p 很相似,是块状元素,经常嵌套使用。

1 <div>码海无际</div>
2 <div>码海无际</div>
3 <div>
4     <div>码海无际</div>
5     <div>码海无际</div>
6 </div>

技术图片

5.span 行内标签

用来组合文档中的行内元素,没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

1 <span>码海无际</span>
2 <span>码海无际</span>

技术图片

6.pre 预格式化标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

1 <pre>
2     码海无际
3     码海无际
4 </pre>

技术图片

7.ul 无序列表标签

无序列表的各个列表项之间没有顺序级别之分,是并列的。

1 <ul>
2     <li>码海无际</li>
3     <li>码海无际</li>
4     <li>码海无际</li>
5 </ul>

技术图片

注意:

1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
3. 无序列表会带有自己样式属性,但是不推荐使用,一般会用CSS设置。

8.ol 有序列表标签

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义

1.格式:

1 <ol type="符号类型">
2     <li type="符号类型"></li>
3     <li type="符号类型"></li>
4 </ol>

2.有序列表的type属性值:

  • 1:阿拉伯数字1.2.3等等,默认type属性值

  • A:大小字母A、B、C等等

  • a:小写字母a、b、c等等

  • Ⅰ:大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等

  • ⅰ:小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等

3.有序列表的value属性值:

  • 指定一个新的序列数字起始值

4.列表可以进行嵌套

 1 <ol>
 2     <li>码海无际</li>
 3     <li>码海无际</li>
 4     <li>码海无际</li>
 5 </ol>
 6 <hr>
 7 <ol type="A">
 8     <li>码海无际</li>
 9     <li>码海无际</li>
10     <li>码海无际</li>
11 </ol>
12 <hr>
13 <ol>
14     <li>码海无际</li>
15     <li type="A">码海无际</li>
16     <li>码海无际</li>
17 </ol>
18 <hr>
19 <ol>
20     <li>码海无际</li>
21     <li>码海无际</li>
22     <li value="6" type="A">码海无际</li>
23     <li>码海无际</li>
24     <li>码海无际</li>
25 </ol>
26 <hr>
27 <ol>
28     <li>码海无际</li>
29     <li>码海无际</li>
30     <li>
31         <ol type="A">
32             <li>志存高远</li>
33             <li>志存高远</li>
34         </ol>
35     </li>
36     <li>码海无际</li>
37     <li>码海无际</li>
38 </ol>

技术图片

9.dl 自定义型列表标签

对列表条目进行简短的说明

1 <dl>
2     <dt>软件说明:</dt>
3     <dd>这是软件说明</dd>
4     <dt>软件界面:</dt>
5     <dd>这是软软件界面</dd>
6 </dl>

技术图片

10.center 居中对齐标签

居中对齐

1 <center>码海无际</center>

技术图片

5.HTML格式标签

标签:空格   组合   文档   嵌套使用   有序   info   属性   其他   网页   

原文地址:https://www.cnblogs.com/mahaiwuji/p/12322978.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!