Web如何格式化文字与段落

这篇文章主要讲解了“Web如何格式化文字与段落”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Web如何格式化文字与段落”吧！

十余年的达川网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整达川建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“达川网站设计”,“达川网站推广”以来，每个客户项目都认真落实执行。

内容提要：

• 标题字(h2最大~h7最小)标记语法及属性语法

• 文本格式化标记类型与作用

• 使用字体font标记

• 使用段落与排版标记

• 使用各类格式化标记设计简易的Web页面

Web页面设计原则

• 简洁：满足人们的实用和需求为目标，要求简练、准确。

• 一致性：网站中各个页面使用相同的页边距，页面中的每个元素与整个页面以及站点的色彩和风格上的一致性。

• 好的对比度：对比度的目的强调突出关键内容，以吸引浏览者，鼓励他们去发掘更深层次的内容。

向Web页面添加文字信息

• 基本语法：

• 在这里添加内容

• 语法说明：

• body中定义文档的主体。

• body中包含文档的所有内容(如文本、超链接、图像、表格、列表、声音和视频等)。

• body标记所包含的内容会显示在页面上。

标记字标记

• 标题是通过

  ~ 等标记进行定义的。

• 基本语法：

• 1号标题 字

• 例如：

  Web前端开发技术
      Web前端开发技术
      Web前端开发技术
      Web前端开发技术
      Web前端开发技术
      Web前端开发技术

• 添加空格和特殊符号

• 在HTML文件中，添加空格的方式与其他文档添加空格的方式不同，网页中通过代码控制来添加空格，而在其他编辑器中通过键盘空格键来输入空格。

• 基本语法

  
       <®×
  

  注：在body标记内无论输入多少空格、回车符，页面在显示时都会忽略。

• 在HTML文件中，插入特殊字符

  显示结果	说明	Entity Name	Entity Number
  	显示一个空格
  <	小于	<	<
  >	大于	>	>
  &	&符号	&	&
  "	双引号	"	"
  ©	版权	©	©
  ®	注册商标	®	®
  ×	乘号	×	×
  ÷	除号	÷	÷

• 在HTML文件中，插入特殊字符案例

  
  	
  空格 
      
  大于>
      
  小于<
      
  逻辑与&
      
  版权©
      
  注册®
      
  乘号×
      
  除号÷

格式化文本标记

文本修饰标记各类浏览器均支持，各类网页开发工具中仍然有这类标记。常见的文本修饰标记如下表所示。

• 案例1：

  This text is bold<`
      
  
      This text is strong
      
  
      This text is big
      
  
      This text is emphasized
      
  
      This text is italic
      
  
      This text is small
      
  
      This text is containssubcript
      
  
      This text is containssuperscript

• 案例2：

  
      文本修饰标记应用
      
      软件工程专业全国就业最好
  
      软件工程专业全国就业最好
  
      软件工程专业全国就业最好
  
      软件工程专业全国就业最好
  
      x2+2x+5=b
  
      x1=2
  
      软件工程专业全国就业最好
  
      软件工程专业全国就业最好
  
      软件工程!
  
      软件工程!
  

• 字体font标记：

  
      文本样式为黑体，颜色#000fff，大小从-1~-7；
      -1字
      -3字
      -5字
      -7字
  
      文本样式为宋体，颜色#ff0066，大小从1~7；
      1字
      3字
      5字
      7字
  
      文本样式为隶书，颜色#000fff，大小从+1~+7；
      +1字
      +3字
      +5字
      +7字
  

• font标记用来改变默认的字体、颜色、大小等属性，这些更改分别通过不同的属性定义完成。

• 基本语法： 内容

• 属性说明：

  属性	值	说明
  size	+1+7，-1-7	数字越大字号越大
  color	rgb、#rrggbb、color name	规定文本的颜色。可以使用rgb函数、十六进制数、颜色英文名称来表达
  face	字体1，字体2，字体n	face属性可以有多个值，用逗号分隔。字体使用方式为从左到右依次使用。只要前面的字体不存在，则使用后一个，都不存在则默认使用“宋体”。

• 案例：

格式化文本标记-续

• 计算机输出标记：常用的计算机输出标记如下表所示：

  标签	说明
  	定义计算机代码
  	定义键盘码
  	定义计算机代码样本
  	定义打字机代码
  	定义变量
  	定义预格式文本

• 预格式化标记

• 标记对网页中的文字段落进行预格式化，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。

• 基本语法：

   预格式化文本 

• 案例：

  
  
  
  
      
      
      
  
  
  
      
  
          
              春  晓
  
              孟浩然
  
              
              春眠不觉晓，
                        处处闻啼鸟。
              夜来风雨声，
                        花落知多少。
          
      
  
  

格式化文本标记-续

• 引用和术语标记：常用的引用和术语标记如下表所示。

  标记	主要用途
  etc.	定义缩写
  江苏南京市	定义地址
  长的引用	定义长的引用
  引用、引证	定义引用、引证
  引用短语	定义短的引用语，IE看不到引号，其余可以
  定义项目	定义一个定义项目

• 区别：

• ：引用的是小段文字。

• ：引用的是大段的内容块。

• ：q标签是行内元素，在内容的开始和结尾处会包有引号。

• ：blockquote是块级元素，默认带有左右40px的外间距，不带引号。

• 标签和标签都表示“引用”

1. 格式不同

2. 语义不同

• 通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

• 假如用了ABBR及ACRONYM标签，只需要把鼠标指到缩写词上就会显示完整的意思。

  
      etc.
      PR
      The PRC was founded in 1949.
      
  CS
      
  江苏省南京市
  
      
  
          Written by Donald Duck.
  
          Visit us at:
  
          Example.com
  
          Box 564, Disneyland
  
          USA
      
  

段落与排版标记

网页的外观是否美观，很大程度上取决于其排版。在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。

• 段落标记

• 段落

  标记用来起始一个段落，它是一个块级元素。段落p标记会自动在其前后创建一些空白，而
  换行符前后没有留白，另外

  也是段落标记。

• 基本语法：

  段落正文内容

• 案例：

  
      段落p标记对齐方式
      
      网页的外观是否美观，很大程度上取决于其排版。
  
      网页的外观是否美观，很大程度上取决于其排版。
  
      网页的外观是否美观，很大程度上取决于其排版。
  
  

• 换行标记
  

• 基本语法：
  换行

• 文档中，
  元素属于单个标记，表示插入换行符。

• 例如：

  段落正文内容
  另起一行

• 水平分割线标记

  ---

• ---

  元素可以让浏览器显示一条细线以分隔两个区域。

• 基本语法：

  ---

  属性	值	说明
  width	像素px或百分比	设置水平线宽度
  size	整数，单位px	设置水平线高度
  color	rgb函数、十六进制数、颜色英文名称	设置水平线颜色
  align	left、center、right	设置水平线对齐方式

• 案例：

  
      
  换行与水平分割线标记的应用
      
  大小为3、宽度为60%、居中、蓝色
      
      
  大小为5、宽度为600px、居右、绿色
      
  

• 段落缩进标记

  段落缩进(也称为“块引用”)，blockquote标记引用的内容必须是块级标记，浏览器在blockquote标记前后添加了换行，并增加了外边距。

• 一对blockquote标记能够向右缩进5个英文字符的位置。

• 基本语法：

  需要缩进的内容

• 案例：

  
      
  段落缩进标记的应用
      
      
  这行文字没有缩进
      
  这行文字有5个字符缩进
      
  
          
  这行文字有10个字符缩进
      
  

Web页面设计实例

    
    



    2016-2021年教育信息化行业深度分析及“十三五”发展规划指导报告
    
    

    
                    细分报告:   教育信息化市场研究报告 教育信息化市场调查报告 教育信息化前景预测报告
                                教育信息化市场分析报告 教育信息化市场评估报告 教育信息化重点企业报告
                                教育信息化发展前景报告 教育信息化投资规划报告 教育信息化深度研究报告
                                教育信息化投资前景报告 教育信息化项目调研报告
    
    
    
报告导读
    
    本报告从国际教育信息化发展、国内教育信息化政策环境及发展、研发动态、进出口情况、
        重点生产企业、存在的问题及对策等多方面多角度阐述了教育信息化市场的发展，并在此基础上对教育信息化的发展前
        景做出了科学的预测，最后对教育信息化投资潜力进行了分析。
    
    
郑重声明
    

        

            本报告由中国报告大厅出版发行，报告著作权归宇博智业所有。本报告是宇博智业的研究与统计成果，有偿提供给
            购买报告的客户使用。未获得宇博智业书面授权，任何网站或媒体不得转载或引用，否则宇博智业有权依法追究其
            法律责任。如需订阅研究报告，请直接联系本网站，以便获得全程优质完善服务。
        
    

    
    
        Copyrignt©中国报告大厅 京ICP备11010647号-2京公网安备11010502024380
    

感谢各位的阅读，以上就是“Web如何格式化文字与段落”的内容了，经过本文的学习后，相信大家对Web如何格式化文字与段落这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！