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

相关文章
|
3月前
|
Web App开发 监控 安全
OSS客户端签名直传实践:Web端安全上传TB级文件方案(含STS临时授权)
本文深入解析了客户端直传技术,涵盖架构设计、安全机制、性能优化等方面。通过STS临时凭证与分片上传实现高效安全的文件传输,显著降低服务端负载与上传耗时,提升系统稳定性与用户体验。
423 2
|
10天前
|
安全 测试技术 程序员
web渗透-文件包含漏洞
文件包含漏洞源于程序动态包含文件时未严格校验用户输入,导致可加载恶意文件。分为本地和远程包含,常见于PHP,利用伪协议、日志或session文件可实现代码执行,需通过合理过滤和配置防范。
105 0
web渗透-文件包含漏洞
|
4月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
6月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
1180 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
6月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
10月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
410 67
|
10月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
318 63
|
9月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
10月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
215 2
|
10月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
213 1