5.HTML格式标签

1.br 强制换行标签

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

码海无际
<br>
码海无际
5_1.jpg

2.p 换段落标签

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

<p>码海无际</p>
<p>码海无际</p>
5_2.jpg

3.hr 水平分割线标签

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

码海无际
<hr>
码海无际
5_3.jpg

4.div 分区显示标签

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

<div>码海无际</div>
<div>码海无际</div>
<div>
    <div>码海无际</div>
    <div>码海无际</div>
</div>
5_4.jpg

5.span 行内标签

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

<span>码海无际</span>
<span>码海无际</span>
5_5.jpg

6.pre 预格式化标签

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

<pre>
    码海无际
    码海无际
</pre>
5_6.jpg

7.ul 无序列表标签

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

<ul>
    <li>码海无际</li>
    <li>码海无际</li>
    <li>码海无际</li>
</ul>
5_7.jpg

注意:

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

8.ol 有序列表标签

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

1.格式:

<ol type="符号类型">
    <li type="符号类型"></li>
    <li type="符号类型"></li>
</ol>

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

  • 1:阿拉伯数字1.2.3等等,默认type属性值
  • A:大小字母A、B、C等等
  • a:小写字母a、b、c等等
  • Ⅰ:大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
  • ⅰ:小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等

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

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

4.列表可以进行嵌套

<ol>
    <li>码海无际</li>
    <li>码海无际</li>
    <li>码海无际</li>
</ol>
<hr>
<ol type="A">
    <li>码海无际</li>
    <li>码海无际</li>
    <li>码海无际</li>
</ol>
<hr>
<ol>
    <li>码海无际</li>
    <li type="A">码海无际</li>
    <li>码海无际</li>
</ol>
<hr>
<ol>
    <li>码海无际</li>
    <li>码海无际</li>
    <li value="6" type="A">码海无际</li>
    <li>码海无际</li>
    <li>码海无际</li>
</ol>
<hr>
<ol>
    <li>码海无际</li>
    <li>码海无际</li>
    <li>
        <ol type="A">
            <li>志存高远</li>
            <li>志存高远</li>
        </ol>
    </li>
    <li>码海无际</li>
    <li>码海无际</li>
</ol>
5_8.jpg

9.dl 自定义型列表标签

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

<dl>
    <dt>软件说明:</dt>
    <dd>这是软件说明</dd>
    <dt>软件界面:</dt>
    <dd>这是软软件界面</dd>
</dl>
5_9.jpg

10.center 居中对齐标签

居中对齐

<center>码海无际</center>
5_10.jpg
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • HTML标记语言 一、HTML的语法二、html的基本结构三、文档设置标记四、图像标记五、超链接的使用六、表格七、...
    子午禾苇阅读 5,091评论 0 3
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,276评论 0 0
  • HTML5< !--...--> 标签 comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。...
    野小宝阅读 1,401评论 0 10
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,235评论 1 25
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,474评论 0 7

友情链接更多精彩内容