javaweb_day1_HTML&amp;CSS

<h1></h1>:标题标签 <hr />:水平线

<font size=”2” color=”” ></font>字体标签 <b><b />粗体 <i><i />：斜体

<p ></p>：段落标签 <br />：换行 <center></center>:文本居中

图片标签<img src=”” width=”10px” height=”” alt=”” /> alt：图片无法显示是替代文本

列表标签：<ul><ol>

<ul type=””>无序列表 disc：实心圆 square：方块 circle：空心圆

</ul>

<ol type=””>有序列表 A a i I 1

</ol>

空格   版权©: &copy

javaweb_day1_HTML&CSS

超链接标签<a href=”” target=””> _blank _self

语义化标签:html5中为了提高程序的可读性,提供了一些标签

页面:<header></header>

页脚:<footer></footer>

表格标签<table> <tr> <td>

bgcolor表示背景颜色

cellspacing表示边与边框的距离

cellpadding表示边框与内容的距离

<tr >

<th></th> 表头

<td colspan=”” rowspan=””></td> 跨行跨列的操作

</tr>

<table>

<tr >

</tr>

<table>

<caption></caption>:表格标题

<thead></thead>:表格的头部分

<tbody></tbody>:表格的体部分

<tfoot></tfoot>:表格的脚部分

相对路径：同级./ 上一级../

网站后台<frameset cols=”25%,*”> <frame src=””> <frame name=””> name通常和超链接的target属性来确定最终的显示位置注意：要将body标签去掉

cols:进行垂直切割划分 rows:进行水平切割划分

表单标签：

隐藏字段<input type=”hidden” name=”” value="">

用户名：<input type=”text” name=”username” maxlength=”5” placeholder=”请输入用户名” required=“required” readonly=”readonly”/> <br/>

placeholder用户提示信息

密码：<input type=”password” name=“password” /> <br/>

确认密码：<input type=”password” name=”repassword” /> <br/>

性别：<input type=”radio” name=”sex” value=”男” checkd=“checked” />男

爱好：<input type=”checkbox” name=”hobby” value=”打电动” />打电动

头像：<input type=”file” name=”file”/>

籍贯：<select name=”province”>

</selectd>

自我介绍：<textarea name=”zwjs” cols="20" cols="5" >

</textarea>

<input type=”submit” value=“注册”>注册 <input type=”reset” value=重置>重置

H5特有的标签

效果:

javaweb_day1_HTML&CSS

邮箱:<input type="email" name="email"> 数字:<input type="number" name="age">

</form>

单选框下拉框和复选框提交到后台是value,别的提交到后台是name

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

lable的for属性一般会和input的id属性值对应

css的使用

background:url("img/logo.jpg") no-repeat center

选择器{

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

}

标签选择器：

元素选择器：所有的

类选择器 . 部分的

id选择器 # 单个的

层级选择器:

属性选择器:

javaweb_day1_HTML&CSS

css引入方式

内部引入：<style> </style> 在head标签里面定义style标签

行内引入：<div style="font-size:40px;color:blue;"> 注意一个是冒号一个是分号

外部引入：<link rel="stylesheet" href="style.css" target="_blank" rel="external nofollow" type="text/css"></link> 在head标签内,定义link标签,引入外部的资源文件

javaweb_day1_HTML&CSS

让div水平居中 margin:auto

设置边框圆角 border-radius

清除浮动

#son1{

float:left;

}

#clear{

clear:both;

}

<div id=”son1”>aaaaaaaaaaaaa</div>

<div id=”clrear”>bbbbbbbbbbb</div>

</div>

div+css布局：

padding margin

ul li { display ：inline } 显示一行

超链接的下划线：a{text-decoration：none}

定位技术：

#son1{

position: relative;(相对于原来的位置)

position: absolute

left:60%;

}

<div id=”son1”>aaaaaaaaaaaaa</div>

<div id=”clrear”>bbbbbbbbbbb</div>

</div>

相对定位没有脱离文本流（意思就是它本来的位置还在那里）

绝对定位脱离文本流（后面的会补上来）

绝对定位的时候看他的爸爸有没有设置相对定位，如果有，那就是相对于爸爸绝对定位，若没有，则相对于浏览器边框定位

margin：0px 10px 5px：上边框0，下边框5px，左右边框都是10px

margin：0px 1px 2px 3px：上右下左

body{

margin：0px；

padding：0px；

font-size：12px；设置整个网页字体

color： yellow；设置网页字体颜色

overflow：hidden；去掉页面滚动条

text-align：center；

border：1px solid red；

}

#id：hover {

background-color：red；鼠标上去，改变div背景

cursor：hand 鼠标上去，变成手

}

练习:

1.实现效果

javaweb_day1_HTML&CSS

2.实现效果

javaweb_day1_HTML&CSS

3.实现效果

javaweb_day1_HTML&CSS

4.使用div和css实现此效果

javaweb_day1_HTML&CSS

5.使用元素选择器类选择器 id选择器层级选择器元素选择器实现此效果

javaweb_day1_HTML&CSS

6.使用浮动来实现

javaweb_day1_HTML&CSS

7.删除浮动效果

javaweb_day1_HTML&CSS

练习1:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>表格跨行跨列操作</title>
</head>

<body>
 
<table  width="200px" height="100px" cellspacing="0px" bgcolor="red">
    <tr>
        <td colspan="2" align="center">11</td>
        <td bgcolor="blue">13</td>
        <td>14</td>
    </tr>
    <tr>
        <td>21</td>
        <td colspan="2" rowspan="2" align="center">22</td>
        <td>24</td>
    </tr>
    <tr>
        <td>31</td>
        <td rowspan="2" align="center">34</td>
    </tr>
    <tr>
        <td>41</td>
        <td>42</td>
        <td>43</td>
    </tr>

</table>
  
</body>

</html>

练习2:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<frameset rows="20%,*">
    <frame src="top.html"></frame>

    <frameset cols="20%,*">
        <frame src=left.html></frame>
        <frame name=right></frame>
    </frameset>
</frameset>
</html>



top.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
 <h1>欢迎XXX进入后台管理系统</h1>

  
</body>

</html>


left.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
    <ul>
       <a href="right.html" target="_blank" rel="external nofollow"  target="right">会员管理</a><br/><br/>
       <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >品牌管理</a><br/><br/>
        <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >商品管理</a><br/><br/>
        <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >分类管理</a><br/><br/>
    </ul>

  
</body>

</html>

right.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
 我是右边的信息

  
</body>

</html>

练习3:

<html>
    <head>
        <title>表单注册</title>
    </head>
    <body>
        <table  align="center" width="1300px" height="800px" cellspacing="0px" cellpadding="0px">
            <tr>
                <td  background="./img/regist_bg.jpg" height="800px">
                    <form action="#" method="GET">
                        <table  align="center" width="1000px" height="600px" cellspacing="0px" cellpadding="0px">
                                <tr>
                                    <td colspan="2" height="60px">
                                        <font size="5" color="blue" >会员注册</font> &nbsp;&nbsp;&nbsp;&nbsp;   USER REGISTER
                                    </td>
                                </tr>
                                <tr>
                                    <td>用户名</td>
                                    <td ><input type="text" name="username"></td>
                                </tr>
            
                                <tr>
                                    <td>密码</td>
                                    <td ><input type="password" name="password"></td>
                                </tr>
                                <tr>
                                    <td>确认密码</td>
                                    <td ><input type="password" name="repassword"></td>
                                </tr>
                                <tr>
                                    <td>Email</td>
                                    <td><input type="text" name="email"></td>
                                </tr>
                                <tr>
                                    <td>姓名</td>
                                    <td><input type="text" name="name"></td>
                                </tr>
                                <tr>
                                    <td>性别</td>
                                    <td>
                                        <input type="radio" name="sex" value="男" checked="checked">男
                                        <input type="radio" name="sex" value="女">女
                                    </td>
                                </tr>
                                <tr>
                                        <td>出生日期</td>
                                        <td><input type="text" name="birthday"></td>
                                    </tr>
                                    <tr>
                                        <td>验证码</td>
                                        <td>
                                            <input type="text" name="yanzhengma"> &nbsp;&nbsp;&nbsp;&nbsp;
                                            <img src="./img/yanzhengma.png">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <input type="submit" value="注册">
                                        </td>
                                    </tr>
                        </table>
                    </form>
                </td>
            </tr>
        </table>
    </body>

</html>

练习4:

<html>
    <head>
        <title>div的练习</title>
        <style>
            div{
               border: 1px solid red;
               width: 200px;
               height: 200px; 
               font-size: 26px
            }
        </style>
    </head>
    <body>
        <div>
            div结合css练习
        </div>
    </body>

</html>

练习5:

<html>
    <head>
        <title>div的练习</title>
        <style>
            div{
               font-size: 26px;
               color:red;
            }
            .hh{
                font-size: 26px;
               color:gray;
            }
            #cainiao{
                font-size: 26px;
                color:yellow;
            }
            p span{
                font-size: 26px;
                color:green;
            }
            input[type='text']{
                background: red;
            }

            input[type='password']{
                background: blue;
            }

        </style>
    </head>
    <body>
        <div>
            我是菜鸟           11
        </div>
       <div class="hh">
            我是菜鸟           21
        </div>
        <div id="cainiao">
            我是菜鸟           31
        </div>
        <div>
            我是菜鸟           41
        </div>
        <div class="hh">
            我是菜鸟           51
        </div>
        
        <p>
            <span>
                    我是菜鸟           61
            </span>
        </p>
       
        用户名<input type="text" name="username"><br>
        密码<input type="password" name="password">

    </body>

</html>

练习6


<html>
    <head>
        <title>浮动</title>
        <style>
            #one{
                border: 1px solid red;
                width: 300px;
                height: 200px;
                float:right;
            }
            #two{
                border: 1px solid green;
                width: 300px;
                height: 200px;
                float:right;
            }
            #three{
                border: 1px solid blue;
                width: 300px;
                height: 200px;
            }
        </style>
    </head>
    <body>
       <div id="one">
           浮动1
       </div>
       <div id="two">
            浮动2
        </div>
        <div id="three">
            浮动3
        </div>
           
    </body>

</html>

<html>
    <head>
        <title>删除浮动</title>
        <style>
            #one{
                border: 1px solid red;
                width: 300px;
                height: 200px;
                float:right;
            }
            #two{
                border: 1px solid green;
                width: 300px;
                height: 200px;
                float:right;
            }
            #three{
                border: 1px solid blue;
                width: 300px;
                height: 200px;
            }

              /* 清除浮动 */
            #clear{
                border: 1px solid green;
                width: 300px;
                height: 200px;
                clear: both;
            }
        </style>
    </head>
    <body>
       <div id="one">
           浮动1
       </div>
       <div id="two">
            浮动2
        </div>
        <div id="clear">
                删除浮动
        </div>

        <div id="three">
            浮动3
        </div>
           
    </body>

</html>

javaweb_day1_HTML&CSS

清除浮动

继续阅读

Java知识复习（常用类）

为什么静态方法不能调用非静态方法？

Java复习线程程序、进程、线程的概念Java中多线程的创建和启动线程的生命周期线程的同步与死锁线程的通信生产者消费者问题

Java复习日记：第五章：一维数组与多维数组一维数组多位数组

java复习第五天

java大合集复习（一）

关于面向过程和面向对象

java基础易错、难理解、易混淆知识点复习

java界面,BorderLayout,GridLayout,FlowLayoutBorderLayout类GridLayout类FlowLayout类

Java知识复习（集合）

Java复习笔记之线程问题

java复习——单例模式（线程安全）

Java复习——对象流、序列化

Java复习ELSE——反射1.0.1反射是框架设计的灵魂一、反射的概述二、查看Class类在java中的api详解（1.7的API）三、反射的使用（这里使用Student类做演示）

抽象类复习接口复习学习内容：学习时间：笔记：

java面试官的牢骚

javaweb_day1_HTML&amp;CSS

清除浮动

继续阅读

javaweb_day1_HTML&CSS