1、文本的排版

1.1

<body>

    <h2>李白</h2>

    <p align="center" >

        <font face=" 隶书" size=" 7" color=" #000000" align="center">静 夜 思</font><br />

        <font face=" 隶书" size=" 5" color=" #101010" align="center">李  白</font><br />

        <font face=" 宋体" size=" 6" color="#100000" align="center">床前明月光，疑是地上霜。</font><br />

        <font face=" 黑体" size=" 6" color=" #000000" align="center">举头望明月，低头思故乡。</font>

    </p>

    <hr />

    <h4>【诗词欣赏】</h4>

    &nbsp; &nbsp; &nbsp; &nbsp; 这首诗表达了李白的思乡之情。

    <h4>【词语注释】</h4>

    <ul>

        <li>李白，唐代著名的诗人，著有诗词上百首。</li>

        <li>地上霜：泛指月光。</li>

    </ul>

</body>

细节分析：<h1><h2><h3><h4>..是标题标签。用来分割文本，方便阅读。

对于标题或者文字的水平方向通过设置相关标签的align属性来设置。<h1 align="center/left/right".

<font>标签改变文字的字体字号颜色。<font face="宋体" size=“1--10” color=""#000000 align="对齐方式">。。。。</font> 字体的颜色由#加6位数字组合而成。

<hr>标签标示文本之间添加一条分割直线

<i><em><cite>标签分别标示字体的倾斜。<b><strong>标示字体的加粗。<sup>设置为上标。<sub>设置为下标。<big>设置加大一号的显示。<small>设置减小号的显示。

2、基本的文字格式：

    <title>基本的文字格式</title>

    <meta charset="utf-8" />

</head>

<body>

    <b> b标签表示设置为粗体</b><br />

    <strong> strong标签表示设置粗体</strong><br />

    <i> i 标签表示字体的倾斜</i><br />

    <em> em 标签表示字体的倾斜</em><br />

    <cite> cite标签表示字体的倾斜</cite><br />

    <big> big 标签表示加大一级的字号</big><br />

    <small > small 表示减小一级的字号</small><br />

    <b>sub标签表示下标  X</b><sub >2</sub><br />

    <b>sup标签上标  Y</b><sup>2</sup>

</body>

3、段落标记

<p>段落标记，标示一个段落。align属性设置对齐方式。

<br>换行标记

<center>居中标记。

<hr>加入水平分割线，分割文本<hr size="厚度值" noshade width="宽度值" align="对齐方式">

<per>预编排标签，用来显示代码，保留一切符号。

  <title>基本段落排版</title>

    <meta charset="utf-8" />

</head>

<body>

    <p align="center" >p标签表示段落的标记，表示一个段落的开始。align属性设置对齐方式</p><br />

    <p align="left" >p标签的左对齐。</p><br />

    <center> center 标签表示居中表示。</center>，<br />

    <p> hr标记表示加入一条水平分割线</p>

    <hr />

    <hr size="9" />

    <hr size="6" width="130"  color="#8uj888"/>

</body>

4、特殊的符号

字符实体&copy、&reg、&trade；

   <title>特殊字符示例</title>

    <meta charset="utf-8" />

</head>

<body>

    <h1>版权符号（& copy）：&copy; </h1><br />

    <h2>注册商标符号（& reg）：&reg; </h2><br />

    <h3>未注册的商标符号（&trade）：&trade; </h3>

    <h4>其他的符号：&Aacute; &AElig; &asymp; &beta; &yen; &nabla; </h4>

</body>

html 网页文本设计的更多相关文章

  1. [转]让你的网页文本框增加光晕效果与提示，水印(类似QQ2011)

    本文转自:http://www.cnblogs.com/xiaofengfeng/archive/2013/01/28/2880344.html 让你的网页文本框增加光晕效果(类似QQ2011) 我们 ...

  2. 学习笔记 第五章 使用CSS美化网页文本

    第五章   使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...

  3. 获取WebView里的网页文本内容

    获取WebView里的网页文本内容,能够採用例如以下方法: public class ComJSInterface { public void loadHtmlContent(String conte ...

  4. NanUI文档 - 使用网页来设计整个窗口

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  5. 爬虫_网页url设计

    为什么需要网页URL设计? 每个url不同的结构代表着不同的网页模块和信息的展现形式,为了方便维护与管理 网页url怎么设计? 分层: 主域名,子域名 一般形式为: 主域名:  www.job.com ...

  6. Adobe Fireworks CS6是一款集网页图片设计、制作与编辑为一体的专业软件

    Adobe Fireworks CS6是一款集网页图片设计.制作与编辑为一体的专业软件,它不仅可以轻松制作出各种动感的Gif.动态按钮.动态翻转等网络图片,还可以轻松实现大图切割,让网页加载的图片显示 ...

  7. HTML中网页超链接设计

    一.超链接的概念: 1>用<a>标签实现.href属性设置了要链接的网址. 链接路径URL:Uniform Resource Locator的缩写.统一资源定位符. 4部分组成:协议 ...

  8. css设置网页文本选中样式

    网页的默认的文本选中颜色是蓝底白字(大多应该是吧),这个样子: 感觉并不是特别好看,可以通过CSS3的一个特性,一个CSS3的伪类选择器::selection来设置文本被选中时的状态,比如本博客的主题 ...

  9. ps 网页配图设计

    网站配图设计 蒙太奇 品科软件---网页页面 1橡皮擦来画两图 容合 大橡皮擦擦出来自然 2图放到一个色块中 用剪贴蒙版 3调色阶 装饰下图片  矩形工具  形状  填充 画彩条 超出本框的怎么去掉多 ...

随机推荐

  1. 快速入门系列--WCF--06并发限流、可靠会话和队列服务

    这部分将介绍一些相对深入的知识点,包括通过并发限流来保证服务的可用性,通过可靠会话机制保证会话信息的可靠性,通过队列服务来解耦客户端和服务端,提高系统的可服务数量并可以起到削峰的作用,最后还会对之前的 ...

  2. switch判断注意点

    if判断,如果判断的两个值类型不同,会继续隐性转换,==,当然如果使用===就不会. 1 if(2=="2"){ 2 console.log("true"); ...

  3. 深入理解CSS中的长度单位

    前面的话 本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识 绝对长度单位 绝对长度单位代表一个物理测量 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度 ...

  4. Android属性动画之ObjectAnimator控制

    Android为我们提供了大量的动画效果,如何通过这些动画来达到我们需要的效果呢?今天就为大家总结一下ObjectAnimator动画控制事件. 该项目的的布局文件只有两个控件:ImageView和B ...

  5. 10分钟学会理解和解决MySQL乱码问题

    在阅读本文之前,强烈建议对字符集编码概念还比较模糊的同学 阅读下博主之前对相关概念的一篇科普:十分钟搞清字符集和字符编码 本博客已经迁移至: http://cenalulu.github.io/ 为了 ...

  6. 基于@AspectJ配置Spring AOP之一--转

    原文地址:http://tech.it168.com/j/2007-08-30/200708302209432.shtml 概述 在低版本Spring中定义一个切面是比较麻烦的,需要实现特定的接口,并 ...

  7. tomcat 容器生命周期lifecycle

    1.复习java的事件机制 java事件机制包括三个部分:事件.事件监听器.事件源. 事件:一般继承自java.util.EventObject类,封装了事件源对象及跟事件相关的信息. 事件监听器:实 ...

  8. vs切换当前编辑文件时自动定位目录树

    在编辑区,切换当前编辑文件时(单击.cpp或.h文件选项卡),"解决方案资源管理器"目录树会自动定位当前编辑的文件,并以灰色标识,当一个解决方案中的工程数目数目很多,每个工程下面又 ...

  9. 推荐25个帮助你提高技能的 CSS3 实战教程

    使用 CSS,你能够以极高的效率和易用性创造出美丽的设计.而目前流行的 CSS3 技术更加强大,能够创造更多丰富的效果和功能,而不需要任何外部插件.今天,我为大家收集了25个很有用的 CSS 教程,技 ...

  10. BrowserSync - 浏览器同步测试工具

    背景: 之前在学gulp的时候,使用gulp-livereload来实时自动刷新页面省时开发,但一直比较难用,现在找到新的替代神器. 安装:   // 使用淘宝镜像会快些 npm install -g ...