html5+css3 笔记

作者: John_Phil | 来源:发表于2019-04-10 09:27 被阅读463次

入门知识导读

image.png

本地使用hbuilder 内置服务器访问原理

image.png

h5 与 h4 区别：
1.h5 比h4 页面组成要简单明了
2.h5 支持的标签比 h4 要多比如 video 等

h5页面

h4页面

组面组成两个部分 0
head 头部：内涵
body 身子：展示部分

image.png

body中的标签

标题标签 <h1></h1>

当出现错误时不同的浏览器翻译出来的页面不同

image.png

换行标签

浏览器翻译 html过程是从上到下从左到右

段落标签<p>

实现自然段效果

横线

(标题与文章内容的分割线)

加粗与斜体 <strong> <em>

image.png

图像标签 <img>

超链接标签

<a href="girl.html" target="_self">卖女孩的小火柴</a>
属性
href : 链接地址
target：目标当前页跳转 target="_self" / 新打开一个页面 target="_blank"

字符实体 &标签帮我们进行转义

比如空格 &nbsp

body 设置背景颜色使用bgcolor 属性

CSS 层叠样式表

html-body 相当于赤身裸体的人
CSS 相当于衣服
用法 head标签中写一个<style>标签
选择待修饰的部分如下图：选中的修饰对象是 body 页面全部展示部分

image.png

传统选择器3种
1。标签选择器：直接选择html中的标签进行修饰
2。 .是类选择器的标志可以选择对应的类
3。 #是 id选择器的标志可以选择对应的id

image.png

对颜色进行精准的选择可以使用 #+6个16进制数的形式
具体可以用百度去搜索rgb颜色对照表

rgb颜色对照表

css 后代选择器

image.png

树状结构的后代

image.png

css高级选择器

使用后代选择器方法

##后代选择器
h3 strong{ color:blue;font-size:20px }

交集选择器

image.png

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
　　<style type="text/css">
 h3.special{
  color:red;
 }
 h3#aaaa{
    color:green;
 }
　　</style>
 　　  </head>
　　<body>
 　　   <h3>标记选择器.class1</h3>
 　　   <h3>标记选择器.class2</h3>
 　　   <h3 class="special">标记选择器.class3</h3>
 　　   <h3 id="aaaa">标记选择器.class4</h3>
 　　   <h3>标记选择器.class5</h3>    
   　　 <p class="special">使用于别的标记</p>
　　</body>
　　</html>

image.png

并集选择器

image.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
　　<style type="text/css">
h1, h2, h3, h4, h5, p{
 color: blue;
}
　　</style>
 　　 </head>
　　<body>
　　   <h1>集体声明h1</h1>
　　   <h2 class="special">集体声明h2</h2>
 　　  <h3>集体声明h3</h3>
　　  <h4>集体声明h4</h4>
 　　  <h5>集体声明h5</h5>
 　　  <p>集体声明p1</p>
 　　  <p class="special">集体声明p2</p>
 　　  <p id="one">集体声明p3</p>
　　</body>
　　</html>

image.png

css 外部样式引入两种方法

1. 导入外部样式表 @import

common.css

@charset "gb2312";  
/* CSS Document */

#first{font-size:16px; color: green;}
#second{font-size:24px;color: red;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导入外部样式表</title>
<style type="text/css">

@import url("css/common.css");

</style>
</head>
<body>
  <h1>北京欢迎你</h1>
  <p id="first">北京欢迎你，有梦想谁都了不起！</p>
  <p id="second">有勇气就会有奇迹。</p>
  <p>北京欢迎你，为你开天辟地</p>
  <p>流动中的魅力充满朝气。</p>
</body>
</html>

显示结果

2。链接外部样式表 link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接外部样式表</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1>北京欢迎你</h1>
  <p id="first">北京欢迎你，有梦想谁都了不起！</p>
  <p id="second">有勇气就会有奇迹。</p>
  <p>北京欢迎你，为你开天辟地</p>
  <p>流动中的魅力充满朝气。</p>
</body>
</html>

行内样式在标签内使用style属性（特殊情况才使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        p{
            color:red;
        }
       /* h1{
            font-size: 10px;
        }*/
    </style>
</head>
<body>
    <h1>hello css 标签选择器</h1>
    <!--行内选择器/行内样式      
    只针对当前被修饰的标签进行修改 
    有限级别最高     -->
    <p style="color: green;">标签选择器</p>
</body>
</html>

优先级顺序对比

link外链 与 style 看上下位置 下面的覆盖上面的
在style里面  普通选择器 都是下面的 覆盖上面的
      @import url("css/common1.css"); 无论在上还是在下优先级最低
行内引用 sytle 优先级最高 
    标签选择器 <类选择器 < id选择器

image.png

css 中的继承关系修饰父类时子类会继承父类中的特点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接外部样式表</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<style>
    /*修饰body 时   body的子类也继承了 父类的 修饰    所有body下 字体都为红色*/
body{
    color: red;
}
</style>
</head>
<body>
    撒旦发生的
  <h1>北京欢迎你</h1>
  <p id="first">北京欢迎你，有梦想谁都了不起！</p>
  <p id="second">有勇气就会有奇迹。</p>
  <p>北京欢迎你，为你开天辟地</p>
  <p>流动中的魅力充满朝气。</p>
</body>
</html>

继承关系上下一片红

css 修饰字体
font-family:字体
font-size: 大小
font-style:字体风格
font-wight:字体粗细
font ：可以只是所有的属性

image.png

p {font:oblique bold 20px "楷体";}

text 文本修饰
text-align: 文本位置
text-decoration: 文本修饰横线

.p1 {
            text-decoration: none;
        }
        .p2{
            text-decoration: underline;
        }
        .p3{
            text-decoration: overline;
        }
        .p4{
            text-decoration: line-through;
        }
        .p5{
            text-decoration: blink;
        }

image.png

伪类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{text-decoration: none;}
        a:hover{text-decoration: underline;color: red;}
        p:hover{font-size: 20px;font-weight: bold;}
    </style>
</head>
<body>
<a href="#">你好啊</a>
<p>产业融入教育</p>
</body>
</html>

背景颜色 background-color

列表去掉圆点 list-style

 li{

            list-style: none;
        }

引用外部漂亮的字体
http://www.fontawesome.com.cn/

image.png

div+css 盒式布局

image.png

width ：是 content 的宽度
height: 是 content 的高度

border :边框
padding ：内边距
margin ：外边距

而以页面中 div实际宽度或者高度计算
realwidth=width+2border +2padding
realheight=height+2border+2padding

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div 测试   div+css 布局</title>
        <style>
            div{
                width: 600px;
                height: 200px;
                border: 0px solid black;
            }
            #a1{
                width: 796px;
                border: 1px solid black;
                padding: 1px;
            }
            #a2{
                width: 760px;
                border: 10px solid black;
                padding: 10px;
            }
          #a3{
                border: 50px solid black;
                padding: 50px;
            }
        </style>
    </head>
    <body>
            <!--real width  一致  -->
            <!-- 604px +196px -->
        <div id="a1"> 你好1 </div>
        <!--   640px +160px  -->
        <div id="a2"> 你好2 </div>
        <!--real width 800px -->
        <div id="a3"> 你好3 </div>
    </body>
</html>

边界实际宽度计算

设置
border -width：边框宽度
border-color ：边框颜色（上右下左）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div 测试   div+css 布局</title>
        <style>
            div{
                width: 600px;
                height: 200px;
                border: 0px solid black;
            }
            #a4{
                border-width: 10px;
                border-color: brown red green pink;
                
            }
            
        </style>
    </head>
    <body>
        
        <div id="a4">  你好4 border-color </div>
        
    </body>
    
    
    
</html>

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div 测试   div+css 布局</title>
        <style>
            div{
                width: 600px;
                height: 200px;
                border: 0px solid black;
            }
            #a4{

                border-width: 10px;
                border-color: brown red;
                
            }
            
        </style>
    </head>
    <body>
        <div id="a4">  你好4 border-color </div>
    </body>
</html>

image.png

border-color 结论为：
一个颜色：上下左右一致
两个颜色：上下(第一个颜色)左右（第二个颜色）
三个颜色：上 (第一个颜色) 下(第二个颜色) 左右(第三个颜色)
四个颜色：上右下左

内外边框

参考系的问题
如果以a6 为参考系 a6与a5的距离是 a6的外边距在a6 当中设置margin
如果以a5 为参考系 a5 与a5 的距离是 a5的内边距在a5 当中设置 padding

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div 测试   div+css 布局</title>
        <style>
            div{
                width: 600px;
                height: 200px;
                border: 0px solid black;
            }

            #a5{
                border: 1px black  solid ;
                padding-top: 20px;
                padding-left: 50px;
            }
            #a6{
                width: 100px;
                height: 100px;
                border: 1px red solid;
                
                /*margin-left: 50px;
                margin-top: 20px;*/
            }
        </style>
    </head>
    <body>

        <div id="a5">  
            <div id="a6" ></div>  
        </div>
        
    </body>
    
    
    
</html>

image.png

页面居中对齐 margin 0 auto

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       #a1{
           width: 200px;
           height: 200px;
           margin: 0 auto;
           background-color: gray;
       }
   </style>
</head>
<body>
   <div>
       <div id="a1">
           我要水平居中对齐
       </div>
   </div>
</body>
</html>

元素默认值

body标签：默认margin=8px
p标签：默认 margin- top/bottom=16px
h1标签：默认 margin- top/bottom=21.440px
ul标签：默认 margin- top/bottom=16px ,padding left=40px

通过F12 使用开发者工具查看 h1标签属性

元素分类

行级元素

1.inline内嵌元素
<a>,<strong>,<em>,<span>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内嵌元素的特性</title>
        <!--1.默认同行可以继续跟同类型标签
            2.内容撑开宽度
            3.不支持宽高
            4.不支持上下的margin-->

        <style>
            .outer{
                width: 800px;
                height: 300px;
                border: 1px black solid;
            }
            #inner1{
                margin-top: 100px ;
                margin-left: 100px;
            }
            #inner2{
                margin-top:  100px ;
                margin-left: 100px;
            }
            #inner3{
                margin-top:  100px ;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
        <a id="inner1" > 你好啊啊实打实的阿发士大夫</a>
        
        </div>
        <div class="outer">
        
        <div id="inner2"> 你好啊啊实打实的阿发士大夫</div>
        
        </div>
        <div class="outer">
        
        <span id="inner3"> 你好啊啊实打实的阿发士大夫</span>
        
        </div>
    </body>
</html>

image.png

block 块级元素

块元素的特性：
1.默认独占一行显示
2.没有宽度时，默认撑满一排
3.支持所有css命令
<p>
<div>
<h1>~<h6>
<ol>-<li>
<ul>-<li>
<dl>-<dt>-<dd>

内联块元素—代表元素
img
inline-block的特点：
元素在一行显示
支持宽高
没有宽度的时候内容撑开宽度

            既具备 inline 的 一行显示多个
            也具备 block 改变宽高  
            所以img标签很特殊 叫做 inline-block

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>块级元素 </title>
        <!--
            <p>
            <div>
            <h1>~<h6>
            <ol>-<li>
            <ul>-<li>
            <dl>-<dt>-<dd>

         块元素的特性：
        1.默认独占一行显示
        2.没有宽度时，默认撑满一排
        3.支持所有css命令  
        -->
        
        <!--内联块元素—代表元素img
             inline-block的特点：
                元素在一行显示
                支持宽高
                没有宽度的时候内容撑开宽度
                
                既具备 inline 的 一行显示多个
                也具备 block 改变宽高  
                所以img标签很特殊 叫做 inline-block 
        -->
        <style>
            img{
                
                width: 100px;
                height: 200px;
                
            }
            
        </style>
    </head>
    <body>
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/diangong.jpg" />
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/diangong.jpg" />
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/diangong.jpg" />
        
    </body>
</html>

inline-block

display 1.显示与隐藏 2块级与行级元素的转变

@charset "utf-8";
/* CSS Document */
body,h1, p, div {
    margin:0px;
    padding:0px;
}
body {
    font-size:12px;
    line-height:25px;
}
#music {
    width:260px;
}
#music h1 {
    font-size:14px;
    text-align:center;
    line-height:35px;
}
#music p {
    text-align:right;
    color:#6E6E6E;
    border-bottom:1px #7F7F7F dashed;
    line-height:28px;
    margin-bottom:10px;
}
#music span {
    display:block;
    padding-left:5px;
}
#show h2{
    color:red;
}
#show:hover div{
    display:inline;
}
#music div {
    padding-left:5px;
}

#music .song-2{display:none}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最炫民族风</title>
<link href="css/music.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="music">
  <h1>最炫民族风</h1>
  <p>演唱：凤凰传奇</p>
  <span>苍茫的天涯是我的爱</span>
  <span>绵绵的青山脚下花正开</span>
  <span>什么样的节奏是最呀最摇摆</span>
  <span>什么样的歌声才是最开怀</span>
  <span>弯弯的河水从天上来</span>
  <span>流向那万紫千红一片海</span>
  <div id = "show">
    <h2>显示全部</h2>
    <div class="song-2">火辣辣的歌谣是我们的期待</div>
    <div class="song-2">一路边走边唱才是最自在</div>
    <div class="song-2">我们要唱就要唱得最痛快</div>
  </div>


</div>
</body>
</html>

图片背景

背景图像
background-image属性

image.png

背景重复方式 :默认是重复的
background-repeat属性

image.png

背景定位
background-position属性

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            border: 1px solid red;
            background-image: url("images/book.jpg");
            background-repeat: no-repeat;
            background-position: bottom right;
        }
    </style>
</head>
<body>
<div>
    摆渡人摆渡人摆渡人摆渡人 摆渡人摆渡人摆渡人摆渡人
</div>
</body>
</html>

表格 table

<tr> 行
<td> 普通列
<th> 标题列
colspan="2" 占两列
rowspan="2" 占两行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        textarea{
            vertical-align: top;
        }
        span{
            display: inline-block;
            width: 250px;
            text-align: right;
        }
        h2,#btn-group{
            margin-left: 250px;
        }
    </style>

</head>
<body>
    
    
<table border="1">
<tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
    <th rowspan="2">为空</th>
</tr>
<tr>
    <td background="background.jpg">Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
</tr>


</table>
</body>
</html>

image.png

关于table 的 css 修饰

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>   
            table, th, td{     
                border: 1px solid black;       
                border-collapse: collapse; 
                }  
            th, td{        
                padding: 6px;
                color:blue;   }
                
             </style>
        
        
    </head>
    
    
    <body>
        <table>    
<caption>考试成绩表</caption> 
<thead>   
    <tr><th>姓名</th><th>语文</th><th>英语</th> 
        <th>数学</th><tr></thead>
<tbody><tr><td>小明</td><td></td><td>80</td>
    <td>80</td>   
 </tr>
    <tr>        <td>小红</td>       <td>90</td>        <td>90</td>        <td>90</td>    </tr>    <tr>        <td>小杰</td>        <td>100</td>        <td>100</td>        <td>100</td>    </tr>    </tbody>    <tfoot>    <tr>        <td>平均</td>        <td>90</td>        <td>90</td>        <td>90</td>    </tr>    </tfoot></table>    
        
        
    </body>
</html>

border-collapse: collapse

如果不设置边框坍塌效果border-collapse: collapse

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        textarea{
            vertical-align: top;
        }
        span{
            display: inline-block;
            width: 250px;
            text-align: right;
        }
        h2,#btn-group{
            margin-left: 250px;
        }
    </style>

</head>
<body>
<div>
    <h2>表单</h2>
    <form>
        <p>
            <span>请选择您的性别：</span>
            <input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
            <input type="radio" name="sex" id="nv" checked="checked" /> <label for="nv">女</label>
        </p>
        <p>
            <span>请选择你的爱好：</span>
            <input type="checkbox" name="aihao"/> 睡觉
            <input type="checkbox" name="aihao"/> 吃饭
            <input type="checkbox" name="aihao"/> 足球
            <input type="checkbox" name="aihao"/> 篮球
            <input type="checkbox" name="aihao"/> 乒乓球
            <input type="checkbox" name="aihao"/> 打豆豆
        </p>
        <p>
            <span>请选择您的家乡：</span>
            <select>
                <option>北京</option>
                <option>河北</option>
                <option>河南</option>
                <option>山东</option>
                <option>山西</option>
                <option>湖北</option>
                <option>安徽</option>
            </select>
        </p>

        <p>
            <span>请输入您的账户名：</span>
            <input type="text" value="" />
        </p>
        <p>
            <span>请输入您的密码：</span>
            <input type="password" />
        </p>
        <p>
            <span>请输入您的建议和要求：</span>
                <textarea cols="30" rows="10"></textarea>
        </p>
        <p id="btn-group">
            <input type="button" value="登录" />
            <input type="submit" />
            <input type="reset" />
        </p>

    </form>
</div>
</body>
</html>
</body>
</html>

image.png

position

image.png

相对位置 relative

css文件

@charset "gb2312";
/* CSS Document */

div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position:relative;
    top:10px;
    left:50px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

image.png

absulote 绝对定位

脱离文档流以最近的父节点来进行定位如果没有祖先节点以浏览器左上角为坐标原点定位。

把父类 position设置为 static时不可以约束其子元素的绝对参考系位置
css

@charset "gb2312";
/* CSS Document */

div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position: absolute;
    top:10px;
    left: 50px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

父子关系· 看父类的 position
可以约束位置

@charset "gb2312";
/* CSS Document */

div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
    position: relative;  /*absolute与relative可以约束 */   
    
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position: absolute;
    top:10px;
    left: 50px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}

不可以约束

@charset "gb2312";
/* CSS Document */

div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
    position: static;
    
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position: absolute;
    top:10px;
    left: 50px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}

垂直布局 z-index

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #a2{
                position: absolute;   /*脱离文档流*/
                top:50px;
                left: 50px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <div id="a1">
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/diangong.jpg" />
        </div>
        <div id="a2">
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/jianbian.jpg" />
        </div>
    </body>
</html>

image.png

透明度 opacity

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #a2{
                position: absolute;   /*脱离文档流*/
                top:50px;
                left: 50px;
                z-index: -1;
                opacity:0.1; /*不透明    属性  值越小 越透明*/

            }
        </style>
    </head>
    <body>
        <div id="a1">
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/diangong.jpg" />
        </div>
        <div id="a2">
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/jianbian.jpg" />
        </div>
    </body>
</html>

飘移 float

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class1{width:200px;height:100px;background:palegreen;}
        .class2{width:250px;height:130px;background:gold;}
        .class3{width:300px;height:180px;background:red;}
    </style>
</head>
<body>
<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>
</body>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class1{width:200px;height:100px;background:palegreen;float: left}
        .class2{width:250px;height:130px;background:gold; float: left;}
        .class3{width:300px;height:180px;background:red;float: left;}
    </style>
</head>
<body>
<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>
</body>
</html>

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class1{width:200px;height:100px;background:palegreen;float: left}
        .class2{width:250px;height:130px;background:gold; }
        .class3{width:300px;height:180px;background:red;}
    </style>
</head>
<body>
<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>
</body>
</html>

image.png

overflow图片视频超出规定范围问题

image.png

css

@charset "gb2312";
/* CSS Document */
body {
    font-size:12px;
    line-height:22px;
}
#content {
    width:200px;
    height:150px;
    border:1px #000 solid;
    overflow:hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>overflow属性</title>

<!--
    visible

-->
<link href="css/overflow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content"><img src="image/wine.jpg" alt="酒" />
  <p>在CSS中使用overflow属性处理盒子中的内容溢出，它规定当内容溢出盒子时发生的事情，例如内容不会被修剪而呈现在盒子之外，或者内容会被修剪，修剪内容隐藏等。</p>
</div>
</body>
</html>

clear :拯救因为飘移造成的父类坍塌问题

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap2{width:550px;border:3px solid red;}
        .class1{width:200px;height:400px;background: blue;float:left;}
        .class2{width:200px;height:300px;background: yellow;float:left;}
        .class3{width:200px;height:500px;background: fuchsia;float:left;}
        .class4{width:200px;height:200px;background: chartreuse;float:left;}
        .txt{clear: both}
    </style>
</head>
<body>
<div id="wrap2">
    <div class="class1">aaaaa</div>
    <div class="class2">bbbb</div>
    <div class="class3">cccc</div>
    <div class="class4">dddd</div>
    <p class="txt">我是一段文本我是一段文本我是一段文本我是一段文本</p>
</div>
</body>
</html>

image.png

h5新标签

header footer 等标签其实就是有意义的div标签（块级元素）

image.png

<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<body>
    <div>
        <p>这是一个header标签</p>
        <nav>
            <ul>
                <li>首页</li>
                <li>内页一</li>
            </ul>
        </nav>
    </div> 
    
        <section>
            <p>这是一个section标签</p>
            <article>
                <header><ul><li>导航1</li><li>导航2</li></ul></header>
                <p>内页内容...</p>
                <footer >这是一个footer标签</footer>
            </article>
        </section>
        <aside>这是一aside标签</aside>
    
    <footer>尾部标签</footer>
</body>   
</html>

hgroup 标签为组标签可以通过修改hgroup（父类影响子类）

<!DOCTYPE html>
<html>
<head>
    <style>
    hgroup{ background:yellow;}
    </style>
    <meta charset="utf-8" />
    <title>hgroup</title>
</head>
<body> 
    <hgroup>
        <h1>欢迎学习HTML5 教程</h1>
        <h2>第二章表单的hgroup</h2>
    </hgroup>
</body>
</html>

figure figcaption ：特殊流标签一般用于图片视频代码等

image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>figcaption</title>
</head>
<body> 
    
    <table>
        <tr><th></th></tr>
        <tr><td></td></tr>
        
    </table>
<figure> 
<figcaption>北京风景</figcaption> 
<img src="images/img_1.jpg">
<img src="images/img_2.jpg">
<img src="images/img_3.jpg">
<img src="images/img_4.jpg">
</figure> 
</body>
</html>

global 标签

contenteditable :对table 可编辑
spellcheck: 英文拼写检查

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8"/>
<title>创建一个web页面</title>
</head>
<body>
<div>
    <!-- contenteditable 对table 可编辑-->
<table id="edit" contenteditable="true">
            <tr>
              <td width="92">名字:</td>
            <td width="55">麦克</td>
            <td width="111">生日:</td>
            <td width="72">1999.01.01</td></tr>
            <tr>
             <td>性别:</td>
            <td>男</td>
            <td>职业:</td>
            <td>教师</td></tr>
            <tr>
            <td>国籍:</td>
            <td>中国</td>
            <td>公司:</td>
            <td>NEUSOFT</td>
            </tr>
            <br />
        </table>
        
        <p hidden>这段话在页面中看不到</p>
</div>
<!--标注 -->
        <div>
     <ruby>犇<rt>ben</rt></ruby>
        </div>
        <div>
       我要标注<mark>我中大奖了</mark>太高兴了，快兑奖去...   
        </div>
        
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <title>spellcheck属性的使用</title>
</head> 
<body>
<h5>这是可编辑的段落,请检查文字是否有错误。</h5>
<p contenteditable="true" spellcheck="true">This paragraph is editable,Please check whether there is an error te xaaat.</p>
</body>
</html>

video audio 视频音频标签

embed 多媒体嵌入标签

embed

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head> 
<body>
<h5>这是一个多媒体文件</h5>
<embed src="embed.swf" width="800px" height="600px" />
</body>
</html>

重定义标签
老瓶子装新酒

image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body> 

<dl>
 <dt><strong>套餐 99元</strong></dt><br>
 <dd>牛排套餐 <small>含牛排350克，西兰花100克</small></dd><br>
 <dt><strong>双人餐 199元</strong></dt><br>
 <dd>叉烧双拼 <small>港式烧鹅，港式叉烧各300克，油菜300克</small></dd>
</dl>
<br>
<hr>

<span>某宝客服</span>&nbsp;&nbsp;&nbsp;&nbsp;<small> 售后服务 | 联系我们 | 版权信息 | 声明 | 投诉</small>
</body>
</html>

form 表单新增属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
    
    <!-- 新增的form属性 实现了form 的解耦  既 不在需要将表单的内容写在form 中间了 -->
    <form action="http://localhost/test.php" method="post" id="register"></form>
    
    用户名：<input type="text" name="user" value="" form="register" /><br>
    密码：<input type="password" name="pwd" value="" form="register" /><br>
    出生年份：<select name="year" form="register"><br>
        <option value="1970">1970</option>
        <option value="1980">1980</option>
        <option value="1990">1990</option>
    </select>
    <br>
    <input type="submit" value="注册" form="register" />
    
    
</body>
</html>

datalist 下拉列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
</head>

<body>
    <!--datalist 与 input 标签配合使用 -->
  <input type="text" list="movie" />
  <datalist id="movie">
    <option label="影片排行榜第一" value="超能陆战队">
    <option label="影片排行榜第二" value="灰姑娘">
    <option label="影片排行榜第三" value="失孤">
    <option label="影片排行榜第四" value="木星上行">
  <option label="影片排行榜第五" value="帕丁顿熊"> 
  </datalist>
</body>
</html>

image.png

detail summery 实现隐藏文档功能

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
</head>
<body>
    <!--details用于描述文档或文档某个部分的细节-->
    <!--summary用于描述有关文档或文档片段的详细信息-->
<details>
    <summary>HTML5实战揭秘 </summary>
    <p>HTML5章节</p>
    <dl>
        <dt>第一章HTML5简介</dt>
        <dd>HTML5由来</dd>
        <dt>第二章标签</dt>
        <dd>新标签的哟功法</dd>
        <dt>第三章表单</dt>
        <dd>智能表单的应用</dd>
        <dt>第四章画布</dt>
        <dd>画布的应用</dd>
    </dl>
</details>
</body>
</html>

初始访问

隐藏的部分进行展示

input 标签新增加属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
    <form action="http://localhost/test.php" method="post" id="register"></form>
    
    用户名：<input type="text" name="user" value="" form="register" />
    密码：<input type="password" name="pwd" value="" form="register" />
    出生年份：<select name="year" form="register">
        <option value="1970">1970</option>
        <option value="1980">1980</option>
        <option value="1990">1990</option>
    </select>
    <input type="submit" value="注册" form="register" />
    <hr />
    默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值" form="register" /><br />
    邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />
    URL：<input type="url" name="url" value="" form="register" /><br />
    DATE:<input type="date" name="riqi" value="" form="register" /><br />
    TIME：<input type="time" name="shijian" value="" form="register" /><br />
    Month：<input type="month" name="yue" value="" form="register" /><br />
    WEEK：<input type="week" name="zhou" value="" form="register" /><br />
    数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />
    滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />
    搜索：<input type="search" name="sousuo" value="" form="register" results="n"  /><br />
    颜色：<input type="color" name="yanse" value="" form="register" /><br />
    <hr />
    自动填充表单<br />
    <input type="text" name="auto" value="" list="movie" />
    <datalist id="movie">
        <option>人在囧途</option>
        <option>车在囧途</option>
        <option>泰囧</option>
    </datalist>
</body>
</html>

output:输出表单 ,novalidate表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
    
    输出表单output<br />
    <form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">
        <input type="number" name="no1" value="" />
        <input type="number" name="no2" value="" />
        <output name="result"></output>
    </form>
    <hr>
    novalidate表单<br >
    <form action="#" method="get" novalidate="true">
    请输入电子邮件地址：<input type="email" name="user_email">
    <input type="submit" value="提交">
    </form>
    
</body>
</html>

image.png

CSS3 新特性

选择器

image.png

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="IE8.js"></script>
<style type="text/css">
h1, h2, h3, h4, h5, h5, h6 {
    background-color: #99CC33;  /* 设置背景色 */
    margin: 0;  /* 清除标题的默认外边距 */
    margin-bottom: 10px;    /* 使用下边距拉开各个标题之间的距离 */
}
h1+h2, h2+h3, h4+h5 { color: brown; /* 兄弟关系 设置字体的颜色 */ }
body>h6, h1>span, h4>span { font-size: 50px;    /* 子选择器 设置字体的大小 */ }
h2 span, h3 span { padding: 0 20px; /* <span>标签的左右间距 */ }
h5 span[class], h6 span[class] { background-color: #CC0033; /* h5、h6标题中含有class属性的span标签设置背景色 */ }
h5~h6 { color: pink; }  /*匹配 h5 标签后的 h6*/
</style>
</head>
<body>
<h1>h1元素<span>这里是span元素</span></h1>
<h2>h2元素<span>这里是span元素</span></h2>
<h3>h3元素<span>这里是span元素</span></h3>
<h4>h4元素<span>这里是span元素</span></h4>
<h6>h5之前的h6元素<span class="S2">这里是span元素</span></h6>
<h5>h5元素<span class="S1">这里是span元素</span></h5>
<h6>h6元素<span class="S2">这里是span元素</span></h6>
<h6>h5之后的第二个h6元素<span class="S2">这里是span元素</span></h6>
<div> <h5> div内的h5</h5>
       <h6> div内的h6</h6>
</div>
</body>
</html>

图片结果

image.png

伪类选择器

image.png

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
a:link { font-size: 14px; color: red; text-decoration: none; } /*链接 红色*/
a:visited { color: green; text-decoration: none; } /*访问之后 绿色*/
a:hover { color: brown; }   /*鼠标悬停 褐色*/
a:active { color: blue; }   /*运行中变为蓝色 */
</style>
</head>
<body>
<a href="#" target="_blank">设置了css样式的a链接</a>

</body>
</html>

image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
        <style>
            input:disabled{background:gray;color:green}
            input:enabled{background:#f90;color:red}
            input:checked+span{background:red}
            
            /*以上三个选择器都是针对表单做的提升修改*/
        </style>
    </head>
    <body>
        <form method="post" action="#">
        <fieldset>
            <legend>disabled和enabled</legend>
            <ul>
                <li>
                    <label>
                        <input type="text" name="id" value="99" disabled /><span>ID</span>
                    </label>
                </li>
                <li>
                    <label>
                        <input type="text" name="user" value=""  />
                        <!--input的默认状态具有 enabled属性-->
                        <span>昵称</span>
                    </label>
                </li>
                <li>
                    <label>
                        <input type="text" name="pwd" value="" enabled />
                        <span>密码</span>
                    </label>
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>选中下面的项试试(单选按钮)</legend>
            <ul>
                <li><label><input type="radio" name="sex" value="0" /><span>蓝色</span></label></li>
                <li><label><input type="radio" name="sex" value="1" /><span>红色</span></label></li>
                <li><label><input type="radio" name="sex" value="2" /><span>黑色</span></label></li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>选中下面的项试试(多选按钮)</legend>
            <ul>
                <li><label><input type="checkbox" name="like" value="0" /><span>蓝色</span></label></li>
                <li><label><input type="checkbox" name="like" value="1" /><span>红色</span></label></li>
                <li><label><input type="checkbox" name="like" value="2" checked /><span>黑色</span></label></li>
            </ul>
        </fieldset>
        </form>
</body>
</html>

image.png

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div:target { background:red; }
.item:target li a{background:blue;} /*样式代码*/<!—htm页面代码 后代选择器-->
</style>
</head>
<body>
<div id="red">盒子1</div>
<div id="blue">盒子2</div>


<div class="item">选项一
<li><a href="#red">子选项</a></li></div>


</body>
</html>

结构伪类选择器

image.png

只匹配父类下的第一子节点若匹配这选中，否则不选中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
        <meta charset="utf-8" />
        <title>结构性伪类选择符 E:first-child</title>
        <style>
            p:first-child{color:red;}  /*p 标签且 是 第一个孩子节点*/
            p:last-child{color:green;}
            p:nth-child(3){color:yellow;}
            
        </style>
    </head>
    <body>
        <div id="A">
            <h4>我是父亲的第1个子元素，可惜我不是p标签，所以无法选中我</h4>
            <p>我是父亲的第2个子元素</p>
            <p>我是父亲的第3个子元素</p>
            <p>我是父亲的第4个子元素</p>
            <p>我是父亲的第5个子元素</p>
        </div>
        
        <hr />
        
        <div id="B">
            <p>我是父亲的第1个子元素，并且我是p标签，所以我被选中了</p>
            <p>我是父亲的第2个子元素</p>
            <p>我是父亲的第3个子元素</p>
            <p>我是父亲的第4个子元素</p>
            <p>我是父亲的第5个子元素</p>
        </div>
        
        
    
    <!--
        注意：

            1、写法是  p:first-child，而不是div:first-child  
            2、以div为例 ：div 是元素，<div> 是标签 不过就目前而言多数情况下都视为1种

            
            
        该选择器的匹配步骤：

        1、找到页面中的p元素 (任何标签内部第一个出现p元素)
        2、找到该p元素的父亲元素 (找到div元素  一个是id为A的 一个是id为B的)
        3、检测找到的p元素的父元素的第一个子元素类型 是否是p标签。

            (找到2个div中的第一个子元素，id为A的第一个子元素是h3， id为B的第一个子元素是p)
            id为A的div第1个子元素不是p标签：无法选中第一个子元素
            id为B的div第1个子元素是p标签: 选中第一个子元素，定义颜色的样式对其生效
    -->
    </body>
</html>

匹配父类下的第一个对应子节点，不论前面多少个其他子节点，当前子节点皆可被选中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
        <meta charset="utf-8" />
        <title>结构性伪类选择符 E:first-of-type</title>
        <style>
            p:first-of-type{color:pink;} /*父标签下 出现的 第一次出现的 对应子节点*/
          p:last-of-type{color:orange;}
        </style>
    </head>
    <body>
        <div id="A">
            <h4>我是父亲的第1个子元素</h4>
            <p>我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了</p>
            <p>我是父亲的第3个子元素</p>
            <p>我是父亲的第4个子元素</p>
            <p>我是父亲的第5个子元素</p>
        </div>
        
        <hr />
        
        <div id="B">
            <p>我是父亲的第1个子元素，我是父亲的第一个p标签所以我被选中了</p>
            <p>我是父亲的第2个子元素</p>
            <p>我是父亲的第3个子元素</p>
            <p>我是父亲的第4个子元素</p>
            <p>我是父亲的第5个子元素</p>
        </div>
        
        <!--
            注意:of-type系列和child系列不同之处在于：

                child系列的元素序号是把父亲的所有子元素放在一个集合中，然后排序  
                    例如: id="A"的div共有5个子元素，所以他们在child系列中的序号是

                    
                    <div id="A">
                        ① <h4>我是父亲的第1个子元素</h4>
                        ② <p>
                            我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了

                          </p>
                        ③ <p>我是父亲的第3个子元素</p>
                        ④ <p>我是父亲的第4个子元素</p>
                        ⑤ <p>我是父亲的第5个子元素</p>
                    </div>
                    
                of-type系列的元素序号是把指定的元素类型的所有同类元素放在一个集合中，然后排序。

                    例如: id="A"的div共有5个子元素，但是p元素只有四个，

                        所以p元素在of-type系列中的序号是

                        
                        <div id="A">
                          <h4>我是父亲的第1个子元素</h4>
                        ① <p>
                            我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了

                          </p>
                        ② <p>我是父亲的第3个子元素</p>
                        ③ <p>我是父亲的第4个子元素</p>
                        ④ <p>我是父亲的第5个子元素</p>
                    </div>
                
                
                所有的child和of-type都遵循此原则。

                如果指定元素的所有兄弟元素都为同一类型(例如:ul内部子元素全部为li)，那么 child完全等于of-tyoe
        
        -->
    </body>
</html>

属性选择器

image.png

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
        <style>
            p[id]{background:red}
            p[id="green"]{background:green}
            p[class~="yellow"]{background:yellow}
            p[class|="a"]{background:blue}
            
            a[href^="http://"]{color:red;text-decoration:none}
            a[href$="rar"]{color:pink;text-decoration:none;}
            a[href$="rar"]:after{content:url(images/rar.jpg)}
            
            a[href*="o"]{background:green}
            
        </style>
    </head>
    <body>
        <p id="abc">小红</p>
        <p id="green">小绿毛龟</p>
        <p class="fl yellow">我最喜欢黄色了</p>
        <p class="a-b">小兰兰</p>
        <hr />
        <!--E[att^="值"] 选中以指定值开头的属性的元素-->
        <a href="http://www.baidu.com">百度一下，你就知道</a><br />
        <a href="index.php">返回首页</a><br />
        <!--E[att$="值"] 选中以指定值结尾的属性的元素-->
        <a href="down.rar">点此下载高清无码的高洛峰的AVI大片的种子</a>
        <!--E[att*="值"] 选中包含指定值字符的属性的元素-->
        
    </body>
</html>

伪标签选择器

image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
        <style>
            p::first-line{color:red}
            p::first-letter{color:green;font-size:25px}
            a::before{content:url(qvod.jpg)}
            /*a::after{content:url(qvod.jpg)}*/
            span::selection{background:#F0F}
        </style>
    </head>
    <body>
        <p>
            春晓-孟浩然<br />
            春眠不觉晓，<br />
            处处蚊子咬，<br />
            打上敌敌畏，<br />
            不至死多少。<br />
        </p>
        <hr />
        <a href="高洛峰.avi">点此下载</a>
        <hr />
        <span>听歌听的是腕，戴表戴的是链...</span>
    </body>
</html>

html5+css3 笔记

body中的标签

标题标签 <h1></h1>

当出现错误时不同的浏览器 翻译出来的 页面不同

换行标签

段落标签<p>

横线

加粗与斜体 <strong> <em>

图像标签 <img>

超链接标签

字符实体 &标签 帮我们进行转义

body 设置背景颜色 使用bgcolor 属性

CSS 层叠样式表

css高级选择器

交集选择器

并集选择器

css 外部样式引入 两种方法

1. 导入外部样式表 @import

2。链接外部样式表 link

行内样式 在标签内使用style属性 （特殊情况才使用）

优先级顺序对比

css 中的继承关系 修饰父类时 子类会继承父类中的特点

伪类：

背景颜色 background-color

列表去掉圆点 list-style

内外边框

元素默认值

元素分类

行级元素

block 块级元素

表格 table

position

相对位置 relative

absulote 绝对定位

垂直布局 z-index

透明度 opacity

overflow图片 视频超出 规定范围问题

h5新标签

global 标签

video audio 视频音频标签

embed 多媒体 嵌入标签

datalist 下拉列表

detail summery 实现隐藏文档功能

input 标签新增加属性

output:输出表单 ,novalidate表单

CSS3 新特性

伪类 选择器

结构伪类选择器

属性选择器

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

个人收藏

当出现错误时不同的浏览器翻译出来的页面不同

字符实体 &标签帮我们进行转义

body 设置背景颜色使用bgcolor 属性

css 外部样式引入两种方法

行内样式在标签内使用style属性（特殊情况才使用）

css 中的继承关系修饰父类时子类会继承父类中的特点

overflow图片视频超出规定范围问题

embed 多媒体嵌入标签

伪类选择器