1.什么是网页
就是在浏览器中通过一个url访问在浏览器上面展示的一个页面。
页面主要由三部分组成：html + css +javascript
Html:网页的一个框架；
Css：对网页进行修饰，让网页变得好看一点；
JavaScript：给网页添加动态效果
2.什么是html
HTML是用来描述网页的一种标记语言
①HTML指的是超文本编辑语言
②HTML部署一种编程语言，而是一种标记语言
③标记语言是一套标记标签
④HTML使用标记标签来描述网页
3.入门案例
标签的语法格式：
双边标签:<开始标签 属性1=“属性值1” 属性2=“属性值2”>内容<结束标签/>
单边标签：<标签/>
<marquee scrollamount="150" direction="right">
<font size='7' color='green'>这个是一个页面</font>
</marquee>4.结构标签
任何一个网页都要有结构标签，目的是为了让网页更加规范化
语法格式：
<html>
<head>
<title></title>
</head>
<body></body>
</html>案例：
<!-- DOCTYPE 指定当前的文档类型 -->
<!DOCTYPE html>
<html>
<!-- head 标签是html标签的子标签 标签之间是可以嵌套的 -->
<head>
<!-- meta单边标签 charset 是meta标签的属性 设置字符集的 utf-8 万国码 -->
<meta charset="utf-8"/>
<!-- title双边标签 内容会显示在浏览器的头部 -->
<title>来啊快活啊</title>
</head>
<body>
所见即所得
</body>
<!--注意事项
1.结构标签 每个网站都有结构标签 更加规范
2.html标签都是<>括起来的
3.html标签是有单边标签和双边标签
4.html标签是不区分大小写的
5.标签是可以加属性的
6.标签之间是可以嵌套的，但是一定要注意缩进问题
-->
</html>5.排版标签
①换行标签：<br/>
②分割线标签：<hr/>
③段落标签：<p></p>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
大漠孤烟直<br/>
长河落日圆
<hr>
<p>
都不会你说你能收到呢
就是当年就睡觉
成都市你就能差多少亟待解决
就能看出上的能坚持多久呢
好几次都是你的手机
但几年时间内四大皆空
繁华的玩家回到家
</p>
</body>
</html>6.文本标签
①标题标签：h1~h6 双边标签
②字体标签：<font></font>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
衣带渐宽终不悔
<h1>衣带渐宽终不悔</h1>
<h2>衣带渐宽终不悔</h2>
<h3>衣带渐宽终不悔</h3>
<h4>衣带渐宽终不悔</h4>
<h5>衣带渐宽终不悔</h5>
为伊消得人憔悴
<!-- 为font标签加属性 -->
<font size="7" color="pink" face="微软雅黑">为伊消得人憔悴</font>
</body>
</html>7.列表标签
无序列表：无序列表始于<ul>标签。每个列表项始于<li>。ul标签嵌套li标签
有序列表：有序列表始于<ol>标签。每个列表项始于<li>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ul的属性 unorder list
type:
属性值：
none: 项目的黑点去掉
circle:空心的圆
disc:默认的实心的圆
square: 实心方块
-->
<ul type="square">
<li>牛二</li>
<li>红星</li>
<li>闷倒驴</li>
</ul>
<!-- ol属性 order list
type：
属性值:
1 a A i I
start：
值是第几个开始
-->
<ol type="I" start="3">
<li>红旗渠</li>
<li>泰山</li>
<li>华山</li>
</ol>
</body>
</html>8.块标签和行标签
①块标签：单独成一行
如：<div></div>
<header></header>
<footer></footer>
②行标签：在一行
如：<span></span>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>西安</div>
<div>武汉</div>
<div>郑州</div>
<span>是是</span>
<span>狗蛋</span>
<span>嘻嘻</span>
<header>x憨豆先生</header>
<header>单身男女</header>
</body>
</html>9.图片标签
在网页中展示图片。<img>是空标签，它只包含属性，并且没有闭合标签。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 相对路径 -->
<!-- <img src="../chouyan.png"/> -->
<!-- 绝对路径 -->
<!-- <img src="C:\aaa\chouyan.png"> -->
<!-- 网络图片资源可以的 -->
<!-- src 属性 图片的资源地址
height： 设置图片高度
width: 设置图片宽度
alt: 当图片加载失败的时候会显示
title: 图片加载完成以后，鼠标悬浮上去以后显示信息
-->
<img src="https://inews.gtimg.com/newsapp_bt/0/14029749852/1000" height="200px" width="500px" alt="帅哥" title="杨洋真好看">
</body>
</html>10.超链接标签
点击链接可以从一张页面跳转到另一张页面。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
a 标签是一个双边的标签
href : 指向新的链接地址
target:打开另外一个网页的方式 _blank 新开的一个网址
-->
<a href="http://www.baidu.com" target="_blank">去百度</a>
<a href="2排版标签.html">你管我去哪</a>
</body>
</html>11.表格标签
表格有<table>标签来定义。每个表格有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指的是表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。 -->
<!--
table的属性
border: 设置显示边框
width:设置宽度
height:设置高度
align:对齐方式 left right center
bordercolor:边框的颜色
-->
<table border="3" width="600px" height="400px" align="center" bordercolor="red">
<!-- 表头 -->
<caption>成绩表</caption>
<tr>
<!-- th写在tr里面 和td效果是一样的额 只不过是 字段 -->
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<!--
tr： 属性
align: 对齐方式 left right center
-->
<tr align="center">
<!-- td 属性
colspan 列合并
rowspan 行合并
-->
<td colspan="2">1</td>
<td>2</td>
</tr>
<tr align="center">
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>12.文本格式标签
①b:加粗标签； ②big:大号字体； ③i:斜体字体； ④em:斜体字体；
⑤small:小号字体； ⑥strong:加重字体； ⑦sub:下标； ⑧sup:上标
⑨del:删除字体
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
苏桐又在睡觉
<b>苏桐又在睡觉</b>
<big>苏桐又在睡觉</big>
<i>苏桐又在睡觉</i>
<em>苏桐又在睡觉</em>
<strong>苏桐又在睡觉</strong>
2<sup>2</sup>
2<sub>2</sub>
<ins>苏桐又在睡觉</ins>
<del>苏桐又在睡觉</del>
</body>
</html>13.表单标签
<form>表单元素<form/>，表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等。
13.1表单元素
URL:统一资源定位符
组成:协议+域名（IP地址）+端口号+资源文件+参数
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div align="center">
<!-- form表单的属性：
点击提交按钮的一瞬间 会将数据提交给另外一个页面
action : 提交的一个地址
method: 提交的方式
get: 默认的提交方式就是get
1.get的请求方式 内容会显示在url以参数的形式进行显示
2.不安全
3.效率高
4.get大小是有显示的，大小在2KB左右
5.get请求方式在开发中一般用作查询
post:
1.url不再显示数据，但是能看到 右键检查-》刷新network=》点上本网页
2.相对安全的
3.post请求效率比较底
4.没有大小的限制
5.post在开发中用 增删改
邮寄
-->
<form action="11综合案例.html" method="post">
<!-- input是输入框是单边的标签
type 属性： 定义的是文本框的类型
属性值: text 明文文本
password 密文文本
submit 提交
value 值
name 属性： 相当重要！！！ 没有这个 就无法向其他页面提交输入框中的数据
-->
姓名:<input type="text" name="user"/><br>
密码:<input type="password" name="pwd"/><br>
<input type="submit" value="登陆">
</form>
</div>
</body>
</html>14.HTML框架
通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。
框架结构标签（<frameset>定义如何将窗口分割），每个frameset定义了一系列行或列，rows/colums的值规定了每行或每列占据屏幕的面积。
注意：不能将<body></body>标签与<frameset></frameset>标签同时使用
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset cols="25%, 75%" noresize>
<frame src="https://www.4399.com">
<frame src="https://www.7k7k.com">
</frameset>
</html>
----------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset cols="20%, 80%">
<frame src="left.html">
<frame src="right.html" name="right">
</frameset>
</html>----------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="http://www.4399.com" target="right">点我去玩游戏</a><br>
<a href="http://www.qfedu.com" target="right">点我去学习</a><br>
</body>
</html>
----------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
我是右边页面
</body>
</html>15.CSS
①CSS指的是层叠样式表（Cascading Style Sheets）；
②CSS描述了如何在屏幕、纸张、或其他媒体上显示HTML元素；
③CSS节省了大量工作。他可以同时控制多张网页的布局；
④外部样式表存储在CSS文件中
15.1CSS的三种引入方式
①行内样式；②内联样式；③外联样式
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span {
color:pink;
font-size:30px;
}
</style>
<link href="test.css" rel="stylesheet"/>
</head>
<body>
<!-- 1.行内样式
在html标签中 写 style属性
然后属性值是 键值对的css的语法格式
CSS的属性: 属性值;
-->
<div style="color:green;font-size:40px;">
锦瑟无端五十弦
</div>
<!-- 2.内联样式
在head标签中创建一个style标签
找到被修饰的标签之后
开始加属性:属性值;
-->
<span>
为天地立心
</span>
<!-- 3.外联样式
在外部要写一个css的文件，这个文件中去写css修饰的标签的属性和属性值
要引入到当前的html页面中 在head标签中 写link标签
-->
<footer>
蓦然回首
</footer>
</body>
</html>15.2CSS选择器
共有7中选择器，如下：
①标签选择器
②class选择器
③ID选择器
④层级选择器
⑤组合选择器
⑥通配选择器
⑦伪类选择器
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* css注释
通过标签的名字 来找到标签
*/
div {
width: 500px;
height:200px;
background-color: darkblue;
}
/* class选择器的写法
，每一个标签都有一个class属性 并且属性值是自己定义的 要见名知意
语法格式: .class属性值 {}
*/
.np {
color:tomato;
font-size: 55px;
}
/* id选择器 #属性值 */
#xixi {
color: cyan;
font-size:78px;
}
</style>
</head>
<body>
<div>
</div>
<p class="wtx np">
人生自古谁无死
</p>
<footer id="cmd">
东临碣石
</footer>
</body>
</html>
层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 使用层级选择器
中间使用空格隔开
*/
#div8 #div1 .div3 {
color: darkred;
}
#div8 .div2 #div4 {
font-size:45px;
}
#div4 {
color:blue;
}
</style>
</head>
<body>
<!-- 层级选择器 标签是嵌套的 就是一层一层的往下找，直到照找到为止 -->
<div id="div8">
<div id="div1">
<div class="div3">
亦唏嘘,唯有杜康
</div>
</div>
<div class="div2">
<div id="div4">
悠悠我心
</div>
</div>
</div>
</body>
</html>组合选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 组合选择器 */
div, span, footer {
color:red;
}
</style>
</head>
<body>
<!-- 当很多标签都需要使用同一个CSS样式的时候 可以选择组合选择器-->
<div>
莫使金樽空对月
</div>
<span>阿珍爱上阿强</span>
<footer>葡萄美酒夜光杯</footer>
</body>
</html>通配选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* *所有的标签 */
* {
color:yellowgreen;
font-size: 89px;
}
</style>
</head>
<body>
<!-- 当很多标签都需要使用同一个CSS样式的时候 可以选择组合选择器-->
<div>
莫使金樽空对月
</div>
<span>阿珍爱上阿强</span>
<footer>葡萄美酒夜光杯</footer>
</body>
</html>伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 伪类选择器 */
/* 设置a链接本身的颜色 */
a:link {
color:hotpink;
}
/* visited 访问之后的颜色设置一下 */
a:visited {
color:gray;
}
/* hover 鼠标悬浮的状态的颜色*/
a:hover {
color:purple;
}
/* 鼠标点击上以后的按住不松手叫active */
a:active {
color: blue;
}
/* 注意：a:hover 必须在 CSS 定义中的
a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感。
没有爱，就没有恨
l o v e h a t e
*/
/* div {
width: 200px;height: 200px;background-color: white;
}
div:hover {
background-color: white;
} */
div:first-child {
color:red;
}
</style>
</head>
<body>
<a href="http://www.4399.com">去4399</a>
<div id="xixi">
<div>嘻嘻</div>
<div>哈哈</div>
<div>呵呵</div>
</div>
</body>
</html>总结：id，class，层级，组合，这几个比较常用
优先级：id>class>*
15.3CSS属性
①color：设置字体颜色
②font-size：设置字体大小
③width：设置宽度
④height：设置高度
⑤background-color：设置背景颜色
15.3.1背景属性
①background-color:设置背景颜色
②background-image：设置背景图片
③background-repeat：设置图片平铺
④background-attachment：设置滚动效果
⑤background-position：设置图片的位置
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {
/* css颜色名字
1.有效的颜色名称 - 比如 "red"
2.十六进制值 - 比如 "#ff0000" 常用
三原色 RGB
#000000 #ffffff
#FF0000 红色
#00FF00 绿色
#00ffff 蓝色
3.RGB 值 - 比如 "rgb(255,255,255)"
*/
width: 100%;
height: 700px;
background-color: #ff0000;
/* background-image 属性指定用作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。 */
background-image: url("2.png");
/* background-repeat 平铺的方式
no-repeat :不平铺
repeat-x: 横向平铺
repeat-y: 纵向平铺
*/
background-repeat: no-repeat;
/* background-attachment: 设置图片滚动的效果
fixed: 图片相对窗口不动的
scroll:图片相对于窗口
*/
background-attachment: scroll;
/* 设置背景图片的位置
top 顶部
bottom 底部
left
right
center 中间
*/
background-position: 60px 10px;
}
</style>
</head>
<body>
<div id="div1">
你们真是天才
</div>
</body>
</html>15.3.2边框属性
①border-style：设置边框的样式
②border-color：设置边框的颜色
③border-width：设置边框的宽度
④border-radius：设置元素添加圆角边框
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
/* border-style
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
实例
*/
/* border-style:solid;
border-color: pink;
border-width: 16px; */
/* 为了缩减代码，也可以在一个属性中指定所有单独的边框属性。
border 属性是以下各个边框属性的简写属性：
border-width
border-style（必需）
border-color */
border: solid 10px red ;
/* 设置边框弧度效果的 */
border-radius: 5px;
}
</style>
</head>
<body>
<div>
癞蛤蟆跳悬崖,相当蝙蝠侠
</div>
</body>
</html>16.盒子模型
CSS框模型实质上是一个包围每个HTML元素的框。它包括：外边距、边框、内边距及实际的内容。
①内容：显示文本和图像
②内边距：内容到边框的距离
③边框：围绕内边距和内容的边框
④外边距：边框到浏览器窗口的距离
16.1浮动和清除浮动
浮动：将块标签变为行标签。可以向左或向右浮动
清除浮动：将行标签变为块标签，其中有一个clear属性
clear属性可以设置以下值：
①none:允许两侧都有浮动
②left：左侧不允许有浮动
③right：右侧不允许有浮动
④both：两侧都不允许有浮动
17.定位属性
有三种定位：①固定定位；②相对定位；③绝对定位
固定定位（position:fixed）：元素是相对于视口定位的，即使滚动页面它始终在同一个位置。top、right、bottom和left属性用于定位此元素
相对定位（position:relative）：元素相对于其原来所在的位置进行定位。
绝对定位（position:absolute）：元素相对于最近的定位祖先元素进行定位。如果没有祖先，将使用文档主体（body），并随页面一起滚动。
1202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
