HTML的文档设置标记

1.格式标记

强制换行标记

换段落标记

换段落，由于多个空格和回车在HTML中会被等效为一个空格，所以HTML中要换段落就要用，段落中也可以包含段落!

<center>　　居中对齐标记

<pre>　　　　预格式化标记

保留预先编排好的格式

<li>　　　　　　列表项目标记

每个列表使用一个<li>标记

<ul>　　　　　　无序列表标记

<ol>　　　　　　有序列表标记　　　

可以显示特定的一些顺序：

（1）格式：

<ol type="符号类型">

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

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

</ol>

（2）有序列表的type属性值：1（默认属性值，阿拉伯数字1，2，3），A（大小写字母A、B、C），a（小写字母），Ι（大写罗马数字），i（小写罗马数字）

（3）value：指定一个新的序列数字起始值

（4）列表可以进行嵌套

<dl><dt><dd>　　　　定义型列表

使用场合：对列表条目进行简短的说明

格式：
 <dl>

 <dt>南邮介绍：</dt>

 <dd>是一所双一流大学</dd>

 <dt>北邮：</dt>

 <dd>是一所211大学</dd>

6 </dl>

<hr>　　　　水平分割线标记

段落之间的分割线

<div>　　　　分区显示标记（层标记）

常用来编排一大段的HTML段落，也可以用于格式化表，和很相似

曾可以多层嵌套使用

代码示例：

 <html>

     <head>

         <title>第三节课</title>

         <meta charset="UTF-8">

     </head>

     <body>

         <!--***************1.强制换行****************-->

         南京邮电大学!<br/>非常牛逼的一所高校。

         <!--********************************************-->

         <!--***************2.换段落******************-->

         <p>

         南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。

         </p>

         <p>

         南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。南京邮电大学!非常牛逼的一所高校。

         </p>

         <p>

             <p>12394723423</p>

             <p>ahadsafskfjsdlkf</p>

         </p>

         <!--********************************************-->

         <!--***************3.居中对齐*******************-->

         <center>南京邮电大学!非常牛逼的一所高校。</center>

         <!--***************4.预格式化*******************-->

         <p>南京邮电大学!          非常牛逼的一所高校。</p>

         <p><pre>南京邮电大学!          非常牛逼的一所高校。</pre></p>

         <!--********************************************-->

         <!--****************5.列表项目******************-->

         <li>第一节课</li>

         <li>第二节课</li>

         <li>第三节课</li>

         <li>第四节课</li>

         <li>第五节课</li>

         <!--********************************************-->

         <!--*****************6.无序列表******************-->

         <ul>

             <li>第一节课</li>

             <li>第二节课</li>

             <li>第三节课</li>

             <li>第四节课</li>

             <li>第五节课</li>

         </ul>

         <!--********************************************-->

         <!--*****************7.有序列表*****************-->

         <!--（1）最基础的有序列表-->

         <!--<ol>-->

             <!--<li>第一节课</li>-->

             <!--<li>第二节课</li>-->

             <!--<li>第三节课</li>-->

             <!--<li>第四节课</li>-->

             <!--<li>第五节课</li>-->

         <!--</ol>-->

         <!--（2）设置type属性值-->

         <!--<ol type="I">-->

             <!--<li>第一节课</li>-->

             <!--<li>第二节课</li>-->

             <!--<li>第三节课</li>-->

             <!--<li>第四节课</li>-->

             <!--<li>第五节课</li>-->

         <!--</ol>-->

         <!--（3）设置value属性值-->

         <!--<ol type="1">-->

             <!--<li>第一节课</li>-->

             <!--<li value="5">第二节课</li>-->

             <!--<li>第三节课</li>-->

             <!--<li>第四节课</li>-->

             <!--<li>第五节课</li>-->

         <!--</ol>-->

         <!--（4）有序嵌套列表-->

         <ol type="A">

             <li>A选项

                 <ol type="1">

                     <li>第一节课</li>

                     <li>第二节课</li>

                     <li>第三节课</li>

                     <li>第四节课</li>

                     <li>第五节课</li>

                 </ol>

             </li>

             <li>B选项

                 <ol type="1">

                     <li>第一节课</li>

                     <li>第二节课</li>

                     <li>第三节课</li>

                     <li>第四节课</li>

                     <li>第五节课</li>

                 </ol>

             </li>

             <li>第三节课</li>

             <li>第四节课</li>

             <li>第五节课</li>

         </ol>

         <!--*****************8.定义型列表******************-->

         <dl>

             <dt>南邮介绍：</dt>

             <dd>是一所双一流大学</dd>

             <dt>北邮：</dt>

             <dd>是一所211大学</dd>

         </dl>

         <!--********************************************-->

         <!--******************9.水平分割线***************-->

         南京邮电大学!非常牛逼的一所高校。

         <hr>

         南京邮电大学!非常牛逼的一所高校。

         <!--********************************************-->

         <!--******************10.分区显示（层标记）*************-->

         <div>

             南京邮电大学!非常牛逼的一所高校。

             <hr>

             南京邮电大学!非常牛逼的一所高校。

         </div>

         <div>

             南京邮电大学!非常牛逼的一所高校。

             <hr>

             南京邮电大学!非常牛逼的一所高校。

         </div>

         <!--********************************************-->

     </body>

 </html>

效果展示：

2.文本标记

<hn>　　　　标题标记

共有6个级别，n的范围1~6，不同界别对应显示大小不同的标题，h1最大，h6最小

字体设置标记

设置字体的格式有三个常用的属性：

（1）size: 　　 　　取值范围是1~7，浏览器默认是3，XHTML 1.0中不支持size属性

（2）color：　

（3）face（字体）： （默认）

粗字体标记

斜字体标记

文字下标字体标记

文字上标字体标记

<tt>　　　　打印机字体标记

<cite>　　　　引用方式的字体，通常显示为斜体字

表示强调，通常显示为斜体字

表示强调，通常显示为粗体字

小型字体标记

<big>　　　　大型字体标记

下划线字体标记

代码示例：

 <html>

     <head>

         <title>第四节课</title>

         <meta charset="UTF-8">

     </head>

     <body>

     <!--=============1.标题标记===============-->

     南邮

     <h1>南邮</h1>

     <!--<h2>南邮</h2>-->

     <!--<h3>南邮</h3>-->

     <!--<h4>南邮</h4>-->

     <!--<h5>南邮</h5>-->

     <!--<h6>南邮</h6>-->

     <!--======================================-->

     <!--==============2.字体标记==============-->

     南京邮电大学

     <font size="1">南京邮电大学</font>

     <font size="5">南京邮电大学</font>

     <font size="5" color="red">南京邮电大学</font>

     <font size="5" color="red" face="楷体">南京邮电大学</font>

     <!--======================================-->

     <!--===============3.粗字体标记==============-->

     <br/>南邮

     <b>南邮</b>

     <!--======================================-->

     <!--================4.斜字体标记==========-->

     <br/>南邮

     <i>南邮</i>

     <!--======================================-->

     <!--================5.文字上下标字体标记==========-->

     <br/>

     a<sup>2</sup>

     a<sub>2</sub>

     <!--======================================-->

     <!--================6.打印机字体字体标记====-->

     <br/>123456789

     <tt>123456789</tt>

     <!--======================================-->

     <!--================7.引用方式的字体，通常是斜体===-->

     <br/>莎士比亚

     <cite>莎士比亚</cite>

     <!--======================================-->

     <!--================8.表示强调，通常显示为斜体===========-->

     <br/>莎士比亚

     <em>莎士比亚</em>

     <!--======================================-->

     <!--=================9.表示强调，通常显示为斜体=====================-->

     <br/>莎士比亚

     <strong>莎士比亚</strong>

     <!--======================================-->

     <!--==================10.小型字体标记====================-->

     <br/>

     <font size="6">南邮</font>

     <small>南邮</small>

     <small><small>南邮</small></small>

     <small><small><small>南邮</small></small></small>

     <!--======================================-->

     <!--==================11.大型字体标记====================-->

     <br/>

     <big>ABC</big>

     <big><big>ABC</big></big>

     <big><big><big>ABC</big></big></big>

     <!--======================================-->

     <!--===================12.下划线字体标记===================-->

     <br/>ABC

     <u>ABC</u>

     <!--======================================-->

     </body>

 </html>

效果展示：

HTML的文档设置标记的更多相关文章

html的文档设置标记上（格式标记）4-5
<html> <head> <title>第四课的标题及第五课的标题</title> <meta charset="utf-8" ...
HTML文档设置标记
格式标记 1. 强制换行标记,让后面的文字.图片.表格等,显示在下一行.单标记 2. 换段落标记,换段落是由于多个空格和回车在HTML中会被等效为一个空格,所以H ...
[HTML/HTML5]1 HTML文档设置
1.1 创建HTML文件本质上,HTML文件就是具有下列两个特征的简单文本文件: HTML文件的扩展名为.html或者.htm.文件扩展名是一个缩写,它可将文件正确地关联到需要访问它的程序或工具. ...
Springlake-02 权限&文档设置&Role设置&Folder设置&登录
1. 权限有3个默认的权限用户: 1.System Owner so 管理员权限全部:Type Setup; Group Setup; Form Setup; Role Setup; Share R ...
C#中的XML文档注释-推荐的文档注释标记
文档注释是为了方便自己和他人更好地理解代码所实现的功能.下面记录了一些常用的文档注释标记: <C> 用法: <c>text</c> 将说明中的文本标记为代码.例如: ...
C# 给PDF文档设置过期时间
我们可以给一些重要文档或者临时文件设置过期时间和过期信息提示来提醒读者或管理者文档的时效性,并及时对文档进行调整.更新等.下面,分享通过C#程序代码来给PDF文档设置过期时间的方法. 引入dll程序集 ...
IT兄弟连 HTML5教程 HTML文档主体标记body
在HTML的<body>和</body>标记中定义文档的主体,包含文档的所有内容(比如文本.超链接.图像.表格和列表等等).<body>标签有自己的属性,设置< ...
netcore webapi帮助文档设置
如何建 .netcore webapi 项目这个就不说了,这个都没有没必要看下去. 我这里是.netcore 2.0,虽然没测过1.0的,但想来差不多. 1.Nuget Packages安装,使用程序 ...
office2007word文档设置多级目录
office本来不是很难,关键就是经验吧,直入主题. 文档结构图设置了四级,但是目录始终只显示三级,郁闷了好久,网上看的也不靠谱,方法如下: 引用-目录-插入目录弹出插入目录设置后,修改级别为最大, ...

随机推荐

经济学人精读笔记9：打出租out了，“飞的”时代要来了！
经济学人精读笔记9:打出租out了,"飞的"时代要来了! 标签(空格分隔): 经济学人 Part 1 Flying taxis are taking off to whisk pe ...
java基础--------arraylist（动态数组）和linkedlist（双向链表）的区别
arraylist使用数组存储数据,所以这样存储的数据根据索引查询的数据速度快,但是新增或者删除元素时需要设计到位移操作,所以比较慢. linkedlist使用双向链表方式存储数据,每个元素都记录前后 ...
Python中字符串的学习
Python中字符串的学习一.字符串的格式化输出 % 占位符 %s 字符串 %d integer %x 十六进制 integer %f float 指定长度 %5d 右对齐,不足左边补空格 %-5d ...
PTA 1005 Spell It Right
题目描述: Given a non-negative integer N, your task is to compute the sum of all the digits of N, and ou ...
DFT 问答 I
Q: Boundary Scan是什么?应用场景是什么?实现的方法是什么?挑战是什么? A: Boundary Scan就是边界扫描,是由Joint Test action Group起草的规范,最初 ...
java在子类中，调用父类中被覆盖的方法
在java中,子类中调用与父类同名的方法(即父类中被覆盖的方法)用super来调用即可,下面是示例: 子类父类的定义 public class b { void show() { System.out ...
python全栈学习 day03
换行符: \n 制表符: \t 字符串截取:顾头不顾尾 s[首:尾:步长] 首--->尾走向和步长方向一致 s[0:4:2] s[4:0:-2] a = "qwertyui&quo ...
手动部署：在eclipse导入web项目并更新包到本地部署
一.eclipse导入java web项目 1.file-import-git-next-clone URL-填写git上面的URL,然后一直next,完成后等待即可二.导入多个版本项目 1.fil ...
Intel 8086 常用汇编指令表
一.数据传输指令它们在存贮器和寄存器.寄存器和输入输出端口之间传送数据. 1. 通用数据传送指令. MOV 传送字或字节. MOVSX 先符号扩展,再传送. MOVZX 先零扩展,再传送. PUSH ...
Bubble Sort HDU - 5775 树状数组
//每个数字只会被它后面的比它小的数字影响,且会向右移动相应个数的位置 //比如:6 4 3 5 2 1 .4后面比它小的有三个,因此它的最右边位置就是当前位置 +3,即5 //如果该数字本身在标准 ...

HTML的文档设置标记

HTML的文档设置标记的更多相关文章

随机推荐

热门专题