1.6、前端 笔记01
一、网页开发介绍
【面试题：网页的实现】
网页主要由三个部分组成：结构、表现、行为
结构：网页的结构和内容，如：一个网页中包含文字。图片，音视频等，由
HTML实现 表现：设定网页的样式，如：字体的大小，颜色，图片形状，由
CSS实现 行为：控制用户和网页的交互，如：点击按钮请求等，由
JavaScript实现总之，结构决定了网页是什么，表现决定了网页是什么样子，行为决定网页能做什么
二、HTML简介
1、概念
标记：
html中所有的操作都是通过标记实现的，标记就是一个标签，写法：<标签名称>网页语言：制作网页的语言
开发模式：
C/S:Client/Server,客户端/服务端B/S- Browser/Server - 浏览器/服务器，
基于HTTP协议的（超文本传输协议）实现服务器的HTML资源传给Browser浏览器的客户端的。流程：客户端先请求(Request)服务器的HTML资源，然后由服务器查找资源并响应(Response)给客户端
html的作用：描述网页，展示信息给用户
2、html的规范
1、一个
html文件都包含开始标签和结束标签2、
html包含两部分内容 (1)
：是来设置html页面的属性和配置信息 (2)
：显示在页面上的内容3、
html的一部分标签有开始标签和结束标签，必须成对出现 例如：
4、
html的有些特殊标签没有结束标签，在标签内结束 例如：换行标签：
分割线：
5、
html的代码不区分大小写
3、html的操作思想
【面试题】
网页中有很多的数据，不同f的数据可能需要不同的显示效果，这个时候需要使用标签将需要操作的数据封装起来，通过修改标签的属性值实现标签内数据样式的变化
一个标签就相当于是一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化
三、常用标签
1.结构标签
<html>
<head>
<title>标题title>
<meta charset="utf-8"/>
head>
<body>
hello word!
body>
html>
2、文字标签
文字标签：修改文字的样式
标签：
属性：
text-decoration:underline/line-through/overline下划线/字体中间有一条线/上面有一条线
font-style:oblique/italic斜体
font-weight给文字加粗font-weight:100
font-size文字的大小eg：font-size:20px
color文字的颜色，有两种表示方式，一种是英文单词，另一种是使用16进制表示。
eg:color:red或者color:#ffffff【#123456,每两位表示一种颜色】，分别为红色，绿色，蓝色，就是采用RGB，一般情况下，借助于工具
现不同的颜色，拾色器：https://www.runoob.com/tags/html-colorpicker.html，其中，#FFFFF表示白色
#000000表示黑色
<html>
<head>
<title>文字标签1title>
<mage charset="utf-8"/>
head>
<body>
<font size="1" color="red"> 西游记 font>
<br/>
<font size="2" color="#abc"> 西游记 font>
<hr/>
<font style="font-size: 32px;color: darkgreen;">不带走一片云彩font>
<br />
<font style="font-size: 2em;color: darkgreen;">不带走一片云彩font>
body>
html>
3.排版标签、
、
、
1、段落标签：设置段落，标签：
2、水平线标签
hr：，属性：size:水平线的宽度，color：水平线的颜色，width：水平线的3、换行标签：
text-indent: 2em一般用于设置段落缩进
line-height:40px设置文本的行高
background: cyan和background-color: cyan设置背景颜色
<body>
<hr/>
<p style="color:blue;text-indent:2em;line-height:50px;background-color:#cccccc">这是一个普通段落，的设计好的环境的话 的手机多少号多少好的手机多少号多少,的设计好的环境的话 的手机多少号多少好的手机多少号多,
的设计好的环境的话 的手机多少号多少好的手机多少号多,
的设计好的环境的话 的手机多少号多少好的手机多少号多p>
<hr/>
<b>这是一个加粗的段落。。。哈说废话废话多符合双方的飞虎队的身份和地方生活的方式回答说废话废话多少等哈说辅导费时间b>
<hr size="20px" width="200px" color="red"/>
body>
4.文本格式化标签(strong/del/ins/em/big/sub/sup双标签)
和：加粗
和：删除线
和：下划线
和：斜体
和：小号字体和大号字体
： 下标
：上标
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
三国演义<br/>
<strong>三国演义strong><br/>
<s>原价s>：<del>999del><br/>
活动价:9.9
<br/>
唐僧 <ins>白骨精ins> <u>黑熊怪u><br/>
猴哥 <em>八戒em>
<br/>
<small>悟空三打<small>白骨精small>small><br/>
<big><big>悟空big>被赶回了花果山big><br/>
log<sub>10sub>100<br/>
2<sup>3sup>
body>
html>
5.标题标签
标签：
：一级标题：二级标题：三级标题
：四级标题：五级标题：六级标题
h1的字体最大，h6的字体最小，从h1到h6，大小是依次变小，同时会自动换行
align:right/center文字显示在右边/中间，默认显示在左边
<html>
<head>
<title>标题标签title>
<meta charset="utf-8"/>
head>
<body>
<h1 align="right">刘姥姥三进大观园h1>
<h2 align="center">刘姥姥三进大观园h2>
<h3 style="color:red">刘姥姥三进大观园h3>
<h4>刘姥姥三进大观园h4>
<h5>刘姥姥三进大观园h5>
<h6>刘姥姥三进大观园h6>
body>
html>
6.字符实体( <>©®÷×)
常用字符实体：
空格、<小于、>大于、©版权、®注册商标、÷除、×乘
<html>
<head>
<title>字符实体title>
<meta charset="utf-8"/>
head>
<body>
大a* 明
<hr/>
2<3<br/>
2<3 7>6
<hr/>
©正午阳光<br/>
®秋名山神车<br/>
9÷3<br/>
3×3<br/>
body>
html>
7.图片标签![]()
格式：
属性：
src：图片的路径 网络资源：直接赋值网址即可
本地资源：资源要在当前工程目录下，只能使用相对路径，不能使用绝对路径
width：图片显示的宽度
height：图片显示的高度
alt：图片上的文字提示【图片的替换文本,如果图片资源加载不出来, 显示该文本】
title：鼠标悬浮标题，注意和alt的区别
border-radius:5%每条边有5%的圆角
【路径问题】
找不到资源路径，则会出现404的错误
绝对路径：包含盘符的路径
相对路径：没有盘符，表示一个文件相对于另外一个文件的位置，以后在实际项目开发中常用
<html>
<head>
<title>图片标签title>
<meta charset="utf-8"/>
head>
<body>
<img src="https://img10.360buyimg.com/n7/jfs/t1/198541/33/18160/89241/619b5445E50371f54/146f2efb0a57ef66.jpg"/>
<img width="220px" height="220px" style="border:3px blue solid" src="psb6.jpg"/>
<img width="220px" height="220px" style="border:5px blue dashed" src="../s4.jpg"/>
<img width="220px" height="220px" style="border:5px blue dotted" src="img/psb7.jpg"/>
<hr/>
<img width="220px" height="220px" src="file:///D:/2202/day18/psb6.jpg"/>
<img width="220px" height="220px" alt="图片飞走了" title="放大吗" src="file:///E:/tools/anquan.jpg"/>
<hr/>
<img style="border-radius:5%" src="https://img10.360buyimg.com/n7/jfs/t1/115689/23/23353/188945/6243400fE8e59e794/402c3d42d1a247df.jpg"/>
<img style="border-radius:30%" src="https://img10.360buyimg.com/n7/jfs/t1/115689/23/23353/188945/6243400fE8e59e794/402c3d42d1a247df.jpg"/>
<img style="border-radius:50%" src="https://img10.360buyimg.com/n7/jfs/t1/115689/23/23353/188945/6243400fE8e59e794/402c3d42d1a247df.jpg"/>
body>
html>
8、元素的边框border
border-radius:10%四个角的10%成圆角
<html>
<head>
<title>边框title>
<meta charset="utf-8"/>
head>
<body>
<h6>元素的边框h6>
<img style="border-left:13px blue solid;border-top:6px green solid;border-right:6px red solid;border-bottom:6px yellow solid;border-radius:10%" src="https://img10.360buyimg.com/n7/jfs/t1/177749/1/14577/106118/60f5a5b5E6b5d9c03/2a8c4e949ba4c8f2.jpg"/>
body>
html>
9、超链接标签：
href链接地址
target="_blank"在一个新的界面打开链接，不设置的话默认是同一个页面
text-decoration:none去下滑线
<html>
<head>
<title>超链接标签title>
<meta charset="utf-8"/>
head>
<body>
<h6>超链接标签h6>
<a target="_blank" href="https://www.w3school.com.cn/">w3Schoola>
<br/>
<a target="_blank" href="边框.html">边框a>
<br/>
<a target="_blank" href="../day18/图片标签.html">图片a>
<br/>
<a style="text-decoration:none;color:red" href="http://news.baidu.com">百度新闻a>
<br/>
body>
html>
10、绝对位置标签：position:absolute
<html>
<head>
<title>绝对位置title>
<meta charset="utf-8"/>
head>
<body>
<img style="position:absolute;left:100px;top:300px" src="https://img12.360buyimg.com/n1/s190x190_jfs/t1/128392/19/26749/201541/623d9822E2c50c6b5/4d2feb459ba4aceb.jpg"/>
body>
html>
11、相对位置标签：position:relative
<img src="https://img14.360buy
相对对位置
"utf-8"/>
head>
<body>
<img src="https://img14.360buyimg.com/n7/jfs/t1/195862/39/25633/456778/62426ef8E7f5b03f3/876c317408cd3f53.jpg"/>
<img style="position:relative;left:220px;top:195px;" src="https://img12.360buyimg.com/n1/s190x190_jfs/t1/128392/19/26749/201541/623d9822E2c50c6b5/4d2feb459ba4aceb.jpg"/>
body>
html>img.com/n7/jfs/t1/195862/39/25633/456778/62426ef8E7f5b03f3/876c317408cd3f53.jpg"/>
<img style="position:relative;left:220px;top:195px;" src="https://img12.360buyimg.com/n1/s190x190_jfs/t1/128392/19/26749/201541/623d9822E2c50c6b5/4d2feb459ba4aceb.jpg"/>
12、悬浮位置标签 ：position:fixed 底部
<html>
<head>
<title>悬浮位置title>
<meta charset="utf-8"/>
head>
<body>
<img src="https://img14.360buyimg.com/n7/jfs/t1/195862/39/25633/456778/62426ef8E7f5b03f3/876c317408cd3f53.jpg"/>
<img style="position:relative;left:220px;top:1195px;" src="https://img12.360buyimg.com/n1/s190x190_jfs/t1/128392/19/26749/201541/623d9822E2c50c6b5/4d2feb459ba4aceb.jpg"/>
<a href="#top" style="position:fixed;left:50px;bottom:50px;">回到顶部a>
body>
html>
13、音视频标签、
<html>
<head>
<title>音视频标签title>
<meta charset="utf-8"/>
head>
<body>
<h6>音视频标签h6>
<hr/>
<audio src="mm.mp3" controls loop autoplay>audio>
<hr/>
<video src="heihei.mp4" controls loop autoplay>video>
<hr/>
body>
html>
14、块标签
拼接标签，相当于块，可以使用相对位置
<html>
<head>
<title>块标签title>
<meta charset="utf-8"/>
head>
<body>
<div style="width:200px;height:600px;background-color:#aaa">
<img width="100px" height="100px" src="https://img12.360buyimg.com/n7/jfs/t1/195830/39/21622/512616/62415d26E7240e4f5/f2fbbeb5285c04dc.jpg"/>
div>
<div style="width:800px;height:200px;backgroundcolor:#ccc;position:absolute;left:235px;top:20px">
<h6>桃花岛h6>
<p>黄药师很忙p>
div>
<div style="width:800px;height:400px;backgroundcolor:#bbb;position:absolute;left:235px;top:240px;">
<h6>绝情谷h6>
<b>绝情谷---裘千仞b>
<span>黄蓉找到郭靖span><span>郭靖找到了穆念慈span>
div>
body>
html>
15、列表标签
dl-->dt-->dd（自定义列表）
ol->lityp=i/a/1罗马数字、英文字母、阿拉伯数字（有序列表）
ul->lityp=circle/disc/square空心圆点、实心圆点（默认值）、实心方框（无序列表）
<html>
<head>
<title>列表标签title>
<meta charset="utf-8"/>
head>
<body>
<dl>
<dt>微信dt>
<dd>微信支付dd>
<dd>微信朋友圈dd>
<dd>微信小程序dd>
dl>
<hr/>
<ol type="i">
<li>张学友li>
<li>刘德华li>
<li>黎明li>
<li>郭富城li>
ol>
<hr/>
<h6>热点点击h6>
<ol>
<li><a href="#">江苏盐城经开区：城市有“气质” 发展高品质a>li>
<li><a href="#">阻击疫情 | 铜陵环保铁军女战士：绽放在a>li>
<li><a href="#">疫情防控 共克时艰 | 台州市生态环境局三门a>li>
<li><a href="#">中国二冶山东分公司枣庄市人民医院项目加a>li>
<li><a href="#">全力抗疫 环保助力 吹响生态环保人的战a>li>
ol>
<h6>无序列表h6>
<ul type="square">
<li>重庆森林li>
<li>2046li>
<li>阿飞正传li>
<li>东邪西毒li>
<li>东成西就li>
ul>
body>
html>
16、列表标签推荐
list-style-type:none去除ul li前面的小图标
display:inline设置元素对象作为行内元素显示，在li里面用
margin-left:10px实现间隔
<div style="width:250px;height:5648px;border:1px white solid">
<ul style=" list-style-type:none;width:auto;margin:0 auto;">
<li style="display:inline">
<div style="width:178px;height:260px;background-color:#fff">
<center>
<img width="160px" height="160px" src="https://img11.360buyimg.com/n2/jfs/t1/103803/38/21322/138152/61e532f5E6a2e56cc/8c5afc68d9af073e.jpg"/>
<font style="color:red;font-size:14px">¥4599.00font><br/>
<font style="color:#aaa;font-size:14px">生日礼物font>
center>
div>
li>
<li>
<div style="width:178px;height:260px;background-color:#fff">
<center>
<img width="160px" height="160px" src="https://img12.360buyimg.com/n2/jfs/t1/86718/21/24575/267910/624483bbEa90b2d7e/ac65de577783f9c6.jpg"/>
<font style="color:red;font-size:14px">¥4599.00font><br/>
<font style="color:#aaa;font-size:14px">生日礼物font>
center>
div>
li>
17、表格标签
tr/th 行/列
align="center"属性居中
<table width="800px" height="300px" bgcolor="green" border="3px" bordercolor="blue">
<tr align="center">
<th>idth>
<th>nameth>
<th>telth>
<th>pwth>
tr>
<tr align="center">
<td>1td>
<td>唐僧td>
<td>13889898988td>
<td>999td>
tr>
table>
18、使用表格实现物品列表
<table width="1000px" height="800px">
<tr>
<td>
<div style="width:220px;height:300px">
<img width="220px" height="220px" src="https://img14.360buyimg.com/n7/jfs/t1/185771/17/17304/757226/6108a6a5Eed68c3fe/bb605b75d110a4fb.png"/>
<center>
<font style="color:red;font-size:14px">￥428.00font><br/>
<font style="color:gray;font-size:12px">新款牛皮大容量包包font>
center>
div>
td>
<td>
<div style="width:220px;height:300px">
<img width="220px" height="220px" src="https://img14.360buyimg.com/n7/jfs/t1/116227/15/22993/406700/62416c8eE6a7b1789/b08814aad2ccd1e1.jpg"/>
<center>
<font style="color:red;font-size:14px">￥428.00font><br/>
<font style="color:gray;font-size:12px">新款牛皮大容量包包font>
center>
div>
td>
tr>
table>
19、表格的变形（合并单元格）rowspan合并列 colspan合并行
<table width="300px" height="100px" bgcolor="green" border="2px" bordercolor="blue">
<tr>
<td>曹操td>
<td>18td>
<td rowspan="3">男td>
tr>
<tr>
<td>曹植td>
<td>2td>
tr>
<tr>
<td>曹丕td>
<td>4td>
tr>
<tr>
<td>曹皇后td>
<td>1td>
<td>女td>
tr>
table>
<table width="300px" height="100px" bgcolor="green" border="2px" bordercolor="blue">
<tr align="center">
<td colspan="3">曹家人信息td>
tr>
<tr>
<td>曹植td>
<td>2td>
<td>男td>
tr>
<tr>
<td>曹丕td>
<td>4td>
<td>男td>
tr>
<tr>
<td>曹皇后td>
<td>1td>
<td>女td>
tr>
table>
20、表单标签 input
action：提交的位置【服务器地址】
"#"是一个假地址method：提交采用的方法，数据提交的方式[post get]
1>普通输入项：
2>密码输入项：
8>提交按钮：
9>重置按钮:
注：重置按钮并不是清空数据，而是回到最初状态，按钮上的文字默认为重置
<html>
<head>
<title>表单标签title>
<meta charset="utf-8"/>
head>
<body>
<h6>欢迎注册：h6>
<form action="http://www.baidu.com" method="get">
用户名:<input type="text" name="uname"/><br/>
密码:<input type="password" name="upw"/><br/>
<input type="submit" value="提交"/><br/>
<input type="reset" value="重置"/><br/>
form>
body>
html>
21、input标签
name为了给服务器进行声明数据类型，表单标签中几乎都需要【除了按钮】
value用户选了是什么就是什么
radio单选框
checkbox复选框
<html>
<head>
<title>input标签title>
<meta charset="utf-8"/>
head>
<body>
<h6>input标签的常见类型h6>
<form action="#" method="get">
<hr/>
输入框:<br/>
名字：<input type="text" id="in1"/>
<hr/>
按钮：<br/>
<input type="button" value="按钮"/>
<hr/>
单选框<br/>
请选择性别：
<br/>
男：<input type="radio" name="sex" value="man"/><br/>
女：<input type="radio" name="sex" value="woman"/><br/>
<hr/>
复选框<br/>
请选择你喜欢的电影：<br/>
霸王别姬：<input type="checkbox" name="movie" value="bwbj"/><br/>
英雄：<input type="checkbox" name="movie" value="yx"/><br/>
西部世界：<input type="checkbox" name="movie" value="xbsj"/><br/>
权利的游戏：<input type="checkbox" name="movie" value="qy"/><br/>
大话西游：<input type="checkbox" name="movie" value="dhxy"/><br/>
<hr/>
上传文件：<input type="file"/>
<hr/>
请填写邮件：<input type="email"/>
<hr/>
<input type="hidden" value="qqq"/>
<hr/>
<textarea cols="70" rows="10">
textarea>
form>
body>
html>
22、input标签2
html>
<head>
<title>input标签2title>
<meta charset="utf-8"/>
head>
<body>
<hr/>
<input type="color"/><br/>
<input type="date"/><br/><br/>
<input type="time"/><br/>
<input type="image" src="https://img14.360buyimg.com/n7/jfs/t1/185771/17/17304/757226/6108a6a5Eed68c3fe/bb605b75d110a4fb.png"/><br/>
<hr/>
<input type="range" min="0" max="10" value="8"/>
body>
html>
23、select-->option标签
<body>
<select name="s1">
<option>西安option>
<option>兰州option>
<option>宝鸡option>
<option>渭南option>
<option>咸阳option>
<option>张掖option>
select>
body>
24、iframe的使用
可以多个网页在一个页面上显示
<html>
<head>
<title>iframe的使用title>
<meta charset="utf-8"/>
head>
<body>
<iframe width="400px" height="1000px" src="http://news.baidu.com/">
iframe>
<iframe style="position:absolute;left:450px;top:20px" width="500px" height="500px" src="http://news.baidu.com/">iframe>
<iframe style="position:absolute;left:1000px;top:20px" width="500px" height="500px" src="file:///D:/2202/day19/input%E6%A0%87%E7%AD%BE2.html">iframe>
body>
html>
25、边距问题margin 外边距、padding内边距
<html>
<head>
<title>边距问题title>
<meta charset="utf-8"/>
head>
<body>
<img src="https://img13.360buyimg.com/n7/jfs/t1/199601/25/4011/124574/611f6687E510504d9/0e91d0966aa72456.jpg"/>
<div style="width:300px;height:300px;border:3px blue solid;margin-top:10px;margin-left:10px;padding-left:20px;padding-top:20px">
<img src="https://img14.360buyimg.com/n7/jfs/t1/176486/15/22011/449511/61b40f2aE1e55324e/20d4d342eed05be0.jpg"/>
div>
body>
html>
三、css
1、css的通用选择器
<html>
<head>
<title>css的通用选择器title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:10px;
}
style>
head>
<body>
<h6 id="qq">css的通用选择器h6>
<p id="dy">段誉---虚竹p>
<img id="img1" src="https://img13.360buyimg.com/n7/jfs/t1/89445/2/24821/97801/6236a625E54c8e427/29c5be7a981d478b.jpg"/>
<img src="https://img11.360buyimg.com/n7/jfs/t1/210256/35/19635/346185/62416145E886675f4/fca6d95f67287711.jpg"/>
<img src="https://img10.360buyimg.com/n7/jfs/t1/207561/12/12943/140919/61bc4160Ee48d3395/4791f23811f262a2.jpg"/>
<h1>王语嫣h1>
body>
html>
2、css的基本选择器
需要在head中增加
id="名称"#名称{}
class="名称".名称{}
标签标签{} eg：img{}
<html>
<head>
<title>css的基本选择器title>
<meta charset="utf-8"/>
<style type="text/css">
img{
width:200px;
height:200px;
}
.killer{
width:100px;
height:100px;
}
#bfx{
width:300px;
height:300px;
}
style>
head>
<body>
<h6>css的基本选择器 三种基本选择器的优先级 id >> 类选择器 >> 标签选择器h6>
<img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2869422067.webp"/>
<img id="bfx" class="killer" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2868425292.webp"/>
<img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2869137086.webp"/>
<img class="killer" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2868462052.webp"/>
<img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2869751944.webp"/>
<img class="killer" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2670448229.jpg"/>
body>
html>
3、div的悬浮float:left;块标签向左并排出现
background-color:#ccc背景颜色
<html>
<head>
<title>div的悬浮title>
<meta charset="utf-8"/>
<style type="text/css">
#bigdiv{
width:675px;
height:300px;
border:1px blue solid;
}
.moviediv{
width:115px;
height:249px;
float:left;
margin-left:15px;
margin-top:18px;
}
.movieimg{
width:115px;
height:170px;
margin-bottom:20px;
}
.moviename{
font-size:14px;
color:#aaa;
margin-top:10px;
}
.xzgp{
width:90px;
height:24px;
background-color:blue;
margin-top:10px;
font-size:10px;
color:white;
padding-left:10px;
padding-right:10px;
padding-top:3px;
padding-bottom:3px;
}
.namediv{
margin-bottom:10px;
}
style>
head>
<body>
<h6>正在热映的电影：h6>
<div id="bigdiv">
<div class="moviediv">
<img class="movieimg" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2867060943.webp"/>
<center>
<div class="namediv"><font class="moviename">月球陨落font>div>
<span class="xzgp">选座购票span>
center>
div>
<div class="moviediv">
<img class="movieimg" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2869076642.webp"/>
<center>
<div class="namediv"><font class="moviename">月球陨落font>div>
<span class="xzgp">选座购票span>
center>
div>
<div class="moviediv">
<img class="movieimg" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2797468943.webp"/>
<center>
<div class="namediv"><font class="moviename">月球陨落font>div>
<span class="xzgp">选座购票span>
center>
div>
<div class="moviediv">
<img class="movieimg" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2868425292.webp"/>
<center>
<div class="namediv"><font class="moviename">月球陨落font>div>
<span class="xzgp">选座购票span>
center>
div>
<div class="moviediv">
<img class="movieimg" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2633855969.webp"/>
<center>
<div class="namediv"><font class="moviename">月球陨落font>div>
<span class="xzgp">选座购票span>
center>
div>
div>
body>
html>
4、元素的覆盖（几个元素重叠）
<img src="">
5、opacity透明度 取值范围 0-1
<html>
<head>
<title>透明度属性title>
<meta charset="utf-8"/>
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:blue;
opacity:0.5;
}
style>
head>
<body>
<div id="div1">
div>
body>
html>
6、多个类作用于同一个标签
<img class="c1 c2" str=""/>
7、一个类作用于多个标签
<img class=c1 src=""/>
<font class=c1>文字font>
8、多选择器（多个类或标签有共同的属性）
<style type="text/css">
h3,font,p,b,#div1,.div2
style>
<h3>文字h3>
<font>文字font>
<p>文字p>
<b>文字b>
<hr/>
<div id="div1">三国div>
<div class="div2">三国div>
9、包含选择器（层次选择器）也可以连接三个等等
<style type="text/css">
img{
}
#div1 .uu{
}
style>
<body>
<div id="div1">
<img class="uu" src="">
<img class="uu" src="">
div>
<img src="">
body>
10、兄弟选择器（匹配相邻的标签）
+选择后面一个
~选择后面所有
<style type="text/css">
#aa{
}
#aa + li{
}
#aa ~ li{
}
style>
<body>
<ol>
<li>文本li>
<li id="aa">文本li>
<li>文本li>
<li>文本li>
<li>文本li>
ol>
body>
11、伪类选择器
hover：鼠标至于其上
before/after：添加头部或尾部 ，需要用content
first-letter/first-line：设置第一个字符或者第一行
格式：
<style type="text/css">
#div:hover{}
#div:before/after{
content:"添加的内容";
colore:red
}
#div:first-letter/first-line{
}
style>
12、结构选择器（伪类选择器）
#uu li:first-child第一个
#uu li:last-child最后一个
#uu li:nth-child(n)第n个
#uu li:empty选择空的
#uu li:not(#zz)选择不是#zz的
<style type="text/css">
#uu li:first-child{
}
#uu li:last-child{
}
#uu li:nth-child(4){
}
#uu li:empty{
}
#uu li:not(#zz){
}
style>
<body>
<ul id="uu">
<li>文本li>
<li id="aa">文本li>
<li>文本li>
<li>li>
<li>文本li>
<li di="zz">文本li>
ul>
body>
13、属性选择器
用法：
<style type="text/css">
input[name]{
}
input[name="uname"]{
}
input[typ="password"]{
}
style>
<body>
<input type="text" name="uname"/><br/>
<input type="text" name="qq"/><br/>
<input type="password" name="ss"/><br/>
<input type="text"/><br/>
body>
14、权重
行内权重–>id–>class–>标签选择器
eg:img(从大到小)
15、css属性
font-family:宋体(黑体、楷体)
letter-spacing字母间距
word-spacing单词间距
direction:rtl文本显示在右方
text-shadow:7px 7px red阴影
overfiow:hidden/scroll/auto出了div的文字删除/滚动条/滚动条
cursor:crosshair/pointer鼠标十字/手的样式
16、css 外联
1、先写一个
css文件.css2、索引进
html中 用link
<html>
<head>
<link href="" type="test/css" rel="stylesheet"/>
head>
<body>
body>
html>
17、连接属性
link控制未访问过的颜色等
visited访问过之后的属性
hover鼠标放上去的属性
<html>
<head>
<title>链接属性title>
<meta charset="utf-8"/>
<style type="text/css">
a:link{
color:red;
}
a:visited{
color:pink;
}
a:hover{
color:blue;
}
style>
head>
<body>
<a href="http://news.baidu.com">百度新闻a>
<a href="http://www.tencent.com">腾讯qqa>
body>
html>
**#### 回顾：（重点css选择器）
1、属性：
list-style:none去除ul li前面的小图标
display:inline显示在一行且不会换行，在li里面用
margin-left:10px实现间隔（right/top/bottom）
text-decoration:none超链接去掉下滑线
padding-top内上距离
margin-top外上边距
border:1px blue solid边框 绿色 实现
border-readius:10%圆边border-left-readius:10%左边圆边
position:absolute绝对位置
position:relative相对位置
position:fixed可以设置回到顶部
float:left左悬浮
连接在一起
居中
width宽、height高
3、iframe 可以多个网页在一个页面上显示
<iframe width="400px" height="1000px" src="http://news.baidu.com/">
iframe>
4、dl-->dt-->dd （自定义列表标签）
5、ol->li typ=i/a/1 罗马数字、英文字母、阿拉伯数字（有序列表标签）
6、ul->li typ=circle/disc/square 空心圆点、实心圆点（默认值）、实心方框（无序列表标签）
7、