JavaEE的三层框架

HTML 和 CSS

1.HTML概述

###1.软件的结构

###2.前端开发流程

###3.网页的组成部分

###4.HTML介绍

5.创建HTML文件

6.HTML文件的编写规范

7.标签介绍

演示1：背景颜色加弹窗

演示2：换行（单标签br的作用）

2.HTML标签

1.标签语法

2.font标签

3.特殊字符

###4.标题标签

5.超链接

6.列表标签

7.img标签

8.表格标签

9.表格的跨行跨列

10.iframe 框架标签

11.表单标签

标签	作用
text	文本框
password	密码框，隐藏输入
radio	选择框，单选name属性可以对其进行分组,同一组只能选一个 checked="checked"表示默认选中
checkbox	多选打钩框
reset	重置按钮 value属性修改按钮上的文本
submit	提交按钮 value属性修改按钮上的文本
button	就是个按钮 value属性修改按钮上的文本
file	文件上传域
hidden	隐藏域，也会提交，但是用户看不见

标签	作用
select	下拉选项
option	标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea	表示多行文本输入框 （起始标签和结束标签中的内容是默认值） rows 属性设置可以显示几行的高度 cols 属性设置每行可以显示几个字符宽度
form	标签就是表单

<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td> 用户名称：</td>
            <td>
                <input type="text" value="默认值"/>
            </td>
        </tr>
        <tr>
            <td> 用户密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
         <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex"/>男
                <input type="radio" name="sex" checked="checked"  />女
            </td>
        </tr>
         <tr>
            <td> 兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked" />Java
                <input type="checkbox" />JavaScript
                <input type="checkbox" />C++
            </td>
        </tr>
         <tr>
            <td>国籍：</td>
            <td>
                <select>
                    <option>--请选择国籍--</option>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>
         <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">我才是默认值</textarea></td>
        </tr>
         <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>

12.表单的提交

​

Get请求的链接：

http://localhost:8080/?
action=login
&username=111
&password=222
&sex=boy
&hobby=java&hobby=js
&country=cn
&desc=asdsadas

post的请求链接：

http://localhost:8080/

<form action="http://localhost:8080" method="post">
    <input type="hidden" name="action" value="login" />
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td> 用户名称：</td>
            <td>
                <input type="text" name="username" value="默认值"/>
            </td>
        </tr>
        <tr>
            <td> 用户密码：</td>
            <td><input type="password" name="password" value="abc"/></td>
        </tr>
         <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" value="boy"/>男
                <input type="radio" name="sex" checked="checked" value="girl" />女
            </td>
        </tr>
         <tr>
            <td> 兴趣爱好：</td>
            <td>
                <input name="hobby" type="checkbox" checked="checked" value="java"/>Java
                <input name="hobby" type="checkbox" value="js"/>JavaScript
                <input name="hobby" type="checkbox" value="cpp"/>C++
            </td>
        </tr>
         <tr>
            <td>国籍：</td>
            <td>
                <select name="country">
                    <option value="none">--请选择国籍--</option>
                    <option value="cn" selected="selected">中国</option>
                    <option value="usa">美国</option>
                    <option value="jp">小日本</option>
                </select>
            </td>
        </tr>
         <tr>
            <td>自我评价：</td>
            <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea></td>
        </tr>
         <tr>
            <td><input type="reset" /></td>
            <td align="center"><input type="submit"/></td>
        </tr>
    </table>
</form>

13.其他标签

3.CSS 概述

1.介绍

2.语法规则

3.CSS和HTML的结合方式1

4.结合方式2

5.结合方式3

6.标签名选择器

7.id选择器

8.class类型选择器

###9.组合选择器

10.CSS的常用样式

<head>
    <meta charset="UTF-8">
    <title>06-css常用样式.html</title>
    <style type="text/css">

        div{
            color: red;
            border: 1px yellow solid;
            width: 300px;
            height: 300px;
            background-color: green;
            font-size: 30px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        table{
            border: 1px red solid;
            border-collapse: collapse;
        }

        td{
            border: 1px red solid;
        }

        a{
            text-decoration: none;

        }

        ul{
            list-style: none;
        }

    </style>
</head>