JavaWeb：CSS (快速入门）

最新推荐文章于 2021-12-13 23:44:46 发布

Clearlast .

最新推荐文章于 2021-12-13 23:44:46 发布

阅读量216

点赞数

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

本文链接：https://blog.csdn.net/qq_44785877/article/details/110917365

版权

JavaWeb 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

HTML标签：表单标签

表单

1.什么是表单

概念：

采集用户输入的数据的，比如在注册界面的时候，输入账号密码。
用于和服务器进行交互。

2.用什么定义表单？

定义：

使用form来定义表单。可以定义一个范围，范围内代表采集用户数据的范围。
注意：出了form这个范围内，将无法采集到用户输入的数据，也就是说用户输入的数据不会传送到服务器上。

3.表单有哪些属性？

属性：

action：指定提交数据的URL。
method：指定提交的方式,（表示用户输入的数据以什么方式提交到服务器）
- 分类：一共有7种，2种比较常用。
  - get：
    - 1.请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
    - 2.请求参数大小是有限制的。
    - 3.不太安全。
  - post：
    - 1.请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
    - 2.请求参数的大小没有限制。
    - 3.较为安全。

注意：表单项中的数据要想被提交：必须指定其name属性（重点注意事项）

4.什么是表单项标签

概念：

我们知道了表单是采集用户输入的数据的。那么表单项就是表单中的每一项，比如：注册页面时，输入用户名一栏是一个表单项标签，输入密码一栏又是一个表单项标签。

5.表单项标签

input：可以通过type属性值，改变元素展示的样式
- 1.type属性：
  - text：文本输入框，默认值
    - placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
  - password：密码输入框
  - radio:单选框
    - 注意：
      1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
      2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
      3. checked属性，可以指定默认值
  - checkbox：复选框
    - 注意：
      1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
      2. checked属性，可以指定默认值
  - file：文件选择框
  - hidden：隐藏域，用于提交一些信息。
  - 按钮：
    * submit：提交按钮。可以提交表单
    * button：普通按钮
    * image：图片提交按钮（src属性指定图片的路径）
- label：指定输入项的文字描述信息（使用方法：用label标签将描述的信息包住，给一个id属性值）
  - 注意：label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

示例代码：

 <label for="username">用户名：</label><input name="username" id="username" placeholder="请输入用户名"><br>

2.select: 下拉列表
```
子元素：option，指定列表项
```
3.textarea：文本域
- cols：指定列数，每一行有多少个字符
- rows：默认多少行。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>

    <form>
        <label for="username">用户名：</label><input name="username" id="username" placeholder="请输入用户名"><br>
        <label for="password">密码：</label><input name="password" id="password" placeholder="请输入密码"><br>

        性别：<input type="radio" name="gender" value="man"> 男
        <input type="radio" name="gender" value="women" checked> 女
        <br>
        爱好：<input type="checkbox" name="hobby" value="shopping" checked>逛街
            <input type="checkbox" name="hobby" value="java">编程
            <input type="checkbox" name="hobby" value="dancing">舞蹈
        <br>
        <input type="submit" value="登录">

        图片：<input type="file" name="file"><br>
        隐藏域：<input type="hidden" value="aaa" name="id" >
        <br>
        取色器:<input type="color" name="color"><br>
        生日：<input type="date" name="birthday"><br>
        生日：<input type="datetime-local" name="birthday"><br>
        邮箱：<input type="email" name="email"><br>
        年龄:<input type="number" name="age"><br>
        <br>

        省份:<select name="province">
                <option value="">---请选择---</option>
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected>广州</option>

            </select>
        <br>

        自我描述：
        <textarea cols="20" rows="5"></textarea>
        <br>

        <input type="submit" value="登录">
        <input type="button" value="一个按钮"><br>
        <input type="image" src="../img/regbtn.jpg">
        <br>

    </form>

</body>
</html>

效果图：

1.label标签解释：label标签对应效果图中用户名输入框中的那段描述的提示文字，当你光标点击进去，输入数据，提示文字就会自动消失，这就是label标签的作用。
2.隐藏域hidden属性解释：它会以隐藏的方式提交一些状态信息到服务器。
3.取色器color属性，就是可以使用一个取色器，进行取色的工具标签。
4.number属性，只可以输入数字，不可输入其他字符或者特殊字符。
5.date属性，可以让用户选择年月日
6.datetime-local属性，可以让用户选择年月日时分。

在这里插入图片描述

CSS：页面美化和布局控制

1.什么是CSS

概念： Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效

2.CSS的好处

好处：
1. 功能强大
2. 将内容展示和样式控制分离
  - 降低耦合度。解耦（HTML和CSS的独立，可以使页面高内聚，低耦合。）
  - 让分工协作更容易（一个写HTML，一个写CSS，分工合作，然后合并。）
  - 提高开发效率（同上，页面的框架和效果分离分工来做，提高效率。）

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

style标签可以放在任何位置，但是一般放在head标签内部。

1. 内联样式

	 * 在标签内使用style属性指定css代码
	 * 如：

<div style="color:red;">hello css</div>

2. 内部样式

	* 在head标签内，定义style标签，style标签的标签体内容就是css代码
	* 如：

		<style>
	        div{
	            color:blue;
	        }
	
	    </style>
		<div>hello css</div>

3. 外部样式

	1. 定义css资源文件。
	2. 在head标签内，定义link标签，引入外部的资源文件
	* 如：

    		* a.css文件：
				div{
				    color:green;
				}
			<link rel="stylesheet" href="css/a.css">
			<div>hello css</div>
			<div>hello css</div>

注意：
- 1,2,3种方式 css作用范围越来越大
- 1方式不常用，后期常用2,3
- 第3种格式可以写为：

<style>
	@import "css/a.css";
</style>

4.css语法：

格式：

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

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

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

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

分类：
基础选择器
1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
  * 语法：#id属性值{}
2. 元素选择器：选择具有相同标签名称的元素
  * 语法：标签名称{}
  * 注意：id选择器优先级高于元素选择器
3. 类选择器：选择具有相同的class属性值的元素。
  * 语法：.class属性值{}
  * 注意：类选择器选择器优先级高于元素选择器
扩展选择器

选择所有元素：
* 语法： *{}
并集选择器：
* 选择器1,选择器2{}
子选择器：筛选选择器1元素下的选择器2元素
* 语法：选择器1 选择器2{}
父选择器：筛选选择器2的父元素选择器1
* 语法：选择器1 > 选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素
* 语法：元素名称[属性名=“属性值”]{}
伪类选择器：选择一些元素具有的状态
* 语法：元素:状态{}
* 如： a:link{…}
状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态

6.属性

1.字体、文本

font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高

2.背景

background：

3.边框

border：设置边框，符合属性

4.尺寸

width：宽度
height：高度

5.盒子模型：控制布局

margin：外边距（两个盒子之间的距离）
padding：内边距（盒子边缘和内容的距离）
- 默认情况下内边距会影响整个盒子的大小
- box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
float：浮动
- left
- right
  （当想让下方的元素浮动到上面元素的右边，那上方的元素也要加浮动）

Clearlast .

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb：CSS (快速入门）

HTML标签：表单标签表单1.什么是表单概念：采集用户输入的数据的，比如在注册界面的时候，输入账号密码。用于和服务器进行交互。2.用什么定义表单？定义：使用form来定义表单。可以定义一个范围，范围内代表采集用户数据的范围。注意：出了form这个范围内，将无法采集到用户输入的数据，也就是说用户输入的数据不会传送到服务器上。3.表单有哪些属性？属性：action：指定提交数据的URL。method：指定提交的方式,（表示用户输入的数据以什么方式提交到服务器）分类：一共有
复制链接

扫一扫

专栏目录