HTML笔记_2_网站镶嵌代码-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_86997425/article/details/143258339

一.框架标签

1.嵌入一个普通网页

网页嵌入式广告< i frame s r c=“网址/本地网址” frame border=“0/1” width，height >< /i frame>不是块元素
a标签中target可与i frame中的name联系（可用b r换行进行版式优化），也可以与form action表单中target联系，类同于label中的for与input中的id

2.字符实体

空格 &n b s p； &#160； < & l t； > &gt & & amp ￥ & yen & copy x（乘）& times 除法 & divide
在这里插入图片描述

3.全局属性

在这里插入图片描述

4.meta元信息

meta h t t p-equiv=“X-U A-Compatible” 针对IE浏览器兼容性：不同浏览器显示不同编码
meta name=“view port” 针对移动端配置
在这里插入图片描述

在这里插入图片描述

自动刷新后跳转的页面不能回退

二.HTML总结

在这里插入图片描述

补充：HTML中的元素关系

在这里插入图片描述

三.CSS

1.概念：层叠样式表（CSS）

用于给HTML结构设置样式，例如文字大小，颜色，元素宽高等。

2.CSS编写样式

行内样式 style=“color；font-size；”（名：值；）只能控制当前标签的样式，出现结构和样式分离
内部样式 head里写style：写标签名（如h 1）并没有完全分离
外部样式 link rel=“style sheet” h ref=“外部文件** . c s s**” （触发缓存机制）

3.样式表的优先级

行内样式>内部样式=外部样式（内部和外部，后来者覆盖）
在这里插入图片描述

4.CSS语法规范

在这里插入图片描述
注释：/ * * /

5.代码风格

在这里插入图片描述

6.CSS基本选择器

类别（1）通配选择器（选择范围最大）* { } 所有元素
（2）元素选择器
（3）类选择器
（4）id选择器（选择范围最小）

复合选择器

类别（1）交集选择器如：p.beauty id选择器一般不交集（看style里面的顺序）
（2）并集选择器：如 .rich,
.beauty,
.dog{ }

后代选择器

举例：u l l i .subject l i可以搭配，但是需要符合原则
##子代选择器
举例：div > a

兄弟选择器

举例：div+p选中div后紧紧相邻的兄弟p元素
div~p选中div后所有的兄弟p元素

属性选择器[title]

举例：(1) [title] 选中具有title属性的元素
(2) [title=" n 1 "] 选中具有title属性，且属性值为n 1的元素
(3) [title^=“a”] 选中具有title属性，且属性值为a开头的元素
(4) [title$=“u”] 选中具有title属性，且属性值为u结尾的元素
(5) [title*=“i” ] 选中具有title属性，且属性值包含字母 i 的元素
一般不选择class，id，一般都是其他属性

伪类选择器

(1)动态伪类（顺序很重要）

顺序 a：link 选中的是没有访问过的a元素
a. visited 选中的是访问过的a元素
a：hover 选中的是鼠标悬浮的a元素
a：active 选中的是激活状态的a元素
link visited 是 a元素独有的标签
获取焦点 input：focus（表单类元素，或者输入东西才可以用，如select】）

(2)结构伪类

1.div>p:first-child选中的是div得第一个p元素
div p:first-child选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子
p:first-child选中的是p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子
2.div>p:last-child
**div>p:nth-child（数字/表达式/even/odd）**表示第n个儿子，数字若没写，则没显示，一般不写n，0，/
**div>p:nth-child（-n+5）**前五个（n从零开始计算）
3. div>p：first-of-type****div>p：nth-of-type（n）
4. 不常见：nth-first-of-type nth-last-of-type only-child only-of-type
：root选中的是html根元素
div：empty一般与width和height搭配，选中的是没有内容的元素

（3）否定伪类

div>p : not（**.fail / .[title] / .first-child / **）

(4)U I 伪类

复选框input type=”check box“
input ： checked（选中的是勾选的复选框）
input：disabled（选中的是被禁用的复选框）

（5）目标伪类

div：target选中锚点所指向的元素

（6）语言伪类

**div：long（en）**整体控制

伪元素选择器

随机英文 l o rem（数字）
div：：first-letter选中的是div中的第一个文字
div：：first-line选择div中的第一行文字
div：：selection 选择div中被鼠标选中的文字
input：：place holder选中的是input元素中的提示文字
p：：before/after{
content：“￥”
}