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

2/6XXX学院实验报告成绩专业班级实验日期姓名学号实验名称格式化文档指导教师（报告内容包括实验目的、实验设备及器材、实验步骤、程序框图、代码、运行结果、实验小结等）实验要求按给出的素材，实现图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应用指导教师（报告内容包括实验目的、实验设备及器材、实验步骤、程序框图、代码、运行结果、实验小结等）实验要求1编写代码在页面显示如下图所示的九九乘法表.设计一个简易计算器：在文本框中输入两个数，实现加、减、乘、除运算，结果显示在另外一个只读文本框中。注意，界面自己定义，用户可以输入并执行所选择的计算，如果输入的是非数字，使用合适的方法提示用户。需要提交文档和项目文件（压缩包）。二、实验目的1.熟悉JavaScript基本语法。2.掌握分支结构和循环结构的使用。3.掌握查询元素的方法和使用表单元素实现与用户的交互。三、实验设备Windows7/10、32/64操作系统;安装VSCode开发环境;安装FireFox/Chrome浏览器的计算机。四、实验步骤1.打开VScode，新建html文件；2.编写代码；3.在浏览器运行、调试。五、代码(粘帖至此行)六、运行结果(截图)七、实验小结(收获或存在问题、改进措施、教学建议等)XXX学院实验报告成绩专业班级实验日期姓名学号实验名称弹性布局指导教师（报告内容包括实验目的、实验设备及器材、实验步骤、程序框图、代码、运行结果、实验小结等）实验要求按给出的素材，使用弹性布局实现如下图的商品列表展示效果。参见上图，具体要求如下：设置合适弹性容器的宽度，使每一行包含4个商品项。商品信息（除放入购物车按钮外）使用图片和两个段落元素，按钮呈现平面按钮样式（无边框）每个商品项有一定的外边距和内边距；有合适的阴影和圆角，鼠标悬停时放大1.02倍。整个商品列表在容器中居中对齐。需要提交html文件二、实验目的1.熟悉弹性布局中容器和项目的相关属性。2.能结合其他样式，将弹性布局应用于实际开发中。三、实验设备Windows7/10、32/64操作系统;安装VSCode开发环境;安装FireFox/Chrome浏览器的计算机。四、实验步骤1.打开VScode，新建html文件；2.编写代码；3.在浏览器运行、调试。五、程序框架无六、代码(粘帖至此行)七、运行结果(截图)八、实验小结(收获或存在问题、改进措施、教学建议等)XXX学院实验报告成绩专业班级实验日期姓名学号实验名称综合应用指导教师（报告内容包括实验目的、实验设备及器材、实验步骤、程序框图、代码、运行结果、实验小结等）实验要求给出HTML文档的内容index.html，其运行效果如图8.1所示。要求编写代码，在单击“提交数据”按钮时，获取表单数据并暂存在本地，然后重定向到显示数据的页面。在显示页面result.html中，读取暂存的数据并展示在页面中，如图8.2所示；单击“返回注册”链接时，重定向到注册页面需要提交文档和项目文件（压缩包）。提示：数据保存可以使用sessionStorage对象保存数据的格式可以参考如下对象结构：varuserData={user:'',pwd:'',city:'',sex:'',hobbys:[]}将JS对象转换为字符串的方法为：JSON.stringify();将字符串还原为对象的方法为：JSON.parse()图8.1注册页面index.html图8.2结果页面result.html二、实验目的1.熟悉HTML常用表单元素的使用。2.掌握使用JavaScript来查询和获取表单元素属性的方法。3.掌握存储对