1.get请求和post请求的区别
2. style属性
通过设置style属性来改变样式
案例：使用style属性优化登录表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method=""> <!--action 为表单提交的地址-->
<table border="1px" cellspacing="0" cellpadding="">
<colgroup span="2" width="150px"></colgroup>
<col width="200px">
<tr height="20px" align="center">
<td rowspan="4" style="color: #06bd00;">总体信息</td>
<td colspan="2"></td>
</tr>
<tr height="20px" align="center">
<td align="right">用户名:</td>
<td ><input type="text" name="loginname" id="" value=""/></td>
</tr>
<tr height="20px" align="center">
<td align="right">密码:</td>
<td><input type="password" name="pwd" id="" value="" /></td>
</tr>
<tr height="20px" align="center">
<td colspan="2">
<input type="submit" name="" id="" value="提交" style="width:80px; height:30px;background-color:lightblue" /> <!--type需要时submit才会提交-->
<input type="reset" name="" id="" value="重置" style="width:80px; height:30px;background-color:lightblue" /><!--type需要时reset才会重置-->
</td>
</tr>
</table>
</form>
</body>
</html>
3.div 和 span 标签
案例1-使用div和span元素并设置相应的属性来调整页面样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="" style="width:500px; dimgray;margin: auto;">
<p style="text-align: center;">
<span id="" style="background-color:slategray ; color:white; font-size: 20px;">
<b>我的天才女友 </b> <!--b标签用于文字加粗-->
</span>
</p>
<p>
<span id="" style="color: lightslategray;">
故事发生在位于意大利那不勒斯的一个贫穷而又破败的社区之中，莉拉（卢多维卡·纳斯蒂 Ludovica Nasti 饰）和爱莲娜（艾丽莎·德尔·杰尼奥 Elisa del Genio 饰）从小就生活在那里。
莉拉出生在一个专制的家庭之中，父亲是一名鞋匠。
</span>
虽然莉拉在班级里是公认的天才少女，但是在父亲的坚持之下，莉拉最终放弃了学业，在鞋店里成为了帮工。 </p>
<p>和莉拉不同，爱莲娜在家人和老师的支持之下继续求学，虽然和莉拉走上了截然不同的人生道路，但爱莲娜的目光始终凝聚在莉拉的身上。</p>
<p>在十六岁那一年，莉拉嫁给了苦苦追求她的富家子弟斯代凡诺（乔万尼·阿穆拉 Giovanni Amura 饰），可是等待着她的却并非美好的婚姻生活。</p>
</div>
</body>
</html>
- 样式设置
案例2-制作网站导航页并用style属性设置样式（行内样式）
<!DOCTYPE html>
<html style="background-color: azure;">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="margin: 0;"> <!--设置margin为0是图片与网页边框贴合-->
<div id="banner" style="">
<img src="../img/xiaolizi.JPG" style="width: 100%;height: 1000px;" >
</div>
<div id="navigation" style="height:80px;line-height: 80px; text-align: center;color:black;">
<a href="https://movie.douban.com/celebrity/1041029/" style="color: black;margin: 15px;">小李子首页</a>
<a href="https://baike.baidu.com/item/%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A%C2%B7%E8%BF%AA%E5%8D%A1%E6%99%AE%E9%87%8C%E5%A5%A5/1243185?fromtitle=%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A&fromid=5753&fr=aladdin" style="color: black;margin:15px">小李子简介</a>
<a href="https://movie.douban.com/celebrity/1041029/movies?sortby=time&format=pic" style="color: black;margin: 15px;">小李子电影</a>
<a href="https://baijiahao.baidu.com/s?id=1596875990048142671&wfr=spider&for=pc" style="color: black;margin: 15px;">小李子前女友</a>
<a href="https://www.sohu.com/a/231561754_115547" style="color: black;margin: 15px;">小李子最新爆料</a>
<a href="https://tieba.baidu.com/f?fr=ala0&kw=%C0%B3%B0%BA%C4%C9%B6%E0&loc=rec" style="color: black;margin: 15px;">小李子互动</a>
</div>
<div id="bottom" style="height: 40px;line-height: 40px;text-align: center;background-color: lightgray;">
小李子是我永远的梦中情人。。。
</div>
</body>
</html>
案例3-改写案例2（将行内样式改写为内部样式）
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title></title>
<style >
html{
background-color: azure;
}
body{
margin: 0;
}
#banner img{
width: 100%;height: 1000px;
}
#navigation{
height:80px;line-height: 80px; text-align: center;color:black;
}
#navigation a{
color: black;margin: 15px;
}
.mywords{
height: 40px;line-height: 40px;text-align: center;background-color: lightgray;
}
</style>
</head>
<body > <!--设置margin为0是图片与网页边框贴合-->
<div id="banner">
<img src="../img/xiaolizi.JPG" >
</div>
<div id="navigation">
<a href="https://movie.douban.com/celebrity/1041029/" >小李子首页</a>
<a href="https://baike.baidu.com/item/%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A%C2%B7%E8%BF%AA%E5%8D%A1%E6%99%AE%E9%87%8C%E5%A5%A5/1243185?fromtitle=%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A&fromid=5753&fr=aladdin" >小李子简介</a>
<a href="https://movie.douban.com/celebrity/1041029/movies?sortby=time&format=pic" >小李子电影</a>
<a href="https://baijiahao.baidu.com/s?id=1596875990048142671&wfr=spider&for=pc" >小李子前女友</a>
<a href="https://www.sohu.com/a/231561754_115547">小李子最新爆料</a>
<a href="https://tieba.baidu.com/f?fr=ala0&kw=%C0%B3%B0%BA%C4%C9%B6%E0&loc=rec" >小李子互动</a>
</div>
<div id="bottom" class="mywords" >
小李子是我永远的梦中情人。。。
</div>
</body>
</html>
案例4-进一步优化案例3
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title></title>
<style >
html{
background-color: azure;
}
body{
margin: 0;
}
#banner img{
width: 100%;height: 1000px;
}
#navigation{
height:80px;line-height: 80px; text-align: center;color:black;
}
#navigation a{
color: black;margin: 15px;
}
.mywords{
height: 40px;line-height: 40px;text-align: center;background-color: lightgray;
}
.item{
text-decoration: none;
border-right:solid 1px #000000 ;
padding:0 5px;
}
#navigation .last{
border: none;
}
</style>
</head>
<body > <!--设置margin为0是图片与网页边框贴合-->
<div id="banner">
<img src="../img/xiaolizi.JPG" >
</div>
<div id="navigation">
<a class="item" href="https://movie.douban.com/celebrity/1041029/" >小李子首页</a>
<a class="item" href="https://baike.baidu.com/item/%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A%C2%B7%E8%BF%AA%E5%8D%A1%E6%99%AE%E9%87%8C%E5%A5%A5/1243185?fromtitle=%E8%8E%B1%E6%98%82%E7%BA%B3%E5%A4%9A&fromid=5753&fr=aladdin" >小李子简介</a>
<a class="item" href="https://movie.douban.com/celebrity/1041029/movies?sortby=time&format=pic" >小李子电影</a>
<a class="item" href="https://baijiahao.baidu.com/s?id=1596875990048142671&wfr=spider&for=pc" >小李子前女友</a>
<a class="item" href="https://www.sohu.com/a/231561754_115547">小李子最新爆料</a>
<a class="item last" href="https://tieba.baidu.com/f?fr=ala0&kw=%C0%B3%B0%BA%C4%C9%B6%E0&loc=rec" >小李子互动</a>
</div>
<div id="bottom" class="mywords" >
小李子是我永远的梦中情人。。。
</div>
</body>
</html>
- 选择器的优先级以及权重
a. 优先级
b. 权重
6. css文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1{
color:red;font-family: "arial black";
}
.p2{
font-size: 25px;
}
.p3{
font-weight: bold;text-indent: 60px;
}
.p4{
text-align: center;font-style: italic;text-decoration: underline;
}
.p5{
line-height: 100px;background-color: darkslategray;
}
</style>
</head>
<body>
<ul>
<li class="p1">
卡门·伊莱克特拉，1972年4月20日出生于俄亥俄州，美国演员、歌手、模特。
<!--<img src="../img/kamen.jpg" >-->
</li>
<li class="p2">
卡门·卡丝，1978年9月14日出生于塔林，爱沙尼亚超级名模。
<!--<img src="../img/kamenkasi.jpg" >-->
</li>
<li class="p3">
吉赛尔·邦辰生于巴西南里奥格兰德州霍里宗蒂那城，巴西超模、演员。
<!--<img src="../img/bangchen.gif" >-->
</li>
<li class="p4">
芭儿·莱法利，1985年出生于以色列的一个小村庄，父母以经营马场为生，模特、演员。
<!--<img src="../img/baer.jpg" >-->
</li>
<li class="p5">
丽芙·泰勒出生于美国纽约，美国影视演员。
<!--<img src="../img/tyler.jpg" >-->
</li>
</ul>
</body>
</html>