前端学习02

最新推荐文章于 2024-08-26 08:33:56 发布

怼怼哎

最新推荐文章于 2024-08-26 08:33:56 发布

阅读量282

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_72611192/article/details/126511161

版权

表单标签补充内容

1.获取用户输入的标签两大重要的属性

name属性
类似于字典的键
value属性
类似于字典的值
form表单在朝后端发送数据的时候标签必须要有name 否则不会发送该标签的值

2.获取用户输入的input标签理论上需要有label配合使用

3.获取用户输入的input标签也可以添加背景提示

<input type="text" name="password" placeholder="密码">

4.获取用户输入的标签如果不是让用户自己写而是选择那么标签需要自己写value

<input type="radio" name="gender" value="male">男
   <input type="checkbox" name="hobby" value="basketball">篮球
	<select name="province" id="">
     <option value="sh">上海</option>
   </select>

5.针对radio和checkbox可以默认选中

checked=“checked” 如果属性名和属性值相等那么可以简写 checked

6.针对option标签也可以默认选中

selected=“selected” 简写为 selected

CSS层叠样式表

1.调整标签样式
2.语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
3.注释语法
/注释内容/
4.三种编写CSS的方式
1.head中style标签内部直接编写(学习阶段使用方便)
2.head中link标签引入外部css文件(最正规)
3.直接在标签内部通过style属性编写(不推荐)

CSS基本选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*标签选择器*/
      div{
        color: yellow;
      }
       /* 类选择器*/
      .c1 {
          color: aqua;
      }
      /*id选择器*/
      #d1{
          color: green;
      }
      /*通用选择器*/
      *{
          color: red;
      }
    </style>

</head>
<body>
     <div id="d1">div</div>
     <p class="c1">p</p>
     <span>span</span>
     <div class="c1">div</div>
</body>

/1.标签选择器:直接编写标签名来查找标签/
/2.类选择器:通过编写class的值来查找标签/
/3.id选择器:通过编写id的值来精准查找标签/
/4.通用选择器:查找所有的标签/

CSS组合选择器

预备知识:标签之间的关系

<p></p>
<div>
    <p>
        <span></span>
    </p>
</div>
<p></p>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*!*h后代选择器*!*/
      /*#d1 span{*/
      /*  color: red;*/
      /*}*/
      /*儿子选择器*/
      /*#d1>span{*/
      /*  color: yellow;*/
      /*}*/
      /*毗邻选择器*/
      #d1+span{
        color: green;
      }
      /*弟弟选择器*/
      #d1~span{
        color: darkblue;
      }
    </style>
</head>
<body>
    <div id="d1">div
       <p>div里面的p
         <span>
            div里面的p的span
         </span>
       </p>
       <span>div里面的span</span>
    </div>
    <p>哈哈</p>
    <span>div下面的span</span>
    <span>div下面的span</span>
</body>

/查找div标签内部所有的span(后代)/
/1.后代选择器: 两个选择器之间空格隔开查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签/
/查找div标签内部所有的儿子span/
/2.儿子选择器两个选择器之间大于号隔开查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签/
/查找div标签同级别下面紧挨着的一个span标签(弟弟)/
/3.毗邻选择器/
/查找div标签同级别下面所有的span标签(弟弟们)/
/4.弟弟选择器/

CSS属性选择器

所有的标签除了有自己默认的属性之外还可以拥有自定义的任意属性
默认属性 id class
自定义属性 x=1 y=2

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
  /*1.查找属性名含有name的标签*/
      [name] {
        color: red;
      }
  /*2.查找属性名含有name并且值是username的标签*/
      [name="username"]{
        background-color: darkblue;
      }
  /*3.查找input标签并且 属性名含有name值是username的*/
      input[name="username"]{
        background-color: yellow;
      }
  </style>
</head>
<body>
      <input type="text" name="username">
      <input type="text" name="password">
      <a href  name="username" >111</a>
      <div name="username">div</div>
</body>
/*前面的选择器可以是任意类型的 标签、id、class*/

CSS选择器之分组与嵌套

当多个选择器查找到的标签需要调整相同的样式那么可以合并
div,p,span {
color: red;
}
并且合并的选择器彼此不干扰也没有类型的限制
#d1,.c1,span {
color: red;
}
还可以在选择器基础之上添加额外的选择使得查找更精确
span.c1
div#d1

CSS选择器之伪元素选择器

补充知识
a标签默认的颜色有两种紫色跟蓝色
紫色:链接地址已经被点击过了
蓝色:链接地址从来没有点击过

a:hover {
            color: red;
        }

鼠标悬浮上去之后样式改变适用于所有含有文本的标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*a:link{*/
      /*  color:black;*/
      /*}*/
      /*a:hover{*/
      /*  color: blue;*/
      /*}*/
      /*a:active{*/
      /*  color: red;*/
      /*}*/
      /*a:visited{*/
      /*  color: gray;*/
      /*}*/
      p:hover{
          color: red;
      }
    </style>

</head>
<body>
<!--    <a href="http://www.jd.com/">点我去京东</a>-->
<!--    <a href="http://www.4399.com/">点我去4399</a>-->
<!--    <a href="http://www.7k7k.com/">点我去7k7k</a>-->
<!--    <a href="http://www.baidu.com/">点我去baidu</a>-->
<!--     <a href="http://www.xiaomi.com/">点我去小米</a>-->
        <p>今天的夜色很美</p>
</body>

CSS选择器之伪元素选择器

通过css代码来操作标签的文本内容

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p:first-letter{
        font-size: 48px;
        color: red;
      }
      首字大写
      p:before{
          content:'xinima';
          color: red;
      }
      文本前面添加内容
      p:after{
          content:'xixihaha';
          color: red;
      }
      文本后面添加内容
    </style>
</head>
<body>
   <p>
      游戏  干饭  按摩  旅游
   </p>
</body>

伪元素选择器可以用在解决标签浮动所带来的的负面影响也可以用来做数据的防爬

CSS选择器优先级

“”"
当多个选择器查找到相同的标签修改不同的样式那么标签该听谁的
“”"
1.选择器相同引入位置不同
就近原则
2.选择器不同的情况
行内 > id选择器 > 类选择器 > 标签选择器
ps:自行查阅强制修改标签样式的操作 !important

字体样式

width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，行内标签的宽度由内容来决定

body {
    font-family:  "微软雅黑";
}
p {
    font-size: 16px;
}
p {
    font-weight:lighter;
}
p {
    color:red;
    color:rgb();
    color:#3e3e3e;
    color:rgba(1,1,1,0.5)
}
p {
    text-align:center;
}
a {
    text-decoration: none;
}
p {
    text-indent: 32px;
}

表格标签

<table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>jason</td>
                <td>123</td>
            </tr>
        </tbody>
</table>

表单标签

能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器

action属性用于控制数据的提交地址不写的话就是朝当前页面所在的地址提交 method属性用于控制请求的方式(get\post)

<form action="" method="post">
        <p>username:<input type="text"></p>
        <p>password:<input type="password"></p>
        <p>birthday:<input type="date"></p>
        <p>email:<input type="email"></p>
        <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
        </p>
        <p>hobby:
            <input type="checkbox" name="hobby">篮球
            <input type="checkbox" name="hobby">足球
            <input type="checkbox" name="hobby">双色球
        </p>
        <p>file:
            <input type="file">
        </p>
        <p>files:
            <input type="file" multiple>
        </p>
        <p>province:
            <select name="" id="">
                <option value="">上海</option>
                <option value="">北京</option>
                <option value="">深圳</option>
            </select>
        </p>
        <p>GF:
            <select name="" id="" multiple>
                <option value="">小明</option>
                <option value="">小波</option>
                <option value="">小冲</option>
                <option value="">小黄</option>
            </select>
        </p>
        <p>info:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
        <input type="submit" value="用户注册">
        <input type="reset" value="重置内容">
        <input type="button" value="普通按钮">
    </form>

怼怼哎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习02

2.儿子选择器两个选择器之间大于号隔开查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签。1.后代选择器: 两个选择器之间空格隔开查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签。form表单在朝后端发送数据的时候标签必须要有name 否则不会发送该标签的值。所有的标签除了有自己默认的属性之外还可以拥有自定义的任意属性。当多个选择器查找到相同的标签修改不同的样式那么标签该听谁的。当多个选择器查找到的标签需要调整相同的样式那么可以合并。...
复制链接

扫一扫