本资源主要介绍了HTML中的类选择器应用以及图像、CSS样式定义与浮动窗体的相关知识。
在HTML中,类选择器是一种用于选取具有特定类名的元素的方式。在这个示例中,我们看到类选择器`.water`和`.danger`被定义在`<STYLE>`标签内,分别设置了颜色属性为蓝色和红色。在文档的主体部分,通过将`class`属性设置为`.water`或`.danger`,我们可以为`<P>`和`<EM>`标签应用相应的样式。例如,第一段文本`<P class=water>`将显示为蓝色,而带有`class=danger`的元素将显示为红色。
关于图像的插入和布局,HTML使用`<img>`标签来插入图像。`src`属性用于指定图像的路径,可以是本地路径或远程URL。例如,`<img src="liwupu.jpg">`会插入名为`liwupu.jpg`的图像。此外,可以使用`width`和`height`属性来设置图像的尺寸,`border`属性来设置边框厚度,`align`属性来调整图像与周围文本的对齐方式,如`align="left"`会让图像左对齐。`alt`属性提供图像的替代文本,这对于不能显示图像或者使用屏幕阅读器的用户来说非常关键。
CSS样式定义和应用是网页设计的重要部分。样式表可以定义在`<style>`标签内(内联样式),在外部文件中(外部样式表),或者通过`style`属性直接应用到HTML元素上(行内样式)。类选择器允许我们为多个元素定义相同的样式,只需它们的`class`属性匹配即可。这样提高了代码的复用性和可维护性。
浮动窗体在HTML中主要通过CSS的`float`属性实现。`float`属性可以设置为`left`、`right`或`none`,使元素在容器内向左或向右浮动,从而创建多列布局或让文本环绕图像。例如,`<div style="float:left;">`会使包含的内容向左浮动。
预习检查中提到的一些其他HTML标签和属性包括:
- `h1`到`h6`用于设置不同级别的标题。
- `p`标签用于创建段落。
- `font`和`span`标签可用于文本样式控制,但现代实践中更倾向于使用CSS来完成这些任务。
- `marquee`标签可以创建滚动文本,其默认滚动方向是从右到左。
- `ul`和`ol`用于创建无序和有序列表,`li`则用于定义列表项。
通过理解和应用这些概念,开发者能够创建更美观、更具交互性的网页,并确保内容对各种用户和设备的友好性。