2021年9月3日

今天的内容

1.html标签(以后开发用地额标签块结束了)

2.css

1.html的标签

1.1表单标签【重要!!!】开发必用!!!

登录,注册输入框都是表单标签

form 双边标签

form 有一个子标签是input标签

input标签是一个单边标签

from标签和input标签主要干嘛的?

使用来提交数据的,这个通过input输入框给别的页面提交数据的!!!

url:是一个网址,统一资源定位符

一个网址就是一个资源,比如www.baidu.com这就是一个资源。是通过这个网址找到百度的页面。下载电影,迅雷下载,给你一个网址。通过这个网址进行下载这个电影资源。

12层10教室第一排的京贺:

地球上中国河南省郑州市二七区海为科技c区12层10教室第一排的京贺。可以精确找到这个资源。万事万物都是资源。

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=111111
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"
上传文件所必须两个重要的属性,为什么要多写,文件流有关系,平常字符串,
现在文件是流multipart多个表单数据
-->
<form action="test.html" method="get" <!-- enctype="multipart/form-data -->">
<!-- input属性
type:决定了输入框的样式
属性值:很多
text 明文
password 密文
submit 提交按钮
value:值
name:一定要写,如果不写的话,就无法提交数据到另外一个页面,缺少的话就打死你们!!!

-->
姓名:<input type="text" name="username"/><br>
<!-- 密码是用******来代替的 密文的 怎么来做的? -->
密码:<input type="password" name="password"/><br>
<!-- 默认是提交这两个字,但是加上value属性以后,就会变成你自定义的按钮 -->

<!-- 单选框 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="rap">rap
<input type="checkbox" name="hobby" value="唱">唱歌
<input type="checkbox" name="hobby" value="篮球">篮球
<br>
<!-- 日期文本框 date -->
<input type="date" name="birth"/><br>
<input type="datetime" name="datetime"/><br>

<!-- 上传文件 file
有一些注意事项【千万别说我没有讲过】
上传文件的时候,必须使用post请求,form表单还有一个属性
enctype="muiltipart/fromdata" 这两个缺一不可
-->
<input  type="file" name="file"/><br>
<!-- 隐藏文本 hidden,开发用!!!
不会在咱们页面显示,但是可以通过name属性和value属性 带数据带另外一个页面
-->
<input type="hidden" name="hid" value="sb"/>
<br>
<!-- 下拉列表
两个标签组成的,一个select标签 另外一个是子标签option
name属性必须得写
-->
<select name="city" size="6">
<option value="0371">郑州</option>
<option value="0372">开封</option>
<option value="0377">洛阳</option>
</select><br>
<!-- 文本编辑器 以后会有封装好的 -->
<textarea name="info">

</textarea><br>
<!-- 重置按钮   可以恢复到以前没有数据的状态-->
<input  type="reset" value="重置"/>
<input type="submit" value="登录"/>
</form>
<!-- 前端的东西 要会复制,不用自己写,但是你必须得读懂别人的代码!!! -->
</body>
</html>

1.2framset标签【重要】

一个页面再套一个页面

【注意事项】:如果一使用了framset就不能使用body标签了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>framset</title>
</head>
<!-- 用了framset就不能使用body了 -->
<!--
framset有两个属性
rows:把一个网页分成上下份
cols:把一个网页左右份
noresize 禁止页面拖动
-->
<frameset cols="200px, *" noresize>
<frame src="http://www.mobiletrain.org/?pinzhuanbdtg=guanwang">
<frameset rows="200px , *">
<frame  src="test.html"/>
<frame src="1表单标签.html"/>
</frameset>
</frameset>
</html>

html重要标签都结束了。官方手册里面还有一部分标签。不用学,只要把这些学会其他的标签都是相同通的,授人以鱼不如授人以渔。教你们捕鱼。

2.CSS

一页页面由html, css,javascript

html相当于一个简陋的骨架

css相当于对这个骨架进行化妆修饰的

CSS 层叠样式表 cascading style sheets

2.1CSS三种引入方式【重点】

先写html标签,然后再写css对标签进行化妆修饰

1.行内样式

2.内联样式

3.外联样式

目的:为了修饰标签的,让标签变得更加好看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 行内样式写法,目的是为了修饰div标签的
学过的每一个标签,都有这个属性叫style
style属性值写的是css语法格式
css语法格式:
属性1:属性值1;属性2:属性值2;属性3:属性值3;
-->
<div style="border:4px solid gold; width: 400px;height: 400px;background-color: aqua;color:red;">
何须马革裹尸还 抗美援朝3500万中国人,所以咱们现在的生活都是他们用命换来的
现在报有一个感恩的心,你这样想,有人为你死的啊。一个没有英雄的民族,是一个悲哀的民族。
但是有英雄不尊重英雄的民族是一个无可救药的民族。我看到有些人在网上骂这些烈士,这是什么心态?

</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css内联样式的写法</title>
<!-- 内联样式的写法是在head标签中,有一个子标签叫style
在style标签中去写CSS样式去修饰标签
-->
<style>
/* 这个是css里面注释,和html不一样。和java一样 */
/* 首先找到被修饰的标签 ,之后写大括号,在大括号里面写css语法格式*/
div {
width: 100px;
height: 100px;
background-color: darkgoldenrod;
}
/* 修饰p标签 */
p{
width: 100px;
height: 100px;
background-color: aquamarine;
}
/* 修饰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>今天是抗日战争胜利76周年纪念日</P>
<div>

</div>
<span>小日本帝国主义思想严重,不能轻视对手!!!</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部的css文件
在head头里面写一个link标签,目的是为了引入外部的css文件
属性:
rel:连接文件的类型 样式表
type:css文件类型
href:外部的css所在路径 重要的,因为找不到这个css就没有任何效果了
-->
<link rel="stylesheet" type="text/css" href="./test.css"/>
</head>
<body>
<!-- 外联样式
在文件的外部写一个后缀为css的文件,
引入到咱们当前页面
-->
<footer>自挂东南枝</footer>
</body>
</html>

2.2css的选择器【重要!!!】

目的:为了找到这个被修饰的标签的。

如果连标签都找不到,何谈修饰?好比你买了化妆品,要给你女朋友化妆,。突然想到自己没有女朋友。很扎心。首先找到女朋友,对她进行化妆

1.标签选择器

2.class选择器

3.id选择器

4.层级选择器

5.组合选择器

6.通配选择器

7.伪类选择器

2.2.1标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<!-- 内联样式的写法 -->
<!-- 标签选择器,通过标签的名字获取找到标签的 -->
<style>
/* sapn就是html标签的名字
对span的内容进行修饰
*/
span {
color:red;
}
div {
color:yellowgreen;
}
footer {
color:blue;
}
</style>
</head>
<body>
<span>
默认回首,那人却在垃圾堆处
</span>
<div>借问酒家何处有</div>
<div>一骑红尘妃子笑</div>
<footer>风萧萧兮易水寒</footer>

</body>
</html>
2.2.2class选择器

每一个标签都有一个class属性

给class起一个属性的名字,咱们可以通过这个=属性值可以找到这个标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* class选择器
是在标签中写一个class属性,
属性值是自己定义的,通过
.属性值 {}找到当前标签进行修饰
*/
.nb {
color:red;
}
.sb{
width: 100px;
height: 100px;
background-color: #0000FF;
}
</style>
</head>
<body>
<!-- 任何一个标签都是有class属性的
class的属性值可以随便写
class可以写多个值,中间使用空格隔开。
<div class="wwb wangwenbo nb">
class有三个值
  1.wwb
  2.wangwenbo
  3.nb
-->
<div class="wwb wangwenbo nb">
青岛不倒我不倒,雪花不飘我不飘
</div>
<div class="sb"></div>
</body>
</html>



posted @ 2021-09-03 20:32  张三疯321  阅读(159)  评论(0)    收藏  举报