一、html的常用标签
1.表单标签【重点掌握】
作用：可以提交不同的数据到指定的服务器
标签：
<form></form>:表示表单的范围【父标签】
作用：用于采集用户输入的信息
标签分为三大类：
表单标签：包含数据提交到的位置【服务器】，数据的提交方式【get和post】
表单域：用于采集用户信息
表单按钮：提交按钮，重置吧【复原】按钮，普通按钮
属性：
action：提交到的服务器的地址
method：提交采用的方法
enctype：做文件上传的时候需要设置这个属性，很少用
子标签：
<input />表示输入项，可以输入内容或者选择内容【子标签】
type：类型
text:普通文本
password：密码
注意：可以将输入的文本隐藏显示
radio：单项选择框【单选输入项】
checkbox：多项选择框
注意：单项输入项和多项输入项需要添加一个name属性，用于识别
checked="checked"表示默认选中
都需要添加一个value属性，表示需要提交给服务器的值
file：文件
email：邮箱
color：颜色
date：日期
<select></select>:表示下拉菜单项【子标签】
<option></option>: 下拉菜单项中的选项【select标签的子标签】
name，value，默认选中：selected="selected"
<textarea></textarea>；文本域【子标签】
cols:列
rows:行
注意：通过行和列来定义文本域的大小
表单按钮：
<input />
type:按钮类型
button：普通按钮
submit：提交按钮
reset：重置按钮
http://127.0.0.1:8020/Day2Code/1.%E5%BC%80%E5%BF%83%E9%A4%90%E5%8E%85%E4%BD%9C%E4%B8%9A.html?phoneNum=yhtjhtj&pwd=jyj&username=jyje&sex=female&hobby=ppq&hobby=pq&headImg=&birth=1988&des=jyjjyj代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="1.开心餐厅作业.html" method="post"> <!--name:用于给服务器进行识别不同类型的数据--> <!--value:用于 给服务器识别同类型数据中的不同的数据--> <!--普通文本输入项--> 手机号码：<input type="text" name="phoneNum" /><br /> <!--密码输入项--> 创建密码：<input type="password" name="pwd" /><br /> 姓 名：<input type="text" name="username" /><br /> <!--单项选择框--> 性 别：<input type="radio" name="sex" value="male" checked="checked"/>男 <input type="radio" name="sex" value="female"/>女 <br /> <!--多项选择框--> 爱 好：<input type="checkbox" name="hobby" value="lq" checked="checked"/>篮球 <input type="checkbox" name="hobby" value="ppq"/>乒乓球 <input type="checkbox" name="hobby" value="pq"/>排球 <input type="checkbox" name="hobby" value="zq"/>足球 <br /> <!--文件--> 上传头像：<input type="file" name="headImg" /><br /> <!--下拉选择框--> 出生年月：<select name="birth"> <option>1988</option> <option>1989</option> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option> </select> <br /> <!--文本域--> 自我评价：<textarea name="des" cols="20" rows="10"></textarea><br /> <!--按钮--> <!--按钮上默认的文字为提交和重置，但是，可以通过value重新设置按钮上的文字--> <input type="submit" value="regi" /> <!--注意：重置按钮并不是清空，而是将表单中的数据恢复到最初状态--> <input type="reset" value="reset" /> </form> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="1.开心餐厅作业.html" method="post"> <!--name:用于给服务器进行识别不同类型的数据--> <!--value:用于 给服务器识别同类型数据中的不同的数据--> <!--普通文本输入项--> 手机号码：<input type="text" name="phoneNum" placeholder="请输入手机号" /><br /> <!--密码输入项--> 创建密码：<input type="password" name="pwd" /><br /> 姓 名：<input type="text" name="username" /><br /> <!--单项选择框--> 性 别：<input type="radio" name="sex" value="male" checked="checked"/>男 <input type="radio" name="sex" value="female"/>女 <br /> <!--多项选择框--> 爱 好：<input type="checkbox" name="hobby" value="lq" checked="checked"/>篮球 <input type="checkbox" name="hobby" value="ppq"/>乒乓球 <input type="checkbox" name="hobby" value="pq"/>排球 <input type="checkbox" name="hobby" value="zq"/>足球 <br /> <!--文件--> 上传头像：<input type="file" name="headImg" /><br /> <!--下拉选择框--> 出生年月：<select name="birth"> <option>1988</option> <option>1989</option> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option> </select> <br /> <!--文本域--> 自我评价：<textarea name="des" cols="20" rows="10"></textarea><br /> <!--了解--> <!--邮箱--> <!--placeholder:表示提示内容--> 邮箱：<input type="email" placeholder="请输入邮箱"/><br /> <!--隐藏域--> <input type="hidden" /><br /> <!--时间--> <input type="date" /><br /> <!--颜色--> <input type="color" /><br /> <!--进度条--> <input type="range" min="0" max="10" /> <!--按钮--> <!--按钮上默认的文字为提交和重置，但是，可以通过value重新设置按钮上的文字--> <input type="submit" value="regi" /> <!--注意：重置按钮并不是清空，而是将表单中的数据恢复到最初状态--> <input type="reset" value="reset" /> </form> </body> </html>【面试题：get和post的区别】
相同点：二者都是用于向服务器提交数据的方式
不同点：
a.get请求会将数据携带在请求的地址【网址】，post不会携带
b.get请求的安全级别较低，post相对较高
c.get请求传输数据的效率较高，post则相对较低
d.get请求传输数据对数据有大小限制，post则没有
练习：
<!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="email" name="mail" /> </td> </tr> <tr> <td> </td> <td> 你可以使用<a href="#">邮箱</a>或者<a href="#">手机号</a>进行注册 </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 name="year"> <option></option> <option></option> <option></option> </select>年 <select name="month"> <option></option> <option></option> <option></option> </select>月 <select name="day"> <option></option> <option></option> <option></option> </select>日 </td> </tr> <tr> <td> </td> <td> <input type="radio" />同意<a href="#">千锋教育服务条款</a> </td> </tr> <tr> <td> </td> <td> <input type="submit" value="立即注册"/> </td> </tr> </table> </form> </body> </html>
2.头标签
html标签由两部分组成：head和body
head标签就是头标签
<head></head>:头标签【父标签】
<title></tile>；指定浏览器标题栏显示的内容【标题】
<base />:设置超链接的基本位置，可以统一设置当前页面中超链接打开的方式
<meta></meta>:设置和页面相关的一些内容
name：关键字
content：内容
charset：设置当前页面的编码格式【字符集】
<link />:引入外部文件【css文件】
代码演示：
<!DOCTYPE html> <html> <head> <!--早期的搜索引擎，通过关键字进行搜索--> <meta charset="utf-8" name="keywords" content="Python,千锋" /> <!--当前页面经过3秒之后自动刷新，跳转到指定页面--> <!--<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />--> <title>当前页面的标题</title> <!--统一设置当前页面中的信息，表示当前页面中出现的所有的超链接都使用_blank的方式打开--> <base target="_blank"/> <!--加载外部的css文件--> <link href="" /> </head> <body> <a href="1.开心餐厅作业.html">超链接一</a> </body> </html>
3.框架标签
<frameset></frameset>:划分规则【父标签】
rows：按照行进行划分
cols：按照列进行划分
<frame />:具体显示的页面【子标签】
注意：使用框架标签的时候，不能写在body中，也不能写在body外面，使用了框架标签之后，则需要将body标签删除掉【违背了html的规范，很少用】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--列分 <frameset cols="20%,50%,30%"> <frame src="1.开心餐厅作业.html"/> <frame src="1.开心餐厅作业.html"/> <frame src="1.开心餐厅作业.html"/> </frameset> --> <!--行分 <frameset rows="20%,50%,30%"> <frame src="1.开心餐厅作业.html"/> <frame src="1.开心餐厅作业.html"/> <frame src="1.开心餐厅作业.html"/> </frameset> --> <!--混合分--> <frameset rows="20%,*"> <frame src="1.开心餐厅作业.html"/> <frameset cols="40%,*"> <frame src="1.开心餐厅作业.html"/> <frame src="1.开心餐厅作业.html"/> </frameset> </frameset> </html>
二、css标准
1.概念
为了解决html结构和表现混杂在一起的问题，则引入css这个新的规范来专门负责网页的表现
html和css的关系：内容结构和表现形式的关系，由html确定网页的结构内容，通过css确定页面的表现形式
css:Cascading Style Sheet，层叠样式表，它用于控制网页样式并允许将将样式信息和网页内容分离的一种标记性语言，对于网页的样式，推荐使用css
层叠：使用不同的添加方式为同一个标签添加不同的样式，最后将所有的样式层叠起来，作用于同一个标签
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*设置h2和p的样式*/ h2{ color: red; } p{ color: blue; } </style> </head> <body> <!--<h2><font color="red">标题一</font></h2> <p><font color="blue">段落一</font></p> <h2><font color="red">标题一</font></h2> <p><font color="blue">段落一</font></p> <h2><font color="red">标题一</font></h2> <p><font color="blue">段落一</font></p>--> <h2>标题一</h2> <p>段落一</p> <h2>标题一</h2> <p>段落一</p> <h2>标题一</h2> <p>段落一</p> <h2>标题一</h2> <p>段落一</p> <h2>标题一</h2> <p>段落一</p> <h2>标题一</h2> <p>段落一</p> </body> </html>传统html设置表现的缺点：
a.维护困难【为了修改某个标签需要花费大量的时间】
b.样式不足【文字间距，段落缩进等都是办不到的】
c.定位困难【整体布局页面时，html对各个位置的标签照顾不全面】
2.css与浏览器
遵循：保证在常用浏览器【IE，FireFox，谷歌】中的显示是兼容的
三、css的核心基础【掌握】
1.css的语法规则
举例：描述一个人的特征，列出一张表
张飞{
民族：汉族；
体重:100kg;
性格：闷骚；
}
组成：姓名，属性，属性值
标题{
字体：宋体；
字号：15像素；
颜色：红色；
装饰：下划线；
}
h2{
font-family:宋体；
font-size:15px;
color:red;
text-decoration:underline;
}
说明：css由三部分组成：对象，属性和属性值【css的思想就是首先指定对什么对象进行设置，然后指定该对象的哪个方面的属性进行设置，最后给出属性的值】
css的选择器：为了能够使得css和html元素对应起来，就必须指定一套完整的规则，实现css对html的选择
css的语法：
选择器名称{
属性1：值1；
。。。
}
2.css的选择器
2.1通配符选择器
作用：可以匹配任意的标签【元素】
语法：
*{
属性1：值1；
}
使用场景：当前页面中需要统一设置的格式，一般采用通配符选择器【内外边距】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--css代码--> <style> /*选择器：通配符选择器*/ *{ color: red; } </style> </head> <body> <p>hello</p> <h4>html</h4> <div>today is a good day</div> </body> </html>
2.2标签名称选择器
作用：对某一类标签进行设置样式
语法：
标签名称{
属性1：值1；
}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*标签名称选择器*/ div{ color: blue; } </style> </head> <body> <div>1111</div> <div>2222</div> <div>3333</div> <p>hello</p> </body> </html>
2.3类选择器
使用场景：标签名称选择器 一旦声明，那么页面中所有的相应的标签都会被修改样式，但是，如果希望其中的某一个是不一样的设置，则需要使用类选择器或者id选择器
语法：
.类名{
属性1：值1；
}
说明：类名可以自定义，一般情况下，类名尽量全部小写
主要是为了结合标签中的属性class使用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*结论一：类选择器的优先级高于标签名称选择器*/ /*类选择器*/ .red{ color: red; } .green{ color: green; } .big{ font-size: 30px; } /*标签名称选择器*/ p{ color: blue; } </style> </head> <body> <p class="red">欲穷千里目</p> <p class="green">更上一层楼</p> <p>这是一首诗</p> <!--结论二：同一个类选择器可以应用于不同的标签【多次使用】--> <p class="green">abc</p> <!--结论三：多个类选择器可以同时作用于同一个标签--> <h4 class="red big">标题</h4> <!--选择器的好处：可以将多种不同的样式作用于同一个标签，在实际制作网站的过程中可以减少代码量，方便后期的维护--> </body> </html>
2.4id选择器
id选择器的用法和类选择器的用法基本是相同的，不同之处在于id选择器一般情况下，在同一个页面中只能使用一次，因此针对性更强
语法：
#id名称{ 属性1：值1； }说明：id名称可以自定义
id选择器为了结合属性id使用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*id选择器*/ /*文字加粗*/ #bold{ font-weight: bold; } #color{ color: cyan; } </style> </head> <body> <p id="bold">轻轻地我来了</p> <p id="color">正如你轻轻地走</p> <!--注意1：将id选择器作用于不同的标签，显示效果正常，但是不建议这样使用 原因：每个标签中的id可以作为该标签的唯一标识符， 在javascript中可以通过getElementById(“bold”)获取一个指定id对应的标签对象. 如果作用于多个标签，则在查找的时候会出错 --> <p id="bold">我挥一挥衣袖</p> <!--注意2：多个id选择器作用于同一个标签，将不起任何作用，这被认为完全错误的语法--> <p id="bold color">不带走一片云彩</p> </body> </html>优先级：
<!DOCTYPE html> <html> <head> <!--在标签名称选择器，类选择器，id选择器的优先级问题--> <meta charset="UTF-8"> <title></title> <style> p{ color: red; } .yellow{ color: yellow; } #blue{ color: blue; } </style> </head> <body> <!--结论：在标签名称选择器，类选择器，id选择器中， 标签名称选择器的优先级是最低的 id选择器的优先级是最高的 --> <p id="blue" class="yellow">hello</p> </body> </html>
2.5属性选择器
作用：根据某个标签的指定属性匹配
语法：
基本选择器[属性名]{
}
基本选择器[属性名=值]{
}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*属性选择器*/ p[name]{ color: red; } p[name="bbbb"]{ color: blue; } </style> </head> <body> <p name="aaaa">aaaa</p> <p name="bbbb">bbbb</p> <p>ccccc</p> <p name="bbbb">dddd</p> </body> </html>
2.6包含选择器
父子标签 和 先辈后辈标签
语法：
形式一：查找父子标签或者先辈后辈标签
选择器1 选择器2{
}
形式二：父子标签
选择器1 > 选择器2{
}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*包含选择器*/ /*形式一*/ /*形式一可以匹配子标签或者后辈标签*/ /*div p{ color: red; }*/ /*形式二*/ /*形式二一般情况下用来匹配子标签*/ div>p{ color: red; } /*li{ color: blue; }*/ ul>li{ color: blue; } /*包含选择器中可以是任意的基本选择器*/ #box>p{ color: yellow; } </style> </head> <body> <div> <p>第一个p标签</p> <span> <p>第二个p标签</p> </span> </div> <div> <p>第三个p标签</p> </div> <!--需求：将li中的文本设置为蓝色--> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <div id="box"> <p>hello</p> </div> </body> </html>
2.7伪类选择器
语法：
基本选择器:选项{
}
说明:选项：hover【悬浮】，before【前面】，after【后面】，first-letter【第一个字符】，first-line【第一行】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*伪类选择器*/ /*结合基本选择器使用*/ /*鼠标悬浮事件*/ #first:hover{ color: blue; font-size: 25px; } /*添加头部*/ #first:before{ content: "head"; } /*添加尾部*/ #first:after{ content: "tail"; } /*设置第一个字符的样式*/ #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结构选择器
类似于伪类选择器，
使用结合了包含选择器和伪类选择器
语法：
包含选择器：选项{
}
说明：选项：first-child【第一个子标签】 last-child【最后一个子标签】，nth-child【第n个子标签】 empty【空标签】 not()【否定】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*结构选择器*/ ul li:first-child{ color: red; } ul li:last-child{ color: blue; } /*注意：子标签编号从1开始 * nth-child * number：第number个子标签 * odd：奇数 * even：偶数 ul li:nth-child(odd){ color: cyan; } */ /*倒序查找*/ ul li:nth-last-child(2){ color: pink; } /*设置空标签的样式 * 空：没有文本的标签 */ li:empty{ background-color: purple; } /*否定标签*/ li:not(#abc){ font-size: 30px; } </style> </head> <body> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li id="abc">ddd</li> <li></li> </ul> </body> </html>
2.9组合选择器
用于给多个不同的选择器设置相同的样式
语法：
选择器1，选择器2，。。。{
}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*.header{ color: cyan; } #first{ color: cyan; } span{ color: cyan; }*/ /*组合选择器*/ .header,#first,span{ color: cyan; } </style> </head> <body> <h1 class="header">名言警句</h1> <p id="first">拼搏到无能为力</p> <span>坚持到感动自己</span> </body> </html>
3.css和html的结合方式
3.1行内样式
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--行内样式:通过style属性直接 给某个标签设置样式--> <p style="color: red; font-size: 25px;"></p> </body> </html>
3.2内嵌样式
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> p{ color: red; font-size: 25px; } </style> </head> <body> <p></p> </body> </html>
3.3链接样式
在head标签中添加link
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入一个外部的css文件--> <!-- href:需要引入的css文件的相对路径 type：被引入的文件的类型 ，格式：大范围/小范围，例如：text/javascript text/image rel:relation【关系】 stylesheet：样式表 rel="stylesheet"：描述了当前页面和href所指定文件之间的关系，href连接到的是一个样式表 --> <link href="css/style.css" type="text/css" rel="stylesheet"/> <link href="css/style1.css" type="text/css" rel="stylesheet"/> </head> <body> <p>hello</p> </body> </html>
3.4导入样式
导入样式的功能和链接样式的功能时完全相同的，只是语法不同
在head标签中添加style，在style标签中进行导入
导入语法：
@import url(css文件的相对路径)
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> @import url("css/style.css"); /*@import url("css/style1.css");*/ </style> </head> <body> <p>hello</p> </body> </html>
3.5优先级问题
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*导入样式*/ @import url("css/red.css"); /*内嵌样式*/ </style> <!--链接样式--> <link href="css/green.css" type="text/css" rel="stylesheet" /> </head> <body> <!--行内样式--> <p>html和css的结合方式</p> </body> </html> <!-- 结论一：在行内样式，导入样式和内嵌样式中，行内样式的优先级最高的，导入样式的优先级是最低的 结论二：在内嵌样式和链接样式中，不存在优先级问题，使用哪种样式取决于哪种方式距离标签更近【就近原则】 结论三：将导入样式和链接样式统称为外部样式，不存在优先级问题 注意：在实际开发中，不会出现多种样式同时出现的情况，使用最多的是内嵌样式和链接样式 总结： 作用范围： 行内样式：仅作用于当前标签 内嵌样式：作用于当前的html文件 外部样式：关联该css文件的所有的html文件 优先级： 行内样式的优先级最高 内嵌样式和外部样式，谁后写 则谁的优先级高 -->