Web前端开发（HTML5+CSS3+JavaScript） 实验报告 严健武 实验1--8 格式化文档 ---综合应用.docx

PAGE2/NUMPAGES6

XXX学院

实验报告

成绩

专业班级

实验日期

姓名

学号

实验名称

格式化文档

指导教师

（报告内容包括实验目的、实验设备及器材、实验步骤、程序框图、代码、运行结果、实验小结等）

实验要求

按给出的素材，实现图1.1所示的效果，具体要求如下：

标题：使用标题3，文本居中；

段落文本：颜色使用#999，文本居中；

段落文本：其中,“2023”为粗体，6号大小；“1158万”为红色、6号，其中“万”字为上标；

图片和段落：文字环绕图片；单击图片在新窗口打开图片,鼠标悬停在图片时，显示提示信息：“在新窗口打开图片”；段落中所有括号内的文本使用红色，其他文本颜色为#666。

图1.1文档排版效果

2.选做：按给出的素材，实现如图1.2所示的效果，具体要求如下：

（1）使用无序列表。

（2）列表项中的内容依次为：1.图片：宽度为100px；2.段落:商品名称加粗；3.段落：其中“原价...”的内容为灰色并加删除线；“当前价”的内容为红色、加粗。

（3）单击图片时在新窗口打开原图。

图1.2商品列表效果

二、实验目的

1.掌握开发环境的使用

2.熟悉文本格式化标记、标题、段落、图片和字体等标记使用。

3.熟悉列表和超链接的使用。

三、实验设备

Windows7/10、32/64操作系统;安装VSCode开发环境;安装FireFox/Chrome浏览器的计算机。

四、实验步骤

1.打开VScode，新建html文件；

2.编写代码；

3.在浏览器运行、调试。

五、程序框架

无

六、代码(粘帖至此行)

七、运行结果(截图)

八、实验小结(收获或存在问题、改进措施、教学建议等)

XXX学院

实验报告

成绩

专业班级

实验日期

姓名

学号

实验名称

表格与表单

指导教师

（报告内容包括实验目的、实验设备及器材、实验步骤、程序框图、代码、运行结果、实验小结等）

实验要求

按给出的素材，制作如图2.1所示的效果的注册表单，具体要求如下：

按图示内容制作表格，设置合适的属性，列宽自定义。

添加表单元素，根据你对表单、表单元素及其属性的掌握程度，为表单元素添加必要的属性。

图2.1注册表单

二、实验目的

1.熟悉表格标记，掌握简单的行列合并操作。

2.熟悉常用的表单元素及其属性的使用。

3.能使用表格定位来制作良好格式的表单。

三、实验设备

Windows7/10、32/64操作系统;安装VSCode开发环境;安装FireFox/Chrome浏览器的计算机。

四、实验步骤

1.打开VScode，新建html文件；

2.编写代码；

3.在浏览器运行、调试。

五、程序框架

无

六、代码(粘帖至此行)

七、运行结果(截图)

八、实验小结(收获或存在问题、改进措施、教学建议等)

XXX学院

实验报告

成绩

专业班级

实验日期

姓名

学号

实验名称

位置属性应用

指导教师

（报告内容包括实验目的、实验设备及器材、实验步骤、程序框图、代码、运行结果、实验小结等）

实验要求

按给出的素材，使用位置、定位属性以及背景样式实现如图1.1所示的有哪些信誉好的足球投注网站栏效果，元素的具体尺寸自定义。

图1.1有哪些信誉好的足球投注网站栏

可以参考图1.2所示的结构来实现。

图1.2有哪些信誉好的足球投注网站栏结构图

二、实验目的

1.掌握相对位置和绝对位置的具体应用。

2.理解盒子模型。

3.熟悉背景样式的使用。

三、实验设备

Windows7/10、32/64操作系统;安装VSCode开发环境;安装FireFox/Chrome浏览器的计算机。

四、实验步骤

1.打开VScode，新建html文件；

2.编写代码；

3.在浏览器运行、调试。

五、程序框架

无

六、代码(粘帖至此行)

七、运行结果(截图)

八、实验小结(收获或存在问题、改进措施、教学建议等)

XXX学院

实验报告

成绩

专业班级

实验日期

姓名

学号

实验名称

JavaScript基础和DOM应用

指导教师