@nextleaf 2018-08-29T23:33:26.000000Z 字数 6961 阅读 748

2018-08-28 工作日志

Java 工作日志 HTML CSS

复习继承多态接口抽象类等

表格

本地文件file:///E:/Workspaces/MyEclipse2016CI7/Java%E5%9F%BA%E7%A1%80/src/com/nl/html/htmlTag.html

<table cellspacing="20" cellpadding="20" border="20" align="center" width="350">
    <caption>OSI七层网络模型与TCP/IP四层概念模型</caption>
    <tbody>
    <tr>
        <th>
            <p>OSI七层网络模型</p>
        </th>
        <th>
            <p>TCP/IP四层概念模型 &nbsp;</p>
        </th>
        <th>
            <p>对应网络协议</p>
        </th>
    </tr>
    <tr>
        <td>
            <p>应用层（Application）</p>
        </td>
        <td rowspan="3">
            <p>应用层</p>
        </td>
        <td>
            <p>HTTP、TFTP,&nbsp;FTP, NFS, WAIS、SMTP</p>
        </td>
    </tr>
    <tr>
        <td>
            <p>表示层（Presentation）</p>
        </td>
        <td>
            <p>Telnet, Rlogin, SNMP, Gopher</p>
        </td>
    </tr>
    <tr>
        <td>
            <p>会话层（Session）</p>
        </td>
        <td>
            <p>SMTP, DNS</p>
        </td>
    </tr>
    <tr>
        <td>
            <p>传输层（Transport）</p>
        </td>
        <td>
            <p>传输层</p>
        </td>
        <td>
            <p>TCP, UDP</p>
        </td>
    </tr>
    <tr>
        <td>
            <p>网络层（Network）</p>
        </td>
        <td>
            <p>网络层</p>
        </td>
        <td>
            <p>IP, ICMP, ARP, RARP, AKP, UUCP</p>
        </td>
    </tr>
    <tr>
        <td>
            <p>数据链路层（Data Link）</p>
        </td>
        <td rowspan="2">
            <p>数据链路层</p>
        </td>
        <td>
            <p>FDDI, Ethernet, Arpanet, PDN, SLIP, PPP</p>
        </td>
    </tr>
    <tr>
        <td>
            <p>物理层（Physical）</p>
        </td>
        <td>
            <p>IEEE 802.1A, IEEE 802.2到IEEE 802.11</p>
        </td>
    </tr>
    </tbody>
</table>

表单

常用的Content-type的方式

application/x-javascript text/xml->xml数据
application/x-javascript->json对象
application/x-www-form-urlencoded->表单数据
application/json;charset=utf-8 -> json数据

表格表单

组合表单

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表格表单和组合表单</title>
    <script type="text/javascript" src=""></script>
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
        /*        td {
                    text-align: center;
                }*/
        a:hover {
            color: #00FF00;
        }
        a:active {
            /*点击但未释放的连接*/
            color: #FF0000;
        }
    </style>
</head>
<body>
<p><a href="../../html/htmlTag.html">html标签</a></p>
<form action="" method="post" id="form1">
    <!--table内,出现次序是：thead、tfoot、tbody,也可用 "frame" 属性来控制围绕表格的边框(box/above/below/hsides/vsides)-->
    <table cellpadding="5" cellspacing="5" width="550" frame="box">
        <caption><strong>表格表单(caption)</strong></caption>
        <tr>
            <th>项目</th>
            <th>值</th>
        </tr>
        <tr>
            <td><label for="username">用户名</label></td>
            <td><input type="text" name="username" id="username"></td>
        </tr>
        <tr>
            <td><label for="pd1">密码</label></td>
            <td><input type="password" id="pd1"></td>
        </tr>
        <tr>
            <td><label for="pd2">确认</label></td>
            <td><input type="password" name="password" id="pd2"></td>
        </tr>
        <tr>
            <td><label for="uemail">邮箱</label></td>
            <td><input type="email" name="uemail" id="uemail"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <label for="male">男:</label><input type="radio" name="gender" value="0" id="male">
                <label for="female">女:</label><input type="radio" name="gender" value="1" id="female">
            </td>
        </tr>
        <tr>
            <td><label for="education">学历</label></td>
            <td>
                <select name="education" id="education">
                    <option value="1">1</option>
                    <option value="2" selected>2</option>
                    <option value="3">3</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                <label for="interests1">一</label><input type="checkbox" name="hobby" id="interests1">
                <label for="interests2">二</label><input type="checkbox" name="hobby" id="interests2">
                <label for="interests3">三</label><input type="checkbox" name="hobby" id="interests3">
                <label for="interests4">四</label><input type="checkbox" name="hobby" id="interests4">
                <label for="interests5">五</label><input type="checkbox" name="hobby" id="interests5">
            </td>
        </tr>
        <tr>
            <td><label></label></td>
            <td></td>
        </tr>
        <tr>
            <td><label for="sagreement">服务协议</label></td>
            <td><textarea id="sagreement" placeholder="霸王条款霸王条款" rows="5" readonly="readonly"></textarea></td>
        </tr>
        <tr>
            <td colspan="2"><input type="checkbox" id="agree"><label for="agree">我同意以上协议</label></td>
        </tr>
        <tr>
            <td><label for="uploadaheadimage">上传头像</label></td>
            <td><input name="" id="uploadaheadimage" type="file"></td>
        </tr>
        <tr>
            <td><label for="datalist">HTML5 datalist 元素</label></td>
            <td>
                <input name="browsers" id="datalist" list="browsers">
                <datalist id="browsers">
                    <option value="Internet Explorer">
                    <option value="Firefox">
                    <option value="Chrome">
                    <option value="Opera">
                    <option value="Safari">
                </datalist>
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="提交"></td>
        </tr>
    </table>
</form>
<br>
<hr>
<br>
<table frame="box" width="550">
    <caption><strong>组合表单</strong></caption>
    <tr>
        <td>
            <form action="" method="post" id="form2">
                <fieldset>
                    <legend>必要信息（legend）</legend>
                    <label for="uname">用户名:</label>
                    <input type="text" name="uname" value="" id="uname" required="required">
                    <br>
                    <label for="password1">密码:</label>
                    <input type="password" id="password1" required="required">
                    <br>
                    <label for="password2">确认密码:</label>
                    <input type="password" name="password" id="password2" required="required">
                    <br>
                    <label for="email">邮箱:</label>
                    <input type="email" name="email" id="email" required="required">
                </fieldset>
                <fieldset>
                    <legend>可选信息（legend）</legend>
                    性别:
                    <label for="gender0">男:</label><input type="radio" name="gender" value="0" id="gender0"
                                                          checked="checked">
                    <label for="gender1">女:</label><input type="radio" name="gender" value="1" id="gender1">
                    <br>
                    <label for="edu">学历</label>
                    <select name="education" id="edu">
                        <option value="1">1</option>
                        <option value="2" selected>2</option>
                        <option value="3">3</option>
                    </select>
                    <br>
                    爱好:
                    <label for="hobby1">1</label>
                    <input type="checkbox" name="hobby" id="hobby1" value="1">
                    <label for="hobby2">2</label>
                    <input type="checkbox" name="hobby" id="hobby2" value="2">
                    <label for="hobby3">3</label>
                    <input type="checkbox" name="hobby" id="hobby3" value="3">
                    <br>
                </fieldset>
                <fieldset>
                    <legend>必须信息</legend>
                    <label for="serveragreement">服务协议</label>
                    <textarea id="serveragreement" placeholder="霸王条款霸王条款" rows="3" readonly="readonly"></textarea><br>
                    <input type="checkbox" id="theagreement" required="required"><label
                        for="theagreement">我同意上述协议</label>
                </fieldset>
                <input type="submit" value="提交">
            </form>
        </td>
    </tr>
</table>
<hr>
</body>
</html>

2018-08-28 下午

CSS

CSS指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
常存储在 CSS 文件中
多个样式定义可层叠为一

多重样式将层叠为一个：

1.内联样式（在 HTML 元素内部）
2.内部样式表（位于标签内部）
3.外部样式表
4.浏览器缺省设置

内联样式（在 HTML 元素内部）拥有最高的优先权

CSS语法结构

css语法结构
CSS 对大小写不敏感。但如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开

CSS 派生选择器

li strong {
    font-style: italic;
    font-weight: normal;
  }

CSS id 选择器

CSS 类选择器

CSS 属性选择器

CSS 创建

CSS 样式

CSS 背景

(1).所有浏览器都支持 background-attachment 属性。

scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
inherit 规定应该从父元素继承 background-attachment 属性的设置

(2).background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域
CSS3 background-origin 属性

(3).background-position 属性设置背景图像的起始位置

(4).所有浏览器都支持 background-repeat 属性。
注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
background-repeat 属性设置是否及如何重复背景图像,定义了图像的平铺模式。
从原图像开始重复，并根据 background-position的值放置,默认地，背景图像在水平和垂直方向上重复。

repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置

CSS 文本
CSS 字体
CSS 链接
CSS 列表
CSS 表格
CSS 轮廓

CSS 框模型

CSS 框模型概述
CSS 内边距
CSS 边框
CSS 外边距
CSS 外边距合并

CSS 定位

CSS 定位概述
CSS 相对定位
CSS 绝对定位
CSS 浮动

CSS 选择器

通常可以将css的优先级由高到低分为6组：
第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
第六优先级：通配选择器，如*{marigin:6px;}

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
优先级相同时，则采用就近原则，选择最后出现的样式
css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化

CSS 元素选择器
CSS 选择器分组
CSS 类选择器详解
CSS ID 选择器详解
CSS 属性选择器详解
CSS 后代选择器
CSS 子元素选择器
CSS 相邻兄弟选择器
CSS 伪类
CSS 伪元素

CSS 参考手册