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、对代码不够熟练,偶尔会发生代码使用错误的现象

相关文章
|
9天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
2天前
|
前端开发 JavaScript Java
Java与Web开发的结合:JSP与Servlet
Java与Web开发的结合:JSP与Servlet
7 0
|
2天前
|
存储 程序员 API
python web开发示例详解
python web开发示例详解
11 0
|
3天前
|
XML 前端开发 JavaScript
CSR(客户端渲染)和AJAX在Web开发中各自扮演不同的角色
【5月更文挑战第8天】CSR(客户端渲染)与AJAX在Web开发中各司其职。CSR提供初始HTML框架,通过JavaScript在浏览器端获取并渲染数据,提升交互性和响应速度。AJAX则实现页面局部更新,如实时搜索,不刷新页面即可获取数据。CSR可能因DOM操作多而引发性能问题,但可优化解决;AJAX适合频繁交互场景,提高响应性。两者在不同需求下各有优势,需按项目选择适用技术。
12 4
|
3天前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
9 0
|
4天前
|
前端开发 JavaScript 开发者
新一代前端框架:革命性的Web开发利器
传统的前端框架在满足日益复杂的Web开发需求上逐渐显露出局限性,而新一代前端框架的出现,以其革命性的设计和功能,重新定义了Web开发的标准。本文将介绍这些新一代前端框架的特点和优势,并探讨它们在实际项目中的应用。
|
5天前
|
前端开发 JavaScript Python
使用Python读取本地行情csv文件,做出web网页画出K线图实现案例
【5月更文挑战第4天】使用Python绘制K线图的步骤:1) 安装pandas, matplotlib和Flask;2) 用pandas读取CSV文件并处理数据;3) 创建Flask应用,渲染包含K线图数据的HTML;4) 编写HTML,使用ECharts库绘制K线图。
23 0
|
5天前
|
安全 测试技术 PHP
掌握现代Web开发:PHP 8的新特性与最佳实践
【5月更文挑战第5天】 在当今快速发展的网络世界中,PHP作为一种流行的服务器端脚本语言,持续地演化着。最新的PHP 8版本引入了一系列令人兴奋的新特性和性能改进,为开发者提供了更加强大和灵活的工具。本文将深入探讨PHP 8中的新特性,包括联合类型、名称参数、匹配表达式等,并分享一些最佳实践,帮助开发者提高代码质量,优化性能,并确保安全性。通过这些实用技巧和示例,您将能够构建更高效、更安全的PHP应用程序。
|
10天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。