我为net狂
我为net狂

html教程

用div来占块，布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用div来占块,布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
</head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

 

用CSS来控制

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用css来控制</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
        height: 200px;
        background: blue;
    }

    #main {
        background: green;
    }

    #footer {
        background: gray;
    }
</style>
</head>
    <body>
        <div id="header"></div>
        <div id="main"></div>
        <div id="footer"></div>
    </body>
</html>

效果图：

html教程_第1张图片

 

浮动布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>浮动布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #lside{
        width:20px;
        height: 100px;
        background: green;
        float: left;
    }

    #rside{
        width: 20px;
        height: 100px;
        background: red;
        float: right;
    }
    #comm {
        width:300px;
        height: 300px;
        background: orange;
    }
</style>
</head>
    <body>
        <div id="lside">我是左</div>
        <div id="rside">我是右</div>
        <div id="comm">我是普通div</div>
    </body>
</html>

效果图：

html教程_第2张图片

清除浮动（clear: both;）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>清除浮动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #lside{
        width:20px;
        height: 300px;
        background: green;
        float: left;
    }

    #rside{
        width: 20px;
        height: 200px;
        background: red;
        float: right;
    }
    #comm {
        height: 300px;
        background: orange;
        clear: both;
    }
</style>
</head>
    <body>
        <div id="lside">我是左</div>
        <div id="rside">我是右</div>
        <div id="comm">我是普通div</div>
    </body>
</html>

效果图：

html教程_第3张图片

 

新手常见错误：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新手常犯的错误</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #2{
        width: 300px;
        height: 300px;
        background: blue;
    }
</style>
</head>
    <body>
        <div id="2">
            1:不加doctype ,---导致低版本IE,解析效果不一样<br />
            2:id为数字<br />
            3:文件编码与charset声明不一致
        </div>
    </body>
</html>

 

盒模型之margin设置（上右下左）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>盒模型之margin设置</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #cont{
        width:1000px;
        height:600px;
        background: green;
    }

    div {
        width:400px;
        height:200px;
        float:left;
    }

    #test{
        /*
        margin:10px;
        */
        /*
        
        margin-top:10px;
        margin-left: 20px;
        margin-bottom: 30px;
        margin-right: 40px;
        */

        /*margin:10px 20px;*/
        margin: 10px 20px 30px;
        background: red;
    }

    #test2 {
        background: orange;
    }

    #test3{
        width:1000px;
        background: blue;
    }
</style>
</head>
    <body>
        <div id="cont">
            <div id="test"></div>
            <div id="test2"></div>
            <div id="test3"></div>
        </div>
    </body>
</html>

效果图：

html教程_第4张图片

 

盒模型之border设置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>盒模型之border设置</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
        width: 800px;
        height: 800px;
        background: blue;
        /*border: 10px outset purple;*/

        /*单独设置某个方向的边框*/
        border-top:10px solid orange; 

        /*
        也可以单独设置边框的3要素之1,比如形色
        */
        border-style:dashed;

    }
</style>
</head>
    <body>
        <div>
            盒子的border 3要素 宽(border-width),形状(border-style),颜色(border-color)
        </div>
    </body>
</html>

效果图：

html教程_第5张图片

 

用css控制border画3角形

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> 用css控制border画3角形</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #trip{
        width:100px;
        height: 100px;
        border-top: 50px solid blue;
        border-right: 50px solid red;
        border-bottom: 50px solid green;
        border-left: 50px solid orange;
    }
</style>
</head>
    <body>
            <div id="trip"></div>
    </body>
</html>

效果图：

html教程_第6张图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用css控制border画3角形</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #trip{
        width:0px;
        height: 0px;
        border-top: 50px solid blue;
        border-right: 50px solid red;
        border-bottom: 50px solid green;
        border-left: 50px solid orange;
    }
</style>
</head>
    <body>
            <div id="trip"></div>
    </body>
</html>

效果图：

html教程_第7张图片

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用css控制border画3角形</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
        height:200px;
        background: gray;
    }
    #trip{
        width:0px;
        height: 0px;
        border-top: 50px solid white;
        border-right: 50px solid white;
        border-bottom: 50px solid green;
        border-left: 50px solid white;
    }
</style>
</head>
    <body>
        <div>
            <div id="trip"></div>
        </div>
    </body>
</html>

效果图：

html教程_第8张图片

 

 padding详解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>padding详解</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
        background: gray;
        /*padding: 10px;*/
        /*padding-top: 10px;
        padding-right: 30px;*/

        padding: 10px 20px 30px;
    }
</style>
</head>
    <body>
        <div>
            关于HTM，实际上HTM与HTML没有本质意义的区别，只是为了满足DOS仅能识别8+3的文件名而已，因为一些老的系统(win32)不能识别四位文件名，所以某些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件，但编写网页地址的时候必须是完全对应的，也就是说index.htm和index.html是两个不同的文件，对应着不同的地址。值得一提的是UNIX系统中对大小写敏感，不吻合的话就可能报没有文件或者找不到文件。   
关于shtml，shtml是一种基于SSI技术的文件，也就是Server Side Include--SSI 服务器端包含指令，一些Web Server如果有SSI功能的话就会对shtml文件特殊招待，服务器会先扫一次shtml文件看没有特殊的SSI指令存在，如果有的话就按Web Server设定规则解释SSI指令，解释完后跟一般html一起调去客户端。   
        </div>
    </body>
</html>

效果图：

html教程_第9张图片

 

padding与背景

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> padding与背景</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
        width: 200px;
        height: 200px;
        background: gray;
        border: 10px solid blue;
        padding: 20px;

    }
</style>
</head>
    <body>
        <div>
            hello world
        </div>
    </body>
</html>

效果图：

html教程_第10张图片

 

盒子模型总结

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>盒子模型总结</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    div{
        width: 300px;
        height:300px;
        background: gray;
        border: 50px solid blue;
        padding:50px;
        margin: 50px;
    }
</style>
</head>
    <body>
        <div>
            一个盒子,有margin,border,padding,实占多少空间?<br />
            竖直方向:height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom<br />
            水平方向: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
        </div>
    </body>
</html>

效果图：

html教程_第11张图片

利用margin实现水平居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>利用margin实现水平居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #container{
        width:1000px;
        height: 200px;
        margin:0px auto;
        background: blue;
    }
</style>
</head>
    <body>
        <div id="container"></div>
    </body>
</html>

html教程_第12张图片

margin重叠现象研究

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>margin重叠现象研究</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #test1{
        height:100px;
        background: blue;
        margin-bottom: 50px;
    }

    #test2 {
        height: 100px;
        background: green;
        margin-top: 80px;
    }
</style>
</head>
    <body>
        <div id="test1">
            上下相邻的普通元素,上下边距,并非简单的相加,<br />
            而是取其中较大的边距值<br />
            这种现象叫做margin重叠
        </div>
        <div id="test2"></div>
    </body>
</html>

效果图：

html教程_第13张图片

 

inline内联(行内元素)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>inline内联(行内元素)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    
#kurong {
    width: 400px;
    height:400px;
    margin-top:10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    color:red;

    margin-left: 10px;
    padding-left: 20px;
}
</style>
</head>
    <body>
        <div>
            离离原上草，一岁一<span id="kurong">枯荣</span>。<br />
野火烧不尽，春风吹又生。<br />
远芳侵古道，晴翠接荒城。<br />
又送王孙去，萋萋满别情。<br />
        </div>
    </body>
</html>

 

内联与块状的转化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>内联与块状的转化</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    span{
        width:200px;
        height:200px;
        background: blue;
        display: block;
    }
    div{
        width:200px;
        height:200px;
        background: orange;
        display: none;
        /*display: inline;*/
    }
</style>
</head>
    <body>
        <div>块状</div>
        <span>行内</span>
    </body>
</html>

效果图：

html教程_第14张图片

 

css控制段落文本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> css控制段落文本</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #p1 {
        background: gray;
        text-indent: 20px;
        text-align: right;
    }
    #p2 {
        background: orange;
        text-decoration: line-through;
        letter-spacing: 20px;

    }
</style>
</head>
    <body>
        <p id="p1">记者注意到，在《决定》关于集体土地的表述中，并没有提及“小产权房”。对此，北京市房协秘书长陈志认为，《决定》提出的是改革的方向，包括土地制度改革的方向，而“小产权房”只是其中的一个具体问题，因此《决定》不会谈及如何解决“小产权房”这样具体的问题。</p>
        <p id="p2">“具体到‘小产权房’的问题，还需要相关部门根据《决定》的精神，研究具体的解决办法。”陈志说，从长远看，“小产权房”问题肯定要解决。</p>
    </body>
</html>

效果图：

html教程_第15张图片

 

文字控制

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>文字控制</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #test1 {
        color: blue;
        font-style: italic;
        font-weight: bold;
        font-size: 23px;
        line-height: 46px;
        font-family: "SimHei";
    }
    #test2 {
        font:italic bold 23px/46px "SimHei";
    }
</style>
</head>
    <body>
        <div id="test1">离离原上草，一岁一枯荣。<br />
野火烧不尽，春风吹又生。</div>
        <div id="test2">
            离离原上草，一岁一枯荣。<br />
野火烧不尽，春风吹又生。
        </div>
    </body>
</html>

效果图

html教程_第16张图片

 

字体控制精讲

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>字体控制精讲</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #test1{
        font-family: '微软雅不黑','微软雅黑','黑体',sans-serif;
    }

    #test2{
        font-family: 'New Times','新宋','宋体',serif;
    }
</style>
</head>
    <body>
        <div id="test1">离离原上草，一岁一枯荣。<br />
野火烧不尽，春风吹又生。</div>

        <div id="test2">离离原上草，一岁一枯荣。<br />
野火烧不尽，春风吹又生。</div>
    </body>
</html>

 

背景图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>背景图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    body {
        background-color: blue;
        background-image: url(small.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
</style>
</head>
    <body>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
</html>

效果图：

html教程_第17张图片

 

大图片背景

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>大图片背景</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #test1 {
        border: 1px solid orange;
        width: 500px;
        height:500px;
        background-image: url(small.jpg);
        background-repeat: no-repeat;
        background-position: center; center;
        
    }

    #test2 {
        width:50px;
        height:30px;
        border: 1px solid blue;
        /*
        background-image: url(bg.png);
        background-position: -150px -530px;
        */
        background: gray url(bg.png) no-repeat -150px -530px;
    }
</style>
</head>
    <body>
        <div id="test1"></div>
        <div id="test2"></div>
    </body>
</html>

效果图：

html教程_第18张图片

 

css选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>css选择器</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    #test1{
        width: 100px;
        height:50px;
        border: 1px solid blue;
    }

    .test2{
        width: 100px;
        height:50px;
        border: 1px solid red;
    }

    div{
        width: 100px;
        height: 50px;
        background: orange;
        margin-bottom: 10px;
    }

    div p {
        color:red;
    }
</style>
</head>
    <body>
        <div id="test1">test1</div>
        <div class="test2">test2</div>
        <div>普通div
            <p >我是div中的p标签</p>
        </div>
        <p>我是独立P标签</p>

        <div>id选择器, class选择器,标签选择器, 派生选择器</div>
    </body>
</html>

效果图:

html教程_第19张图片

css优先级

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>css优先级</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<style>
    p{
        color: red;
    }

    .test2{
        color: green;
    }

    #test1{
        color: blue;
    }

    div #test1 {
        color:pink;
    }
</style>
</head>
    <body>
        <div>
            <p id="test1" class="test2">天天向上</p>
        </div>
    </body>
</html>

效果图：

css引入方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>css引入方式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
<link rel="stylesheet" href="./23css.css" />
<style>
    body{
        background: blue; } </style> </head> <body> <div id="test1" style="color:white;">好好学习</div> </body> </html>
23css.css
@import url(23-2.css);
#test1{
    width: 200px;
    height: 200px;
    background: red;
}
23-2.css
#test1 {
    border: 10px solid green;
}

效果图：

html教程_第20张图片

 

css初始化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> css初始化</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    /*css reset code */

/****  文字大小初始化,使1em=10px *****/
body {
font-size:62.5%;
} /* for IE/Win */
html>body {
font-size:10px;
} /* for everything else */

/*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
 padding: 0;
 margin: 0;
 }
table {
 border-collapse: collapse;
 border-spacing: 0;
 }
fieldset,img {
 border: 0;
 }
 img {
 display:block;
 }
address,caption,cite,code,dfn,th,var {
 font-weight: normal;
 font-style: normal;
 }
ol,ul {
 list-style: none;
 }
caption,th {
 text-align: left;
 }
h1,h2,h3,h4,h5,h6 {
 font-weight: normal;
 font-size: 100%;
 }
q:before,q:after {
 content:'';
 }
abbr,acronym { border: 0;
 }

a {
text-decoration:none;
}
</style>
</head>
    <body>
        <div>
            相同的元素,如li,在不同的浏览器下,显示的效果稍有不同,<br />
            是因为,而浏览器对各元素的margin,border,font-size等略有不同,<br />
            如果杜绝这种情况,我们通过css强制让所有元素的属性值都一样,<br />
            这样,浏览器显示就一致了,减少了不兼容情况的发生.<br />
            这个过程,叫做css初始化
            <ul>
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ul>
        </div>
    </body>
</html>

 

h标签和p标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>h标签和p标签</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <body>
        <h1>title1</h1>
        <h2>title2</h2>
        <h3>title3</h3>
        <h4>title4</h4>
        <h5>title5</h5>
        <h6>title6</h6>
        <h7>title7</h7>
        <div>h1-6系列 表示1-6号标题,字越来越小</div>
        <p>p表示段落, 在新闻网站中,h与p经常一起出现,<br />
            新闻标题一般用h表示,而新闻的每一段内容,适合用p标签.
        </p>
    </body>
</html>

效果图：

html教程_第21张图片

 

img图片标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> img图片标签</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
</head>
    <body>
        <img src="http://img3.cache.netease.com/photo/0001/2013-11-19/9E1PPB1000AO0001.jpg" alt="" />
        <img src="../logo.png" alt="菊花图" title="鼠标放上去 他就显示" />
        <img src="juhua.jpg" alt="菊花图" title="鼠标放上去 他就显示" />
    </body>
</html>

 

图片是内联还是块状?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>图片是内联还是块状?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    img{
        width: 300px;
        height:180px;
        margin: 0px;
        display: block;
    }
    #test1{
        width: 500px;
        height: 300px;
        border: 1px solid blue;
    }
</style>
</head>
    <body>
        <img src="./small.jpg" alt="" />
        <img src="./small.jpg" alt="" />
        <div id="test1">图片是内联元素,同时是 内联替换元素,替换元素是能设置宽高的</div>
    </body>
</html>

效果图：

 

有序列表与无序列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>有序列表与无序列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    ul li{
        list-style-type: square;
    }

    ol li {
        list-style-type: upper-roman;
    }
</style>
</head>
    <body>
        <ul>
            <li>春</li>
            <li>夏</li>
            <li>秋</li>
            <li>冬</li>
        </ul>

        <ol>
            <li>有序1</li>
            <li>有序2</li>
            <li>有序3</li>
            <li>有序4</li>
        </ol>
    </body>
</html>

效果图：

html教程_第22张图片

 

整齐的表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> 整齐的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    table{
        /*border-collapse: separate;
        border-spacing: 20px;*/
        border-collapse: collapse;
    }
    td{
        border: 1px solid blue;
    }
</style>
</head>
    <body>
        <table>
            <tr>
                <td colspan="4">1</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td rowspan="2">24</td>
            </tr>
            <tr>
                <td>25</td>
                <td>26</td>
                <td>27</td>
            </tr>
        </table>
    </body>
</html>

效果图：

 

超链接标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>超链接标签</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <body>
        <a href="index.html" target="_blank">index</a>
        <a href="http://www.zixue.it" title="鼠标放上来">自学it网</a>
    </body>
</html>

效果图：

锚点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> 锚点</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <body>
        <a href="31-anchor.html#p1">p1锚点</a>
        <a href="31-anchor.html#p2">p2锚点</a>
        <a href="31-anchor.html#p3">p3锚点</a>

        <a name="p1"></a>
        <p>p1</p>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <a name="p2"></a>
        <p>p2</p>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <a name="p3"></a>
        <p>p3</p>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
</html>

 

css a标签伪类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> css a标签伪类</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    a:link{
        color:gray;
    }
    
    a:visited {
        color:purple;
    }
    
    a:hover{
        color:orange;
    }

    a:active{
        color:black;
    }
</style>
</head>
    <body>
        <div>
            css允许我们针对a标签的4种状态设置各自的css特性,叫做css伪类<br />
            1:active一般不必写
            2:一定注意,顺序是 LVHA
            3: a:link可以简写为a
        </div>
        <div>
            <a href="#">空链接</a>
            <a href="#">空链接</a>
            <a href="#">空链接</a>
            <a href="#">空链接</a>
            <a href="#">空链接</a>
        </div>
    </body>
</html>

效果图：

 

字符实体

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>字符实体</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <body>
        <div>
            在html开发中,有一些字符,不适于直接写出,如&gt; &lt;<br />
            一般的格式: &amp; + 实体名 + ;
            实体有很多,记住常用的
            &gt; &lt; &quot; &yen; &copy; 
        </div>
    </body>
</html>

效果图：

 

色彩的表示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>色彩的表示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
</head>
    <body>
        <pre>
            orange,white,#FFA083;
            1:颜色用数字来表示
            2:颜色由3原色组成的,红red 绿green 蓝blue  rgb
            3:3原色各在[0-255]之间变化

            综上:本质是组合3原色
            1:用16进制组合[0-255]-->[00,FF], <span style="color:#234567">#234567</span>
            2:用10进制来组合,如<span style="color:rgb(240,23,45)">rgb(240,25,25)</span>;
            3:html提供常用颜色的名称,如<span style="color:orange">orange</span>,<span style="color:pink">pink</span>,purple,red

            4:#EEEEEE-->#EEE, 当6个字符一样时,可以科室简写为3个字符,
        </pre>
    </body>
</html>

 

尺寸的表示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>尺寸的表示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #par{
        width: 600px;
        height: 300px;
        background: green;
    }

    #son1 {
        width: 300px;
        height: 100px;
        background: blue;
    }

    #son2 {
        width: 50%;
        height: 50%;
        background: pink;
    }

    #test1 {
        font-size: 10px;
    }

    #p1 {
        font-size: 20px;
    }

    #p2 {
        font-size: 1.5em;
    }

</style>
</head>
    <body>
        <div id="par">
            <div id="son1">我用像素来表示</div>
            <div id="son2">我用百分比来表示,块状子元素要是不说宽度,默认占满父元素的宽度</div>
        </div>

        <div id="test1">
            父div
            <p id="p1">我用px表示文字大小</p>
            <p id="p2">我用em表示文字大小,em是相对大小,是指其父元素中的1个"M"的大小,简单理解为父元素的fon-size就是1个em单位</p>
        </div>

    </body>
</html>

效果图：

html教程_第23张图片

 

CSS画圆角

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>第52课 CSS画圆角</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 xhtml 12小时入门教程" />
<style>
    #test1 {
        width: 300px;
        height: 300px;
        border: 1px solid blue;
        border-radius: 15px;
    }

    #test2 {

        width: 300px;
        height: 300px;
        border: 1px solid red;
        border-radius: 150px;    
    }
</style>
</head>
    <body>
        <div id="test1">css画圆角,目前的主流浏览器都已经支持</div>
        <div id="test2">用css画1个圆</div>
    </body>
</html>

效果图：

html教程_第24张图片

 

相对定位与绝对定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>相对定位与绝对定位</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
    #test1{
        width: 300px;
        height: 300px;
        background: green;
    }

    p {
        margin: 0px;
        padding: 0px;
    }

    #p1 {
        width: 100px;
        height: 100px;
        background: blue;
        position: relative;
        /*top:20px;
        left: 20px;
        */
        right: 20px;
        bottom: 20px;
    }

    #p2 {
        width: 100px;
        height: 100px;
        background: orange;
    }


    #test2{
        width: 300px;
        height: 300px;
        background: pink;
        position: relative;
    }

    #p3 {
        width: 100px;
        height: 100px;
        background: black;
        position: absolute;
        top: 20px;
        left:30px;
        z-index: 1002;
    }

    #p4 {
        width: 100px;
        height: 100px;
        background: purple;
        position: absolute;
        top: 30px;
        left:40px;
        z-index: 1001;
    }
</style>
</head>
    <body>
        <div id="test1">
            <p id="p1">我是p1,相对定位是指元素在其正常的位置,偏移某些像素</p>
            <p id="p2">我是p2,相对定位是指元素在其正常的位置,偏移某些像素</p>
        </div>

        <div id="test2">
            用绝对定位时,父元素要求有position属性才行,否则将依据父父,父的父的父,...body,<br />
            哪个祖先有postion属性,相对哪个祖先,如果都没有,相对于body
            <p id="p3">我要绝对定位,绝对定位是指相对于父元素的top,left,right,bottom来定位</p>
            <p id="p4"></p>
        </div>
    </body>
</html>

效果图：

html教程_第25张图片

 

overflow溢出处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>overflow溢出处理</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" xhtml 12小时入门教程" />
<style>
div{
    width:200px;
    height:200px;
    border:1px solid blue;
    overflow: auto;
}

p{
    border: 1px solid gray;
}
</style>
</head>
    <body>
        <div>
            <p>
                新华网北京11月20日电 今日出版的南方日报发布消息称，近日，中央批准：马兴瑞同志任广东省委委员、常委、副书记，朱明国同志不再担任广东省委副书记、常委职务。至此，经新一轮调整后，全国31位省级政协主席全部“退出”同级党委常委班子，4位省级党委专职副书记均不再兼任政协主席。新华网北京11月20日电 今日出版的南方日报发布消息称，近日，中央批准：马兴瑞同志任广东省委委员、常委、副书记，朱明国同志不再担任广东省委副书记、常委职务。至此，经新一轮调整后，全国31位省级政协主席全部“退出”同级党委常委班子，4位省级党委专职副书记均不再兼任政协主席。


新华网北京11月20日电 今日出版的南方日报发布消息称，近日，中央批准：马兴瑞同志任广东省委委员、常委、副书记，朱明国同志不再担任广东省委副书记、常委职务。至此，经新一轮调整后，全国31位省级政协主席全部“退出”同级党委常委班子，4位省级党委专职副书记均不再兼任政协主席。


新华网北京11月20日电 今日出版的南方日报发布消息称，近日，中央批准：马兴瑞同志任广东省委委员、常委、副书记，朱明国同志不再担任广东省委副书记、常委职务。至此，经新一轮调整后，全国31位省级政协主席全部“退出”同级党委常委班子，4位省级党委专职副书记均不再兼任政协主席。



            </p>
        </div>
        <div></div>
    </body>
</html>

效果图：

html教程_第26张图片

 

表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title> 表单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <body>
        <div>在用户注册,在线报名等场合时,
            需要把用户的信息,填写并提交,这时要用到表单来收集用户的信息<br />
        </div>
        <form action="http://www.baidu.com" method="post">
            <p>
                用户名: <input type="text" name="username" value="lisi" />
            </p>
            <p>
                密码: <input type="password" name="password" />
            </p>
            <p>
                性别: 男:<input type="radio" name="xingbie" value="男" />
                    女:<input type="radio" name="xingbie" value="女"  checked="checked" />
            </p>
            <p>
                爱好:篮球 <input type="checkbox" name="hobby" value="篮球" />
                    足球 <input type="checkbox" name="hobby" value="足球" />
                    台球 <input type="checkbox" name="hobby" value="台球" checked="checked" />
                    混球 <input type="checkbox" name="hobby" value="混球" />
            </p>
            <p>
                <select name="xueli">
                    <option value="大学">大学</option>
                    <option value="高中" selected="selected">高中</option>
                    <option value="初中">初中</option>
                </select>
            </p>
            <p>
                <textarea name="intro">i am from china</textarea>
            </p>
            <p>
                上传头像: <input type="file" name="pic" />
            </p>
            <p>
                隐藏域: 你看不见<input type="hidden" name="IP" value="192.168.1.100" />
            </p>
            <p>
                <input type="submit" value="提交" />
            </p>
            <p></p>
        </form>
    </body>
</html>

效果图：

html教程_第27张图片

 

框架集

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<head>
<title>框架集</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xhtml 12小时入门教程" />
</head>
    <!-- <frameset rows="200px,*">
        <frame src="16-css-text.html" ></frame>
        <frame src="09-padding.html" ></frame>
    </frameset> -->
    <!-- <frameset cols="30%,*">
        <frame src="16-css-text.html" ></frame>
        <frame src="09-padding.html" ></frame>
    </frameset> -->

    <frameset rows="200px,*">
        <frame src="16-css-text.html"></frame>
        <frameset cols="200px,*">
            <frame src="40-left.html"></frame>
            <frame src="xx.html" name="you"></frame>
        </frameset>
    </frameset>
</html>

 

你可能感兴趣的:(html教程)

  • 编程好书推荐 diaoqu4574 嵌入式操作系统设计模式
    编程学习好书推介一、WEB应用开发人员必修功课类1、XHTML教程（XHTML）作者：ChelseaValentine,ChrisMinnickNewRiders原版，人民邮电出版社中文版是的，今天你最应该学习的是XHTML，而不是HTML。HTML4.x已经是一个被废弃了的标准，今天的标准是XHTML1.0。XHTML1.0也不是XHTML最新的版本，但是它是目前唯一得到浏览器广泛支持和唯一实用
  • HTML 入门指南 墨鸦_Cormorant 前端html前端
    简述参考：HTML教程-(HTML5标准)HTML语言的介绍、特点HTML：超级文本标记语言（HyperTextMarkupLanguage）“超文本”就是指页面内可以包含图片、链接等非文字内容。“标记”就是使用标签的方法将需要的内容包括起来。例如：www.itcast.cnHTML用于编写网页。平时上网通过浏览器看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源
  • 哪些是HTML5新增的通用属性,HTML5新增了哪些input类型及其属性？ weixin_39851261 哪些是HTML5新增的通用属性
    HTML5新增了哪些input类型及其属性？1、url类型、email、tel类型说明：当输入非url、email的字符串时，浏览器会自动提醒。2、number类型。说明：只能输入数字，min表示数字的最小值，max为最大值，step为点击加减按钮时每次增减的数值。3、range类型(推荐学习：HTML教程)说明：其他属性同number类型一致，step表现为每滑动一步的数值。4、search类型
  • HTML教程 LBJ辉 html
    HTML语言简介1、概述  HTML是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载HTML代码，然后渲染出网页。  HTML的全名是“超文本标记语言”（HyperTextMarkupLanguage），上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（TimBerners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网
  • Java Web(二）--HTML hahaha2221 03_web基础前端javahtml
    基本介绍官网文档地址:HTML教程HTML（HyperTextMark-upLanguage）即超文本标签语言；HTML文本是由HTML标签组成的文本，可以包括文字、图形、动画、声音、表格、链接等；HTML的结构包括头部（Head）、主体（Body）两大部分。头部描述浏览器所需的信息主体则包含所要说明的具体内容。注意：HTML文件不需要编译，直接由浏览器进行解析执行；网页的结构图html基本结构说
  • 初学必备网站 Attitude Rabbit 其他开发语言
    初学必备网站文章目录初学必备网站1.菜鸟教程1.1菜鸟工具1.2百度AI文心一言2.leetcode1.菜鸟教程https://www.runoob.com/这个算必备NO.1菜鸟作为初学者的启蒙老师，提供了最全的的web技术基础教程,介绍了HTML教程、CSS教程、Javascript教程、Python基础教程，PHP教程等各种建站基础，其中的接口文档，和案例也方便了菜鸟们的使用，但菜鸟不仅仅只
  • Vivado裸机工程搭建教程 GoUpToTheSky
    Vivado裸机工程搭建教程一、Cygwin生成vivadoHDL工程教程1、Cygwin软件安装配置第一步为Cygwin软件的安装，软件已经下载好（如下图），直接双击安装，安装教程可以自行百度，网上资料很多，就不再赘述。可使用http://jingyan.baidu.com/article/200957619b0c30cb0621b478.html教程来进行安装，介绍的比较详细，注意，因为Cyg
  • 前端学习专栏 weixin_51551879 jsonhtml5
    前端专栏订阅会员HTML教程HTML教程CSS教程CSS教程JavaScript教程JavaScript教程TypeScript教程TypeScript教程ES6ES6Node.jsNode.jsnpm包管理工具npm包管理工具Yarn包管理工具Yarn包管理工具Webpack前端打包工具Webpack前端打包工具BabelBabelCSS预处理器SassCSS预处理器SassCSS预处理器Les
  • 网页前端培训笔记（HTML标签） ᴍᴀɢɪ 网页前端培训笔记前端html
    学习网址：【优极限】HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibiliHTML教程|菜鸟教程(runoob.com)1、安装编译器HBuilderX：https://download1.dcloud.net.cn/download/HBuilderX.3.3.10.20220124.zip2、基础操作注意选择普通项目，使用基本
  • python学习专栏 weixin_51551879 python
    PYTHON专栏python基础教程python基础教程Python练手算法Python练手算法Python设计模式Python设计模式MySQL教程MySQL教程ORM框架SQLAlchemyPythonORM框架SQLAlchemyHtml教程Html教程PythonWeb框架DjangoPythonWeb框架DjangoWeb框架FastAPIWeb框架FastAPIhttp库request
  • 仿w3school 心中有高数
    html文件w3school在线教程w3cshoolHTML/CSSJavascriptServerSideASP.NETXMLWebServicesWebBuildingHTML教程HTMLHTML5XHTMLCSSCSS3TCP/IP浏览器脚本HTMLHTML5XHTMLCSSCSS3TCP/IP服务器脚本HTMLHTML5XHTMLCSSCSS3TCP/IPHTML教程HTMLHTML5XH
  • HTML教程（2）——基础标签 乔冠宇 前端HTMLhtml前端
    一、HTML的元数据标签定义关于HTML文档的元数据。元数据是关于数据的数据（信息）,其始终位于元素内，通常用于指定字符集、页面描述、关键词、文档作者和视口设置；元数据不会显示在页面上，但可以被机器解析，浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）和其他网络服务会用到元数据。在vsCode中，新创建的HTML文件可以用“!”一键初始化HTML的骨架结构meta标签有两个重要的属性，分别
  • HTML教程（1）——概述和第一个网页 乔冠宇 前端HTMLhtml前端
    一、什么是HTMLHTML是用来描述网页的一种语言。HTML指的是超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言(markuplanguage)标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页二、什么是HTML标签HTML标记标签通常被称为HTML标签(HTMLtag)。HTML标签是由尖括号包围的关键词，比如H
  • HTML教程 hixiaoyang html前端
    HTML教程HTML教程HTML表单HTML5教程HTML简介HTML开发环境搭建使用Emmet提高开发效率HTML基础HTML元素HTML属性HTML标题HTML段落HTML样式HTML格式化HTML引用元素HTML计算机代码元素HTML注释HTML颜色HTML和样式表HTML超链接HTML图片HTML表格HTML列表HTML块级元素HTML类HTMLiframeHTML和JavaScript脚
  • html教程确保不换行 laoli815 html前端
    换行*{margin:0;padding:0;box-sizing:border-box;}.box{width:750px;padding:0;background:purple;border:1pxsolidpink;height:100px;line-height:100px;font-size:40px;white-space:nowrap;overflow:hidden;text-ove
  • 计算机基础语言学习线路图 chujiu1884 c/c++r语言ruby
    计算机基础语言学习线路图HTMLHTML教程HTML简介HTML编辑器HTML基础HTML元素HTML属性HTML标题HTML段落HTML样式HTML格式化HTML引用元素HTML计算机代码元素HTML注释HTML颜色HTML和样式表HTML超链接HTML图片HTML表格HTML列表HTML块级元素HTML类HTMLiframeHTML和JavaScript脚本HTMLhead标签HTML布局HT
  • Java多线程与并发库视频教程-黑马程序员_张孝祥 诗淇_e78c
    Java多线程与并发库视频教程-黑马程序员_张孝祥https://www.jczhijia.com/CourseChaptersList/1872.html教程简介：本视频教程内容详实、讲解透彻，非常值得本行业相关专业技术人员、管理人员及广大爱好者学习观看。（注：本教程来自互联网，仅供参考试看，若想获得更好的学习效果，请购买正版商业教程。）第1章内容如下：通道一01_黑马程序员_张孝祥_传统线程技
  • 1. 初识网页标记语言HTML—HTML简介 独不懂 HTMLhtmlhtml5前端编程语言
    1.HTML教程-简介前言一、什么是HTML？二、简单的HTML例子Reference欢迎学习交流！邮箱：z…@1…6.com网站：https://zephyrhours.github.io/前言编程语言的学习相对费事费力，尤其是对初学编程的朋友们。相比于其他编程语言，HTML作为一种超文本标记语言（HyperTextMarkupLanguage，简称：HTML）似乎更为简单，严格意义上讲，它并不
  • Markdown语法参考 abcdhhhh_ 工具算法概率论机器学习
    一些工具关于Markdown语法的问题，可以参考这些链接：纯Markdown语法：Markdown官网KaTeX语法：KateX官网HTML语法（Markdown不完全支持）：HTML教程markdown表格生成器：链接另外分享几个无关的小工具：图形计算器画图的计算几何文本比对测试数据生成器：cyaron
  • 黑马程序员JavaWeb开发教程（P1-P66） _Matthew JavaWeb数据库
    黑马程序员JavaWeb开发教程（P1-P66）0.前言——学完我能干什么？0.1工作流程0.2Web网站的开发模式0.3开发课程安排1.Web前端开发1.2HTML、CSS1.2.1HTML小入门1.2.1VsCode1.2.2HTML教程1.2.3CSS教程1.2.4JS教程1.2.5Vue教程2.Maven2.1Maven的概述2.2IDEA集成Maven2.2.1配置Maven环境2.2.
  • 编程字典-web 前端学习线路图 chujiu1884 前端javascriptjsonViewUI
    web前端学习线路图一、HTML教程|HTML教程|HTML简介|HTML编辑器|HTML基础|HTML元素|HTML属性||HTML标题|HTML段落|HTML样式|HTML格式化|HTML引用元素|HTML计算机代码元素||HTML注释|HTML颜色|HTML和样式表|HTML超链接|HTML图片|HTML表格||HTML列表|HTML块级元素|HTML类|HTMLiframe|HTML和Ja
  • XD素材库 Sevn_
    这可能是目前为止最全的AdobeXD资源分享。01亲儿子Adobe官方为AdobeXD建立的一系列网站：官网：https://www.adobe.com/cn/products/xd.html教程：https://letsxd.com插件：https://adobexdplatform.com/博客：https://theblog.adobe.com/creative-cloud/xd/社区：ht
  • EXCEL2007常用函数及财务数据处理经典视频教程 诗淇_e78c
    EXCEL2007常用函数及财务数据处理经典视频教程https://www.jczhijia.com/CourseChaptersList/36.html教程描述：EXCEL2007日常及财务数据处理经典视频教程共由15章组成，主要介绍了函数的应用基础、逻辑函数与文本函数的应用，日期函数与时间函数额应用、财务系列函数应用、工程函数、各种常见图标范例、股价图表等，内容详实1-1插入函数向导插入公式.
  • 编程好书推荐 weixin_34406796 嵌入式操作系统设计模式
    编程学习好书推介一、WEB应用开发人员必修功课类1、XHTML教程（XHTML）作者：ChelseaValentine,ChrisMinnickNewRiders原版，人民邮电出版社中文版是的，今天你最应该学习的是XHTML，而不是HTML。HTML4.x已经是一个被废弃了的标准，今天的标准是XHTML1.0。XHTML1.0也不是XHTML最新的版本，但是它是目前唯一得到浏览器广泛支持和唯一实用
  • html thead隐藏,HTML的标签 weixin_39619858 htmlthead隐藏
    HTML标签标签仅得到所有主流浏览器的部分支持。定义和用法(推荐学习：html教程)标签定义表格的表头。该标签用于组合HTML表格的表头内容。thead元素应该与tbody和tfoot元素结合起来使用。tbody元素用于对HTML表格中的主体内容进行分组，而tfoot元素用于对HTML表格中的表注(页脚)内容进行分组。注：如果您使用thead、tfoot以及tbody元素，您就必须使用全部的元素。
  • HTML教程 hixiaoyang golang
    HTML表单HTML5教程HTML5图像HTML5多媒体HTML5APIsHTML开发环境搭建使用Emmet提高开发效率HTML简介HTML基础HTML元素HTML属性HTML标题HTML段落HTML样式HTML格式化HTML引用元素HTML计算机代码元素HTML注释HTML颜色HTML和样式表HTML超链接HTML图片HTML表格HTML列表HTML块级元素HTML类HTMLiframeHTML
  • html教程【简单好上手】 沐风清扬 htmlhtml前端css
    码字不易感谢关注__哈喽各位，本期给大家做一期html的入门教程！那么先让我们看看什么是html吧！百度百科是这样介绍的HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。什么意思呢？简单粗暴的
  • HTML教程（一） 我是孟小鱼呀
    一、html的主体标签在和中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。标签有自己的属性，设置标签内的属性，可控制整个页面的显示方式。标签的属性属性描述link设定页面默认的连接颜色alink设定鼠标正在单击时的连接颜色vlink设定访问后连接文字的颜色background设定页面背景图像bgcolor设定页面背景颜色leftmargin设定页面的左边距topmargin设定
  • html 框架的用处,HTML的标签有什么作用 Daisy-Tung html框架的用处
    HTML标签所有浏览器都支持标签。定义和用法(推荐学习：html教程)frameset元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中，frameset元素仅仅会规定在框架集中存在多少列或多少行。您必须使用cols或rows属性。HTML与XHTML之间的差异NONE提示注：如果您希望验证某个包含框架的页面，请确保DTD被设置为"FramesetDTD
  • 网页css+html实现登录界面的分步奏操作详解+完整代码后期会完备python后端教程 南师大蒜阿熏呀 数据可视化csshtmlpython
    话不多说，直接上才艺，源代码在最后面，有疑问的多去看看这些网站html教程css教程python后端教程html1、新建一个网页设置屏幕密度为高频，中频，低频自动缩放2、编写登录界面基本内容bodycss1、建立css初始化位置*{margin:0;padding:0;}html{height:100%;}body{height:100%;}仔细观察网页变化和之前的2、建立渐变色背景.beijin
  • java Illegal overloaded getter method with ambiguous type for propert的解决 zwllxs javajdk
    好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，
  • IT人应当知道的10个行业小内幕 beijingjava 工作互联网
    10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。 　　尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。 　　然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配
  • java 实现自定义链表 CrazyMizzz java数据结构
    1.链表结构   链表是链式的结构 2.链表的组成    链表是由头节点，中间节点和尾节点组成    节点是由两个部分组成：       1.数据域       2.引用域 3.链表的实现 &nbs
  • web项目发布到服务器后图片过一会儿消失 麦田的设计者 struts2上传图片永久保存
      作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片
  • CodeIgniter框架Cart类 name 不能设置中文的解决方法 IT独行者 CodeIgniterCart框架　
    今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。 在CI手册里也有说明，如下： $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '
  • linux回收站 _wy_ linux回收站
    今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。     后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在
  • jquery回到页面顶端 知了ing htmljquerycss
    html代码： <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><
  • B树、B-树、B+树、B*树 矮蛋蛋 B树
    原文地址： http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树        即二叉搜索树：        1.所有非叶子结点至多拥有两个儿子（Left和Right）； &nb
  • 数据库连接池 alafqq 数据库连接池
    http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼 数据库连接池 用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误： java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec
  • java泛型 百合不是茶 java泛型
    泛型 在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患   泛型的特点：消除强制转换 确保类型安全 向后兼容   简单泛型的定义：      泛型：就是在类中将其模糊化，在创建对象的时候再具体定义 class fan
  • javascript闭包[两个小测试例子] bijian1013 JavaScriptJavaScript
    一.程序一 <script> var name = "The Window"; var Object_a = { 　　name : "My Object", 　　getNameFunc : function(){ var that = this; 　　　　return function(){ 　　　　
  • 探索JUnit4扩展：假设机制（Assumption） bijian1013 javaAssumptionJUnit单元测试
    一.假设机制（Assumption）概述        理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，
  • 【Gson四】范型POJO的反序列化 bit1129 POJO
    在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO   import com.google.gson.Gson; import java.
  • 【Spark八十五】Spark Streaming分析结果落地到MySQL bit1129 Stream
    几点总结： 1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，
  • NGINX + LUA实现复杂的控制 ronin47 nginx lua
    安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
  • java-递归判断数组是否升序 bylijinnan java
    public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv
  • Netty源码学习-DefaultChannelPipeline2 bylijinnan javanetty
    Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”： 如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB） 来
  • Java工具之JPS chinrui java
    JPS使用     熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来
  • window.print分页打印 ctrain window
    function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) {
  • 安装hadoop时 执行jps命令Error occurred during initialization of VM daizj jdkhadoopjps
    在安装hadoop时，执行JPS出现下面错误   [slave16][email protected]:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working
  • PHP开发大型项目的一点经验 dcj3sjt126com PHP重构
    一、变量 最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。 二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十
  • android笔记之--向网络发送GET/POST请求参数 dcj3sjt126com android
    使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi
  • linux复习笔记 之bash shell (3) 通配符 eksliang linux 通配符linux通配符
    转载请出自出处： http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能，那就是通配符。 下面列出一些常用的通配符，如下表所示 符号 意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c
  • Android关于短信加密 gqdy365 android
    关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）：     1、因为Android有短信收发接口，可以调用接口完成短信收发；         发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm
  • asp.net在网站根目录下创建文件夹 hvt .netC#hovertreeasp.netWeb Forms
    假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下： string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D
  • 一个合格的程序员应该读过哪些书 justjavac 程序员书籍
    编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本， 你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自己的评语。 以前就有国内网友介绍这个程序员书单，不过都是推荐数
  • 单实例实践 跑龙套_az 单例
       1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes
  • PO VO BEAN 理解 q137681467 VODTOpo
    PO：      全称是 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。 好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。     BO：     全称是 business object:业务对象 主要作用是把业务逻辑封装为一个对象。这个对
  • 战胜惰性，暗自努力 金笛子 努力
    偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？ 我有个朋友是搞技术的，平时嘻嘻哈哈，以
  • NDK/JNI二维数组多维数组传递 wenzongliang 二维数组jniNDK
    多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组 用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他