网页设计实验HTML的标签使用

1、在新建的HTML文件中插入两个DIV标签，id为“left”“right” 2、给新建的标签建立CSS规则，设置它们的背景颜色，高度宽度以及边界，若都设为左浮动，那么两个标签都会靠左边，如果占不满空间的话。如果一个设置为左浮动，另一个设置为右浮动，那么会出现一个左边一个右边的效果，而下面的设置则是右边的标签是距离左边40% 【实验报告】 实验主题：网页设计实验HTML的标签使用 【实验目的】 本次实验的主要目的是让参与者深入理解HTML标签的功能与应用，并通过实践掌握CSS规则，以便于灵活布局网页元素，创建出视觉效果良好的网页设计。 【实验内容】 1. **HTML标签基础**：HTML（HyperText Markup Language）是网页设计的基础语言，它用于定义网页结构和内容。在实验中，我们主要使用了`<div>`标签，这是一个通用容器标签，用于组合HTML元素，形成更复杂的结构。 2. **CSS样式设置**：CSS（Cascading Style Sheets）用于控制网页的样式和布局。实验中，我们为`<div>`标签建立了CSS规则，包括设置背景颜色、高度、宽度以及边距。通过CSS，我们可以使网页元素具有特定的样式，如颜色、大小和位置。 3. **浮动布局**：浮动是CSS中的一个重要概念，可以实现元素在页面上的相对定位。在实验中，我们尝试了左右浮动，当两个`<div>`标签都设置为左浮动时，它们会并排靠左显示。若一个设置为左浮动，另一个设置为右浮动，则会形成一左一右的效果。特别地，通过设置右浮动标签的左边距，可以使其与左浮动标签保持一定距离。 【实验步骤】 1. 打开Dreamweaver软件，新建HTML文件。 2. 在HTML文件中插入两个`<div>`标签，分别给予id为"left"和"right"。 3. 在CSS部分，为这两个id编写样式规则。例如，设置背景色、宽高和边距。 4. 对"left"设置左浮动，"right"设置右浮动，并调整"right"的左边距为40%，观察其在页面上的排列效果。 【实验结果】 通过实验，成功实现了两个`<div>`标签的布局变化。根据不同的CSS规则，它们可以按照预期的位置和样式显示在网页上。 【实验心得和体会】 实验过程中，不仅学习了HTML的基本标签和CSS的样式设置，还体验到了浮动布局在网页设计中的实用性。尽管初学者可能会遇到一些挑战，但只有通过不断的实践和探索，才能逐步熟练掌握这些技能。此次实验让我深刻理解到，耐心和努力是学习任何技术的关键，尤其是像HTML和CSS这样在网页设计中至关重要的工具。 总结来说，本实验提供了实践经验，让学习者在实践中了解HTML标签的用法和CSS规则的作用，为进一步的网页设计打下了坚实的基础。通过实际操作，参与者能够更好地理解和应用这些基础知识，从而提高网页设计的能力。