HTML+CSS

一个制作矢量图标（SVG）的网址：https://icomoon.io/

    <a href="index2.html">index</a>
    <a href="myPage/index2.html">index</a>
    <!-- 目录语法，斜杠前面表示文件夹的名字，在哪个文件夹里面，就写哪个文件夹的名字，至于文件夹再上面的路径层级，系统会自动识别出来 -->

相对路径

<base href="http://serverName/FolderName/"/>
在heade标签中使用base标签设置基准URL，在html文档的其他地方使用到a标签的时候，hreft的值就可以直接是一个文件的名称
<a href='page2.html'/>
最后生成的连接地址会是：http://serverName/FolderName/page2.html

使用base标签设置基准URL

<!--style元素中的type值基本上就是"text/css",media属性有多个值,列举几个可能会用到的值。-->
 <!-- all将样式用于所有设备（默认） -->
 <style media="all" ></style> 
   <!-- 将样式用于手持设备-->
 <style media="handheld" ></style> 
    <!-- 将样式用于打印预览和打印页面时-->
 <style media="print" ></style>
    <!-- 将样式用于计算机显示器屏幕-->
 <style media="screen" ></style> 
 <style media="screen AND (max-width:500px)" type="text/css" ></style> 
 <style media="screen AND (min-width:500px)" type="text/css" ></style>
 <!-- 当页面宽度大于500的时候使用上面一个样式，小于500时使用下面一个样式。-->

在style标签中使用media属性

<!-- 当浏览器不支持脚本或者禁用脚本时的处理办法， -->
<noscript>
    <h1>javascript is required!</h1>
</noscript>
<noscript>
    <meta http-equiv="refresh" content="0;http://www.baidu.com"/>
</noscript>

noscript标签

form标签一般有3种编码格式：application/x-www-form-urlencoded编码（默认编码除文件上传外都可以使用）、multipart/form-data编码（文件上传使用） 以及text/plain编码（没有正式规范，不推荐使用）
    <form method="post" action="http://vichin:8585/form" enctype="multipart/form-data">

    </form>

form标签3种编码格式

    <!-- 如果一个页面有很长的内容，可以点击锚点，让页面显示锚点所指向的那个部分。也可以使用name或者class等其他元素。 -->
    <a href="#a">指向id为a的元素</a>
    <a href="#b">指向id为b的元素</a>
    <a href="#c">指向id为c的元素</a>


    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>

a标签设锚点

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- a标签中的href属性，如果不用http协议，那么浏览器会对该超链接视为相对引用。 -->
    <!-- a标签拓展 -->
    <a href="#MyName">click here</a>
    <a href="QQ.exe">发送邮件</a>在IE浏览器中，可以调用本地的exe程序
    <a href="ftp://212.8.65.45">使用ftp协议访问文件服务器</a>
    <a href="mailto:vichin278@163.com?CC=vichin278@126.com?Subject:文字主题?BCC=暗送邮件地址Body=邮件内容">调用本地的outlook发送邮件</a>
    <!-- 在新的标签中打开 -->
    <a href="http://www.baidu.com" target="_blank">百度</a>


    <p id="MyName">
        vichin
    </p>
</body>
</html>

a标签的其他使用

    <!-- 每个meta元素只能用于一种很用途，如果想使用多个meta标签的属性，可以添加多个meat元素。 -->
    <!-- 使用meta标签为页面设置关键字 -->
    <meta charset="UTF-8" name="keyword" content="关键字，元信息">
    <!-- 使用meta标签为页面设置页面描述 -->
    <meta name="description" content="关于HTML标签中，meta标签的使用">
    <!-- 使用meta标签为页面设置作者信息 -->
    <meta name="author" content="vichin">
    <!-- 使用meta标签为页面设置网页的定时跳转 3秒后跳转到百度。如果不添加url，则表示刷新当前页面-->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
    <!-- 使用meta标签为页面设置网页禁止从缓存中调用 cache-control和pragma都可以使用-->
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <!-- 使用meta标签使页面强制打开新的窗口 -->
    <meta http-equiv="windows-target" content="_top">
    <!-- 指定页面使用文档模式为IE8： -->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <!-- 使用最新的IE文档模式来呈现页面： -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />

meta标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<form>
    <p><label for="name">
        Name:<input placeholder="Your name" id="name" name="name" />
    </label></p>
    <p><label for="city">
        City:<input placeholder="Where you live" id="city" name="city" />
    </label></p>
    <p>
        <label for="fave">
            Friut:<input list="fruitlist" id="fave" name="fave" />
        </label>
    </p>
    <button type="submit">Submit Vote</button>
</form>
    <datalist id="fruitlist">
        <option value="Apples" label="Lovely Apples"></option>
        <option value="Oranges" ></option>
        <option value="Cherries" ></option>
    </datalist>
</body>
</html>

输入框中带有下拉列表功能

<input type="text" value=''  id='txt_Id' oncopy="return false" onpaste="return false" oncut="return false" oncontextmenu="return false" />

输入框中禁止复制粘贴

<p><img src="捕获.PNG" alt="" usemap="#mymap"></p>
<map name="mymap">
    <area href="http://www.baidu.com" shape="rect" coords="3,5,68,62" />
    <area href="http://www.biying.com" shape="rect" coords="70,5,130,62"/>
    <area href="http://www.sogou.com" shape="default" alt="default" />
</map>

使用Map标签，点击图片某一区域，进行页面跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button id="btn_SetVal">设置值</button>
<button id="btn_GetVal">获取值</button>
<button id="btn_ClearVal">清空值</button>
<button id="btn_RemoveVal">删除值</button>
<button id="btn_SetJson">保存一个Json对象</button>
<button id="btn_GetJson">获取一个Json对象</button>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        // webStorage中分sessionStorage和localStorage。前者类似于session，后者类似于一个数据库
        // length:获取webstorage中的数量
        // key(index):返回第index条数据
        // getItem(key):返回指定内容（字符串类型），若内容不存在，则返回null。
        // setItem(key,value):设置值。
        // removeItem(key):删除值。
        // clear:清空webStorage中的内容。
        // localStorage.setItem("key","value")
$(function () {
    $("#btn_SetVal").click(function(){
        localStorage.setItem("name","vichin");        
    });
    $("#btn_GetVal").click(function(){
        var len=localStorage.length;
        if (len>0) {
            var key=localStorage.key(0);//获取第一个位置上的key值
            if (key.length>0) {
                var person=localStorage.getItem(key);//使用key值去获取value值
                if (person.length>0) {
                    alert(person);
                }
            }                                
        }    
    });
    $("#btn_ClearVal").click(function(){
        if (localStorage.length>0) {
            localStorage.clear();    
        }        
    });
    $("#btn_RemoveVal").click(function(){
        localStorage.removeItem("name");
    });
    $("#btn_SetJson").click(function(){
        var person=new Object;
        person.name="vichin";
        person.age=26;
        person.sex="male";
        localStorage.setItem("P0",JSON.stringify(person));
    });
    $("#btn_GetJson").click(function(){
        var len=localStorage.length;
        if (len>0) {
            for (var i = 0; i < len; i++) {
                var key=localStorage.key(i);
                if (key.length>0) {
                    var data=localStorage.getItem(key);
                    if (data!=null) {
                        var person=JSON.parse(data);//使用key值去获取value值                                
                         alert('姓名：'+person.name+', 性别：'+person.sex+', 年龄：'+person.age);                
                     }            
                }    
            }    
        }
    });
});
    </script>
</body>
</html>

Html5中webStorage的使用

CSS属性

box-sizing:border-box;

使用position:absolute 会让当前元素相对于其父元素来设置一个绝对位置，但是父元素的位置不能是position:static（如果一个元素不设置position属性，那么起默认为static）。所以要用position:absolute相对于父容器的位置的时候，可以为其父容器增加一个position:relative

ime-mode: disabled;

禁止使用输入法，IE浏览器中使用

    .table {
        font-family: Microsoft YaHei;        
        margin: 20px auto;
        border: 1px solid black;
        border-collapse: collapse;
        text-align: center;
        font-size: 30px;
    }

    .table tr th {
        border: 1px solid black;
        background-color: lemonchiffon;
        color: #00BFFF;
    }

    .table tr td {
        border: 1px solid black;
    }

    .table tr:nth-child(2n) {
        background-color: white;
    }

使用CSS为table增加斑马线

页面布局：

一列布局：通常作为网站的首页，页面内容较少。页面通常是固定宽度的。
两列布局：一般自适应宽度的两列布局很少，通常都是固定宽度的两列布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单列布局</title>
    <style type="text/css">
        /*清除自带样式*/
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 800px;
            height: 300px;
            background-color: #ccc;
            margin: 0 auto;/*让内容居中显示*/
        }
        .top{
            height: 100px;
            background-color: blue;
        }
        .foot{
            width: 800px;
            height: 100px;
            background-color: #900;
            margin: 0 auto;/*让内容居中显示*/
        }
    </style>
</head>
<body>

    <div class="top"></div>
    <div class="main"></div>
    <div class="foot"></div>
</body>
</html>

一列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    body{
        padding: 0;
        margin: 0;
    }
    .left{
        width: 30%;
        height:500px;
        background-color: #ddd;
        float: left;
    }
    .right{
        width: 70%;
        height: 500px;
        background-color: #999;
        float: right;
    }
    .main{
        width: 1000px;
        height: 600px;
        background-color: red;
        margin: 0 auto;
    }
</style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

两列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .left{
            width: 33.3%;
            height: 500px;
            float: left;
            background-color: #ccc;
        }
        .right{
            width: 33.3%;
            height: 500px;
            float: right;
            background-color: #ddd;
        }
        .middle{
            width: 33.3%;
            height: 500px;
            float: left;
            background-color: #999;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="middle">简介：如何用CSS进行网页布局？这可是前端工程师最最基本的技能，本课程教你怎么制作一列布局、二列布局、三列布局当然还有最通用的混合布局，而且你还可以选择让它固定还是自适应。用CSS重新规划你的网页，让你的网页从此更美观、更友好。</div>
    <div class="right"></div>
</body>
</html>

三列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 500px;        
        background-color: #ccc;
        position: absolute;/*使用绝对定位，让左侧元素停靠在页面的左侧。*/
        left: 0;
        top:0;
    }
    .middle{        
        height: 500px;    
        /*width: 500px;    */
        background-color: #999;
        margin: 0 300px 0 200px;
    }
    .right{
        width: 300px;
        height: 500px;        
        background-color: #ddd;
        position: absolute;/*使用绝对定位，让左侧元素停靠在页面的右侧。*/
        right: 0;
        top:0;
    }    
</style>
</head>
<body>    
        <div class="left">200px</div>
        <div class="middle">简介：如何用CSS进行网页布局？这可是前端工程师最最基本的技能，本课程教你怎么制作一列布局、二列布局、三列布局当然还有最通用的混合布局，而且你还可以选择让它固定还是自适应。用CSS重新规划你的网页，让你的网页从此更美观、更友好。</div>
        <div class="right">300px</div>    
</body>
</html>

特殊的三列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合布局</title>
    <style type="text/css">
        /*清除自带样式*/
        body{
            margin: 0;padding: 0;
        }
        .main{
            width: 800px;height: 600px;background-color: #ccc;margin: 0 auto;/*让内容居中显示*/
        }
        .top{
            height: 100px;background-color: blue;
        }
        .head{
            height: 100px;width: 800px;background-color: #f60;margin: 0 auto;
        }
        .left{
            width: 200px;height: 600px;background-color: yellow;float: left;
        }        
        .right{
            width: 600px;height: 600px;background-color: #369;float: right;
        }
        .sub_l{
            width: 400px;height: 600px;background-color: green;float: left;
        }
        .sub_r{
            width: 200px;height: 600px;background-color: #09f;float: right;
        }        
        .foot{
            width: 800px;height: 100px;background-color: #900;clear: both; margin: 0 auto;/*让内容居中显示*/            
        }
    </style>
</head>
<body>

    <div class="top">
        <div class="head">
            
        </div>
    </div>
    <div class="main">
        <div class="left"></div>
        <div class="right">
            <div class="sub_l"></div>
            <div class="sub_r"></div>
        </div>
    </div>
    <div class="foot"></div>
</body>
</html>

混合布局

posted @ 2018-05-27 15:06 水墨晨诗阅读(322) 评论(0) 编辑收藏举报

刷新页面返回顶部

水墨晨诗

HTML+CSS

公告