Web开发及人机交互导论 实验二 格式化文件

简介: Web开发及人机交互导论 实验二 格式化文件

一、实验目的


掌握标题字、段落、物理和逻辑样式等标记的语法。

了解列表基本类型,掌握无序列表、有序列表、定义列表的语法并学会使用。

掌握文字段落排版的基本规则。

能够完成文本型Web网面的设计。


二、实验环境


Windows10系统下的H Builder X


三、实验步骤


项目一:


(1)建立HTML文档框架。

97ad1f2f937e4f76816aa115e6b75fcc.png

(2)在HTML文档head标记中插入title标记。

1426dff059814557bc72fdf893db9cdb.png

(3)在body标记中插入标题字标记,并应用属性实现居左、居中、居右对齐。

212a39b7f6a249a180ce665dad9e6574.png

(4)在body标记中插入水平分隔线标记,并应用颜色属性改变水平线颜色。

acf0e65008ad4aa6b4b8a1cc45c38aec.png

(5)在body标记中插人物理样式、 逻辑样式标记进行练习。分别插人段落标记、居中标记、段落缩进标记、上下标标记等。

c7f487c256c945288277625b5ea3f38c.png

9c02bcce994f4ce2bd3c558106f1371c.png

6f293a1e6e904e299301da92aa943597.png


项目二:


(1)建立HTML文档框架。

5e2bc6f5f78645048403656ec3e8c973.png

(2)在HTML文档中插入样式style标记。

4ee57efd7f6f4dcc9f56b5a3944e2e50.png

(3)在style标记中分别定义新闻首行样式first_ line 、图层样式container、无序列表样式ul。

7f0d7e0212f94a69b8d1a0561e5d8d88.png

(4)在body标记中插入图层,并应用图层样式;插入段落并应用首行样式实现新闻首行效果;插入无序列表,并应用无序列表样式实现新闻导航。

467c9f45396848a9afd16a48181dbb35.png

项目三:


(1)建立HTML文档框架。

4472b5e0d0bc419490e6ab90c77257db.png

(2)在HTML文档中插入样式style标记。

5347da6845ad4db1bc04f9cdba53f7e2.png

(3)在style标记中分别定义段落p标记样式和图层divrect样式。

30c1cdd975ae44319417b126229475cb.png

(4)在body标记中插人图层,在图层中插人段落标记和有序列表标记,实现管理制度显示。

7cb07762066946e98dcb2e4c74794b0b.png

项目四:


(1)建立HTML文档框架。

a90696edb6684b17a8445f6dd4d9291b.png

(2)在HTML文档中插入style标记。

c9dceb56db0b4cb2a35789c5df555b03.png

(3)在style标记中定义列表中上层项目标记dt样式。

2bd37276eaa64fe1914d1b0386159bad.png

(4)在body标记中插入定义列表标记,制作教材的章节目录结构。

c41d4355d1c347e4ba516ab1cf14a944.png

(5)将body内的所有元素统一放入图层中,使用图层的style属性定义样式或在样式表中定义div标记样式(图层的宽度、高度、背景颜色等属性),即可实现所要求的页面效果。


8d0ff23552304ece85b13d362ed82c10.png

四、结果与分析


结果如下:


项目一:


分析:可以用

解决一些排版问题,x的上标和下标要用


1816ceedb70e46d6ad3203251139e9c1.png


项目二:


分析:使用无序列表进行布局


02bb4cc4926a46b9afdd17fc8c61fc4a.png


项目三:


分析:使用有序列表进行布局


3163106697f74727b9ca0bfcf46d5ea6.png


项目四:


分析:使用自定义列表进行布局


01569efe107d4f16bdcec3a6106fc611.png

五、心得体会


心得:

1、在进行实验的过程中,需要一边打代码,一边查看页面,并对页面进行微调。如:项目四的颜色和大小。不能一直打完之后再一起调试。

2、遇到问题可以找教材或者进行百度解决


体会:

1、对代码不够熟练,偶尔会发生代码使用错误的现象

相关文章
|
20天前
|
数据可视化 图形学 UED
只需四步,轻松开发三维模型Web应用
为了让用户更方便地应用三维模型,阿里云DataV提供了一套完整的三维模型Web模型开发方案,包括三维模型托管、应用开发、交互开发、应用分发等完整功能。只需69.3元/年,就能体验三维模型Web应用开发功能!
41 8
只需四步,轻松开发三维模型Web应用
|
11天前
|
安全 API 开发者
Web 开发新风尚!Python RESTful API 设计与实现,让你的接口更懂开发者心!
在当前的Web开发中,Python因能构建高效简洁的RESTful API而备受青睐,大大提升了开发效率和用户体验。本文将介绍RESTful API的基本原则及其在Python中的实现方法。以Flask为例,演示了如何通过不同的HTTP方法(如GET、POST、PUT、DELETE)来创建、读取、更新和删除用户信息。此示例还包括了基本的路由设置及操作,为开发者提供了清晰的API交互指南。
44 6
|
9天前
|
存储 JSON API
实战派教程!Python Web开发中RESTful API的设计哲学与实现技巧,一网打尽!
在数字化时代,Web API成为连接前后端及构建复杂应用的关键。RESTful API因简洁直观而广受欢迎。本文通过实战案例,介绍Python Web开发中的RESTful API设计哲学与技巧,包括使用Flask框架构建一个图书管理系统的API,涵盖资源定义、请求响应设计及实现示例。通过准确使用HTTP状态码、版本控制、错误处理及文档化等技巧,帮助你深入理解RESTful API的设计与实现。希望本文能助力你的API设计之旅。
31 3
|
11天前
|
JSON API 数据库
从零到英雄?一篇文章带你搞定Python Web开发中的RESTful API实现!
在Python的Web开发领域中,RESTful API是核心技能之一。本教程将从零开始,通过实战案例教你如何使用Flask框架搭建RESTful API。首先确保已安装Python和Flask,接着通过创建一个简单的用户管理系统,逐步实现用户信息的增删改查(CRUD)操作。我们将定义路由并处理HTTP请求,最终构建出功能完整的Web服务。无论是初学者还是有经验的开发者,都能从中受益,迈出成为Web开发高手的重要一步。
32 4
|
8天前
|
开发框架 JSON 缓存
震撼发布!Python Web开发框架下的RESTful API设计全攻略,让数据交互更自由!
在数字化浪潮推动下,RESTful API成为Web开发中不可或缺的部分。本文详细介绍了在Python环境下如何设计并实现高效、可扩展的RESTful API,涵盖框架选择、资源定义、HTTP方法应用及响应格式设计等内容,并提供了基于Flask的示例代码。此外,还讨论了版本控制、文档化、安全性和性能优化等最佳实践,帮助开发者实现更流畅的数据交互体验。
26 1
|
10天前
|
JSON API 开发者
惊!Python Web开发新纪元,RESTful API设计竟能如此性感撩人?
在这个Python Web开发的新纪元里,RESTful API的设计已经超越了简单的技术实现,成为了一种追求极致用户体验和开发者友好的艺术表达。通过优雅的URL设计、合理的HTTP状态码使用、清晰的错误处理、灵活的版本控制以及严格的安全性措施,我们能够让RESTful API变得更加“性感撩人”,为Web应用注入新的活力与魅力。
24 3
|
11天前
|
SQL 安全 Go
SQL注入不可怕,XSS也不难防!Python Web安全进阶教程,让你安心做开发!
在Web开发中,安全至关重要,尤其要警惕SQL注入和XSS攻击。SQL注入通过在数据库查询中插入恶意代码来窃取或篡改数据,而XSS攻击则通过注入恶意脚本来窃取用户敏感信息。本文将带你深入了解这两种威胁,并提供Python实战技巧,包括使用参数化查询和ORM框架防御SQL注入,以及利用模板引擎自动转义和内容安全策略(CSP)防范XSS攻击。通过掌握这些方法,你将能够更加自信地应对Web安全挑战,确保应用程序的安全性。
39 3
|
13天前
|
JSON API 数据格式
深度剖析!Python Web 开发中 RESTful API 的每一个细节,你不可不知的秘密!
在 Python Web 开发中,RESTful API 是构建强大应用的关键,基于 Representational State Transfer 架构风格,利用 HTTP 卞性能。通过 GET、POST、PUT 和 DELETE 方法分别实现资源的读取、创建、更新和删除操作。示例代码展示了如何使用 Flask 路由处理这些请求,并强调了状态码的正确使用,如 200 表示成功,404 表示未找到资源等。
35 5
|
29天前
|
数据采集 Java 数据挖掘
Java IO异常处理:在Web爬虫开发中的实践
Java IO异常处理:在Web爬虫开发中的实践
WK
|
1月前
|
数据采集 API 开发者
很少有人用python开发web???
Python 是一种流行且广泛使用的编程语言,尤其在 Web 开发领域。它凭借简洁的语法、丰富的框架(如 Django 和 Flask)、强大的库支持及活跃的社区,成为许多开发者和企业的首选。Python 的易学性、高效性及广泛的应用场景(包括 Web API、微服务和数据分析等)使其在 Web 开发中占据重要地位,并将持续发挥更大作用。
WK
44 0
下一篇
无影云桌面