一、上堂回顾
1.一个网页的构成：结构【html】、表现【css】、行为【javasript】
2.html简介
a.什么是html：超文本标记语言
b.html的编码规范：标记【标签，元素】
c.html的编码思想：封装
3.html常用的标签 a.font:文字 b.p：段落【会自动换行】 c.标题标签【会自动换行，字体加粗】 d.水平线标签和换行标签 e.字符实体： < > f.img：图像标签【注意：相对路径，参照物都是当前工程】 g.超链接标签：a【只有设置了href属性之后才能显示超链接的样式】 h.音视频标签：audio video【autoplay controls loop】 i.块标签：div【会自动换行】 span【不会自动换行】 j.列表标签：无序列表【ul，li】 有序列表【ol，li】 注意：列表不仅仅用于制定列表，也可以用于条理化数据
二、html常用标签
1.表格标签【掌握】
作用：不仅仅用来制作表格，还可以用来条理化数据
table：表示表格的范围，父标签
tr：表示行，子标签
td：表示单元格，子标签
th：表示单元格，区别于td，文本是加粗，居中显示
caption：设置表格的标题【了解，一般使用h标签】
属性：
border：表格线条宽度
bordercolor：表格线条颜色
cellspacing：单元格之间的间隔
width：单元格的宽度
height：单元格的高度
align：设置单元格中文字的对齐方式【left，center，right】，默认居左对齐
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <!--需求：绘制一个四行三列的表格--> <!--注意：自适配【自适应】,在修改某一行或者某个单元格的时候注意，一个属性的改变肯定会引起整个表格的改动--> <table border="1" bordercolor="gray" cellspacing="2" width="300px" height="200px"> <tr height="100px"> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr align="center"> <td width="20px">张三</td> <td>男</td> <td>18</td> </tr> <tr> <td>tom</td> <td align="center">男</td> <td>16</td> </tr> <tr> <td>roseroserose</td> <td>女</td> <th>20</th> </tr> </table> <!--合并单元格--> <!-- rowspan：跨行合并单元格 colspan：跨列合并单元格 注意：合并单元格的两个属性一般只用在td标签中 --> <!--合并行--> <table border="1" bordercolor="gray" cellspacing="2" width="300px" height="200px"> <tr> <td>bob</td> <td>男</td> <!--rowspan:合并行，rowspan="行数"--> <td rowspan="4" align="center">10</td> </tr> <tr> <td>张三</td> <td>男</td> </tr> <tr> <td>tom</td> <td>男</td> </tr> <tr> <td>roseroserose</td> <td>女</td> </tr> </table> <!--合并列--> <table border="1" bordercolor="gray" cellspacing="2" width="300px" height="200px"> <tr> <!--colspan:合并列，colspan="列数"--> <td colspan="3" align="center">人员信息</td> </tr> <tr> <td>张三</td> <td>男</td> <th>20</th> </tr> <tr> <td>tom</td> <td>男</td> <th>19</th> </tr> <tr> <td>roseroserose</td> <td>女</td> <th>17</th> </tr> </table> </body> </html>
2.表单标签【重点掌握】
作用：可以提交不同类型的数据到指定的服务器
使用场景：但凡涉及到和服务器之间的交互，一般都会使用表单标签
form：表示表单的范围，父标签
主要用于采集用户信息
分为三部分：
a.表单标签：包含提交到服务器的地址，提交的方式【post，get】
b.表单域：用于采集用户信息
c.表单按钮：提交按钮，复原按钮，普通按钮
属性：
action：提交到服务器的地址
method：提交的方式
form标签的子标签
input：表示输入项，可以输入内容或者选择内容，input标签有一个type属性，根据type属性的值区分不同类型的内容
text:普通输入项
password：密码输入项
radio：单项选择框
checkbox：多项选择框
属性：checked=“checked”
file：文件选择框
image：图片选择框
email：邮箱输入项【校验邮箱的格式】
hidden：隐藏项
color：颜色选择框
date：选择日期
submit：提交按钮
reset：重置按钮
button：普通按钮
select：下拉选择框
option：下拉选择框中的选择项
属性：selected=“selected”，表示选中
textarea:文本域，一般 用于文本较大的时候使用
属性：cols 列 rows 行，用于设定文本域的大小
共同的属性：name：用于服务器识别不同的数据 value：当前标签的文本值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="post"> <!--普通输入项--> <!--placeholder：输入提示内容--> 手机号码：<input type="text" name="phone" placeholder="请输入手机号码" /><br /> <!--密码输入项--> 创建密码：<input type="password" name="pwd"/><br /> 姓 名：<input type="text" name="username"/><br /> <!--单项选择框--> <!--注意：name除了可以让服务器进行识别之外，在单项和多项选择框中，name属性的值必须保持一致--> <!--设定指定的选项默认选中，用于单项或者多项选择框中--> 性 别：<input type="radio" name="sex" value="male" checked="checked"/>男 <input type="radio" name="sex" value="female"/>女 <br /> <!--多项选择框--> 爱 好：<input type="checkbox" name="hobby" value="dance" checked="checked"/>跳舞 <input type="checkbox" name="hobby" value="sing"/>唱歌 <input type="checkbox" name="hobby" value="piano"/>弹琴 <input type="checkbox" name="hobby" value="draw"/>画画 <br /> <!--文件输入项--> 上传头像：<input type="file" name="image"/><br /> <!--下拉选择框--> 出生日期：<select name="birth"> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> </select> <br /> 自我描述：<textarea name="des" cols="30" rows="20"></textarea> <br /> <input type="submit" value="注册" /> <!-- reset：只是让整个表单恢复到最初状态，并不是清空表单 button：一般需要结合事件使用，js中常用 --> <!--<input type="reset" />--> <br /> <!--了解--> <input type="color" /><br /> <input type="date" /><br /> <!--注意：不显示任何内容，但是会占位--> <input type="hidden" /><br /> <!--进度条--> <input type="range" min="0" max="10" value="2"/><br /> <input type="image" /> </form> </body> </html> <!-- get请求 未添加name属性 http://127.0.0.1:8020/Day2Code/4.B8%80.html? 添加name属性之后 http://127.0.0.1:8020/Day2Code/4.B8%80.html? phone=gt4ry&pwd=y54wy&username=y45y&sex=on&hobby=on&hobby=on&hobby=on&image=&birth=1991&des=yw45y# 添加value属性：用于区分单项和多项选择的值 http://127.0.0.1:8020/Day2Code/4.B8%80.html? phone=greh&pwd=hth&username=hth&sex=female&hobby=sing&image=&birth=1991&des=htht# post请求 http://127.0.0.1:8020/Day2Code/4.4%B8%80.html?__hbt=1549942133668# 【面试题：get请求和post请求之间的区别】 a.get请求地址栏中会携带请求的数据，而post则不会 b.post请求相对于get请求比较安全 c.get请求效率较高 d.get请求对请求的数据的大小有限制 -->练习：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3></h3> <form> <table width="100%"> <tr> <td align="right">电子邮箱</td> <td><input type="text" name="mail"/></td> </tr> <tr> <td> </td> <td>你可以使用<a href="#">邮箱</a>或者<a href="#">手机号码</a>进行注册</td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td align="right">性别</td> <td> <input type="radio" name="sex" />男 <input type="radio" name="sex" />女 </td> </tr> <tr> <td align="right">生日</td> <td> <select> <option>2000</option> <option>2001</option> <option>2002</option> </select>年 <select> <option>10</option> <option>11</option> <option>12</option> </select>月 <select> <option>17</option> <option>18</option> <option>19</option> </select>日 </td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </form> </body> </html>
3.头标签【了解】
head标签
title：设置浏览器标题栏显示的内容【网页的标题】
meta：设置当前html文件的编码格式，一般设置为utf-8
charset：设置编码格式
name：关键字
content：内容
http-equiv:表示需要进行的操作
base:设置超链接的基本位置，可以统一设置当前html文件中超链接的打开方式
link：引入外部的css文件
<!DOCTYPE html> <html> <head> <!--早期的搜索引擎--> <meta charset="utf-8" name="keywords" content="it,千锋"/> <!--当前页面运行起来之后，经过3秒刷新跳转到指定的页面--> <!--<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />--> <title>当前网页的标题</title> <!--全局设置，可以使得当前html文件中所有的超链接按照指定的方式打开--> <base target="_blank"/> </head> <body> <!--默认情况下，在当前窗口中打开新的html文件--> <!--<a href="1.作业一.html" target="_self">超链接一</a> <a href="1.作业一.html" target="_blank">超链接二</a>--> <br /> <a href="1.作业一.html">超链接一</a> <a href="1.作业一.html">超链接二</a> </body> </html>
4.框架标签【了解】
作用：划分页面【在同一个浏览器的窗口中可以同时显示多个html文件】
注意：使用框架标签的时候，不能和body标签共存，需要将body标签删除掉
很少使用，违背了html的编码规范
frameset:划分规则，父标签
属性：rows行 cols列
frame：具体显示的html文件，子标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--列分--> <!--按照百分比划分--> <!--<frameset cols="30%,40%,*"> <frame src="1.作业一.html"/> <frame src="1.作业一.html"/> <frame src="1.作业一.html"/> </frameset>--> <!--行分--> <!--<frameset rows="30%,40%,*"> <frame src="1.作业一.html"/> <frame src="1.作业一.html"/> <frame src="1.作业一.html"/> </frameset>--> <!--混合分--> <frameset rows="30%,*"> <frame src="1.作业一.html"/> <frameset cols="50%,*"> <frame src="1.作业一.html"/> <frame src="1.作业一.html"/> </frameset> </frameset> </html>
三、css简介
1.css概念
为了解决html结构和表现混合在一起的问题，引入css专门负责表现
css：Cascading Style Sheet,层叠样式表，它是用于控制网页样式并且允许将样式信息和网页内容分离的一种标记语言
作用：为html页面进行布局，给标签添加不同的样式【html标签默认情况下是从浏览器的左上角的从上往下依次排列的】
层叠：使用不同的方式为同一个标签设置不同的样式，最后所有的样式叠加到一起，共同作用于指定的标签
2.css的好处
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--需求：将当前页面中所有的h2标题颜色修改为红色，将所有的p标签背景颜色设置为蓝色--> <h2> <font color="red">标题</font> </h2> <p style="background-color: blue;">段落</p> <h2> <font color="red">标题</font> </h2> <p style="background-color: blue;">段落</p> <h2> <font color="red">标题</font> </h2> <p style="background-color: blue;">段落</p> <h2> <font color="red">标题</font> </h2> <p style="background-color: blue;">段落</p> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> h2{ color: red; } p{ background-color: cyan; } </style> </head> <body> <h2>标题</h2> <p>段落</p> <h2>标题</h2> <p>段落</p> <h2>标题</h2> <p>段落</p> <h2>标题</h2> <p>段落</p> </body> </html>传统html的缺点：
a.维护困难【为了修改某个标记的属性花费大量的时间】
b.标记不足【段落缩进，文字之间的间距等功能很难做到】
c.网页过于臃肿【没有统一的风格对不同的标签设置样式】
d.定位困难【同一种标签在同一个html文件中很难定位】
四、css核心基础
1.css的语法规则
举例：描述一个人的特征，列出一张表
张飞{
身高：178cm;
性别：男；
民族：汉族；
}
组成表的要素：姓名，属性和属性值
使用类似的方式描述一个标签的特征
段落{
字体：微软雅黑；
字号：30px;
颜色：红色；
装饰：下划线；
}
p{
font-family:“微软雅黑”;
font-size:30px;
color:red;
text-decoration:underline;
}
说明：css的思想就是首先指定对什么对象进行设置，然后指定对该对象的哪些属性进行设置，最后给出设置的值，css由三部分组成：对象，属性和值
对象表示对哪些元素进行设置，这个操作被称为选择器
选择器：为了使得能够让html和css对应起来，必须定义一套完整的规则，实现css对html的选择
css的核心就是选择器
选择器的语法规则：
选择器名称{
属性名称：值；
属性名称：值；
属性名称：值；
。。。。
}
选择器名称{属性名称：值；属性名称：值；属性名称：值；。。。。}
2.css的选择器【重点掌握】
2.1通配符选择器
*{
}
作用：给当前html页面中的所有的标签设置样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*一般用于做全局设置，设置所有标签的内外边距*/ *{ color: red; } </style> </head> <body> <h2>标题</h2> <p>段落</p> <h2>标题</h2> <p>段落</p> <h2>标题</h2> <p>段落</p> </body> </html>
2.2标签名称选择器【元素选择器】
html标签名称{
}
作用：对当前html页面中的指定的标签进行设置样式，细化了通配符选择器的功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ color: green; } /*标签名称选择器的优先级高于通配符选择器*/ h2{ color: red; } p{ color: blue; } </style> </head> <body> <h2>标题</h2> <p>段落</p> <h2>标题</h2> <p>段落</p> <h2>标题</h2> <p>段落</p> <a></a> </body> </html>
2.3类选择器
特点：每个标签都有一个class属性，通过class属性的值区分不同的标签
.class属性的值{
}
说明：class属性的值可以自定义，一般由字母和数字组成，字母全小写
作用：对当前html页面中的不同的标签进行设置，细化了标签名称选择器的功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ color: green; } /*标签名称选择器的优先级高于通配符选择器*/ h2{ color: red; } p{ color: blue; } /*类选择器*/ .third{ color: purple; } .pink{ color: pink; } .big{ font-size: 25px; } /*结论：类选择器的优先级高于标签名称选择器*/ </style> </head> <body> <h2>标题一</h2> <!--结论一：多个类选择器可以同时作用于同一个标签，层叠的体现--> <p class="pink big">段落</p> <!--结论二：同一个类选择器可以同时作用于多个标签--> <h2 class="pink">标题二</h2> <p>段落</p> <h2 class="third">标题三</h2> <p>段落</p> </body> </html>
2.4id选择器
特点：和类选择器类似，不同之处在于id选择器在一个html页面中只使用一次，所以针对性更强，每个标签都有id属性，通过id属性的值区分不同的标签
#id属性的值{ }作用：对当前html页面中的不同的标签进行设置，细化了标签名称选择器的功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ color: green; } /*标签名称选择器的优先级高于通配符选择器*/ h2{ color: red; } p{ color: blue; } /*类选择器*/ .pink{ color: pink; } /*id选择器*/ #p1{ color:green; } #text{ font-family: "微软雅黑"; } /*结论：id选择器的优先级高于标签名称选择器*/ /* * * 优先级的顺序：通配符<标签名称选择器<类选择器<id选择器 * * */ </style> </head> <body> <h2>标题</h2> <p class="pink" id="p1">段落</p> <h2>标题</h2> <p>段落</p> <!-- 解释：同一个id选择器可以同时作用于多个标签，但是，不建议使用，id选择器的目的为了筛选出唯一的一个标签 ，在js中document.getElementById()可以通过id获取一个唯一的标签对象 --> <h2 id="p1">标题</h2> <!--注意：区别于类选择器，一个标签只能使用一个id选择器，id="p1 text在id选择器中是完全错误的语法--> <!--<p id="p1 text">段落</p>--> <a></a> </body> </html>
2.5属性选择器
基本选择器[属性名称]{
}
基本选择器[属性名称=值]{
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input{ border: dashed red 1px; } /*属性选择器*/ /*在基本选择器的基础上进一步筛选标签*/ input[name]{ border: solid blue 2px; } input[name="input2"]{ border: solid cyan 1px; } .cls[name="input1"]{ background-color: yellow; } </style> </head> <body> <input type="text" name="input1" class="cls"/><br /> <input type="text" name="input1" class="cls"/><br /> <input type="text" name="input2"/><br /> <input type="text" name="input3"/><br /> <input type="text"/> </body> </html>
2.6包含选择器
特点：主要针对的是父子标签和先辈后辈标签
a.查找子标签或者后辈标签
先辈标签选择器 后辈标签选择器{
}
b.查找直接子标签
父标签选择器 > 子标签选择器{
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*包含选择器*/ /*匹配所有的后辈标签*/ /*div p{ color: blue; }*/ /*匹配的是直接的子标签*/ /*#box>p{ color: red; }*/ /*注意：包含选择器中可以使用任意的基本选择器*/ div>.p1{ color: green; } </style> </head> <body> <div id="box"> <p class="p1">第一个p标签</p> <span> <p>第二个p标签</p> <div> <p>第三个p标签</p> </div> </span> </div> </body> </html>
2.7伪类选择器
过滤选择器
基本选择器：操作{
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*hover:悬浮*/ #first:hover{ color: red; font-size: 20px; } #first:before{ content: "这是头部"; } #first:after{ content: "这是尾部"; } #first:first-letter{ font-size: 30px; } #first:first-line{ text-decoration: underline; } </style> </head> <body> <p id="first">世上无难事</p> <p>只怕有心人</p> </body> </html>
2.8结构选择器
基本选择器：操作{
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul li:first-child{ color: red; } ul li:last-child{ color: blue; } /*顺序查找*/ /*注意：第几个子标签，编号从1开始*/ ul li:nth-child(2){ color: purple; } /*倒序查找*/ ul li:nth-last-child(2){ color: purple; } /*even:偶数 odd：奇数*/ ul li:nth-child(odd){ color: yellow; } /*否定*/ li:not(#check){ font-size: 30px; color: cyan; } </style> </head> <body> <ul> <li>11111</li> <li>22222</li> <li>33333</li> <li id="check">44444</li> <li>55555</li> <li>666666</li> </ul> </body> </html>
2.9组合选择器
选择器1，选择器2，。。。。{
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*h1{ color: red; } #first{ color: red; } .span{ color: red; }*/ h1,#first,.span{ color: red; } </style> </head> <body> <h1>名言警句</h1> <p id="first">世上无难事</p> <span class="span">只怕有心人</span> </body> </html>