html 基础巩固（1）

1.<b>粗体

2.&nbsp 空格；&lt < ;   &gt >; &yen ￥； &cols x

3.

（1）<b></b>用于加粗显示文本。

（2）<i></i>用于将文本改为斜体。

（3）<u></u>用于为文本添加下画线。

（4）<s></s>用于为文本添加删除线。

（5）用于以上标形式显示文本。

（6）用于以下标形式显示文本。

4.align属性排列：left ，center，right，代表左、中、右

5.<pre></pre> 预格式化元素，用于保留元素中原始文档的格式，如换行和空格。预格式化元素的语法格式是：<pre></pre>

6.<a /> :href属性 ：跳转连接，或文件，邮箱，js语句； target属性：打开窗口方式

想跳转到其他页面中的某个锚点位置，可以使用如下超链接：

 

7.

1）使用<embed>标记 mp3播放标签。代码如下：

使用<audio>标记。<audio>是专门播放音频的标记。

8.表格

9.列表

10.class

1）

定义样式类.color-r{color：red}，让凡是class属性定义为color-r的元素字体变为红色。再定义p.color-r{border：1px solid red}，仅让所有p元素中class属性值为color-r的元素边框变为红色。

2）class选择Id显示

<div id="min">225655ss</div>

<style>
        #min{
            color: aquamarine;
        }
    </style>

3）

群组选择器，是将多个选择器并列放在一起匹配样式。每个子选择器之间用“，”分隔。如果希望div和p两种元素都应用同一样式，可写为“div，p{}”，意为div元素和p元素均可。例如，让div和p元素都获得边框阴影，可用如下代码：

4）伪类选择器，是用于匹配元素不同状态的选择器。当元素状态改变时，可实现样式随之改变。伪类选择器都是以“：”作为选择器的开始，并紧跟要修饰的元素选择器或其他选择器后。伪类选择器包括：

① 链接伪类：用于匹配超链接元素不同状态的伪类。

A. ：link，匹配超链接元素尚未访问时的链接样式。例如，超链接元素a尚未访问过时的默认样式是蓝色字体+下画线。如果不想要默认样式，可修改。

例如，不想要下画线，可用如下代码：

B. ：visited，匹配超链接元素访问后的链接样式。访问过的a元素，默认会变为紫色字体。如果不想改变字体颜色，可使用如下代码修改：

② 动态伪类：用于根据元素状态变化动态改变样式的伪类，可用于任意元素，包括：

A. ：hover，匹配当鼠标悬停在该元素上时的样式。例如，希望鼠标悬停在a元素上时，a元素背景变为红色，字体变为白色，可使用如下代码：

B. ：active，匹配当元素被激活时的样式。通常，激活是指鼠标点在该元素上，但未抬起按键时。

C. ：focus，匹配当元素获得焦点时的样式。通常，刚被单击过的元素，默认处在获得焦点状态。

5）CSS标准规定，选择器的权重值如下：元素选择器权重值=1；类选择器权重值=10；伪类选择器权重值=10；ID选择器权重值=100；内联样式权重值=1000。由此可见，内联样式的优先级最高，不会被替换。而在样式表内，ID选择器优先级最高，元素选择器优先级最低。

11.背景图

 

如果背景图片大小与元素的边框范围不吻合，还可通过修改背景图片尺寸，使其与元素边框范围的尺寸匹配。修改背景图片尺寸，可用background-size属性。属性值可以是如下几种情况：

（1）background-size：值1 值2。其中，值1表示背景图片的宽度，值2表示背景图片的高度。

（2）background-size：x% y%：。这种形式中，x%和y%分别表示图片的宽和高与元素大小的百分比。当该百分比为100%时，图片刚好缩放到与元素边框区域等宽、等高，占满元素边框内的区域。但此时可能因为元素大小比例与图片比例不相同，导致图片变形。

（3）background-size：cover。这种情况下，背景图片等比放大，直到完全覆盖元素的所有区域为止。如果图片比例和元素大小比例不一致，cover方式以短边刚好缩放到与元素对应边等长时，停止缩放。此时，虽然背景填满了元素，但是背景图片较长一边可能超出元素边框，背景图片会被元素遮挡一部分，显示不完整。

（4）background-size：contain。这种情况下，也是将背景图片等比放大，直至背景图片的任意一边碰到元素的某一个边缘，就停止缩放。如果背景图片比例和元素宽高比不一致，则使用contain方式，但这会导致背景图片无法填满元素边框内部，边框内部有可能出现空白。

设置属性值为cover和contain的效果，如图4-37所示。

 

12.标签的xia显示隐藏

控制元素的显示和隐藏，还可以用visibility属性。

主要是控制元素的显示和隐藏。其取值可以是默认的visible（可见）或是hidden（不可见）。

但是，dispaly：none和visibility：hidden都可设置隐藏，那么两者的区别是什么？dispaly：none会让元素脱离文档流，不占用页面空间；而visibility：hidden不会让元素脱离文档流，虽然看不见，但依然占用空间，如图5-14所示。