HTML标签（表单标签）及CSS

最新推荐文章于 2024-10-10 22:24:37 发布

小孩与狗

最新推荐文章于 2024-10-10 22:24:37 发布

阅读量262

点赞数 1

分类专栏：前端文章标签： html css web

本文链接：https://blog.csdn.net/weixin_44722917/article/details/108224543

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML标签（表单标签）及CSS

HTML标签：表单标签

表单：

概念：用于采集用户输入的数据的。用于和服务器进行交互。

form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

属性：

action：指定提交数据的URL
method：指定提交方式（分类：一共7种，2种比较常用）
- get：
  - 请求参数会在地址栏中显示。会封装到请求行中。
  - 请求参数大小是有限制的。
  - 不太安全。
- post：
  - 请求参数不会再地址栏中显示。会封装在请求体中
  - 请求参数的大小没有限制。
  - 较为安全。

表单项中的数据要想被提交：必须指定其name属性

表单项标签：

input：可以通过type属性值，改变元素展示的样式

type：
- text：文本输入框，默认值
- password：密码输入框
- radio：单选框
  - 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
  - 一般会给每一个单选框提供value属性，指定其被选中后提交的值。
  - checked属性，可以指定默认值
- checkbox：复选框
  - 一般会给每一个复选框提供value属性，指定其被选中后提交的值
  - checked属性，可以指定默认值
- file：文件选择框
- hidden：隐藏域，用于提交一些信息。
- 按钮：
  - submit：提交按钮。可以提交表单
  - button：普通按钮
  - image：图片提交按钮
    - src属性指定图片的路径
  - reset：重置信息
placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信

label：指定输入项的文字描述信息

label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

select: 下拉列表

子元素：option，指定列表项

textarea：文本域

cols：指定列数，每一行有多少个字符
rows：默认多少行。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="travel.html" method="get">
    姓名：<input type="text" name="username" placeholder="用户名"/><br/>
    密码：<input type="password" name="pwd" placeholder="密码"/><br/>
    <input id="name" type="radio" name="sex" value="man" checked/><label for="name">男</label>
    <input type="radio" name="sex" value="woman"/>女 <br/>

    <input type="checkbox" name="hobby" value="basketball" checked/>篮球
    <input type="checkbox" name="hobby" value="football"/>足球
    <input type="checkbox" name="hobby" value="table tennis"/>乒乓球
    <input type="checkbox" name="hobby" value="badminton"/>羽毛球 <br/>
    头像：<input type="file" name="tx"/><br>
    <select name="pro" >
        <option>---请选择---</option>
        <option value="0">山西省</option>
        <option value="1">山东省</option>
        <option value="2">湖南省</option>
        <option value="3">湖北省</option>
    </select><br/>
    <textarea name="introduce" cols="10" rows="5"></textarea>
    <audio controls>
        <source src="mojito.flac" type="audio/flac"/>
    </audio>
    <input type="hidden" value="aaa" name="bbb"/>
    <input type="submit" value="登录"/>
    <input type="button" value="点我"/>
    <input type="image" src="image/hot_tel.jpg"/>
    <input type="reset" value="重置"/>
</form>
</body>
</html>

CSS：页面美化和布局控制

概念： Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

好处：

功能强大
将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率

CSS的使用：CSS与html结合方式

内联样式
- 在标签内使用style属性指定css代码
- ```
<div style="color: brown;font-size: 20px">hello css</div>
```
- 代码冗余且未解耦
内部样式
- 在head标签内，定义style标签，style标签的标签体内容就是css代码
- ```
<style>
        div{
            color: aqua;
            font-size: 30px;
        }
</style>
<div>hello java</div>
```
- 解耦但未彻底解耦，仍在同一个html文件中且只能用于本文件。

外部样式

定义css资源文件。

在head标签内，定义link标签，引入外部的资源文件

index.css中
div{
    color: blue;
    font-size: 50px;
}
<link rel="stylesheet" href="../css/index.css">
<div>hello java</div>
<style>
	@import "../css/index.css";
</style>

css作用范围：内联样式<内部样式<外部样式
同时使用内联样式、内部样式、外部样式时采取就近原则。

css语法：

格式：

选择器 {
	属性名1:属性值1;
	属性名2:属性值2;
	...
}

选择器：筛选具有相似特征的元素

每一对属性需要使用；隔开，最后一对属性可以不加；

选择器：筛选具有相似特征的元素

基础选择器
- id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
  - 语法：#id属性值{}
- 元素选择器：选择具有相同标签名称的元素
  - 语法：标签名称{}
  - 注意：id选择器优先级高于元素选择器
- 类选择器：选择具有相同的class属性值的元素。
  - 语法：.class属性值{}
  - 注意：类选择器选择器优先级高于元素选择器 id选择器优先级高于类选择器
- id>类>元素
扩展选择器
- 选择所有元素：
  - 语法： *{}
- 并集选择器：
  - 选择器1,选择器2{}
- 子选择器：筛选选择器1元素下的选择器2元素
  - 语法：选择器1 选择器2{}
- 父选择器：筛选选择器2的父元素选择器1
  - 语法：选择器1 > 选择器2{}
- 属性选择器：选择元素名称，属性名=属性值的元素
  - 语法：元素名称[属性名=“属性值”]{}
  - 属性名可以自定义
- 伪类选择器：选择一些元素具有的状态(操作)
- 语法：元素:状态{}
- 如：
  - 状态：
  - link：初始化的状态
  - visited：被访问过的状态
  - active：正在访问状态
  - hover：鼠标悬浮状态

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        /*div{
            color: #FFD026;
        }*/
        #div2{
            color: beige;
        }
        .cls1{
            color: #A6A6A6;
        }

        /*#div1,#div2{*/
            /*color: aqua;*/
        /*}*/

    </style>
</head>
<body>
    <div id="div1">sibd</div>
    <div id="div2" class="cls1">ccc</div>
    
    <p class="cls1">aaa</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        /**{
            color: brown;
        }*/
        /*div,a{
            color: #FFD026;
        }*/
        /*div p{
            color: aqua;
        }
        div font{
            color: red;
        }
        div > p{
            color: forestgreen;
        }*/
        input[aaa="bbb"]{
            border: 5px solid;
        }

        a:link{
            color: pink;
        }

        a:hover{
            color: green;
        }

        a:active{
            color: yellow;
        }

        a:visited{
            color: red;
        }


    </style>
</head>
<body>
<div>
    <font>1213</font>
    <p>saa</p>
</div>
<p>aaas</p>

<div>aaa</div>
<input aaa="bbb" type="text" >
<input aaa="bbbaaa" type="password" >


<br>    <br>    <br>

<a href="http://www.baidu.com">欢迎</a>

</body>
</html>

属性

字体、文本

font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高
border：边框，例：border: 5px double red;
- solid：实线
- dashed：虚线
- double：双线
- dotted：点

背景

background：
例：background: url("…/img/gg.jpg")no-repeat center;
no-repeat：不重复
center：居中

边框

border：设置边框，符合属性

尺寸

width：宽度
height：高度

盒子模型：控制布局

margin：外边距
margin-bottom\margin-left\margin-right\margin-top
padding：内边距
padding-bottom\padding-left\padding-right\padding-top
- 默认情况下内边距会影响整个盒子的大小
- box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小；content-box；默认

float：浮动

left
right

行内标签不能设置高度和宽度，块标签可以。

行内块：既有块标签的特点又有行内标签的特点。

标准文档流：按照从上到下从左到右的顺序，按照行内标签和块标签的特点进行排布。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS的属性</title>
    <style>
        /*p{
            font-size: 50px;
            color: #FFD026;
            text-align: center;
            line-height: 50px;
            border: 5px double red;
        }*/
        div{
            box-sizing: content-box;
            margin:50px;
            padding:20px ;
            border: 1px solid red;
            height: 200px;
            width: 200px;
            background: url("../img/gg.jpg")no-repeat center;
        }
        #div1{
            float: right;
        }

    </style>
</head>
<body>
<p>sibd</p>
<div id="div1">
    chenguanxi
</div>
<div id="div2">
    chenguanxi
</div>
</body>
</html>