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本来不是很难,关键就是经验吧,直入主题. 文档结构图设置了四级,但是目录始终只显示三级,郁闷了好久,网上看的也不靠谱,方法如下: 引用-目录-插入目录弹出插入目录设置后,修改级别为最大, ...

随机推荐

em和rem区别
em大小依据父元素的字体大小的倍数 rem大小依据与根元素,即html标签的font-size大小
luogu P3369 【模板】普通平衡树
————————————————版权声明:本文为CSDN博主「ModestCoder_」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https:// ...
牛客网剑指offer第13题——调整数组顺序使得奇数位于偶数前面
题目来源:剑指offer 题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变 ...
sql server通过临时存储过程实现使用参数添加文件组脚本复用
create procedure #pr_CreateFileGroup @dbname nvarchar(max), @filegroupname nvarchar(max) as begin /* ...
为什么要进行初始化（C语言）
答案:是为了清除被释放的内存中保存的以前程序中留下的垃圾数据.
Just a Hook HDU - 1698Just a Hook HDU - 1698 线段树区间替换
#include<cstdio> #include<cstring> #include<iostream> #include<algorithm> us ...
C++文件读写demo
一.常用文件打开方式二.读写文件步骤(文本文件) 1.写文件步骤 1)#include <fstream> //包含头文件 2)ofstream ofs; //创建流对象 3)ofs.o ...
linux查看硬件、系统信息
查看机器型号等 dmidecode 是一个读取电脑 DMI(桌面管理接口(Desktop Management Interface))表内容并且以人类可读的格式显示系统硬件信息的工具.这个表包含系统硬 ...
Python3标准库：collections容器数据类型
1. collections容器数据类型 collections模块包含除内置类型list.dict和tuple以外的其他容器数据类型. 1.1 ChainMap搜索多个字典 ChainMap类管理一 ...
CSS标题线（删除线贯穿线效果）实现之一二
缘起其实看到这个问题,心里已经默默把代码已经码好了~,不就想下面这样嘛:JSBIN代码示例嗯,是的,我们日常确实基本上就是用的这种方式,也没啥问题呀~,来个背景色定下位就欧拉欧拉的了. 不过,因为 ...

HTML的文档设置标记

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

随机推荐

热门专题