首页 > Web开发 > 详细

CSS

时间:2019-11-14 00:54:27      阅读:92      评论:0      收藏:0      [点我收藏+]

表单

form> input|label|button|textarea|select

form表单属性

属性:action

值:url

含义:指定一个表单处理目标URL,表单数据将被提交到该URL地址的处理程序。如果该属性值为空,则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段,甚至是脚本代码

属性:method

值:get或post

含义: 将表单数据提交到http服务器的方法,可能值有两个:get和post

属性:enctype

值: application/x-www-form-urlencoded

含义: 指定表单数据的编码类型,此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件(input type=“file”),那么这个属性值必须设为multipart/form-data ,不对字符进行编码

input标签

input属性大概介绍:

  • type:按钮的属性
  • id:标识
  • name:与后端交互的key
  • values:给后端的值,如果没有name则没法给到后端

案例介绍

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单标签</title>
</head>
<body>
    <!--1、form的作用:完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
    <form action="">
        <p>
            <!--label作为input的文本解释标签,for绑定id-->
            <!--value属性是表单标签的内容,就是提交给后台的-->
            <!--name是提交给后台的key,value是值-->
            <!--placeholder是文本占位符-->
            <!--type是决定标签的类型本质(input|button)-->
            <!--multiple,checked布尔类型属性,不需要写值,multiple多选 checked默认激活-->
            <label for="username">账号:</label>
            <input id="username" type="text" value="Owen" name="usr">
        </p>
        <p>
            <label for="password">密码:</label>
            <input id="password" type="password" placeholder="请输入密码" name="pwd">
        </p>
        <p>
            <input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
        </p>
        <p>
            <input type="file" name="file" multiple>
        </p>
        <p>
            男<input type="radio" value="male" name="sex" checked>
            女<input type="radio" value="female" name="sex">
        </p>
        <p>
            男<input type="checkbox" value="male" name="hobby" checked>
            女<input type="checkbox" value="female" name="hobby" checked>
            哇塞<input type="checkbox" value="other" name="hobby">
        </p>
        <p>
            <button type="button">普通按钮</button>
            <button type="reset">重置按钮</button>
            <button type="submit">提交按钮</button>
        </p>
        <p>
            <textarea cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="button" value="按钮" />
            <input type="reset" value="重置" />
            <input type="submit" value="登录" />
        </p>
    </form>
</body>
</html>

input标签type属性

type属性 空间名称 对应代码
text 单行文本输入框 <input type=‘text‘>
password 密码输入框 <input type=‘password‘>
checkbox 复选框 <input type=‘checkbox checked=‘checked>
radio 单选框 <input type="radio">
submit 提交按钮 <input type=‘submit‘ value=‘提交‘>
reset 重置按钮 <input type=‘reset‘ value=‘重置‘>
button 普通按钮 <input type=‘button‘ value=‘普通按钮‘>
hidden 隐藏按钮 <input type="hidden" value=“隐藏按钮”>
file 文本选择框 <input type="file">

select标签(下拉列表)

<form id="form1" name="form1" method="post" action="">
    <select name="city" id="city">
        <option value="北京">北京</option>
        <option value="天津" selected="selected">天津</option>
        <option value="河北">河北</option>
        <option value="山东">山东</option>
        <option value="内蒙">内蒙</option>
    </select>
</form>

select属性

multiple : 布尔属性,设置后允许多选,否则只能选择一个
disabled : 禁用该下拉列表
selected : 首次显示时,为选中状态
value : 定义发往服务器的选项值

textarea标签

<form id="form1" name="form1" method="post" action="">
    <textarea cols=“宽度” rows=“高度” name=“名称”>
    默认内容
    </textarea>
</form>

textarea属性

属性 属性值 说明
name name 控件名称
rows number 设置多行文本框的显示行数(高度)
cols number 设置多行文本框的显示列数(宽度)
disabled disabled 布尔属性,设置当前文本框为禁用状态

label标签

<form id="form1" name="form1" method="post" action="">
    <label for="username">用户名</label>
    <input type="text" name="username" id="username" />
</form>

label属性

label元素不会向用户呈现任何特殊效果
<label> 标签的 for 属性应当与相关元素的 id 属性相同
结合CSS可以控制表单文本或控件对齐,美化表单

button标签

只是个简单的按钮

单标签

  • br:换行
  • hr:分割线
  • 表单使用的标签
  • img:图片标签

div标签

div标签自带换行,主要是用来网页大体的分区框架的划分

注意

  • html中不区分大小写
  • 如果你写的显示内容没有写在body内,浏览器解析后还是会默认把内容丢到body内

二、CSS

1. CSS介绍及语法

CSS(层叠样式表)可以控制HTML标签样式。

语法结构为 :选择器 {属性1:属性值1;属性2:属性值2}

2. CSS注释

/*单行注释*/

    /*
    多行注释1
    多行注释2
    */
        
通常我们在写css的时候 都会单独写一个css文件 里面只有css代码 
    /*通用样式*/


    /*导航条样式*/


    /*轮播图样式*/

3. CSS的三种引入方式

  1. 通过link标签引入外部的CSS文件,如

    ``

  2. 在HTML页面head内 通过style标签直接编辑,如

  3. 直接在行内,即标签内部 通过style属性直接编辑,如

    我是红色的标签

三、CSS属性选择器

1. 基本选择器

1-1 元素选择器

/*元素 即标签,如p,span,h1..*/

p {color: "red";}

1-2 ID选择器

/*选择id时,要用 # 开头*/

#id1 {
  background-color: red;
}

1-3 class选择器

/*选择class时,要用 . 开头   多个属性可用空格分隔*/
.c1 .c2 {
  font-size: 14px;
}


/*p.c1 表示在p标签内的class值为c1的,颜色设置为红色*/

p.c1 {
  color: red;
}

1-4 通用选择器

/*HTML内部的所有标签设置字体颜色*/

* {
  color: white;
}

2. 组合选择器

2-1 后代选择器

/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

2-2 子代选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  color: green;
}

2-3 毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  color: green;
}

2-4 兄弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {
  color: green;
}

2-5 属性选择器

/*HTML标签可自定义属性*/

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

3. 伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

4. 伪元素选择器

/*控制<p>元素内容 第一个字*/
p:first-letter {
  font-size: 48px;
  color: red;
}

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 

四、选择器优先级

  1. 选择器相同的情况下,引入方式不同:
    遵循就近原则 谁离标签更近 就听谁的
  2. 选择器不同的情况下 :
    行内选择器 > id选择器(其次) > 类选择器(使用最频繁) > 元素选择器

CSS

原文:https://www.cnblogs.com/shin09/p/11854223.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!