zoukankan      html  css  js  c++  java
  • web-3. 用于页面排版的格式标记

    3. 用于页面排版的格式标记

    本节课用于介绍文字的排版、段落的排版、列表的建立、注释的使用。

    3.1 文字的排版

    1. 标题标记

    由开始标记<hn>和结束标记</hn>共同组成,要显示的标题内容插入在开始标记与结束标记之间。标题标记一般包含在<body>标记中。

    格式如下:<hn>......</hn>,其中n的取值范围是16

    HTML语言中的标题标记从高到低,分为6个等级:<h1><h2><h3><h4><h5><h6>。每级标题的字体大小依次递减。

    例如:

    <html>

    <head>

    <title>标题的等级实例</title>

    </head>

    <h1>1</h1>

    <h2>2</h2>

    <h3>3</h3>

    <h4>4</h4>

    <h5>5</h5>

    <h6>6</h6>

    </body>

    </html>

    1. 字体标识

    1<font>用来设置字体的样式,格式如下:

    <font face=”字体” size=字号 color=颜色值 align=对齐方式>......</font>

    2face设置字体

    3size设置大小,可以使1-7,也可以在前面加上(+)或者(-)号,表示相对大小

    例如:

    <html>

    <head>

    <title>标题的等级实例</title>

    </head>

    <body>

    <font size=7>字号设置实例</font><br>

    <font size=6>字号设置实例</font><br>

    <font size=5>字号设置实例</font><br>

    <font size=4>字号设置实例</font><br>

    <font size=3>字号设置实例</font><br>

    <font size=2>字号设置实例</font><br>

    <font size=1>字号设置实例</font><br>

    字号设置实例<br>

    <font size=+1>字号设置实例</font><br>

    </body>

    </html>

    注:HTML默认的字体大小是3

    (4)color用来设置颜色,有两种表示方法:一种是利用RGB颜色值,以#字开头,如:#001122,每两位表示一个颜色的深浅;另一种是直接显示颜色

    例子:

    <html>

    <head>

    <title>color</title>

    </head>

    <body>

    <font color=#000000>黑色</font><br>

    <font color=gray>灰色</font><br>

    <font color=#00ff00>绿色</font><br>

    <font color=silver>银白色</font><br>

    </body>

    </html>

    1. 文字修饰

    <b>粗体</b>

    <strong>粗体</strong>

    <i>斜体</i>

    <em>斜体</em>

    <cite>斜体</cite>

    <big>字号加大一级</big>

    <small>字号减小一级</small>

    <b>X</b><sup>2</sup>     上角号

    <b>Y</b><sub>2</sub>      下角号

    例如:

    <html>

    <head>

    <title>decorate</title>

    </head>

    <body>

    <b>粗体</b>

    <strong>粗体</strong>

    <i>斜体</i>

    <em>斜体</em>

    <cite>斜体</cite>

    <big>字号加大一级</big>

    <small>字号减小一级</small>

    <b>X</b><sup>2</sup>

    <b>Y</b><sub>2</sub>

    </body>

    </html>

    1. 特殊符号

    这里的特殊符号特别多,我们给出下面的地址,我们先记住   表示的是空格,切记有分号。

    http://www.fhdq.net/ts/177.html

    3.2 段落的排版

    1. 段落标记和对齐方式

    <p align=对齐方式>......</p> 其中结束标记</p>可以省略

    align=lift      表示左对齐

    align=right    表示右对齐

    align=center   表示中间对齐

    1. 换行标记

    <br>

    1. 居中标记

    <center>......</center>

    1. 水平分隔线

    <hr size=厚度值 noshade width=宽度值 align=对齐方式>

    水平分隔线标识的size属性用来设置分割线的厚度(以像素为单位);noshade属性用来去掉3D效果;width属性用来设置分割线的宽度(以像素为单位),默认分隔显示横跨整个浏览器窗口;align属性用来设置分割线的对齐方式,默认值是center

    1. 预编排标识

    预编排标识<pre>可以预先定义好一段文字,浏览器将完全按照在源代码中的效果显示。预编排标记的一个常见应用就是用来显示源代码。

    例子:

    <html>

    <head>

    <title>pre</title>

    </head>

    <body>

    <pre>

    main

    </pre>

    </body>

    </html>

    3.3 列表的建立

    1. 无序列表

    无序列表<ul>用项目符号来表示一个没有特定顺序的相关条目的集合。

    无序列表使用一对标记<ul></ul>,并且每个表项要使用<li>标记进行定义,</ul>可以省略。

    例如:

    <html>

    <head>

    <title>pre</title>

    </head>

    <body>

    what will we eat today?

    mian food:

    <ul>

    <li>rice</li>

    <li>hambuger</li>

    </ul>

    </body>

    </html>

    1. 有序列表

    有序列表<ol>在列表项目前添加的是编号不是项目符号,在排序的时候会用到它。、

    样式:

    <ol type=样式 start=起始值>

    <li>......</li>

    ......

    </ol>

    type的可选范围有:1(数字序号)、a(小写字母)、A(大写字母)、i(小写罗马字母)、I(大写罗马字母),默认的值是1

    例如:

    <html>

    <head>

    <title>pre</title>

    </head>

    <body>

    今天的功课有:

    <ol>

    <li>数学</li>

    <li>语文</li>

    </ol>

    明天的功课有:

    <ol type=a start=3>

    <li>数学</li>

    <li>语文</li>

    </ol>

    </body>

    </html>

    1. 定义列表

    定义列表又称为字典列表,是表现术语表、名词列表等的理想方式。

    格式:

    <dl>

    <dt>术语项</dt>

    <dd>前面术语的解释</dd>

    <dt>术语项</dt>

    <dd>前面术语的解释</dd>

    ......

    </dl>

    3.4 注释的使用

    格式:<!__*******************__>

    <!____>组成。

  • 相关阅读:
    bzoj 1715: [Usaco2006 Dec]Wormholes 虫洞【spfa判负环】
    bzoj 1627: [Usaco2007 Dec]穿越泥地【bfs】
    bzoj 1596: [Usaco2008 Jan]电话网络【贪心】
    bzoj 1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路【Floyd】
    bzoj 1629: [Usaco2007 Demo]Cow Acrobats【贪心+排序】
    bzoj 1639: [Usaco2007 Mar]Monthly Expense 月度开支【二分】
    bzoj 1708: [Usaco2007 Oct]Money奶牛的硬币
    bzoj 1827: [Usaco2010 Mar]gather 奶牛大集会【树形dp】
    bzoj 1576: [Usaco2009 Jan]安全路经Travel【spfa+树链剖分+线段树】
    bzoj 1592: [Usaco2008 Feb]Making the Grade 路面修整【dp】
  • 原文地址:https://www.cnblogs.com/free-1122/p/9857778.html
Copyright © 2011-2022 走看看