1、 初识HTML
HTML:Hyper Text Markup Language(超文本标记语言) 。
超文本包括：文字、图片、音频、视频、动画等。
1.1、W3C标准
1.2、HTML基本结构
示例：
<!-- DOCTYPE:告诉浏览器，我们要使用什么规划，这里是HTML -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!-- meta描述性标签，它用来描述我们网站的一些信息 -->
<!-- meta一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="我爱编程">
<meta name="descrption" content=我爱这个世界>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>小羊的网站</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
1.3、网页的基本标签
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>一级标签</h2>
<h3>一级标签</h3>
<h4>一级标签</h4>
<h5>一级标签</h5>
<h6>一级标签</h6>
<!-- 段落标签 -->
<p>我喜欢王许哲</p>
<p>她很漂亮，也很温柔。</p>
<!-- 水平线标签 -->
<hr/>
<!-- 换行标签 -->
王许哲很温柔</br>
我喜欢她。</br>
<!-- 粗体，斜体 -->
<h1>字体样式标签</h1>
粗体：<strong>I love you</strong>
斜铁：<em>I love you</em>
<br/>
<!-- 特殊符号 -->
空 格<br/>
空 格
<br/>
>
<br/>
<
<br/>
©小羊版权所有
</html>
1.4、图像标签
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>图像标签</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- img学习
src : 图片地址（必填）
相对地址（推荐使用），绝对地址
../ 表示上一级目录
alt :图片的名字（必填）
-->
<img src="../html/resources/image/头像.jpg" alt="我的头像" title="首页" width="300" height="200">
</body>
</html>
1.5、链接标签
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接标签</title>
</head>
<body>
<!-- a标签
href : 必填，表示要跳转到那个页面
target: 表示窗口在哪里打开
_blank 在新标签中打开
_self 在当前页打开
-->
<a name="top">头部</a>
<a href="https://www.baidu.com" target="_blank" >百度首页</a>
<br/>
<a href="https://www.baidu.com" target="_self">
<img src="../html/resources/image/百度.png" alt="我的头像" title="首页">
</a>
<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
#name
-->
<br/>
<a href="#top">回到头部</a>
<!-- 功能性链接
邮件链接：mailto
-->
<br/>
<a href="mailto:1763108660@qq.com">点击联系我</a>
</body>
</html>
1.6、行内元素和块元素
1.7、列表
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表学习</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>GO</li>
<li>JAVA</li>
<li>Python</li>
<li>前端</li>
<li>C/C++</li>
</ol>
<hr/>
<!-- 无序列表
应用：导航，侧边栏
-->
<ul>
<li>GO</li>
<li>JAVA</li>
<li>Python</li>
<li>前端</li>
<li>C/C++</li>
</ul>
<!-- 自定义列表
dl : 标签
dt : 列表名称
dd : 列表内容
公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>JAVA</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>C</dd>
<dt>位置</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
<dd>深圳</dd>
</dl>
</body>
</html>
1.8、表格
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<!-- 表格table
行 tr
列 td
-->
<table border="1px">
<tr>
<!-- colspan 跨列-->
<td colspan="5">1-1</td>
</tr>
<tr>
<!-- rowspan 跨行 -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
<td>2-6</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
1.9、媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体元素</title>
</head>
<body>
<!-- 音频和视频
src ：资源路径
controls ：控制条
autoplay ：自动播放
-->
<video src="../html/resources/video/欧文.mp4" controls autoplay></video>
<br/>
<audio src="../html/resources/audio/bgm.mp3" controls autoplay></audio>
</body>
</html>
1.10、页面结构分析
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页结构</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
1.11、iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<!-- iframe内联框架
src :地址
w-h :宽度和高度
-->
<iframe src="https://wwww.baidu.com" frameborder="0" width="200px" height="200px"></iframe>
</body>
</html>
1.12、表单
表单元素格式：
表单的应用：
表单的初级验证：
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单form
action :表单提交的位置
-->
<form action="myFirstNet.html" method="post">
<p>姓名：<input type="text" name="username" value="王许哲" readonly></p>
<p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p>
<!-- 单选框标签
input type="radio"
value: 单选框的值
name:表示组
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
<!-- 多选框
input type="checkbox"
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby" checked>编程
<input type="checkbox" value="sleep" name="hobby">聊天
<input type="checkbox" value="sleep" name="hobby">旅游
</p>
<!-- 按钮
type="button" 普通按钮
type="image" 图片按钮
type="submit" 提交按钮
type="reset" 重置按钮
-->
<p>
<input type="button" name="btn1" value="点击">
<input type="image" src="../html/resources/image/头像.jpg">
</p>
<!-- 下拉框，列表框 -->
<p>国家下拉框：
<select name="列表名称">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="eth" selected>瑞士</option>
<option value="yingdu">印度</option>
</select>
</p>
<!-- 文本域
-->
<p>反馈：
<textarea name="textarea" cols="20" rows="20">文本内容</textarea>
</p>
<!-- 文件域 -->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮件验证 -->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- URL -->
<p>URL：
<input type="url" name="url">
</p>
<!-- 数字 -->
<p>商品数量：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!-- 滑块
input type="range"
-->
<p>音量：
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<!-- 搜索 -->
<p>搜索：
<input type="search" name="ser">
</p>
<!-- 增强鼠标可用性 -->
<p>
<label for="mark">点我</label>
<input type="text" id="mark">
</p>
<!-- 自定义邮箱-->
<p>自定义邮箱：
<input type="text" name="diymail" pattern="[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?">
</p>
<br/>
<P>
<input type="submit">
<input type="reset" disabled>
</P>
</form>
</body>
</html>
2、CSS3
2.1、什么是CSS？
Cascading Style Sheet 层叠级联样式表。
美化网页
2.2、发展史
CSS1.0
CSS2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO。
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性~
2.3、基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 规范 <style> 可以编写css代码
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: cyan;
}
</style>
<!-- <link rel="stylesheet" href="../html/css/style.css"> -->
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
2.4、css的优势：
1、内容和表现分离
2、网页结构表现统一。可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录
2.5、四种css导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 2.内部样式 -->
<style>
h1{
color: green;
}
</style>
<!-- 3.外部样式-->
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<!-- 优先级：行内样式>内部样式>外部样式-->
<!--1.行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color:red">我是标题</h1>
</body>
</html>
拓展：外部样式两种写法
链接式：html
<!-- 3.外部样式-->
<link rel="stylesheet" href="../css/style.css">
导入式：css2.1特有的
<!-- 4.导式 -->
<style>
@import url("css/style.css");
</style>
</head>
2.6、三种选择器（重要）
作用：选择页面上的某一个或者某一类元素
2.6.1、基本选择器
- 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 标签选择器，会选择到页面上所有的这个标签的元素 */
h1{
color: #ce5050;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学散打</h1>
<p>小羊小羊</p>
</body>
</html>
- 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*类选择器的格式 .class的名称{}
优点：可以多个标签归类，是同一个class
*/
.title1{
color: aquamarine;
}
.title2{
color: blue;
}
</style>
</head>
<body>
<h1 class="title1">标题1</h1>
<h1 class="title2">标题2</h1>
<h1 class="title1">标题3</h1>
<p class="title1">啦啦啦啦</p>
</body>
</html>
- id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器 : id必须保证全局唯一
格式：#id名称{}
不遵循就近原则，固定的
id选择器>class类选择器>标签选择器
*/
#title{
color: chartreuse;
}
.style{
color: aqua;
}
h1{
color: brown;
}
</style>
</head>
<body>
<h1 class="style" id="title">标题1</h1>
</body>
</html>
2.6.2、层次选择器
- 后代选择器：在某个元素的后面，（祖爷爷 爷爷 爸爸 儿子）都会改变
/* 后代选择器 */
body p{
background: #f45606;
}
- 子选择器：一代，儿子
/* 子选择器 */
body>p{
background: #3cbda6;
}
- 相邻兄弟选择器：同辈
/* 相邻兄弟选择器：只有一个，相邻（向下） */
.active+p{
background: #3cbda6;
}
- 通用选择器
/* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素 */
.active~p{
background: #3cbda6;
}
2.6.2、结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 避免使用class类选择器、id选择器 -->
<style>
/* ul的第一个子元素 */
ul li:first-child{
background: aqua;
}
/* ul的最后一个子元素 */
ul li:last-child{
background: #c65e5e;
}
/* 选中p1:定位到父元素，选择当前的第一个元素？
选中当前p元素的f父级元素，再选中父级元素的第一个，并且是当前元素才生效！，按顺序*/
p:nth-child(2){
background: #e3c3c3;
}
/* 选中父元素下的p元素的第二个！按类型 */
p:nth-of-type(1){
background: yellow;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.6.2、属性选择器（重要、常用）
id+class 结合~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.demo a{
float: left;
display: block;
height: 90px;
width: 90px;
background: red;
text-align: center;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* 属性名，属性名=属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/* 存在id属性的元素: a[]{} */
/* a[id]{
background: yellow;
} */
/* a[id=first]{
background: yellow;
} */
/* class 中有links的元素 */
/* a[class *="links"]{
background: yellow;
} */
/* 选中href中以http开头的元素 */
/* a[href^=http]{
background: yellow;
} */
/* 选中以pdf结尾的元素 */
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test" id="second">2</a>
<a href="images/1" class="links item">3</a>
<a href="images/2" class="links item">4</a>
<a href="images/3" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="/abc.doc" class="links item">9</a>
<a href="/abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
2.7、CSS的作用及字体样式
1、span标签：重点要突出的字，使用span套起来
2.7.1、字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- font-family: 字体
font-size: 字体大小
font-weight: 字体粗细
color:字体颜色
-->
<style>
body{
font-family: "Arial Black",楷体;
color: red;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
为天地立心、为生民立命、为往圣继绝学、为万世开太平
</p>
<p>
说天亲，天也不算亲，天有日月和星辰。日月穿梭催人老，带走世上多少的人。说地亲，地也不算亲，地长万物似黄金。争名夺利有多少载，看罢新坟看旧坟。说爹妈亲，不算个亲，二老不能永生
</p>
<p>
When We Two Parted George Gordon Byron!
</p>
</body>
</html>
2.7.2、文本样式
1、颜色 color rgb rgba
2、文本对齐方式
3、首行缩进
4、行高
5、装饰
6 、文本图片水平对齐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- font-family: 字体
font-size: 字体大小
font-weight: 字体粗细
color:字体颜色
-->
<style>
body{
font-family: "Arial Black",楷体;
color: red;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
/* a标签超链接去下划线 */
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="">1234</a>
<h1>故事介绍</h1>
<p class="p1">
为天地立心、为生民立命、为往圣继绝学、为万世开太平
</p>
<p>
说天亲，天也不算亲，天有日月和星辰。日月穿梭催人老，带走世上多少的人。说地亲，地也不算亲，地长万物似黄金。争名夺利有多少载，看罢新坟看旧坟。说爹妈亲，不算个亲，二老不能永生
</p>
<p>
When We Two Parted George Gordon Byron!
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
水平对齐需要参照物
-->
<style>
img,span{
vertical-align: middle;
}
/* a标签超链接去下划线 */
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="">111113</a>
<p>
<img src="../resources/image/头像.jpg" alt="">
<span>1561656</span>
</p>
</body>
</html>
2.8、文本阴影和超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<style>
/* 默认的状态 */
a{
text-decoration: none;
color: aquamarine;
}
/* 鼠标悬浮的状态 */
a:hover{
color: blueviolet;
}
/* 鼠标单击没有释放的状态 */
a:active{
color: chartreuse;
}
/* 未访问链接的状态 */
/* a:link{
color: black;
} */
/* 已访问链接的状态 */
/* a:visited{
color: cornflowerblue;
} */
/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */
#price{
text-shadow: rgb(14, 239, 134) 15px 0px 2px ;
}
</style>
</head>
<body>
<a href="https:www.baidu.com">
<img src="../resources/image/头像.jpg" alt="">
</a>
<p>
<a href="https:www.baidu.com">码出高效:JAVA开发手册</a>
</p>
<p>
<a href="https:www.baidu.com">作者:孤尽老师</a>
</p>
<p id="price">
<a href="">￥99.00</a>
</p>
</body>
</html>
2.9、列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<h2></h2>
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">化妆品</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
#nav{
width: 300px;
background: rgb(165, 141, 190);
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: greenyellow;
}
/* ul li*/
/* list-style:
none 去掉圆点;
circle 空心圆
decimal 数字
square 正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
ul{
background: rgb(165, 141, 190);
}
a{
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}
2.10、背景图像应用及渐变
2.10.1、背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1ex solid greenyellow;
/* 默认是全部平铺的 */
background-image: url("../resources/image/头像.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
/* 颜色，图片，图片位置，平铺方式 */
background: greenyellow url("../../resources/image/下箭头.gif") 200px 10px no-repeat;
}
2.10.2、渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 径向渐变，圆形渐变 -->
<style>
body{
background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
</style>
</head>
<body>
</body>
</html>
渐变色CSS代码取样
2.11、盒子模型及边框使用
1、什么是盒子模型？
margin:外边距
border:边距
padding:内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body总有一个默认的外边距margin：0 */
body{
margin: 0;
padding: 0;
text-decoration: none;
}
h2{
font-size: 16px;
background-color: aquamarine;
line-height: 30px;
}
/* border:粗细，样式，颜色 */
#box{
width: 300px;
border: 1px solid red;
}
form{
background: greenyellow;
}
div:nth-of-type(1)>input{
border: 3px solid black;
}
div:nth-of-type(2)>input{
border: 3px dashed rgb(212, 44, 44);
}
div:nth-of-type(3)>input{
border: 3px solid rgb(227, 198, 198);
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form>
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
2、内外边距及div居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body总有一个默认的外边距margin：0
要求：块元素，块元素有固定的宽度
*/
body{
padding: 0;
text-decoration: none;
}
/* 边距的参数：顺时针旋转
margin:0 上下左右都是0
margin: 0 1px 上下是0 左右是1
margin: 0 1px 2px 3px; 上下左右各自有唯一的参数
*/
/* 内边距也是一样的规则 */
h2{
font-size: 16px;
background-color: aquamarine;
line-height: 30px;
margin: 0 1px 2px 3px;
}
/* border:粗细，样式，颜色 */
/* 外边距的妙用：居中元素
margin: 0 auto;
*/
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
form{
background: greenyellow;
}
input{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form>
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
盒子的计算方式：你这个元素到底多大？
margin+border+padding+内容宽度
3、圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* border-radius: 10px 20px 30px 40px;
顺时针规则：左上，右上，右下，左下
*/
div{
width: 100px;
height: 200px;
border: 10px solid red;
border-radius: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* border-radius: 100px;
顺时针规则：左上，右上，右下，左下
*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
img{
border-radius: 25px;
}
</style>
</head>
<body>
<div>
</div>
<img src="../resources//image/头像.jpg">
</body>
</html>
4、阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<!-- 阴影 box-shadow: 10px 10px 100px yellow; -->
<style>
div{
width: 100px;
height: 200px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.12、display和浮动
1、简介
块级元素：独占一行
h1~h6 p div 列表
行内元素：不独占一行
span a img strong…
行内元素可以被包含在块级元素中，反之，则不可以~
2、display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- block 块元素
display: inline;行内元素
display: inline-block; 是块元素，但是可以内联在一行
display: none; 消失
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
3、浮动
左右浮动 float
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
}
.layer01{
border:1px #F00 dashed;
display: inline-block;
/* 左浮 */
float: left;
}
.layer02{
border:1px #00F dashed;
display: inline-block;
/* 右浮 */
float: right;
}
.layer03{
border:1px #060 dashed;
display: inline-block;
}
.layer04{
border:1px #666 dashed;
display: inline-block;
font-size: 12px;
line-height: 23px;
display: inline-block;
}
2.13、overflow及父级边框塌陷问题
/*
clear:right; 左侧不允许有浮动元素
clear:right; 右侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
*/
解决方案：
1、增加父级元素的高度
#father{
border: 1px #000 solid;
height: 800px;
}
2、增将一个空的div标签，清除浮动
.clear{
clear: both;
margin: 0;
padding: 0;
}
3、overflow
在父级元素中增加一个 overflow: hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- overflow: hidden;隐藏滚动条-
overflow: scroll; 以滚动条的形式展示-->
<style>
#content{
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="content">
<img src="../resources/image/头像.jpg" alt="">
<p>
因为Java是全球排名第一的编程语言，Java工程师也是市场需求最大的软件工程师，选择Java，就是选择了高薪。
</p>
</div>
</body>
</html>
4、父类添加一个伪类：after
#father{
border: 1px #000 solid;
height: 800px;
}
#father:after{
content: '';
display: block;
clear: both;
}
小结：
- 浮动元素后面增加空div:简单，代码中尽量避免空div
- 设置父元素的高度：简单，元素假设有了固定的高度，就会被限制
- overflow:简单，下拉的一些场景避免使用
- 父类添加一个伪类：after(推荐)：没有作用，推荐使用！
5、display和float对比 - display:方向不可以控制
- float:浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~
2.14、定位
1、相对定位:position: relative;
相对于原来的位置，进行指定的偏移，相对定位后，任然在标准文档流中，原来的位置会被保留
top: -20px;
left: 20px;
bottom: -10px;
right: 10px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<!-- 相对定位：
相对于自己原来的位置进行偏移~
-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#first{
background-color: rgb(18, 227, 175);
border: 1px solid #666;
position: relative; /* 相对定位 上下左右*/
top: -20px;
left: 20px;
}
#second{
background-color: rgb(90, 241, 52);
border: 1px solid rgb(208, 49, 49);
}
#third{
background-color: rgb(128, 17, 226);
border: 1px solid rgb(20, 179, 207);
position: relative; /* 相对定位 上下左右*/
bottom: -10px;
right: 10px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
2、绝对定位
定位：基于xxx定位，上下左右~
相对于父级或浏览器的位置，进行指定的偏移，绝对定位后它不在标准文档流中，原来的位置不会被保留
- 没有父级元素的前提下，按浏览器的位置定位
- 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<!-- 相对定位：
相对于自己原来的位置进行偏移~
-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
position: relative;
}
#first{
background-color: rgb(18, 227, 175);
border: 1px solid #666;
}
#second{
background-color: rgb(90, 241, 52);
border: 1px solid rgb(208, 49, 49);
position: absolute;
right: 30px;
}
#third{
background-color: rgb(128, 17, 226);
border: 1px dashed rgb(20, 179, 207);
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
3、固定定位：fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
/* position: fixed; 固定定位*/
div:nth-of-type(2){
width: 100px;
height: 100px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
4、z-index及透明度
图层~
z-index: 默认是0，最高无限~999
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>123</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="content">
<ul>
<li><img src="../../resources/image/头像.jpg"></li>
<li class="tipText">学微服务</li>
<li class="tipBg"></li>
<li>2099-1-1</li>
<li>地点：月球</li>
</ul>
</div>
</body>
</html>
#content{
width: 380px;
padding: 0px;
margin: 0px;
overflow: hidden;
line-height:25px;
border: 1px #000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/* 父级元素相对定位 */
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top: 200px;
}
.tipText{
color: white;
/* 层级 */
z-index: 888;
}
.tipBg{
background: black;
/* 背景透明度 */
opacity: 0.5;
}
3、JavaScript
3.1、引入javaScript
- 内部标签
<script>alert("script标签内弹窗！")</script>
- 外部引入
引入js文件的位置必须要准确。
<script src="../javascript/hello.js"></script>
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个javascript程序</title>
<!-- <script>alert("script标签内弹窗！")</script> -->
<!-- 外部引入 -->
<script src="../javascript/hello.js"></script>
</head>
<body>
</body>
</html>
