Java-HTML&CSS-第32节

最新推荐文章于 2024-01-09 20:49:39 发布

Xue__Feng

最新推荐文章于 2024-01-09 20:49:39 发布

阅读量77

点赞数

分类专栏： java-WEB 文章标签： html css java web

本文链接：https://blog.csdn.net/zuefeng/article/details/110443264

版权

java-WEB 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

学习目标：

掌握HTML的表单标签，能够熟练运用
了解基本的CSS概念
熟练使用CSS的各种使用方法

学习内容：

一、HTML标签：表单标签

1、表单

用于采集用户输入的数据，和服务器进行交互
form：用于定义表单，可以定义一个范围，范围代表采集用户数据的范围
- action：指定提交数据的URL
- method：指定提交方式
  - get：
    - 请求参数会在地址栏中显示，会封装在请求行中
    - URL（请求参数）长度有限制
    - 相对不安全
  - post：
    - 请求参数不会在地址栏中显示，会封装在请求体（HTTP协议）中
    - URL（请求参数）长度无限制
    - 相对安全
- 表单项中的数据要想被提交，必须指定其name属性
表单项标签
- input：可以通过type属性值，改变元素展示的形式
  - type属性：
    - text：文本输入框，默认值
      - placeholder：指定输入框的提示信息，输入内容时自动清空
    - password：密码输入框
    - radio：单选框
      - 要想让多个单选框实现单选的效果，则他们的name属性一样
      - 一般会给每一个单选框提供value属性，指定被选中后提交的值
      - checked属性，可以指定默认值
    - checkbox：复选框
      - 一般会给每一个复选框提供value属性，指定被选中后提交的值
      - checked属性，可以指定默认值
    - file：文件选择框
    - hidden：隐藏域，用于提交一些信息
    - color：拾色器
    - date：日期
    - datetime-local：日期加时间
    - email：校验邮箱地址
    - number：只能输入数字
    - 按钮
      - submit：提交表单
      - button：按钮
      - image：图片提交按钮
  - label：指定输入项的文字描述信息
    - label的for属性一般对应input的id属性值，点击label，自动跳转到
      对应文本输入框
- select：下拉列表
  - 子元素：option，指定列表项
- textarea：文本域
  - cols：指定列数，每一行有多少个字符
  - rows：指定行数，有多少行

二、CSS：页面美化和布局

1、概念

Casading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个HTML元素上，同时生效

2、好处

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

3、使用：与HTML结合

内联样式：在标签内用style属性指定CSS代码
内部样式：在head标签内定义style标签，style标签的标签体内容就是CSS代码
外部样式：定义CSS资源文件，在head标签内定义link标签，引入外部CSS资源文件
注意：
- 上面三种方式作用范围递增
- 一般不用第一种方式
- 第三种方式可以写成 @import “CSS文件路径”

4、CSS语法

格式
选择器 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
…
}
选择器：筛选具有相同特征的元素
注意：属性之间要用;隔开，最后一个属性后面可以省略;

5、选择器

基本选择器
- id选择器：选择具体的id属性值的元素 #id属性值 {}
- 元素选择器：选择具有相同标签名称的元素标签名称 {}
- 类选择器：选择具有相同class属性值的元素 .class属性值 {}
- 优先级顺序：id选择器>类选择器>元素选择器
扩展选择器
- 选择所有元素： * {}
- 并集选择器：选择器1，选择器2 {}
- 子选择器：筛选选择器1元素中的选择器2元素选择器1 选择器2 {}
- 父选择器：筛选选择器2的父元素选择器1 选择器1>选择器2 {}
- 属性选择器：选择元素名称，属性名=属性值的元素元素名称[属性名=“属性值”] {}
- 伪类选择器：选择一些元素具有的状态
  - 语法：元素：状态
    - link：初始化状态
    - hover：鼠标悬浮状态
    - active：正在访问状态
    - visited：访问过状态

6、属性

字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：字体对齐方式
- line-height：行高
背景
- background：设置背景，复合属性
边框
- border：设置边框，复合属性
尺寸
- width：宽度
- height：高度
盒子模型：控制布局
- margin：外边距
- padding：内边距
  - 默认情况下会影响盒子的大小
  - box-sizing：border-box；设置盒子的属性，让width与height就是最终盒子的大小
- float：浮动
  - left：左浮动
  - right：右浮动

学习产出：

1、表单学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <form action="#" method="post">
        <label>
            用户名：<input type="text" name="username"/>
        </label>
        <br>
        <label>
            密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password"/>
        </label>
        <br>
        <input type="submit" value="提交" />
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签:input</title>
</head>
<body>
    <form action="#" method="get">
        <label>用户名：
            <input type="text" name="username"/>
        </label><br>
        <label>密&nbsp;&nbsp;&nbsp;码：
            <input type="password" name="password"/>
        </label><br>
        <label>性别：
            <input type="radio" name="sex" value="male" checked="checked"/>：男
            <input type="radio" name="sex" value="female"/>：女
        </label><br>
        <label>爱好：
            <input type="checkbox" name="favor" value="basketball" />：篮球
            <input type="checkbox" name="favor" value="socket"/>：网球
            <input type="checkbox" name="favor" value="tennis"/>：羽毛球
        </label><br>
        <label>文件：
            <input type="file" name="file"/>
        </label><br>
        <label>隐藏域：
            <input type="hidden" name="hidden" value="aaa"/>
        </label><br>
        <label>拾色器：
            <input type="color" name="color"/>
        </label><br>
        <label>日期：
            <input type="date" name="date"/>
            <input type="datetime-local" name="datetime"/>
        </label><br>
        <label>邮箱：
            <input type="email" name="email"/>
        </label><br>
        <label>数字：
            <input type="number" name="num"/>
        </label><br>
        <label>按钮：<br>
            <input type="button" name="sub"/>：一般按钮<br>
            <input type="image" src="image/icon_1.jpg"/>：图片提交按钮<br>
            <input type="submit" value="提交" />：提交按钮<br>
        </label><br>
    </form>
</body>
</html>

2、CSS与HTML结合方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式</title>
</head>
<body>
    <div style="color: red;">
        Hello CSS!
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        Hello CSS!
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="style.css"/>
    <!--<style>-->
        <!--@import "style.css";-->
    <!--</style>-->
</head>
<body>
    <div>
        Hello CSS!
    </div>
</body>
</html>