day023 html&css

最新推荐文章于 2024-04-16 08:28:02 发布

MustangYL

最新推荐文章于 2024-04-16 08:28:02 发布

阅读量109

点赞数

分类专栏： Java课堂笔记文章标签： html css

本文链接：https://blog.csdn.net/mustang_yl/article/details/115319799

版权

Java课堂笔记专栏收录该内容

48 篇文章 1 订阅

订阅专栏

1 Html其他标签

1.1 html的表单标签

HTML 表单用于搜集不同类型的用户输入。简单记就是可以让用户输入信息,获取到这些信息并提交到指定位置;

使用form标签表示表单;

Action:用于指定表单提交的路径;(就是表单的数据交给谁)

Enctype:用于指定表单的提交编码格式;(后面使用,用于文件上传)

Method:用于指定表达的提交方式;(后面使用,用于在服务器中获取表单的数据及乱码处理)

1.1.1 表单项--input(重点)

在表单中,可以收集用户信息的具体标签;例如:输入框,下拉框,多选框,单选框;

在表单项中使用input表示普通的表单项;具体类型有input标签的type属性决定;

Type=”具体值”;

具体值的可用范围:

button 代表一个按钮(需要我们自己绑定事件才有效果)

checkbox 代表一个多选框

file 代表一个文件上传项

hidden 代表一个隐藏域,可以保存我们程序员需要使用的数据

image 代表图片提交按钮

password 代表一个密码框

radio 代表一个单选框;注意,多个单选框的name属性值必须一致,才会认为是一组;

reset 重置按钮

submit 提交按钮(提交效果与image一样,样式不如image好看而已)

text 普通文本

扩展:

Date 可以自动添加一个日期插件;(谷歌浏览器可以使用)

所有表单项的通用属性:

1:name属性,用于将来表单提交的时候,作为参数名使用;必须加,如果不加,这个表单项的值将不会提交;

2:value属性,用于给表单项规定一个默认值;(多选框和单选框必加)

3:disabled=”disabled” 可以控制这个表单项无效,无效的表单项不会提交数据;

4:checked=”checked” 可以让单选框或多选框默认选中;

1.1.2 表单项--下拉框(重点)

可以让用户选择一个固定的信息;

使用select标签表示.,里面使用option标签表示下拉选项;

格式:

<select name="xueLi">
                <option value="">------请选择------</option>
                <option value="bs" selected="selected">------博士------</option>
                <option value="ss">------硕士------</option>
                <option value="bk">------本科------</option>
</select>

如果里面没有value提交的时候就直接提交元素体，写上value提交的时候就提交value值。

可选择的属性:

Multiple="multiple" 规定可选择多个选项。（使用的时候按住ctrl可以多选）

size ="数字" 规定下拉列表中可见选项的数目。

1.1.3 表单项--文本域

可以输入很多信息;

使用textarea表示文本域:

常用属性:

1.1.4 按钮标签--了解

直接使用button标签,可以也可以出现一个按钮标签,需要在按钮的元素体中添加文字,才会显示到按钮上;

<button >自定义按钮</button>

1.2 Html的div标签

Div是html的块标签,块的区域可大可小,完全取决于我们自定义,因此通常需要配合css样式才有效果;

2 CSS

2.1 css概述

Css是层叠样式表(英文全称：Cascading Style Sheets);

可以对html页面中的标签进行统一的样式控制,或个性化控制,也可以配合各种脚本语言,对html的样式进行控制;

2.2 css的语法规则

基本格式:

选择器{

属性名1:属性值1;

属性名2:属性值2;

...

}

选择器的作用就是选中页面上的html标签,让这些选中的标签使用我们编写的样式;

属性名是css中固定的一堆具体名称;

属性值也是css固定好的一些具体的值;

注意事项:

1: 选择器严格区分大小写;

2: 属性名和属性值不区分大小写;

3: 属性名和属性值之间使用冒号分割,多个键值对之间,使用分号分割,最后一个键值对可以省略分号,建议写上;

4: 属性名都是直接写,属性值如果本身代表的是一个值,由多个单词组成时,必须加引号,其他情况不能加引号;

5: css虽然也是一个编程语言,但是需要配合html才能执行,不能独立运行;

2.3 CSS与html结合的3种方式

1: 标签内样式:

在html的开头标签中,直接使用style="属性名1:属性值1;属性名2:属性值2;"

2: 文档内样式

在head标签中,使用style标签,即可独立的编写样式:

<style>

选择器{

属性名1:属性值1;

属性名2:属性值2;

...

}

</style>

3: 外部样式

(1):单独编写一个后缀名是.css的文件,在文件内,直接编写css代码即可

例如:

选择器{

属性名1:属性值1;

属性名2:属性值2;

...

}

(2):在html页面中使用<link rel="stylesheet" href="css文件位置" />标签引入已经编写好的css文件到页面中;

注意事项:

如果3种方式对同一个标签的样式控制出现冲突的时候,以就近原则为主;

标签内样式 > 文档内样式 > 外部样式

2.4 css的基本选择器(重点)

基本选择器有:

1:id选择器（不常用，因为以后用的JavaScript的使用，我们一般需要id唯一）

#ID的值{

属性名1:属性值1;

属性名2:属性值2;

...

}

2:标签选择器(元素选择器)

Html的标签名{

属性名1:属性值1;

属性名2:属性值2;

...

}

3:类选择器（常用）

.class的属性值{

属性名1:属性值1;

属性名2:属性值2;

...

}

2.5 Css的扩展选择器(知道)

1:根据标签的属性选择信息

基本选择器[标签的属性名=属性值]{

属性名1:属性值1;

属性名2:属性值2;

...

}

2:根据父标签下选择子标签

基本选择器A 其他选择器B{

属性名1:属性值1;

属性名2:属性值2;

}

意思是：在A选择器的内部选择B

2.6 CSS的属性(知道)

常用属性:

背景相关的:

background-color	设置元素的背景颜色。
background	在一个声明中设置所有的背景属性。

文本相关的:

color	设置文本的颜色。
text-align	规定文本的水平对齐方式。

字体相关的:

font-family	规定文本的字体系列。
font-size	规定文本的字体尺寸。

边框相关的:

border

在一个声明中设置所有的边框属性。

尺寸相关的:

width	设置元素的宽度。
height	设置元素高度。

特殊的用法:

Backgroud:url(“图片路径”) 可以使用图片作为背景

border:像素线型颜色

2.7 CSS对html标签的转换操作(了解)

Css中的display属性,可以将html的标签进行行与块的转换,也可以让标签隐藏;

取值:

Block 转成块

Inline 转成行

None 隐藏这个元素

2.8 Css浮动效果(了解)

浮动可以让元素从原始层次浮动到上一个层次,浮动的时候,也可以控制左右上下的元素等;

使用css的Float属性名可以完成浮动效果;

#d2{
                /*让div2向右侧浮动*/
                float: right;
                /*不希望我的右侧有内容*/
                clear: right;
}

2.9 CSS盒子模型(框模型)

可以通过padding-top,padding-left....控制具体方向的内边距,同理也可以控制外边距;

3 用户注册页面的案例

3.1 需求

写一个表单页面,使用css样式控制,具体的效果

3.2 技术分析

1:使用div作为最大的背景图片;

2:在大div中,写一个小div,作为表单的背景色;需要使用盒子模型调整距离

3:在小div中写form表单;

4:将表单的每一个表单项添加到表格的td中;

3.3 案例的代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .zuo{
                text-align: right;
            }
            #da{
                background: url("../img/regist_bg.jpg");
                width: 1300px;
                height: 600px;
                padding-top: 150px;
                padding-left: 450px;
            }
            #xiao{
                background-color: white;
                width: 400px;
                height: 300px;
                border: 5px solid chocolate;
            }
        </style>
    </head>
    <body>
        <div id="da">
            <div id="xiao">
                <table>
                    <form>
                        <tr>
                            <td colspan="2">会员注册    USER REGISTER</td>
                        </tr>
                        <tr>
                            <td class="zuo">用户名</td>
                            <td><input type="text" name="username" value="名字是啥" /> </td>
                        </tr>
                        <tr>
                            <td class="zuo">密码</td>
                            <td><input type="password" name="password"  /> </td>
                        </tr>
                        <tr>
                            <td class="zuo">确认密码</td>
                            <td><input type="password" name="repassword"  /> </td>
                        </tr>
                        <tr>
                            <td class="zuo">邮箱</td>
                            <td><input type="text" name="email"  value="填个邮箱吧"/> </td>
                        </tr>
                        <tr>
                            <td class="zuo">真实姓名</td>
                            <td><input type="text" name="name"  /> </td>
                        </tr>
                        <tr>
                            <td class="zuo">性别</td>
                            <td><input type="radio" name="sex"  value="man"/>男 
                                <input type="radio" name="sex"  value="woman"/>女
                                <input type="radio" name="sex"  value="nc" checked="checked"/>你猜
                            </td>
                        </tr>
                        <tr>
                            <td class="zuo">验证码</td>
                            <td><input type="text" name="code"  /><img src="../img/captcha.jhtml" /> </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 50px;">
                                <input type="submit" value="提交" />
                            </td>
                        </tr>
                    </form>
                </table>
            </div>
        </div>
    </body>
</html>