登录,注册输入框都是表单标签
form 双边标签 有一个子标签是input标签
input是一个单边标签
form标签和input标签主要是干什么的?
是用来提交数据的,这个通过input输入框给别的页面提交数据的
url:是一个网址,也叫统一资源定位符
一个网址就是一个资源,如www.baidu.com这就是一个资源。是通过这个网址找到百度的页面。下载电影,迅雷下载,给你一个网址。这个网址进行下载这个电影资源
url组成部分:
协议+域名(ip)+端口号+文件+ 参数
http://www.baidu.com:80/index.html?username=goudan&password=123456
参数:是问号后面的东西,这个就是input输入框中向另外一个页面带过去的数据
代码如下(示例):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单标签</title> </head> <body> <!-- form标签属性 action:提交数据到哪?是一个网址 http://127.0.0.1:8848/code/test.html?username=admin&password=11111 method:提交方式 默认的是get的提交方式 有两种方式:get post get:(开发中查询) 1.不安全,所以不用登录注册,密码是url直接显示了 2.传输效率高,所以才查询 3.通过get请求方式查看你的信息 4.在url和可以看到咱们的参数 5.传输的数据是有限制的,在url中,2kb左右 post:(开发中增删改) 1.假装很安全 2.传输慢 3.数据大小没有限制 4.在地址栏中看不到传输的数据,但是程序员可以看到 method="post" enctype="multipart/form-data" 上传文件所必须的两个重要的属性,为什么要多写,文件是以流的形式传输,平常的信息是字符串 现在文件是流,mutipart多个表单数据 --> <!-- <form action="test.html" method="get"> --> <form action="test.html" method="post" enctype="multipart/form-data"> <!-- input 属性 type:决定了输入框的样式 属性值:很多 text:明文 password:密文 subit 提交按钮 value:值 name:一定要写,如果不写的话,就无法提交数据到另外一个页面 --> 账号:<input type="text" name="username"/><br /> <!-- 密码是用*******来代替的 --> 密码:<input type="password" name="password"/><br /> <!-- 提交按钮 submit --> <!-- 默认是提交这两个字,但是加上value属性后,就可以变成你自定义的按钮 --> <input type="submit" value="登录"/> <!-- 重置按钮 reset 可以恢复到以前没有数据的状态 --> <input type="reset" value="重置" /><br /> <!-- 单选框 radio 加完name属性以后,我们就只能单选 如果不写value的话,就无法判断传给另外一个页面的值是什么 --> 性别:<input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女"/>女<br /> <!-- 复选框 checkbox name和value的值也不能少,因为要传输数据到另外一个页面 --> 爱好:<input type="checkbox" name="hobby" value="唱歌"/>唱歌 <input type="checkbox" name="hobby" value="跳舞"/>跳舞 <input type="checkbox" name="hobby" value="rap"/>rap <input type="checkbox" name="hobby" value="打篮球"/>打篮球 <br /> <!-- 日期文本框 date --> <input type="date" name="birthday" /><br /> <input type="datetime" name="datetime" /><br /> <!-- 上传文件框 file 注意事项:上传文件的时候,必须使用post请求 form表单还有一个属性:enctype=:"muiltipart/form-data" 这两个属性都要有 --> <input type="file" name="file" /><br /> <!-- 隐藏文本 hidden 开发中会用 不会在我们的页面上显示,但是可以通过name属性和value属性 带数据到另外一个页面上 --> <input type="hidden" name="hid" value="soga" /><br /> <!-- 下拉列表 两个标签组成的,一个是select标签,另外一个是子标签option name属性必须写 --> <select name="city" size="6"> <option value="0312">郑州</option> <option value="0311">信阳</option> <option value="0345">洛阳</option> <option value="0323">安阳</option> <option value="0324">开封</option> <option value="0325">新乡</option> <option value="0327">驻马店</option> <option value="0328">周口</option> <option value="0329">三门峡</option> </select><br /> <br /> <!-- 文本编辑器 以后会有封装好的 --> 履历:<textarea name="info"> </textarea> </form> </body> </html>
结果如下(示例):
一个页面再套一个页面
【注意事项】:如果使用了framset就不能使用body标签
代码如下(示例):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!--一个页面再套一个页面 framset标签 --> <!-- 用了framset就不能使用了body了 --> <!-- framset有两个属性 rows:把一个网页分成上下份 cols:把一个网页分成左右两份 noresize:禁止页面拖动 frame: 子标签 --> <frameset cols="200px, *"> <frame src="http://www.taobao.com" /> <frameset rows="200px, *"> <frame src="test.html"/> <frame src="1表单标签.html" /> </frameset> </frameset> </html>
结果如下(示例):
代码如下(示例):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="http://www.baidu.com" target="fsb">百度</a><br /> <a href="http://www.taobao.com" target="fsb">淘宝</a><br / <a href="http://www.sohu.com" target="fsb">搜狐</a><br> <a href="http://www.mobiletrain.org/?pinzhuanbdtg=guanwang" target="fsb">千锋</a> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>you.html</title> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zuo.html</title> </head> <body> <a href="http://www.baidu.com" target="fsb">百度</a><br /> <a href="http://www.taobao.com" target="fsb">淘宝</a><br / <a href="http://www.sohu.com" target="fsb">搜狐</a><br> <a href="http://www.mobiletrain.org/?pinzhuanbdtg=guanwang" target="fsb">千锋</a> </body> </html>
结果如下如下(示例):
一个网页页面由html,css,javascript组成
html相当于一个简陋的骨架,css相当于对这个股价进行化妆修饰的
css 层叠样式表 cascading style sheets
CSS三种引入方式:①行内样式②内联样式③外联样式
使用CSS的目的:为了修饰标签的,让标签更好看
代码如下(示例):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 行内样式的写法,目的是为了修饰div标签的 学过的每一个标签,都有这个属性叫style style属性值写的是css语法格式 css语法格式: 属性1:属性值1;属性2:属性值2;属性3:属性值3; eg:border:边框大小 子属性 solid:边框颜色 width:宽度 height:高度 background-color:背景颜色 color:字体颜色 --> <div style="border:0.25rem solid gold; width: 31.25rem; height: 25rem; background-color: aqua; color: red;"> 一望无际的沙漠里,简直就是一个极度喧嚣的世界,一幕幕优美的画面和热闹的舞台剧总是在轮番 登场,令人心醉神怡。可是,它们的生存,却给人们留下了太多、太深、太久远的启示和忠告。不信? 你看,在沙漠里,有一种植物叫胡杨,它是沙漠地区特有的珍贵森林资源,因其超顽强的生命力,还被 人们赞誉为“长着千年不死,死后千年不倒,倒地千年不腐”的英雄树。为了近观胡杨的独特风范,我 和我的同伴曾走向塔克拉玛干沙漠的深处,在那荒凉的戈壁滩里,映入眼帘的是晶莹剔透的飞沙,迎接 我们的是难忍的饥渴和孤独,以及炽热的煎熬,动物、植被的残骸四处呈现,而胡杨则展现出与天地抗 争的勇气和执着!它们顽强的生命,实在是悲壮又令人惊叹!还有一种叫百岁兰的植物,它一生只生长两 片叶子,但每一片叶子都可以活到百余年甚至上千年的时间;当然,譬如仙人掌、梭梭、红柳树……无不 让人惊奇和赞颂! </div> </body> </html>
结果如下(示例):
代码如下(示例):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css内联样式的写法</title> <!-- 内联样式的写法是在head标签中,有一个子标签叫style 在style标签中去写CSS样式去修饰标签 --> <style> /* 这个是css里面的注释,和html不一样 */ /* 首先找到被修饰的标签,然后写大括号,在大括号里面写css语法格式 */ div{ width: 6.25rem; height: 6.25rem; background-color: darkgoldenrod; } /* 修饰p标签 */ p{ width: 18.75rem; height: 18.75rem; background-color: gold; } /* 修饰span标签 */ span{ /* 专门讲一下颜色表示方式 1.html规定好的颜色的英文单词 2.十六进制的表示形式 0-F R G B 00 00 00 黑色 FF 00 00 红色 00 FF 00 绿色 00 00 ff 蓝色 十六进制组成了好好的颜色 一般用吸色器把颜色吸出来*/ color:#E1251B; } </style> </head> <body> <div> 仰天大笑出门去,我辈岂是蓬蒿人 </div> <p>离开你一百个星期,我回到了这里,寻找我们爱过的证据, 没有人愿意提起,玫瑰花它的过去,今天这里的主题,我把它叫做回忆 </p> <div> </div> <span> 天生我材必有用,千金散尽还复来。 </span> </body> </html>
结果如下(示例):
首先在当前html文件所在的文件夹里面创建一个名为test.css的CSS文件
文件内容为:
footer{ width: 12.5rem; height: 12.5rem; background-color: tomato; color: #7FFFD4; }
代码如下(示例):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入外部的css文件 在head头里面写一个link标签,目的是为了引入外部的css文件 属性: rel:连接文件的类型 样式表 type:css文件类型 href:外部的css所在路径 --> <link rel="stylesheet" type="text/css" href="./test.css"/> </head> <body> <!-- 外联样式 在文件的外部写一个后缀为css的文件 引入到我们的当前页面中 --> <footer>东风不与周郎便,铜雀春深锁二乔</footer> </body> </html>
结果如下(示例):
目的:为了找到这个被修饰的标签的。
如果连标签都找不到,何谈修饰?好比你买了化妆品,要给你女朋友化妆,。突然想到自己没有女朋友。很扎心。首先找到女朋友,对她进行化妆
1.标签选择器
2.class选择器
3.id选择器
4.层级选择器
5.组合选择器
6.通配选择器
7.伪类选择器
代码如下(示例):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签选择器</title> <!-- 内联样式的写法 --> <!-- 标签选择器,通过标签的名字获取找到标签的 --> <style> /* span就是html标签的名字 对span的内容进行修饰 */ span{ color: red; } div{ color: yellow; } footer{ color: blue; } </style> </head> <body> <span>蓦然回首,那人却在灯火阑珊处</span> <div>借问酒家何处有,牧童遥指杏花村</div> <div></div> <footer>风萧萧兮易水寒,壮士一去兮不复返</footer> </body> </html>
结果如下(示例):
每一个标签都有一个class属性
给class起一个属性的名字,咱们可以通过这个=属性值可以找到这个标签
代码如下(示例):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* class选择器 是在标签中写一个class属性 属性值是自己定义的 通过.属性值 在{}中找到当前标签进行修饰 */ .nb{ color: red; } .sb{ color: blue; } .qb{ color: #7FFFD4; } </style> </head> <body> <!-- 任何一个标签都有class属性 class的属性值可以随便写 class可以写多个值,中间使用空格隔开 例如: <div class="wwb wabf nb"> <!-- class有三个值: 1.wwb 2.wabf 3.nb 这是我自己定义的三个属性值 --> <div class="wwb wabf nb">君不见黄河之水天上来,奔流到海不复回</div> <div class="sb">烹羊宰牛且为乐,会须一饮三百杯</div> <p class="qb"> 人生得意须尽欢,莫使金樽空对月。 天生我材必有用,千金散尽还复来。 </p> </body> </html>
结果如下(示例):
提示:这里对文章进行总结:没有想好总结