HTML部分补充+CSS

1.框架标签

1.iframe

功能：框架（在网页中嵌入其他文件）

属性：name，width，height，frameborder（是否显示边框，数值：0/1），行内元素，双标签

实际应用：在网页中嵌入广告，与超链接或表单的target配合，展示不同的内容。

2.常见字符实体

空格          实体名称：&nbsp；

小于号 <      实体名称：%lt；

大于号  >     实体名称：&gt；

和号 &          实体名称：&amp；

引号“            实体名称：&quot；

反引号’         实体名称：&acute；

分（cent）   实体名称：&cent；

镑（pound）实体名称：&pound；

元                  实体名称：&yen；

欧元              实体名称：&euro；

版权              实体名称：&cppy；

注册商标      实体名称：&reg；

商标              实体名称：&trade；

乘号              实体名称：&times；

除号             实体名称：&divide；

3.HTML全局属性

1.id：给定标签的唯一的标识，注意：id是不能重复的

作用：可以让label标签与表单控件相关联；也可以与css，JavaScript配合使用

2.class：给指定标签类名，通过css给标签设置样式

3.title：给标签设置一个文字提示

eg.LOL（鼠标放上去会出现一个“英雄联盟”的文字提示）

4.lang：给指定标签设置语言

5.dir

<bdo dir="rtl">ABC</bdo>      文本阅读顺序改变ABC变为CBA

<div dir="rtl">ABC</div>         文本位置改变  由右到左

4.meta元信息

<meta>网页自动刷新

<meta http-equiv="refresh" content="10;url=https:www.baidu.com">10秒后自动刷新

<meta  name=“copyright” content=“2023-2027版权所有”>

<meta  name=“keywords” content=“8-12个以英文逗号隔开的单词、词语”>配置网页关键字

<meta  name=“description” content=“80字以内的一段话，与网站内容相关”>配置网页描述信息

5.css的行内样式

1.写在标签style中（又称：内联样式）

2.语法<h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习<h1>

3.内部样式（写在html页面内部，将css代码提取出来，单独放在style标签中）

style标签一般放在head标签中

6.外部样式

1.写在一个单独的css文件里，随后在html文件中引入使用

2.语法：新建一个拓展名为.css的样式文件，把所有css代码放入此文件中。

3.在html文件中引入.css的样式文件。

<link  rel="stylesheet"  href="./xxx.css">

(link要写在head标签中)

7.样式表的优先级

行内样式>内部样式=外部样式

1.（内部样式，外部样式，这两者优先级相同，且后来者居上）

2.（同一个样式表中，优先级也与编写顺序有关，且后来者居上）

8.css基本选择器

1.通配选择器

*{

属性名：属性值；

}

2.元素选择器

p/h1（标签名）{

属性名：属性值；

}

（元素选择器无法实现差异化设置，所以上述所有含有p标签的元素效果都一样）

3.类选择器

根据元素的class值，来选中某些元素。

class是类名

.类名{

属性名：属性值；

}

eg.     <p class="speak"></p>

.speak{

属性名：属性值

}

4.id选择器

#id值{

属性名：属性值；

}

（一个元素只能有一个id属性，多个id属性值不能相同）

9.交集、并集选择器

（交集）作用：选中同时符合多种条件的元素（既........又）

1.       元素+类名

2.      元素+类名+id

3.       类名+类名

（并集）作用：选中多个选择器对应的元素，又称：分组选择器（或）

选择器1，选择器2，选择器3{

}

（选择器1,2,3都有同样的元素）

10.后代，子代，兄弟，祖父元素

11.兄弟选择器

<div><p①><p②></div>

div+p{

}

(此情况只会改变p①，却不会改变div和p②)

div~p{

}

（div不变，p全体都变）

（遵循往下不往上的原则）

12.后代选择器（包括儿子在内的所有后代）

语法：选择器1  选择器2  选择器3{

}

选择器之间要用的空格隔开，空格可以理解“为什么什么中的”，就是后代的意思

13.子代选择器（仅仅指儿子）

选择器1>选择器2>选择器3{

}

选择器之间用>隔开，可以理解为“什么什么的子代”

14.属性选择器

15.伪类选择器（hover）

作用：选中的特殊状态的元素

一.动态伪类

二.结构伪类

三.否定伪类

：not（选择器）排除满足条件的元素

四.ul伪类

1.  ：checked被选中的复选框或者单选按钮

2.   ：enable可用的表单元素（没有disabled元素）

3.    ：disabled不可用的表单元素（有disabled元素）

五.目标伪类

：target  选中锚点指向的元素

六.语言伪类

：lang（）指定的语言选择元素

七.特殊运用

在css中的:hover（悬停）伪类选择器，主要功能是我们用鼠标悬停在我们设置好的页面元素上时，用以触发我们设置的某一元素的属性效果。它不会改变原有的代码功能，但可以加强我们使用者的交互性。

：hover{

             }

十六.伪元素选择器

十七.选择器优先级

行内样式>id选择器>类选择器>元素选择器>通配选择器（看权重）

权重比较

十八.css三大特性

十九.颜色的表示

方式一：直接使用颜色对应英文单词

方式二：使用（rgb）

rgb（  ，  ，  ）

       red  green  blue

括号中输入  0-255的数字或者百分比改变颜色

rgb(   ,   ,   ,   )

第四个空是透明度

方式三

 

---