HTML和CSS部分内容
一、HTML
1.认识HTML
HTML 指的是超文本标记语言。
HTML 不是一种编程语言，是一种标记语言，使用标记标签来描述网页，也叫作 web 页面。
2.HTML标签
HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如
标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签
3.HTML结构
<!-- 基本结构 -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8"> <!-- 编码集 -->
<title>标题</title>
</head>
<body>
内容
</body>
</html>
4.HTML元素
4.1 块级元素
例如：
<h1-h6>标题标签</h1-h6>
<p>段落标签</p>
<div></div>
<ul>无序列表</ul>
<ol>有序列表</ol>
<table>表格</table>
<form action="">表单</form>
特点：
- 1.独占一行，不与其他元素并排；
- 2.可以设置宽高，默认宽度是父级的100%；
- 3.自动换行；
- 4.可以容纳其他快级元素
4.2 行内元素
例如：
<span></span>
<a href="">超链接</a>
<em>斜体</em><i>斜体</i>
<b>加粗</b><strong>加粗</strong>
特点：
- 1.不独占一行，可以与其他行内元素并排；
- 2.不能设置宽高，默认的宽高的文字本身的高度；
- 3.不能自动换行；
- 4.只能容纳文本或者其他行内元素；
4.3 行内块元素
例如：
<img src="" alt="">图片
<input type="text">文本框
<textarea name="" id="" cols="30" rows="10">文本域</textarea>
<select name="" id="">下拉菜单</select>
<button>按钮</button>
特点：
- 1.元素排列在一行；
- 2.可以设置宽高；
- 3.不会自动换行；
注意： 这三者是可以互相转换的，使用display属性能够将三者任意转换：
- display:inline;转换为行内元素
- display:block;转换为块状元素
- display:inline-block;转换为行内块状元素
5.HTML5 新增元素
| 标签 | 描述 |
|---|---|
| canvas | 标签定义图形 |
| audio | 定义音频 |
| video | 定义视频 |
| header | 定义头部 |
| footer | 定义底部 |
| nav | 定义导航部分 |
| article | 定义内容部分 |
| aside | 定义侧边栏的内容 |
| section | 定义板块内容 |
二、CSS
1.认识css
CSS 指层叠样式表，css样式通常存储在样式表中定义css样式会美化HTML元素。
外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中。
2.css样式设置的三种方式
有：行内样式，内部样式，外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="1.css"><!-- 引入外部样式 -->
<style>
/* 内部样式{} */
.p{
color: red;
}
</style>
</head>
<body>
<!-- 行内样式 -->
<p style="color: red;">行内样式</p>
</body>
</html>
3.css选择器
<style>
/* 通用选择器 */
* {}
/* 标签选择器 */
div {}
/* id选择器，值是唯一的 */
#box {}
/* 类选择器 */
.box {}
/* 后代选择器 中间用空格隔开 */
div p {}
/* 子代选择器 中间用>隔开 */
div>p {}
/* 交集选择器 之间没有空格 */
div.one {}
/* 并集选择器 中间用逗号隔开 */
p,span {}
</style>
<body>
<div class="boc">
div
</div>
<div id="box">
<p class="one">1</p>
<span>2</span>
</div>
</body>
4.伪元素、伪类选择器
伪元素选择器
:first-line 伪元素 <!-- 可以通过这个属性设置文本第一行的特殊效果 -->
:first-letter 伪元素 <!-- 只是设置第一个字符的特殊效果 -->
:before <!-- 可以在元素的内容前面插入新内容。 -->
:after <!-- 可以在元素的内容之后插入新内容。 -->
伪类选择器
a:link：<!-- 未访问的链接 -->
a:visited：<!-- 已访问的链接 -->
a:hover：<!-- 当有鼠标悬停在链接上 -->
a:active：<!-- 被选择的链接 -->
5.css选择器优先级
-
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
-
作为style属性写在元素内的样式
-
id选择器
-
类选择器
-
标签选择器
-
通配符选择器
-
浏览器自定义或继承
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
6.css选择器权重
-
带有 !important 的权重为 10000
-
在行内写的css样式权重为1000
-
id选择器的权重为100
-
类选择器的权重为10
-
标签选择器的权重为1
总结排序： !important >行内样式>ID选择器 > 类选择器 > 标签
7.css3新增属性
7.1 border-radius: 设置圆角边框
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 20%;
/* 也可以给单独角设置 */
/* border-top-left-radius: 20px; */
text-align: center;
}
</style>
<body>
<div class="box">
圆角边框
</div>
</body>
7.2 box-shadow: 设置阴影效果
<style>
.box{
width: 100px;
height: 100px;
border: 1px solid red;
/* 第一个值是左右阴影，第二个值是上下阴影，第三个值是模糊程度，第四个值是颜色 */
/* box-shadow: inset;设置内阴影，值1和值2可以为负值，模糊程度不可以为负值 */
box-shadow: 10px 10px 5px #000;
text-align: center;
}
</style>
<body>
<div class="box">
阴影
</div>
</body>
7.3 css过渡效果
transition：transition-property transition-duration transition-timing-function
transition-delay；
参数1：设置过渡属性；参数2：设置过渡时间；参数3：设置过渡效果的曲线；参数4：设置过渡的延迟时间
<style>
div {
width: 100px;
height: 100px;
background: yellow;
/* 以直线的方式进行过渡，过渡时长2秒，linear以相同的速度过渡，开始过渡延迟时间1s */
transition: width 2s linear 1s;
}
div:hover {
width: 300px;
}
</style>
<body>
<div>
鼠标悬停开始过渡
transition过渡效果
</div>
</body>
</html>
7.4 css新增动画效果
1.1 transform变换效果的rotate属性
<style>
div {
margin: 30px;
width: 200px;
height: 100px;
background-color: yellow;
/* 旋转30度 */
transform: rotate(30deg);
}
</style>
<body>
<div>transform效果</div>
</body>
1.2 transform变换效果的translate属性
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* 向x轴移动30px，向y轴移动50px */
transform: translate(30px,50px);
}
</style>
<body>
<div>transform效果的translate</div>
</body>
2.animation 属性
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
animation: change 4s;
}
@keyframes change {
20%{
background-color: red;
}
40%{
background-color: blue;
}
60%{
background-color: green;
}
80%{
background-color: yellow;
}
100%{
background-color: pink;
}
}
</style>
<body>
<div class="box">
动画效果
</div>
</body>
background-color: blue;
}
60%{
background-color: green;
}
80%{
background-color: yellow;
}
100%{
background-color: pink;
}
}
</style>
动画效果
```
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
