一、html常用的标签
1.表单标签
作用：可以提交不同的数据到指定的服务器
标签：
:表示表单的范围，父标签主要用于采集用户信息，
分为三部分：
a.表单标签：包含数据需要提交到的服务器的地址，数据提交的方式【get和post】
b.表单域：用于采集用户信息的
c.表单按钮：普通按钮【button】 重置按钮【reset】 提交按钮【submit】
form标签的属性：
a.action:数据需要提交到的服务器的地址
b.method:数据提交的方式
c.enctype:很少用，做文件上传的时候需要设置该属性
:表示输入项，是form标签的子标签，可以单独使用，可以输入内容或者选择内容
input标签的属性：
type：
a. 普通输入项
b. 密码输入项
c. 单项选择
d. 多项选择
e. 文件选择项
f. 邮箱输入项
g. 隐藏项【了解】
h. 日期选择【了解】
j, 颜色选择 【了解】
k. 按钮，reset/submit
placeholder:提示文字，一般结合text或者password使用
checked:checked = “checked”,表示设置默认选中，一般结合radio和checkbox使用
value：设置默认值
name：用于区分不同的输入项，提交给服务器
id：区分
style：设置样式
:表示下拉选择项 ，是form标签的子标签
:选项，是select标签的子标签
name：区分
value：默认值
selected = “selected”:设置默认选中
:表示文本域，是form标签的子标签
cols；列
rows:行
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="get"> <!--文本输入项--> 手机号码：<input type="text" name="phone" placeholder="请输入手机号码" /><br /> 姓 名:<input type="text" name="username" placeholder="请输入姓名" /><br /> <!--密码输入项--> 密 码：<input type="password" name="pwd" placeholder="请输入密码"/><br /> <!--单项选择框--> <!--checked="checked"设置当前的input默认选中--> 性 别：<input type="radio" name="sex" value="male" checked="checked"/>男 <input type="radio" name="sex" value="female"/>女 <br /> <!--多项选择框--> 爱 好：<input type="checkbox" name="hobby" value="lp" checked="checked"/>篮球 <input type="checkbox" name="hobby" value="pq"/>排球 <input type="checkbox" name="hobby" value="zq"/>足球 <input type="checkbox" name="hobby" value="ppq"/>乒乓球 <br /> <!--文件选择项--> 上传头像：<input type="file" name="image"/><br /> <!--下拉选择项--> 出生年月：<select name="birth"> <!--注意：使用option，为了区分不同的option选项，最好通过value区分--> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> </select> <br /> <!--文本域--> 自我评价：<textarea cols="30" rows="20" name="show"></textarea> <br /> <!--按钮--> <!--提交按钮上的文字默认为“提交”，通过value重新设置--> <!--<input type="submit" value="注册"/>--> <!--<input type="button" value="按钮" />--> <!--reset：默认为重置，通过value重新设置， 注意：重置只是恢复到最初的状态，并不是清空 --> <input type="reset" value="重新设置" /> </form> </body> </html> <!-- 1.数据提交的位置 form标签的属性action 2.数据提交的方式 get和post之间的区别： a.get请求地址栏中会携带提交的数据，但是post不会【请求体】 b.post相对于get比较安全 c.get请求传输数据的效率较高 d.get请求对传输的数据大小有限制，post没有 3.name属性的作用:用于给服务器区分不同的数据 http://127.0.0.1:8020/Day2Code/3.%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE%E4%B8%80.html? phone=wryw&username=yyt&pwd=yw4y&sex=on&hobby=on&hobby=on&image=&birth=1992&show=yw4tuw5# 4.value属性的作用：sex=on&hobby=on&hobby=on，区分同类数据 http://127.0.0.1:8020/Day2Code/3.%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE%E4%B8%80.html? phone=ywrye&username=y4tye&pwd=yw4y&sex=female&hobby=pq&hobby=zq&hobby=ppq &image=&birth=1993&show=y45wyw5y# -->
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <!--了解--> 邮箱：<input type="email" placeholder="请输入邮箱" /><br /> 日期：<input type="date" /><br /> 颜色：<input type="color" /><br /> <!--没有任何的内容，但是位置会留出来--> 隐藏域：<input type="hidden" /><br /> <!--默认情况下，value在中间位置，，如果设置了value的值，则按照比例显示--> 进度条：<input type="range" min="0" max="100" value="10"/> </form> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form> <table> <tr> <td colspan="2" align="center">十秒加入开心网</td> </tr> <tr> <td align="right">手机号码:</td> <td> <input type="text" /> </td> </tr> <tr> <td align="right">创建密码:</td> <td> <input type="password" /> </td> </tr> <tr> <td align="right">手机号码:</td> <td> <input type="text" /> </td> </tr> <tr> <td align="right">手机号码:</td> <td> <input type="text" /> </td> </tr> <tr> <td align="right">性别:</td> <td> <input type="radio" />男 <input type="radio" />女 </td> </tr> <tr> <td align="right">生日:</td> <td> <select> <option></option> <option></option> <option></option> </select>年 <select> <option></option> <option></option> <option></option> </select>月 <select> <option></option> <option></option> <option></option> </select>日 </td> </tr> <tr> <td align="right">居住地:</td> <td> <input type="text" /> </td> </tr> <tr> <td align="right">目前正在:</td> <td> <input type="radio" />工作 <input type="radio" />上学 <input type="radio" />其他 </td> </tr> <tr> <td> </td> <td> <input type="checkbox" />同意<a href="#" style="color: darkcyan;font-size: smaller;">开心网服务条款</a> </td> </tr> <tr> <td> </td> <td> <input type="submit" value="立即注册" style="background-color: darkcyan;" /> </td> </tr> </table> </form> </body> </html>
2.头标签
html的子标签head被称为头标签
title:设置当前页面的标题
base：设置超链接的基本位置，可以统一设置超链接打开的方式
meta：设置页面的一些相关内容【编码格式】
charset:字符集
name:关键字
content:内容
link:引入外部的css文件
代码演示：
<!DOCTYPE html> <html> <head> <!--早期的搜索引擎，通过关键字搜索--> <!--<meta charset="utf-8" name="keywords" content="it,千锋" />--> <meta charset="utf-8" /> <!--当前页面经过3秒之后进行重新刷新，跳转到url指定的页面--> <!--<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />--> <title>当前页面的标题</title> <!--统一设置当前页面中的某些信息，很少用--> <base target="_blank"/> </head> <body> <a href="1.影视化简介.html" target="_blank">超链接一</a> <a href="1.影视化简介.html">超链接二</a> <a href="1.影视化简介.html">超链接三</a> </body> </html>
3.框架标签
:指定页面的划分规则【父标签】 rows:按照行进行划分
cols:按照列进行划分
:具体显示的页面注意：使用框架标签的时候，不能写在body中，也不能写在body外面，使用框架标签之后，则需要将body删掉
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--列分 <frameset cols="20%,30%,50%"> <frame src="1.影视化简介.html" /> <frame src="1.影视化简介.html" /> <frame src="1.影视化简介.html" /> </frameset> --> <!--行分 <frameset rows="20%,30%,50%"> <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.css概念
为了解决将结构和表现混杂在一起的问题
css:Cascading Style Sheet，层叠样式表，它是用来控制网页样式并允许将样式信息与网页内容分离的一种标记性语言作用：为html布局之后的页面设置样式
层叠：使用不同的方式给同一个标签设置样式，，最后将所有的样式叠加到一起，共同作用域于标签
传统html的缺点
a.维护困难【为了修改某个标签的样式需要花费大量的时间】
b.标记不足【比如：文字间距，段落缩进等】
c.网页过“胖”【没有统一的标准对各种风格做控制，html页面体积过大】
d.定位困难【html对各个标签控制不足】
2.css语法规则
举例：描述一个人的特征，列出一张表
张飞{
身高：178cm;
体重：100kg;
性别：男；
}
标题{
字体：宋体；
字号：15像素；
颜色：红色；
装饰：下划线；
}
h2{
font-family:宋体；
font-size:15px;
color:red;
text-decoration:underline;
}
css的思想：首先指定对什么对象进行设置，然后指定对对象的哪个属性设置，最后给出属性的值
css的要素：对象，属性和值
在css的三个组成部分中，对象是最重要的，它指定了对网页中的哪些元素进行设置，在css中被称为选择器
注意：选择器是css的核心
为什么是选择器：为了能够使得html元素与css对应起来，就必须定义一套完整的规则，实现css对html的选择【通过选择器匹配html元素的过程】
语法：
选择器{
属性1：值1；
属性2：值2；
。。。
}
3.css的选择器
3.1通配符选择器
语法：
*{
}
作用：当前页面中的所有的html标签都会被设置相同的样式
使用场景：一个网页中所有标签共同的样式【一般设置内外边距】
3.2标签名称【元素】选择器
语法：
html标签名称{
}
作用：根据给定的标签名称，在当前 页面中只匹配指定的标签
弊端：如果多个同类的标签需要设置不同的样式，使用标签名称选择器解决不了问题，可以使用类选择器或者id选择器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*标签名称选择器*/ div{ font-size: larger; color: blue; } p{ text-decoration: underline; } </style> </head> <body> <h2>标题</h2> <p>正文</p> <div>中文</div> <h3>标题二</h3> <div>升职加薪，迎娶白富美</div> </body> </html>
3.3类选择器
跟class属性有关，通过设置class的值确定类名
语法：
.类名{
}
作用：对同类的标签，需要设置不同的样式，可以使用类名进行区分
使用场景：标签名称选择器一旦声明，那么页面中所有相关的标签都会发生变化，但是，如果希望其中的某些个标签具有不同的特征，则就可以选择类选择器
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*标签名称选择器 div{ font-size: larger; color: blue; } */ /*类选择器*/ .red{ color: red; } .blue{ color: blue; } .size{ font-size: 30px; } </style> </head> <body> <!--结论一：同一个类选择器可以同时作用于不同的标签--> <h2 class="red">标题</h2> <p>正文</p> <div class="red">中文</div> <!--结论二：多个不同的类选择器可以同时作用于同一个标签，使用空格隔开--> <h3 class="blue size">标题二</h3> <div class="blue">升职加薪，迎娶白富美</div> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*标签名称选择器*/ p{ font-size: 20px; } /*类选择器*/ .special{ color: lightgray; font-size: 13px; } </style> </head> <body> <p>静夜思</p> <!--结论三：在同一个文件中，同时出现标签名称选择器和类选择器，元素优先匹配类选择器--> <p class="special">作者：李白</p> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> </body> </html>总结：
a.同一个类选择器可以同时作用于不同的标
b.多个不同的类选择器可以同时作用于同一个标签，使用空格隔开
c.在同一个文件中，同时出现标签名称选择器和类选择器，元素优先匹配类选择器
3.4id选择器
说明：id选择器的使用和类选择器的使用基本相同，不同之处在于：id选择器在同一个html页面中最好只使用一次
跟id属性有关
语法： #id名称{ }代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*标签名称选择器*/ p{ color: blue; } /*id选择器*/ /*设置文字粗体*/ #bold{ font-weight: bolder; } /*设置文字颜色*/ #color{ color: red; } </style> </head> <body> <p id="bold">轻轻的我走了</p> <!-- 注意3：标签名称选择器和id选择器作用与同一个标签的时候，优先匹配id选择器 --> <p id="color">正如我轻轻地来</p> <!--注意1： 同一个id选择器也刻意同时作用于不同的标签，同样起作用，但是，不建议这样使用 原因：js中有一个获取标签对象的函数：docuement.getElementById("bold")获取指定id的标签对象， 只能获取出来一个，硬性建议：在同一个html页面中，同一个id只能使用一次 dodument.getElemntByClass(“”) --> <!--<p id="bold">挥一挥衣袖</p>--> <!--注意2： 多个id选择器作用于同一个标签在id选择器中是完全错误的语法 --> <!--<p id="bold color">不带走一片云彩</p>--> </body> </html>
3.5属性选择器
作用：根据某个标签的指定属性进行匹配
语法：
基本选择器[属性名]{
}
基本选择器[属性名=“值”]{
}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*属性选择器*/ /*形式一*/ /*将具有name属性的p标签匹配出来*/ /* * p[name]{ color: red; } */ /*属性选择器中，可以是任意的基本选择器，包括标签名称选择器，id选择器，类选择器 * 工作原理：在基本选择器的基础上进行了二次匹配 */ /*.aaa[name]{ color: red; }*/ /*形式二*/ /*工作原理：找到多有的p标签，匹配有name属性的p标签，匹配当name属性的值为b的p标签 */ p[name="b"]{ color: blue; } </style> </head> <body> <p name="a" class="aaa">aaaaaa</p> <p name="b">bbbbbb</p> <p>cccccc</p> <p class="aaa">dddddd</p> <div>eeeeeee</div> <h1>ffffffff</h1> </body> </html>
3.6结构选择器
语法：
结合前面的选择器，使用冒号
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*结构选择器*/ ul li:first-child{ color: purple; } ul li:last-child{ color: green; } /*匹配第几个子标签*/ ul li:nth-child(2){ color: blue; } /*匹配奇数的子标签 * number * odd:奇数 * even:偶数 */ ul li:nth-child(odd){ color: yellow; } /*倒序查找*/ ul li:nth-last-child(){ } /*not:否定*/ li:not(#d){ color: cyan; } /*注意：优先级相同的选择器出现多个，则后面出现的会覆盖掉前面出现的*/ </style> </head> <body> <ul> <li>aaaa</li> <li>bbbb</li> <li>ccccc</li> <li id="d">dddd</li> <li>fffdfd</li> </ul> </body> </html>
3.7包含选择器
语法：
匹配子标签或者后辈标签
先辈选择器 后辈选择器{
}
匹配子标签
父标签选择器 > 子标签选择器{
}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*包含选择器*/ /* * 其中的选择器为基本选择器 */ /*形式一：匹配到的是子标签或者后辈标签*/ /*div p{ color: red; } .box p{ color: red; } #box p{ color: red; } * */ /*形式二：匹配的直接的子标签*/ /*div>p{ color: blue; }*/ .box>p{ color: blue; } </style> </head> <body> <!--包含：父子关系，先辈后辈关系--> <div class="box"> <p>第一个段落</p> <span> <p>第二个段落</p> </span> <p>第三个段落</p> </div> <p>第四个段落</p> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*包含选择器*/ /*需求：匹配到下面所有的li*/ /*方式一:标签名称选择器*/ li{ } /*方式二：id选择器或者类选择器或者属性选择器*/ /*方式三：包含选择器*/ ul li{ } ul>li{ } </style> </head> <body> <ul> <li>aaaa</li> <li>bbbb</li> <li>ccccc</li> <li>dddd</li> <li>fffdfd</li> </ul> </body> </html>
3.8伪类选择器
语法：
结合前面的选择器，使用冒号
注意：是结构选择器还是伪类选择器，看冒号后面的限定条件
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*伪类选择器*/ /*1.鼠标悬浮效果*/ #first:hover{ color: blue; font-size: 30px; } /*2.添加头部*/ .second:before{ content: "hello"; } /*3.添加尾部*/ .second:after{ content: "byebye"; } /*4.设置第一个字符的样式*/ .second:first-letter{ font-size: 30px; } /*5.设置第一行的样式*/ #third:first-line{ color: cyan; } </style> </head> <body> <p id="first">世上无难事</p> <p class="second">只怕有心人</p> <p id="third">css的思想：首先指定对什么对象进行设置，然后指定对对象的哪个属性设置，最后给出属性的值 css的要素：对象，属性和值 在css的三个组成部分中，对象是最重要的，它指定了对网页中的哪些元素进行设置，在css中被称为选择器 注意：选择器是css的核心 为什么是选择器：为了能够使得html元素与css对应起来，就必须定义一套完整的规则，实现css对html的选择【通过选择器匹配html元素的过程】 </p> </body> </html>
3.9组合选择器
语法：
选择器1，选择器2,。。。{
}
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*组合选择器*/ #first,.second,div{ color: red; } </style> </head> <body> <p id="first">世上无难事</p> <p class="second">只怕有心人</p> <div>css的思想：首先指定对什么对象进行设置，然后指定对对象的哪个属性设置，最后给出属性的值 css的要素：对象，属性和值 在css的三个组成部分中，对象是最重要的，它指定了对网页中的哪些元素进行设置，在css中被称为选择器 注意：选择器是css的核心 为什么是选择器：为了能够使得html元素与css对应起来，就必须定义一套完整的规则，实现css对html的选择【通过选择器匹配html元素的过程】 </div> </body> </html>
4.css与html结合方式
4002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
