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

随机推荐

DNS | named.run文件很大的处理方法
在查看/var/named/data目录中发现named.run文件260G+ 总用量 267G -rw-r--r-- 1 named named 1.3K 9月 2 21:27 named.run ...
[CodeIgniter4]讲解-启动流程
https://codeigniter.org.cn/forums/thread-31030-1-1.html CodeIgniter 是一个小巧但功能强大的 PHP 框架,作为一个简单而“优雅”的工 ...
MySQL表名大小写敏感性
Linux版MySQL 库名与表名是严格区分大小写的: 表的别名是严格区分大小写的: 列名与列的别名在所有的情况下均是忽略大小写的: 变量名也是严格区分大小写的: 修改步骤如下: 1. 编辑[/etc ...
mysql 连接查询转换group_concat, find_in_set
1.a表 2.b表 3.连接(a_u_id 对应b表的b_id) select a.a_id,a.a_u_id,group_concat(b.b_name) from a_tb a left join ...
vue ----element-ui 文件上传upload 组件实现及其后台
1.前台 action 不用改 :https://jsonplaceholder.typicode.com/posts/ getFile: 获取文件 data(){ return { file: {} ...
安装Gitlab到Ubuntu（APT）
运行环境系统版本:Ubuntu 16.04.6 LTS 软件版本:Gitlab-ce-11.10.1 硬件要求:最低2核4GB,建议4核8GB 安装过程 1.安装依赖 root@localhost: ...
清北学堂—2020.1提高储备营—Day 2 morning（并查集、堆）
qbxt Day 2 morning --2020.1.18 济南主讲:李佳实目录一览 1.并查集 2.堆总知识点:基础数据结构一.并查集 1.描述:并查集是一类十分常用的数据类型,它有着十分 ...
Tomcat中使用JNDI配置各种数据源
最近接手了一个离职同事的老项目,全是XML配的,看的我贼难受,不过了解下配置原理还是有好处的 1.MySql <Resource name ="cockpitTest" au ...
React Hooks 笔记1
useState const [state, setSate] = useState(initialState) 特征: setState 标识稳定,组件重新渲染时不会变化,useState 返回的第 ...
pandas玩转excel-> (1)如何利用pandas创建【行，列，单元格】
import pandas as pd #------新建单元格的方法一:通过先创建字典的形式 #可以先新建一个字典d={'x':100,'y':200,'z':300} #打印字典的索引print( ...

HTML的文档设置标记

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

随机推荐

热门专题