HTML5
第一个案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
标签
meta 标签
作用：设置网页的基本信息
charset属性：用来设置网页编码格式
例子：
<meta charset="UTF-8">
标签分类
- 根据有无闭合标签，可分为
单标签和双标签
单标签：<meta> <link> <img>
双标签：<html><body> <div> <span>
- 根据页面渲染结果
可分为块标签和行标签
标签
标签（别称 元素 盒子），承载所有的文本信息 ，都必须写在双标签里面。
div标签
块标签：div
特性：
独占一行，每个块标签都会导致文本流的换行
可以设置宽高
不设置高度时：高度由内容撑开
不设置宽度：宽度由父盒子宽度决定
- 可以嵌套块标签和行标签
标签之间的嵌套关系
我们拟人化的称之为父子关系
例子：
<div> => 父标签
<div></div> => 子标签
</div>
span 标签
- 可以在一行之间排列
但是 如果超出父盒子的宽度 则会换行
（如果是单个行标签超出宽度 此情况不换行）
不能设置宽高 宽高由内容撑开
不推荐行标签嵌套块标签
h标签
作用：通常用来写大小标题
用法：<h1>一级标题</h1>
h1~h6标签
h1标签 通常一个页面只能存在一个h1标签
通常h1标签用来承载网站名或者logo
如果网站logo出现多个地方
只给顶部的logo加上h1标签
hr
作用：生成一条线
img
src：用来设置图片路径
alt: 当图片加载失败时的提示信息
特性：
单标签
行元素
注意：
自带width height属性
写数值时直接写数值不用带单位
css的优先级 高于 img 标签中 width 和 height
CSS
三种引入方式
行间样式
定义： 通过CSS属性来写css代码
例子：
<div style="width: 200px;height: 200px;background: yeelow;">d1</div>
优点：
优先级高
方便
缺点
- 页面杂乱，不利维护
内联样式
定义： 将CSS代码写在head标签里面的style标签中。
例子
<head>
div{
width: 200px;
height: 200px;
}
</head>
<body>
<div></div>
</body>
优点
可复用性强
代码整洁
利于维护
缺点
- 代码行数太多
外联样式
使用方法： 在外部创建一个css文件,并在html中 head 标签内使用link标签引入.
<!-- 创建文件 style.css -->
div{
width:300px;
height:300px;
background:red;
}
<!-- head中引入 -->
<link rel="stylesheet" href="./style.css">
优点
逻辑清晰
页面整洁
易于维护
可复用性高
缺点
- 增大了项目所占内存
优先级
行间样式>内联样式>外联样式
注意
大多数项目都使用外联样式
CSS选择器
简单选择器
| 选择器 | 解释 | 注意 | 例子 | ||
|---|---|---|---|---|---|
| 标签选择器 | 直接在标签中选择标签名的方式选择具体标签 | 无 | 使用标签名<style>div{}</style> | ||
| 类选择器 | 当同种标签过多时，我们可以使用 标签中class属性，给标签起名字，然后再使用 .类名 的方式选择具体的标签，并编写样式 | 一个标签可以有多个类名，每个类名以空格隔开，类名可以重复使用 | 使用 . 类名<style>.d1{}</style> | ||
| id选择器 | id选择器需要在标签内使用id这个属性来设置id名然后在style标签中使用#id名的形式选择具体签 | 类具有可重复性，整个页面中id不可以重复通常情况下一个标签只能有一个id | 使用 #id<style>#first{}</style> | ||
| 通配符选择器 | 使用 * 可以为所有元素上设置样式 | 使用 * <style>{background: red;}</style> | |||
| 分组选择器 | 分组选择器选取所有具有相同样式定义的 HTML 元素。 | 无 | 使用 , 隔开 h1, h2, p{text-align: center;color: red;} |
复合选择器
| 选择器 | 解释 | 注意 | 例子 |
|---|---|---|---|
| 后代选择器 | h1 em 选择器可以解释为 作为 h1 元素后代的任何 em 元素 | 使用 空格 | h1 em |
| 子元素选择器 | 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素 | 使用 > | .f1>.f2>.f3{} |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
hello
</title>
<STYLE>
.f1{
width: 200px;
height: 200px;
background: gray;
}
.f1 div{
width: 50px;
height: 50px;
background: green;
}
/* div是选择f1所有的标签* */
.f1 .f2{
width: 50px;
height: 50px;
background: rgb(96, 0, 96);
}
.f1 .f2 .f3{
width: 10px;
height: 10px;
background: yellow;
}
.f1>.f2>.f3{
width: 10px;
height: 10px;
background: yellow;
}
</STYLE>
<body>
<div class="f1">
<div class="f2">
<div class="f3">
</div>
</div>
<div class="f3">
</div>
</div>
</body>
</html>
优先等级
选择器权值
| 选择器 | 权值 |
|---|---|
| 内联样式 | 1000 |
| id选择器 | 100 |
| 类选择、属性选择器、结构伪类选择器 | 10 |
| 标签选择器、伪元素选择器 | 1 |
| 通配符选择器、继承 | 0 |
选择器优先等级
style（行内样式：1000） > id（ID选择器：100） > class（类选择器：10） > 标签选择器（假设级别为1）
例如以下选择器的优先级从前到后依次为：
style（1000）>#list #box（100+100=200）> #list .box div span（100+10+1+1=112） > .list .box p（10+10+1=21）> .list span（10+1=11）> p:last-child（1）
注意
!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
