Web前端开发——格式化文本与段落(上)

一、学习目标

网页内容的排版包括文本格式化、段落格式化和整个页面的格式化,这是设计个网页的基础。文本格式化标记分为字体标记、文字修饰标记。字体标记和文字修饰标记包括对于字体样式的一些特殊修改。段落格式化标记分为段落标记、换行记、水平分隔线标记等。

通过对文本与段落格式化知识的学习,读者能够掌握页面内容的初步设计,理解并掌握 HTML 标题字标记、空格及特殊符号的使用;理解格式化标记中的文本修饰标记、计算机输出标记、引用和术语标记以及字体 font 标记的语法和使用;理解段落与排版标记的语法,学会编写简易的 Web 页面代码。

二、Web页面初步设计

Web页面设计需要遵循简洁、一致性、有好的对比度的设计原则。简洁是指以满足人们的实际需求为目标,要求简练,准确。一致性是指网站中的各个页面使用相同的页边距,页面中的每个元素与整个页面以及站点的色彩和风格保持一致。对比度在于强调、突出关键内容,以吸引浏览者,鼓励他们去发掘更深层次的内容。

1.1 向Web页面中添加文字信息

在 HTML 文件中,主体内容被包含在<body></body >标记之间,并且 body 标记有很多自身的属性,例如设置页面背景、设置页面边界等。

1.1.1 基本语法
<body>向这里添加内容</body>
1.1.2 语法说明

body标记定义文档的主体。

body标记包含文档的所有内容(例如文本、超链接、图像、表格和列表等)。

一个简单的HTML文档必须包含最基本的必备的标记。

1.2 标题字标记

标题字标记由h1~h6共6种标记组成。标记中的字母h是英语Heading的简称。作为标题字,h1 标记定义最大的标题字,h6标记定义最小的标题字。h1 标记到 h6标记属于块级标记,它们必须在HTML中首尾成对出现。浏览器会自动地在标题的前后添加空行。

1.2.1 基本语法

<h1 align="left|centerlright|justify">1号标题文字</h1>
<h2 align="left|centerlrightljustify">2号标题文字</h2>
<h3 align="left|centerlright|justify">3号标题文字</h3>
<h4 aliqn="left|center right|justify">4号标题文字</h4>
<h5 align="left|centerlright|justify">5号标题文字</h5>
<h6 align="left|centerlright|justify">6号标题文字</h6>
1.2.2 语法说明

h后面的数字越小,标题字越大。标题字标记的align属性用来定义标题字的对齐方式,对齐方式有4种,分别是left、center、right、jstify。但是一般推荐设计者使用CSS样式表来定义对齐方式。
标题文字的大小由它们的重要性决定,等级越高的标题字号越大。在设计时要对各级标题有所规划。

1.3 添加空格与特殊符号

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

1.3.1 基本语法
<body>&nbsp;&lt;&reg;&times;
</body>
1.3.2 语法说明 

在网页中添加空格使用“&nbsp;”,其中“nbsp”是指Non Breaking Space,空格数量与“&nbsp;”的个数相同。

在网页中插人特殊字符与插入空格符号的方式相同。特殊字符对应的符号代码如下表。

显示结果说明符号代码
显示一个空格

&nbsp;

<小于$lt;
>大于

&gt;

&&符号&amp;
"双引号&quot;
©版权&reg;
×称号&times;
÷除号&divide;

对于HTML文档中特殊字符对应的代码,浏览器解释后会显示对应的特殊符号。

三、格式化文本标记

HTML中提供了很多格式化文本的标记,例如文字加斜、斜体、下画线、底纹、上/下标等。

2.1 文本修饰标记

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

标记说明
<b>软件工程专业! </b>定义粗体
<i>软件工程专业! </i>定义斜体
<u>软件工程专业! </u>定义下画线
<del>软件工程专业! </del>定义删除线
<sup>软件工程专业! </sup>定义上标
<sub>软件工程专业! </sub>定义下标
<strong>软件工程专业! </strong>定义着重文字,与<b></b>效果相同
<em>软件工程专业! </em>定义加重语气,与<i></i>效果相同
<small>软件工程专业! </small>变小字号
<big>软件工程专业! </big>变大字号

2.2 字体标记

在不指定任何样式的情况下,浏览器会把字体显示为16px、黑色、宋体,因此在设计网页时要根据需要更改不同段落的字体。在HTML5中可以使用CSS中的字体属性替代。

字体标记(font)规定文本的字体系列、字体尺寸、字体颜色,所有浏览器均支持font标记。

2.2.1 基本语法
<font face = "" size ="" color ="" >…</font>
2.2.2 属性说明 

字体标记(font)的属性、取值及说明如下表。

属性取值说明
size+1~+7、1~7、-1~-7数字越大字号越大,负数字越大字号越小。“+”表示号比原来的字号大一些,“-”表示字号比原来的字号一些
colorrgb(r,g, b)、rgb(r%,g%,b%)#rrggbb或#rgbcolorname规定文本的颜色。可以使用rgb()函数、十六进制数、颜色的英文名称来表达
face字体1,字体2,…,字体nface属性可以有多个值,用逗号分隔。字体使用方式为从左向右依次选用。如果前面的字体不存在,则使用后一个字体。若都不存在,则默认使用“宋体”

格式化文本与段落(上)就到这里,下级将更新段落与排版标记,也是格式化文本与段落的重点内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/901582.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于PHP开源CMS系统ModStart的详细介绍及使用指南

关于PHP开源CMS系统ModStart的详细介绍及使用指南&#xff1a; &#x1f50d; ModStart是什么&#xff1f; 基于Laravel框架开发的模块化CMS系统采用Apache 2.0 开源协议&#xff0c;完全免费可商用特别适合需要快速搭建企业级网站/管理系统的开发者 &#x1f680; 核心优势…

TCP标志位抓包

说明 TCP协议的Header信息&#xff0c;URG、ACK、PSH、RST、SYN、FIN这6个字段在14字节的位置&#xff0c;对应的是tcp[13]&#xff0c;因为字节数是从[0]开始数的&#xff0c;14字节对应的就是tcp[13]&#xff0c;因此在抓这几个标志位的数据包时就要明确范围在tcp[13] 示例1…

RK3588S开发板将SPI1接口改成GPIO

参考官方教程&#xff1a;ROC-RK3588S-PC 一.基本知识&#xff1a; 1.GPIO引脚计算&#xff1a; ROC-RK3588S-PC 有 5 组 GPIO bank&#xff1a;GPIO0~GPIO4&#xff0c;每组又以 A0~A7, B0~B7, C0~C7, D0~D7 作为编号区分&#xff0c;常用以下公式计算引脚&#xff1a;GPIO…

Java 设计模式:适配器模式详解

Java 设计模式&#xff1a;适配器模式详解 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过将一个类的接口转换为客户端期望的另一个接口&#xff0c;使原本不兼容的类能够协同工作。适配器模式就像现实生活中的电源适配器&#xf…

python manimgl数学动画演示_微积分_线性代数原理_ubuntu安装问题[已解决]

1.背景 最近调研python opencv, cuda加速矩阵/向量运算, 对于矩阵的线性变换, 秩, 转秩, 行列式变化等概概念模糊不清. 大概课本依旧是天书, 于是上B站搜索线性代数, 看到 3Blue1Brown 线性变换本质 视频, 点击观看. 惊为天人 --> 豁然开朗 --> 突然顿悟 --> 开心不已…

Git 学习笔记

这篇笔记记录了我在git学习中常常用到的指令&#xff0c;方便在未来进行查阅。此篇文章也会根据笔者的学习进度持续更新。 网站分享 Git 常用命令大全 Learn Git Branching 基础 $ git init //在当前位置配置一个git版本库 $ git add <file> //将文件添加至…

Dynamics365 ExportPdfTemplateExportWordTemplate两个Action调用的body构造

这两天在用ExportPdfTemplate做pdf导出功能时&#xff0c;遇到了如下问题InnerException : Microsoft.OData.ODataException: An unexpected StartArray node was found when reading from the JSON reader. A PrimitiveValue node was expected. 我的场景是使用power automate…

经典算法 判断一个图是不是树

判断一个图是不是树 问题描述 给一个以0 0结尾的整数对列表&#xff0c;除0 0外的每两个整数表示一条连接了这两个节点的边。假设节点编号不超过100000大于0。你只要判断由这些节点和边构成的图是不是树。是输出YES&#xff0c;不是输出NO。 输入样例1 6 8 5 3 5 2 6 4 5…

【嵌入式八股2】C++:STL容器与算法

1. STL常见容器及其内部实现的数据结构 序号 名称 描述 存储结构 常用方法和操作 1vector动态分配的数组顺序数组&#xff08;array&#xff09;v.push_back(), v.pop_back(), v.insert(), v.erase(), v.capacity(), v.size(), v.at(idx), v.front(), v.back()2list双向链表离…

vmcore分析锁问题实例(x86-64)

问题描述&#xff1a;系统出现panic&#xff0c;dmesg有如下打印&#xff1a; [122061.197311] task:irq/181-ice-enp state:D stack:0 pid:3134 ppid:2 flags:0x00004000 [122061.197315] Call Trace: [122061.197317] <TASK> [122061.197318] __schedule0…

在Apple Silicon上部署Spark-TTS:四大核心库的技术魔法解析!!!

在Apple Silicon上部署Spark-TTS&#xff1a;四大核心库的技术魔法解析 &#x1f680; &#xff08;M2芯片实测&#xff5c;Python 3.12.9PyTorch 2.6.0全流程解析&#xff09; 一、核心库功能全景图 &#x1f50d; 在Spark-TTS的部署过程中&#xff0c;pip install numpy li…

leetcode03 -- 武汉旅游查询系统

武汉旅游查询系统 1 界面展示 1.首页地图界面 2.查找功能 在查找框内输入查找的景点名称 查找到的景点在地图上进行定位,右侧展示景点的详细信息。 3.添加景点功能 在地图上点击某个位置,系统弹出一个输入框供用户填写景点的名称和描述。 在弹出的输入框中输入景点名…

玩机进阶教程----MTK芯片设备刷机导致的死砖修复实例解析 连电脑毫无反应 非硬件问题

在高通芯片机型中,我们可以通过短接主板测试点来激活高通芯片特有的9008底层端口来刷写救砖固件。但通常MTK芯片类的设备联机电脑即可触发深刷模式。但有些例外的情况会导致链接电脑毫无反应。遇到类似故障的友友可以参阅此博文尝试解决。 通过博文了解 1💝💝💝-----实…

09-设计模式企业场景 面试题-mk

文章目录 1.工厂(方法)模式1.1.简单工厂模式(不是设计模式,是编程习惯)1.2.工厂方法模式(企业开发中最常见)1.3.抽象工厂模式2.策略模式2.1.登录案例(工厂模式+策略模式)3.责任链设计模式4.单点登录怎么是实现的?5.权限认证是如何实现的6.上传数据的安全性你们怎么控…

BUUCTF-Web(1-20)

目录 一.SQL注入 (1)[极客大挑战 2019]EasySQL 万能密码 (7)[SUCTF 2019]EasySQL 堆叠注入 解一&#xff1a; 解二&#xff1a; (10)[强网杯 2019]随便注 堆叠注入 解一&#xff1a; 解二&#xff1a; 解三&#xff1a; (8)[极客大挑战 2019]LoveSQL 联…

软件包安装管理Gitlab

官方提供了非常详尽的系统及自动化脚本安装教程 Gitlab官网下载地址&#xff1a;https://gitlab.cn/install/ 1、安装配置 今天我们说一下包安装管理&#xff0c;这样方便我们自己更精确的制定符合我们自己需要的Gitlab仓库 配置&#xff1a;ubuntu2004(focal) 4C8G 下载程…

hadoop执行sqoop任务找不到jar

sqoop:1.4.7 hadoop:3.4.1 数据:oracel-hdfs 2025-04-15 16:57:00,850 INFO sqoop.Sqoop: Running Sqoop version: 1.4.7 2025-04-15 16:57:00,901 WARN tool.BaseSqoopTool: Setting your password on the command-line is insecure. Consider using -P instead. 2025-04-15 …

空地机器人在复杂动态环境下,如何高效自主导航?

随着空陆两栖机器人(AGR)在应急救援和城市巡检等领域的应用范围不断扩大&#xff0c;其在复杂动态环境中实现自主导航的挑战也日益凸显。对此香港大学王俊铭基于阿木实验室P600无人机平台自主搭建了一整套空地两栖机器人&#xff0c;使用Prometheus开源框架完成算法的仿真验证与…

MCP调用示例-GitHub仓库操作

在上一篇文章MCP核心概念和应用 ———AI 大模型的标准化工具箱里&#xff0c;我们讲述了MCP的安装&#xff0c;现在让我们试一试通过示例了解它的功能吧&#xff01; 首先确保你已经有了相应的APIKEY。 &#x1f4a1;大模型中转API推荐 ✨中转使用教程 1、点击界面上的 「Done…

zk源码—5.请求的处理过程一

大纲 1.服务器的请求处理链 (1)Leader服务器的请求处理链 一.PrepRequestProcessor请求预处理器 二.ProposalRequestProcessor事务投票处理器 三.SyncRequestProcessor事务日志处理器 四.AckRequestProcessor投票反馈处理器 五.CommitProcessor事务提交处理器 六.ToBeA…