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)    收藏  举报