电脑/html5/html5入门.html

<!DOCTYPE html>
<html>
<head>
<!-- 2016-07-30 六 23:07 -->
<meta  charset="utf-8">
<meta  name="viewport" content="width=device-width, initial-scale=1">
<title>html5入门</title>
<meta  name="generator" content="Org-mode">
<meta  name="author" content="万泽(德山书生)">
<meta  name="description" content="制作者邮箱：a358003542@gmail.com"
>
<style type="text/css">
body {
    margin-right: auto;
    margin-left: auto;
}

.title {
    display: block;
    text-align: center;
    padding: 10px;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.underline{
    text-decoration: underline;
}
   html, body {
    margin: 0;
    padding: 0;
    font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif,"宋体";
    font-size: 1em;
}

#content {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background:#fcfcfc;
    height:100%;
    margin-left:300px;
    max-width:800px;
    min-height:100%;
    padding:1.618em 3.236em;
}

code {
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

pre {
    max-width: 100%;
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow : auto;
}


blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

li{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

p{
    text-indent:2em;
    line-height:150%;
}

/* dl */
dl {
    margin-top: 0;
    margin-bottom: 20px;
}
dt {
    font-weight: 700;
    line-height: 150%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
dd {
    line-height: 150%;
}

@media (min-width: 768px) {
  dt {
    white-space: nowrap;
  }
}

video{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

figure p{
    text-indent:0em;
}
img{
    max-width: 100%;
}

embed{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

figure{
    text-align: center;
}

/*  class  */
.FRAMED{
    max-width:100%;
    border:1px solid ;
    padding: 1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.NOTECARD{
    width: 35%;
    position:relative;
    right: -30%;
    padding: 1em;
    margin:0 auto;
    border: solid 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
table
*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 16px 0;
    empty-cells: show;
    border: 1px solid #ccc;
    width: 100%;
    display: table;
}

table tr {
    border-bottom: 1px solid #ddd;
}
table th,table td{
    padding:8px;
}

table tr:nth-child(even) {
    background-color: #f1f1f1;
}


ul,ol,dl{
    line-height:24px;
    list-style-image:none;
    /* list-style:none; */
    margin:0px 0px 24px 0px;
    padding:0;
}

li{
    margin-left: 24px;
}

dd{
    margin:0;
}

#content .section ul,#content .toctree-wrapper ul,article ul{
    list-style:disc;
    line-height:24px;
    margin-bottom:24px}

#content .section ul li,#content .toctree-wrapper ul li,article ul li{
    list-style:disc;
    margin-left:24px}

#content .section ul li p:last-child,#content .toctree-wrapper ul li p:last-child,article ul li p:last-child{
                                                                                                                                  margin-bottom:0}

#content .section ul li ul,#content .toctree-wrapper ul li ul,article ul li ul{
    margin-bottom:0}

#content .section ul li li,#content .toctree-wrapper ul li li,article ul li li{
    list-style:circle}

#content .section ul li li li,#content .toctree-wrapper ul li li li,article ul li li li{
    list-style:square}

#content .section ul li ol li,#content .toctree-wrapper ul li ol li,article ul li ol li{
    list-style:decimal}

#content .section ol,#content ol,article ol{
    list-style:decimal;
    line-height:24px;
    margin-bottom:24px}

#content .section ol li,#content ol li,article ol li{
    list-style:decimal;
    margin-left:24px}

#content .section ol li p:last-child,#content ol li p:last-child,article ol li p:last-child{
                                                                                                                           margin-bottom:0}

#content .section ol li ul,#content ol li ul,article ol li ul{
    margin-bottom:0}

#content .section ol li ul li,#content ol li ul li,article ol li ul li{
    list-style:disc}

dl dt{
    font-weight:bold;
}

dl p,dl table,dl ul,dl ol{
    margin-bottom:12px !important;
}

dl dd{
    margin:0 0 12px 24px;
}

@media print{
    .codeblock,pre.src{
        white-space:pre.src-wrap}
}

@media print{
    html,body,section{
        background:none !important}

    *{
        box-shadow:none !important;
        text-shadow:none !important;
        filter:none !important;
        -ms-filter:none !important}

    a,a:visited{
          text-decoration:underline}

    pre.src,blockquote{
        page-break-inside:avoid}

    thead{
        display:table-header-group}

    tr,img{
        page-break-inside:avoid}

    img{
        max-width:100% !important}

    @page{
        margin:0.5cm}

    p,h2,h3{
        orphans:3;
        widows:3}

    h2,h3{
        page-break-after:avoid}
}

@media print{
    #postamble{
        display:none}

    #content{
        margin-left:0}
}

@media print{
    #table-of-contents{
        display:none}

    @page{
        size: auto;
        margin: 25mm 25mm 25mm 25mm;}

    body {
        margin: 0px;}
}

@media screen and (max-width: 768px){
}

@media only screen and (max-width: 480px){
}

@media screen and (max-width: 768px){
    .tablet-hide{
        display:none}
}

@media screen and (max-width: 480px){
    .mobile-hide{
        display:none}
}

@media screen and (max-width: 480px){
}

@media screen and (max-width: 768px){
    #content{
        margin-left:0;
        padding: 1em 1em;}

    #content #content{
        padding:1.618em}

    #content.shift{
        position:fixed;
        min-width:100%;
        left:85%;
        top:0;
        height:100%;
        overflow:hidden}
}

@media screen and (min-width: 1400px){
    #content{
        background:rgba(0,0,0,0.05)}

    #content{
        background:#fcfcfc}
}

@media screen and (max-width: 768px){
    #copyright{
        width:85%;
        display:none}

    #copyright.shift{
        display:block}

    img{
        width:100%;
        height:auto}
}

@media screen and (max-width: 480px){
    #content .sidebar{
        width:100%}
}


.figure p{
    color:#000;
    font:italic 85%/1 arial,sans-serif;
    padding:1em 0;
}

.rotate-90{
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
}

.rotate-270{
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    transform:rotate(270deg);
}

#toggle-sidebar,
#table-of-contents .close-sidebar {
    display: none;
}

@media screen and (max-width: 768px) {
    #table-of-contents {
        display: none;
        width: 60%;
    }

    #table-of-contents h2 a {
        display: block;
    }

    #table-of-contents:target {
        display: block;
    }

    #copyright, #postamble {
        display: none;
    }

    #toggle-sidebar {
        background-color: #2980B9;
        display: block;
        margin-bottom: 1.6em;
        padding: 0.6em;
        text-align: center;
    }

    #toggle-sidebar h2 {
        color: white;
        font-size: 100%;
        line-height: 50px;
        margin: 0;
        padding: 0;
    }

    #table-of-contents .close-sidebar {
       color: rgba(255, 255, 255, 0.3);
       display: inline-block;
       margin: 0px 10px 0px 45px;
       padding: 10px;
    }
}

*{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

figcaption,figure,footer,header,hgroup,nav{
    display:block}

ins{
    background:#ff9;
    color:#000;
    text-decoration:none}

mark{
    background:#ff0;
    color:#000;
    font-style:italic;
    font-weight:bold}

small{
    font-size:85%}

sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline}

sup{
    top:-0.5em}

sub{
    bottom:-0.25em}

img{
    -ms-interpolation-mode:bicubic;
    vertical-align:middle;
    max-width:100%}

svg:not(:root){
    overflow:hidden}

figure{
    margin:0}

label{
    cursor:pointer}

legend{
    border:0;
    margin-left:-7px;
    padding:0;
    white-space:normal}

#content .danger,#content .error{
    background:#fdf3f2}

legend{
    display:block;
    width:100%;
    border:0;
    padding:0;
    white-space:normal;
    margin-bottom:24px;
    font-size:150%;
    *margin-left:-7px}

label{
    display:block;
    margin:0 0 0.3125em 0;
    color:#333;
    font-size:90%}

a{
    color:#2980B9;
    text-decoration:none;
    cursor:pointer}


a:hover,a:active{
    outline:0;
}

a:hover{
    color:#3091d1}

a:visited{
    color:#9B59B6}

.left{
    text-align:left}

.center{
    text-align:center}

.right{
    text-align:right}

hr{
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #e1e4e5;
    margin:24px 0;
    padding:0}

#table-of-contents li{
    list-style:none;
    margin-left: 0px;
}

#table-of-contents header{
    height:32px;
    display:inline-block;
    line-height:32px;
    padding:0 1.618em;
    display:block;
    font-weight:bold;
    text-transform:uppercase;
    font-size:80%;
    color:#2980B9;
    white-space:nowrap}

#table-of-contents ul{
    margin-bottom:0}

#table-of-contents li.divide-top{
    border-top:solid 1px #404040}

#table-of-contents li.divide-bottom{
    border-bottom:solid 1px #404040}

#table-of-contents li.current{
    background:#e3e3e3}

#table-of-contents li.current a{
    color:gray;
    border-right:solid 1px #c9c9c9;
    padding:0.4045em 2.427em}

#table-of-contents li.current a:hover{
    background:#d6d6d6}

#table-of-contents li a{
    /* color:#404040; */
    padding:0.4045em 1.618em;
    position:relative;
    /* background:#fcfcfc; */
    border:none;
    /* border-bottom:solid 1px #c9c9c9; */
    /* border-top:solid 1px #c9c9c9; */
    padding-left:1.618em -4px}

#table-of-contents li.on a:hover,#table-of-contents li.current>a:hover{
    background:#fcfcfc}

#table-of-contents li ul li a{
    /* background:#c9c9c9; */
    padding:0.4045em 2.427em}

#table-of-contents li ul li ul li a{
    padding:0.4045em 3.236em}

#table-of-contents li.current ul{
    display:block}

/* #table-of-contents li ul{ */
/*     margin-bottom:0; */
/*     display:none} */

#table-of-contents .local-toc li ul{
    display:block}

#table-of-contents li ul li a{
    margin-bottom:0;
    color:#b3b3b3;
    font-weight:normal}

#table-of-contents a{
    display:inline-block;
    line-height:18px;
    padding:0.4045em 1.618em;
    display:block;
    position:relative;
    font-size:90%;
    color:#b3b3b3;
    direction: ltr;
}

#table-of-contents a:hover{
    background-color:#4e4a4a;
    cursor:pointer}

/* #text-table-of-contents { */
/*     overflow:scroll; */
/* } */

#table-of-contents{
    position:fixed;
    top:0;
    left:0;
    width:300px;
    overflow-x:hidden;
    overflow-y:scroll;
    height:100%;
    background:#343131;
    z-index:200;
    scrollbar-base-color: #1F1D1D;
    scrollbar-arrow-color: #b3b3b3;
    scrollbar-shadow-color: #1F1D1D;
    scrollbar-track-color : #343131;
}

#table-of-contents h2{
    z-index:200;
    background-color:#2980B9;
    text-align:center;
    padding:0.809em;
    display:block;
    color:#fcfcfc;
    font-size: 100%;
    margin-bottom:0.809em}

ul.nav li ul li {
    display: none;
}

ul.nav li ul li ul li {
    display: none;
}

ul.nav li.active ul li {
    display: inline;
}

ul.nav li.active ul li ul li {
    display: inline;
}

ul.nav li.active ul li a {
    background-color: #E3E3E3;
    color: #8099B0;
    border-right:solid 1px #c9c9c9 !important;
}

ul.nav li.active ul li.active a {
    background-color: #C9C9C9;
    color: black !important;
    font-weight: bold !important;
}

ul.nav li.active ul li.active ul li.active a {
    color: black !important;
    font-weight: bold !important;
    display: block !important;
}

ul.nav li.active ul li.active ul li a {
    color: #808080 !important;
    font-weight: normal !important;
    display: block !important;
}

ul.nav li.active ul li ul li a {
    display: none !important;
}


ul.nav li ul li ul li ul li {
    display: none !important; /* as long as nav is on multiple levels of ul */
    /* display: none; /* as long as nav is on multiple levels of ul *\/ */
}

ul.nav li.active > a {
    border-bottom:solid 1px #c9c9c9 !important; /* XXX Restrict it to 2nd level */
    border-right:solid 1px #c9c9c9 !important;
}

ul.nav li.active a {
    color: gray !important;
    font-weight:bold;
    background-color: white;
    border-right:solid 0px white !important;
}

ul.nav > li.active > a {
    color: black !important;
}

footer{
    color:#999}

footer p{
    margin-bottom:12px}

#copyright, #postamble{
    position:fixed;
    bottom:0;
    left:0;
    width:300px;
    color:#fcfcfc;
    background:#1f1d1d;
    border-top:solid 10px #343131;
    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
    font-size: 90%;
    z-index:400;
    padding:12px;
}

#postamble .author {
    font-size: 100%;
    margin-bottom: 0px;
}

#postamble .date {
    font-size: 90%;
    margin-bottom: 0px;
    color: #27AE60;
}

#postamble .creator,#postamble .validation {
    display:none;
}

#copyright a{
    color:#2980B9;
    text-decoration:none}

#copyright .rst-current-version{
    padding:12px;
    background-color:#272525;
    display:block;
    text-align:right;
    font-size:90%;
    cursor:pointer;
    color:#27AE60;
    *zoom:1}

#content img{
    max-width:100%;
    height:auto !important}

#content div.figure{
    margin-bottom:24px}

#content div.figure.align-center{
    text-align:center}

#content .section>img,#content .section>a>img{
    margin-bottom:24px}

.verse{
    border-left:5px solid #6AB0DE;
    background-color: #E7F2FA;
    padding: 6px 20px;
    font-style:italic;
}

#content .note .last,#content .attention .last,#content .caution .last,#content .danger .last,#content .error .last,#content .hint .last,#content .important .last,#content .tip .last,#content .warning .last,#content .seealso .last,#content .admonitiontodo .last{
    margin-bottom:0}

#content .admonition-title:before{
    margin-right:4px}

#content .section ol p,#content .section ul p{
    margin-bottom:12px}

#content h1 .headerlink,#content h2 .headerlink,#content h3 .headerlink,#content h4 .headerlink,#content h5 .headerlink,#content h6 .headerlink,#content dl dt .headerlink{
    display:none;
    visibility:hidden;
    font-size:14px}

#content h1 .headerlink:after,#content h2 .headerlink:after,#content h3 .headerlink:after,#content h4 .headerlink:after,#content h5 .headerlink:after,#content h6 .headerlink:after,#content dl dt .headerlink:after{
    visibility:visible;
    content:"";
    font-family:FontAwesome;
    display:inline-block}

#content h1:hover .headerlink,#content h2:hover .headerlink,#content h3:hover .headerlink,#content h4:hover .headerlink,#content h5:hover .headerlink,#content h6:hover .headerlink,#content dl dt:hover .headerlink{
    display:inline-block}

#content .sidebar{
    float:right;
    width:40%;
    display:block;
    margin:0 0 24px 24px;
    padding:24px;
    background:#f3f6f6;
    border:solid 1px #e1e4e5}

#content .sidebar p,#content .sidebar ul,#content .sidebar dl{
    font-size:90%}

#content .sidebar .last{
    margin-bottom:0}

#content .sidebar .sidebar-title{
    display:block;
    font-family:"Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
    font-weight:bold;
    background:#e1e4e5;
    padding:6px 12px;
    margin:-24px;
    margin-bottom:24px;
    font-size:100%}

#content .footnote-reference,#content .citation-reference{
    vertical-align:super;
    font-size:90%}

span[id*='MathJax-Span']{
    color:#404040}

.math{
    text-align:center}

#footnotes{
    border-top:1px solid #e1e4e5;
    padding-top: 36px;
}

h2.footnotes{
    display:none;
}


.footnum:before, .footref:before{
    content:"[";
}

.footnum:after, .footref:after{
    content:"]";
}

.footpara {
    color: #999;
    font-size: 90%;
    font-family:"Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    line-height: 1.25em;
    /* display: inline; */
}
.highlight .hll { background-color: #ffffcc }
.highlight  { background: #f8f8f8; }
.highlight .c { color: #8f5902; font-style: italic } /* Comment */
.highlight .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
.highlight .g { color: #000000 } /* Generic */
.highlight .k { color: #204a87; font-weight: bold } /* Keyword */
.highlight .l { color: #000000 } /* Literal */
.highlight .n { color: #000000 } /* Name */
.highlight .o { color: #ce5c00; font-weight: bold } /* Operator */
.highlight .x { color: #000000 } /* Other */
.highlight .p { color: #000000; font-weight: bold } /* Punctuation */
.highlight .ch { color: #8f5902; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
.highlight .cpf { color: #8f5902; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #8f5902; font-style: italic } /* Comment.Single */
.highlight .cs { color: #8f5902; font-style: italic } /* Comment.Special */
.highlight .gd { color: #a40000 } /* Generic.Deleted */
.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #ef2929 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #000000; font-style: italic } /* Generic.Output */
.highlight .gp { color: #8f5902 } /* Generic.Prompt */
.highlight .gs { color: #000000; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
.highlight .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
.highlight .ld { color: #000000 } /* Literal.Date */
.highlight .m { color: #0000cf; font-weight: bold } /* Literal.Number */
.highlight .s { color: #4e9a06 } /* Literal.String */
.highlight .na { color: #c4a000 } /* Name.Attribute */
.highlight .nb { color: #204a87 } /* Name.Builtin */
.highlight .nc { color: #000000 } /* Name.Class */
.highlight .no { color: #000000 } /* Name.Constant */
.highlight .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #ce5c00 } /* Name.Entity */
.highlight .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #000000 } /* Name.Function */
.highlight .nl { color: #f57900 } /* Name.Label */
.highlight .nn { color: #000000 } /* Name.Namespace */
.highlight .nx { color: #000000 } /* Name.Other */
.highlight .py { color: #000000 } /* Name.Property */
.highlight .nt { color: #204a87; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #000000 } /* Name.Variable */
.highlight .ow { color: #204a87; font-weight: bold } /* Operator.Word */
.highlight .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
.highlight .mb { color: #0000cf; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
.highlight .sb { color: #4e9a06 } /* Literal.String.Backtick */
.highlight .sc { color: #4e9a06 } /* Literal.String.Char */
.highlight .sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4e9a06 } /* Literal.String.Double */
.highlight .se { color: #4e9a06 } /* Literal.String.Escape */
.highlight .sh { color: #4e9a06 } /* Literal.String.Heredoc */
.highlight .si { color: #4e9a06 } /* Literal.String.Interpol */
.highlight .sx { color: #4e9a06 } /* Literal.String.Other */
.highlight .sr { color: #4e9a06 } /* Literal.String.Regex */
.highlight .s1 { color: #4e9a06 } /* Literal.String.Single */
.highlight .ss { color: #4e9a06 } /* Literal.String.Symbol */
.highlight .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #000000 } /* Name.Variable.Class */
.highlight .vg { color: #000000 } /* Name.Variable.Global */
.highlight .vi { color: #000000 } /* Name.Variable.Instance */
.highlight .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */
</style>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        displayAlign: "center",
        displayIndent: "0em",

        "HTML-CSS": { scale: 100,
                        linebreaks: { automatic: "false" },
                        webFont: "TeX"
                       },
        SVG: {scale: 100,
              linebreaks: { automatic: "false" },
              font: "TeX"},
        NativeMML: {scale: 100},
        TeX: { equationNumbers: {autoNumber: "AMS"},
               MultLineWidth: "85%",
               TagSide: "right",
               TagIndent: ".8em"
             }
});
</script>
<script type="text/javascript"
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
<div id="content">
<header>
<h1 class="title">html5入门</h1>
</header><nav id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#orgheadline3">1. html的第一个模板</a>
<ul>
<li><a href="#orgheadline1">1.1. doctype声明</a></li>
<li><a href="#orgheadline2">1.2. 字符集设置为utf-8</a></li>
</ul>
</li>
<li><a href="#orgheadline7">2. 一个基本的html网页</a>
<ul>
<li><a href="#orgheadline4">2.1. 常用html标签清单</a></li>
<li><a href="#orgheadline5">2.2. 文字强调的html5规范</a></li>
<li><a href="#orgheadline6">2.3. 绝对路径和相对路径</a></li>
</ul>
</li>
<li><a href="#orgheadline19">3. 从html到css</a>
<ul>
<li><a href="#orgheadline8">3.1. 注释</a></li>
<li><a href="#orgheadline9">3.2. 有序列表里面带无序列表</a></li>
<li><a href="#orgheadline10">3.3. table</a></li>
<li><a href="#orgheadline11">3.4. div和span</a></li>
<li><a href="#orgheadline17">3.5. inline css</a>
<ul>
<li><a href="#orgheadline12">3.5.1. font-size</a></li>
<li><a href="#orgheadline13">3.5.2. color</a></li>
<li><a href="#orgheadline14">3.5.3. font-family</a></li>
<li><a href="#orgheadline15">3.5.4. background-color</a></li>
<li><a href="#orgheadline16">3.5.5. text-align</a></li>
</ul>
</li>
<li><a href="#orgheadline18">3.6. 外部css</a></li>
</ul>
</li>
<li><a href="#orgheadline44">4. css入门</a>
<ul>
<li><a href="#orgheadline25">4.1. css选择器</a>
<ul>
<li><a href="#orgheadline20">4.1.1. 多级选择</a></li>
<li><a href="#orgheadline21">4.1.2. 带上其他属性选择</a></li>
<li><a href="#orgheadline24">4.1.3. 伪类选定</a>
<ul>
<li><a href="#orgheadline22">4.1.3.1. first-child伪类</a></li>
<li><a href="#orgheadline23">4.1.3.2. nth-child伪类</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#orgheadline26">4.2. css的长度单位</a></li>
<li><a href="#orgheadline28">4.3. css的盒子模型</a>
<ul>
<li><a href="#orgheadline27">4.3.1. border属性</a></li>
</ul>
</li>
<li><a href="#orgheadline41">4.4. css布局</a>
<ul>
<li><a href="#orgheadline33">4.4.1. display属性</a>
<ul>
<li><a href="#orgheadline29">4.4.1.1. 块级元素</a></li>
<li><a href="#orgheadline30">4.4.1.2. inline元素</a></li>
<li><a href="#orgheadline31">4.4.1.3. inline-block</a></li>
<li><a href="#orgheadline32">4.4.1.4. none</a></li>
</ul>
</li>
<li><a href="#orgheadline34">4.4.2. float属性</a></li>
<li><a href="#orgheadline35">4.4.3. clear属性</a></li>
<li><a href="#orgheadline40">4.4.4. position属性</a>
<ul>
<li><a href="#orgheadline36">4.4.4.1. static</a></li>
<li><a href="#orgheadline37">4.4.4.2. relative</a></li>
<li><a href="#orgheadline38">4.4.4.3. fixed</a></li>
<li><a href="#orgheadline39">4.4.4.4. absolute</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#orgheadline42">4.5. 其他零零碎碎的css属性</a></li>
<li><a href="#orgheadline43">4.6. css框架</a></li>
</ul>
</li>
<li><a href="#orgheadline47">5. 附录</a>
<ul>
<li><a href="#orgheadline45">5.1. !important 用法</a></li>
<li><a href="#orgheadline46">5.2. 参考资料</a></li>
</ul>
</li>
</ul>
</div>
</nav>


<div class="outline-2">
<h2 id="orgheadline3">html的第一个模板</h2>
<div class="outline-text-2" id="text-1">
<div class="highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;zh&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span> <span class="p">/&gt;</span>

    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;templates/index.css&quot;</span><span class="p">/&gt;</span>

    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>your awesome title<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>


    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
</div>


<div class="outline-3">
<h3 id="orgheadline1">doctype声明</h3>
<div class="outline-text-3" id="text-1-1">
<p>
现在html5的doctype声明非常简单了，开头加入如下简单一行即可:
</p>
<pre>
&lt;!DOCTYPE html&gt;
</pre>

<p>
然后进入 <strong>html</strong> 标签，然后进入 <strong>head</strong> 标签，在head标签里面的内容不会显示在网页上，主要是一些关于本网页的配置信息。
</p>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline2">字符集设置为utf-8</h3>
<div class="outline-text-3" id="text-1-2">
<p>
现在html5使用如下更简洁的语法了:
</p>
<pre>
&lt;meta charset="utf-8" /&gt;
</pre>


<p>
然后 <strong>body</strong> 标签里面存放这实际要显示的网页内容。
</p>
</div>
</div>
</div>


<div class="outline-2">
<h2 id="orgheadline7">一个基本的html网页</h2>
<div class="outline-text-2" id="text-2">
<div class="highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;zh&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>basic html<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">nav</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>Home<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>About<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>Products<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>Contact Us<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">header</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>Very Basic Document<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>A tag line might go here<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">header</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">section</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>First Article Title<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>Second Article Title<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Praesent libero. Sed cursus ante dapibus diam.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">aside</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">h4</span><span class="p">&gt;</span>Connect With Us<span class="p">&lt;/</span><span class="nt">h4</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>Twitter<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>Facebook<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">aside</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">footer</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>All rights reserved.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">footer</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>

<p>
html5新加入了很多关于文档结构的标签，这些标签并没有任何布局含义，相当于一个自带名字的div，也就是默认标签的意思。其主要作用就是html内容分组(group)。
</p>

<p>
下面是常用的这些标签含义，在实际使用中，应该尽量规范使用这些标签。
</p>
<dl class="org-dl">
<dt>header</dt><dd>一个网页总要有个头，推荐都使用这个标签。</dd>
<dt>nav</dt><dd>一般是目录或者导航菜单。</dd>
<dt>section</dt><dd>一般是本网页的主体信息部分或者主页面——类似于GUI的主要显示窗口。</dd>
<dt>article</dt><dd>section下面的某一独立内容部分。</dd>
<dt>aside</dt><dd>和网页主体信息不太相关的其他信息。</dd>
<dt>footer</dt><dd>一般是关于作者，版权或者其他比如脚注等信息。</dd>
</dl>

<p>
这些都可以通过div然后class或者id写法来取代，在实际使用中如果上面的默认标签能够满足需求，那么就应该使用html5的这些默认标签。
</p>

<p>
上面的例子已经出现了一些标签，然后还有一些很常用的标签，下面承接上面所将的继续补充写一个常用html标签清单。
</p>
</div>

<div class="outline-3">
<h3 id="orgheadline4">常用html标签清单</h3>
<div class="outline-text-3" id="text-2-1">
<dl class="org-dl">
<dt>ul</dt><dd>不编号列表，也叫无序列表（Unordered list）。里面的item用 <strong>li</strong> 标签封装。</dd>
<dt>ol</dt><dd>编号列表，也叫有序列表（Ordered list）。里面的item用 <strong>li</strong> 标签封装。</dd>
<dt>a</dt><dd>引用链接标签，其中常用的属性是 <strong>href</strong> ，指明具体的引用地址。</dd>
<dt>h1,h2,h3&#x2026;</dt><dd>标题标签，数字表示各个标题的层级。</dd>
<dt>p</dt><dd>段落标签。</dd>
<dt>b</dt><dd>文字加粗</dd>
<dt>i</dt><dd>文字斜体</dd>
<dt>&lt;br /&gt;</dt><dd>换行</dd>
<dt>&lt;hr /&gt;</dt><dd>水平线</dd>
<dt>img</dt><dd>加入图片，其中最常用的属性是 <strong>src</strong> ，指明具体图片引用地址。</dd>
</dl>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline5">文字强调的html5规范</h3>
<div class="outline-text-3" id="text-2-2">
<p>
按照html5提出的规范，并不推荐用&lt;b&gt;标签作为文字的强调用途（我一般使用的文字加粗是那个词提醒读者这个词需要特别记忆）。其推荐的是&lt;em&gt;标签作为一级强调，然后&lt;strong&gt;标签作为更进一步的强调。在默认样式中，&lt;em&gt;是斜体，然后&lt;strong&gt;是粗体。显然html5的意思是将表达文字的样式这样的标签&lt;b&gt;&lt;i&gt;尽可能不用直到废弃，然后对于文字强调都推荐使用&lt;em&gt;和&lt;strong&gt;标签。其设计思路是html完全成为一个描述文档内容结构的标签系统，而不带有任何内容表现形式的东西。还是推荐按照html5规范来，少用&lt;b&gt;标签和&lt;i&gt;标签。请参看 <a href="http://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em">这个网页</a> 的讨论。
</p>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline6">绝对路径和相对路径</h3>
</div>
</div>


<div class="outline-2">
<h2 id="orgheadline19">从html到css</h2>
<div class="outline-text-2" id="text-3">
</div><div class="outline-3">
<h3 id="orgheadline8">注释</h3>
<div class="outline-text-3" id="text-3-1">
<div class="highlight"><pre><span></span><span class="c">&lt;!-- Make me into a comment. --&gt;</span>
</pre></div>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline9">有序列表里面带无序列表</h3>
<div class="outline-text-3" id="text-3-2">
<p>
就是把无序列表嵌套进去即可。
</p>
<div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>ol li1<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>ol li2<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>ul li1<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>ul li2<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline10">table</h3>
<div class="outline-text-3" id="text-3-3">
<p>
table表格有时也可用于布局，不过不推荐这种风格，因为html标签应该尽可能是文本结构层而非表现形式层。一个完整的table模板如下所示:
</p>

<div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">caption</span><span class="p">&gt;</span>表格的标题用caption标签<span class="p">&lt;/</span><span class="nt">caption</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">thead</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;&lt;</span><span class="nt">th</span><span class="p">&gt;</span>标签<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;&lt;</span><span class="nt">th</span><span class="p">&gt;</span>fullname<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;&lt;</span><span class="nt">th</span><span class="p">&gt;</span>说明<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">thead</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tbody</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;&lt;</span><span class="nt">td</span><span class="p">&gt;</span>tr<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">td</span><span class="p">&gt;</span>table row<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">td</span><span class="p">&gt;</span>表格中的一行<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;&lt;</span><span class="nt">td</span><span class="p">&gt;</span>th<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">td</span><span class="p">&gt;</span>table head<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">td</span><span class="p">&gt;</span>表格的列名<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;&lt;</span><span class="nt">td</span><span class="p">&gt;</span>td<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">td</span><span class="p">&gt;</span>table data<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">td</span><span class="p">&gt;</span>表格具体要展示的数据<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">tbody</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
</pre></div>

<table>
<caption>表格的标题用caption标签</caption>
<thead>
<tr><th>标签</th><th>fullname</th><th>说明</th></tr>
</thead>
<tbody>
<tr><td>tr</td><td>table row</td><td>表格中的一行</td></tr>
<tr><td>th</td><td>table head</td><td>表格的列名</td></tr>
<tr><td>td</td><td>table data</td><td>表格具体要展示的数据</td></tr>
</tbody>
</table>

<p>
这里的三线表样式使用下面的简单css配置完成的:
</p>
<div class="highlight"><pre><span></span><span class="nt">table</span><span class="p">{</span>
    <span class="nb">border-top</span><span class="o">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="p">;</span>
    <span class="nb">border-bottom</span><span class="o">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="p">;</span>
<span class="p">}</span>
<span class="nt">thead</span><span class="p">{</span>
    <span class="nb">border-bottom</span><span class="o">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="p">;</span>
<span class="p">}</span>
</pre></div>

<p>
大体在html上画表格就如上所示了，其他一些更漂亮的表格制作都是通过css来完成的，这里先略过了。
</p>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline11">div和span</h3>
<div class="outline-text-3" id="text-3-4">
<p>
div（division）在html标记语言中主要是区块的意思。我们知道html页面要显示的元素就好比一个个盒子逐步排布下来，而 <code>div</code> 可以看作一个这样自定义的盒子。html中有两种显示风格的盒子，一种是块状区块，比如p段落标签；还有一种是inline盒子，比如说em标签，其不会换行。
</p>

<p>
div标签更确切的表达是块状区块，可以看作其display属性是 <code>block</code> （但不一定，不过推荐接受这样的设定）；此外还有所谓的inline区块，用 <code>span</code> 标签来表示这样的元素，可以理解为改标签元素的display属性是 <code>inline</code> 。
</p>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline17">inline css</h3>
<div class="outline-text-3" id="text-3-5">
<p>
最基本的css属性可以通过inline css模式直接在html标签中通过 <strong>style</strong> 属性来加上。
</p>
</div>

<div class="outline-4">
<h4 id="orgheadline12">font-size</h4>
<div class="outline-text-4" id="text-3-5-1">
<p>
字体大小
</p>
<div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">p</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;font-size:12pt&quot;</span><span class="p">&gt;</span>paragraph<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline13">color</h4>
<div class="outline-text-4" id="text-3-5-2">
<p>
字体颜色， 这是css支持的 <a href="http://www.w3.org/TR/css3-color/#svg-color">color关键词清单</a> 。
</p>

<div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">h2</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;color:green&quot;</span><span class="p">&gt;</span>paragraph<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline14">font-family</h4>
<div class="outline-text-4" id="text-3-5-3">
<p>
字族， 这是css一般支持的 <a href="http://www.w3.org/TR/CSS21/fonts.html#generic-font-families">字族信息</a> 。
</p>

<div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">ol</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">li</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;font-family:Arial&quot;</span><span class="p">&gt;</span>Arial<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">ol</span><span class="p">&gt;</span>
</pre></div>

<p>
一般有文字的标签都可以用上面的三个属性来控制其内文字的大小，颜色和字族。虽然现在都推荐用css来控制，但思路顺序应该是优先inline css，太过普遍多次出现的情况下才考虑单独css控制。
</p>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline15">background-color</h4>
<div class="outline-text-4" id="text-3-5-4">
<p>
背景颜色。如果读者熟悉LaTeX排版系统的，那么我们都清楚LaTeX排版很核心的一个概念就是盒子。在html这里，我们似乎也可以把一个个标签看作一个个排版用的盒子。然后这里的background-color就是控制这一个盒子的背景颜色。
</p>

<div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">body</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;background-color:yellow&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline16">text-align</h4>
<div class="outline-text-4" id="text-3-5-5">
<p>
文字在标签盒子里的对齐方式。可选参数有: left, right, center。
</p>

<div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">h3</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;text-align:center&quot;</span><span class="p">&gt;</span>居中对齐的标题<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline18">外部css</h3>
<div class="outline-text-3" id="text-3-6">
<p>
有一种说法，是将放在html &lt;head&gt; 标签里面的css和具体外部的css文件引用区分开来，在我看来区别不大吧。然后网络上还有一种说法认为html &lt;head&gt; 标签里面应该多用id的css定义，而外部css文件应该只用class定义好做到普适性，在我看来也有点削足适履了。额，目前的国内网络环境大家都懂的，所以我喜欢少用css文件引用，尽量将一些css定义都放在 &lt;head&gt; 标签里面，就是为了加载快一点，至于其他，倒没什么特别好讲究的。不过在使用css定义前应该用class，只有觉得某些元素需要个别处理的时候才用id属性控制，我想这是没有问题的。
</p>

<p>
放在&lt;head&gt;标签里面的css大致如下格式引入进来:
</p>
<div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
<span class="nt">这里的格式和外部css文件格式完全一致</span>
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
</pre></div>

<p>
引入外部文件css如下:
</p>
<div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;main.css&quot;</span><span class="p">/&gt;</span>
</pre></div>

<p>
然后在外部css文件里面你还可以如下进一步引用其他的css文件:
</p>
<div class="highlight"><pre><span></span><span class="k">@import</span> <span class="nt">url</span><span class="o">(</span><span class="s2">&quot;http://getbootstrap.com/dist/css/bootstrap.min.css&quot;</span><span class="o">)</span><span class="p">;</span>
</pre></div>

<p>
这种引用语句后面的分号不太清楚是不是必须的，不太关心这个，没事就加上吧。参考了 <a href="http://stackoverflow.com/questions/147500/is-it-possible-to-include-one-css-file-in-another">这个网页</a> 。
</p>
</div>
</div>
</div>


<div class="outline-2">
<h2 id="orgheadline44">css入门</h2>
<div class="outline-text-2" id="text-4">
<p>
前面谈到的inline css因为肯定是作用于本标签，所以写法就简化了，style引入之后后面加入一些属性即可。然后前面谈到的外部css，其写法都是如下所示:
</p>

<div class="highlight"><pre><span></span><span class="nt">p</span><span class="p">{</span>
    <span class="nb">text-indent</span><span class="o">:</span><span class="m">2em</span><span class="p">;</span><span class="c">/*段落缩进*/</span>
    <span class="nb">line-height</span><span class="o">:</span><span class="m">180%</span><span class="p">;</span><span class="c">/*行间距*/</span>
    <span class="p">}</span>
</pre></div>

<p>
第一个元素我们可以简单称之为css选择器，在网络抓取中也有类似的概念。然后花括号里面就是类似 inline css 一样的格式了，用分号隔开，换行不换行都是无所谓的，具体为了美观一般都一个属性占一行吧。
</p>
</div>

<div class="outline-3">
<h3 id="orgheadline25">css选择器</h3>
<div class="outline-text-3" id="text-4-1">
<p>
这里以html5为例，html5内置的标签都是可以直接引用的，比如body，article，video，table，figure等等。如果你在css中引用section，那么意思就是整个文档的section标签那些元素被选中了。
</p>

<p>
我们知道html5中可以通过 <strong>class</strong> 属性来将某个元素归于某一类，现在假设有:
</p>
<pre>
&lt;p class="emph"&gt;hello&lt;/p&gt;
</pre>

<p>
那么我们使用 <code>p.emph</code> 其意思就是将选中p标签然后class属性为emph的那些标签。
</p>

<p>
我们在css中经常看到这样的形式：
</p>
<div class="highlight"><pre><span></span>.hightlight
</pre></div>
<p>
其完整形式为 <code>*.hightlight</code> ，也就是所有class属性为hightlight的元素都将被选中。
</p>

<p>
然后id属性可用来定义某个标签的唯一id，一般就用 <code>#idname</code> 选中那个标签即可。
</p>
</div>

<div class="outline-4">
<h4 id="orgheadline20">多级选择</h4>
<div class="outline-text-4" id="text-4-1-1">
<p>
在前面选择标签的基础上，加个空格继续写上其他标签就成了多级选择的意思了。也就是前一选择的标签之下（结构包含关系）的某个标签。比如 <code>figure p</code> 其选择的就是所有figure标签元素里面的p标签元素。前面谈及的那些标签元素表示方法你都可以用的，比如 <code>#footer .emph</code> 选择的就是id为footer的那个标签里面class属性为emph的标签。
</p>

<p>
此外还有一种更为严格的多级选择（可以称之为逐级选择）， 比如 <code>h1 &gt; strong</code> ，其只严格选择h1标签下strong标签，这里的下是严格意义上的父子标签包含关系的下，如果某个strong标签在em标签里面，然后这个em标签在h1标签里面，则该strong元素是不会被这里所谓的严格逐级选择选中的。
</p>

<p>
更多css选择信息请参看w3school的 <a href="http://www.w3school.com.cn/css/css_selector_type.asp">css元素选择详解部分</a> ，但这一块最好不要弄得太复杂。实际上这样的选择逻辑弄得越复杂后面css代码的维护就越困难，最好的实践还是用 <strong>class</strong> 和 <strong>id</strong> 来管理各个css属性。
</p>
</div>
</div>


<div class="outline-4">
<h4 id="orgheadline21">带上其他属性选择</h4>
<div class="outline-text-4" id="text-4-1-2">
<p>
有href属性的a标签才应用样式:
</p>
<pre>
a[href] {color:red;}
</pre>

<p>
有href属性和title属性的a标签才应用样式:
</p>
<pre>
a[href][title] {color:red;}
</pre>

<p>
具体属性是什么值也指定了:
</p>
<pre>
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
</pre>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline24">伪类选定</h4>
<div class="outline-text-4" id="text-4-1-3">
<p>
带个:冒号后面跟着该标签的伪类，主要是值该标签的某种特殊状态，最常见的是a标签的各个状态，如下所示:
</p>
<pre>
a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */
</pre>
</div>

<div class="outline-5">
<h5 id="orgheadline22">first-child伪类</h5>
<div class="outline-text-5" id="text-4-1-3-1">
<pre>
p:first-child {
    color: red;
}
</pre>
<p>
只有是父标签的第一个子标签元素才会被选定。
</p>
</div>
</div>

<div class="outline-5">
<h5 id="orgheadline23">nth-child伪类</h5>
<div class="outline-text-5" id="text-4-1-3-2">
<pre>
p:nth-child(2) {
    color: red;
}
</pre>
<p>
是父标签的第几个子标签元素才会被选定。
</p>
</div>
</div>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline26">css的长度单位</h3>
<div class="outline-text-3" id="text-4-2">
<p>
css有很多长度单位，这些单位如果你熟悉 \(\LaTeX\) 的话你就会对这些单位很眼熟。其中绝对长度单位有：1in = 2.54cm = 25.4mm = 72pt = 6pc ，这些并不推荐使用。<a href="http://www.w3.org/Style/Examples/007/units.en.html">这篇网页</a> 推荐多使用 <code>px</code> ， <code>em</code> 和 <code>%</code> 这样的长度单位。其中"px"和"%"是css特有的，其会根据显示屏而变动，然后1em我们知道就是当前字体M的宽度（TeX里面的情况）。其中px值得引起我们的注意，其会根据显示设备而有很好的调整，更多信息请参看上面提到的那个参考网页。
</p>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline28">css的盒子模型</h3>
<div class="outline-text-3" id="text-4-3">
<p>
html的显示布局和 \(TeX\) 的显示布局一样也是采用的浮动盒子模型，从上到下，从左到右，一个个盒子排下来，只是 \(TeX\) 更复杂，还有一个分页算法。简言之就是每一个标签元素都是一个盒子<sup><a id="fnr.1" class="footref" href="#fn.1">1</a></sup> 。
</p>

<p>
下面这个图片来自 <a href="http://www.hicksdesign.co.uk/boxmodel/">这个网页</a> 。
</p>

<figure>
<p><img src="images/html_box_model.png" alt="html_box_model.png">
</p>
<figcaption><span class="figure-number">Figure 1:</span> html_box_model</figcaption>
</figure>

<p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">这篇文章</a> 讲解得很好，下面简要介绍之，下面放在短代码环境的都是可以用作css属性的。盒子最中心的是content区域，如果该盒子的 <code>box-sizing</code> 是默认值的话，那么 <code>width</code> 控制的就是content区域的宽度。如果将 <code>box-sizing</code> 设置为 <code>border-box</code> ，那么 <code>width</code> 对应的就是整个盒子的宽度。这个只是一点简单的数学加减法把戏罢了，没什么大不了的。
</p>

<p>
然后类似的 <code>height</code> 默认是控制content区域的高度，然后有 <code>min-width</code> , <code>min-height</code> 来控制盒子content区域的最小宽度和最小高度，然后有 <code>max-width</code> , <code>max-height</code> 来控制盒子content区域的最大宽度和最大高度，类似的这几个属性如果 <code>box-sizing</code> 设置为 <code>border-box</code> ，那么对应的都是整个盒子的宽度或高度。
</p>

<p>
content区域外围是padding区域，padding区域是透明的，如果整个盒子设置 <code>background-color</code> 或 <code>backgroud-image</code> ，这是你会看到他们。padding区域有如下属性来控制上面下面左边右边的长度: <code>padding-top</code> , <code>padding-bottom</code> , <code>padding-left</code> , <code>padding-right</code> 。 还有一个简便的写法 <code>padding</code> ，这种写法设置一个值控制上面四个量还是很方便的，但其还可以接多个值，有一定顺序，不太喜欢这种用法。
</p>

<p>
padding区域外面是border区域，通常我们在网页中看到的一条条边框线就是它了， 用 <code>border-width</code> 来控制边框线的宽度。这实际上是一个简写，类似上面的 <code>padding</code> ，可以跟四个值:
</p>

<p>
上，右，下，左:
</p>
<pre>
border-width: 1px 2em 0 4rem;
</pre>

<p>
或者三个值:
</p>

<p>
上，右和左，下:
</p>
<pre>
border-width: 1px 2em 1.5cm;
</pre>

<p>
或者两个值:
</p>

<p>
上下，左右:
</p>
<pre>
border-width: 2px 1.5em;
</pre>

<p>
此外还有: <code>border-top-width</code> 对应上宽度， <code>border-bottom-width</code> 等。
</p>

<p>
border区域外面就是margin边距区域。其有如下属性，含义大家一看应该就明白了: <code>margin-top</code> , <code>margin-bottom</code> , <code>margin-left</code> , <code>margin-right</code> , <code>margin</code> 。
</p>
</div>

<div class="outline-4">
<h4 id="orgheadline27">border属性</h4>
<div class="outline-text-4" id="text-4-3-1">
<p>
border属性可以跟上三个值，分别是: border-width border-style border-color
</p>
<pre>
img {
border: 1px solid #4682b4
}
</pre>

<p>
border-style情况比较多，常见的有 <strong>solid</strong> 实线 <strong>dashed</strong> 虚线 <strong>double</strong> 双线 <strong>dotted</strong> 点线等，更多请参看 <a href="http://www.w3school.com.cn/cssref/pr_border-style.asp">这个网页</a> 。
</p>
</div>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline41">css布局</h3>
<div class="outline-text-3" id="text-4-4">
<p>
这个网站专门介绍 <a href="http://zh.learnlayout.com/">css布局</a> ，深入浅出讲的还是很好的，css布局是css里面很重要的课题，建立认真学习一下。
</p>
</div>

<div class="outline-4">
<h4 id="orgheadline33">display属性</h4>
<div class="outline-text-4" id="text-4-4-1">
</div><div class="outline-5">
<h5 id="orgheadline29">块级元素</h5>
<div class="outline-text-5" id="text-4-4-1-1">
<p>
块级元素，占满自身右边所有行的行空间。 div元素和p默认就是所谓的block元素，display属性为 <strong>block</strong> 。
</p>
<pre>
display:block;
</pre>
</div>
</div>

<div class="outline-5">
<h5 id="orgheadline30">inline元素</h5>
<div class="outline-text-5" id="text-4-4-1-2">
<p>
span元素默认是 <strong>inline</strong> 。
</p>
<pre>
display:inline;
</pre>

<p>
就占据我需要的宽度，其他盒子元素可以继续填满这一行。
</p>

<p>
比如:
</p>
<pre>
li{
    display:inline;
}
</pre>
<p>
这样你的无序列表和有序列表的各个item不会另起一行了。其默认的是 <code>display:list-item;</code> 。
</p>
</div>
</div>

<div class="outline-5">
<h5 id="orgheadline31">inline-block</h5>
<div class="outline-text-5" id="text-4-4-1-3">
<p>
inline-block的意思是块级元素还是块级元素，只是几个块级元素对外排布是 inline 模式排布的，这是css较新的一个特性。如果对块状元素设置display属性为 <strong>inline</strong> ，则这些块状元素都会失去自己内部的尺寸布局，这可能不是你想要的。
</p>
</div>
</div>


<div class="outline-5">
<h5 id="orgheadline32">none</h5>
<div class="outline-text-5" id="text-4-4-1-4">
<pre>
display:none
</pre>

<p>
该元素不会显示。和 <code>visibility:hidden</code> 的区别是其本该显示的空间不会保留了。
</p>
</div>
</div>
</div>


<div class="outline-4">
<h4 id="orgheadline34">float属性</h4>
<div class="outline-text-4" id="text-4-4-2">
<p>
元素居右放置
</p>
<pre>
float:right;
</pre>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline35">clear属性</h4>
<div class="outline-text-4" id="text-4-4-3">
<p>
两侧都不能出现浮动元素
</p>
<pre>
clear:both;
</pre>
</div>
</div>

<div class="outline-4">
<h4 id="orgheadline40">position属性</h4>
<div class="outline-text-4" id="text-4-4-4">
<p>
css布局控制中，positon是一个很关键的属性。参考了 <a href="http://zh.learnlayout.com/position.html">这个网页</a> 和 <a href="http://www.cnblogs.com/polk6/p/3214847.html">这个网页</a> 。position属性有如下四个值可以设置:
</p>
</div>

<div class="outline-5">
<h5 id="orgheadline36">static</h5>
<div class="outline-text-5" id="text-4-4-4-1">
<p>
static是默认值，没有什么其他额外的位置调整行为，表示它不会被"positioned"。
</p>
</div>
</div>

<div class="outline-5">
<h5 id="orgheadline37">relative</h5>
<div class="outline-text-5" id="text-4-4-4-2">
<p>
relative和static类似，除非你还有其他的属性设置。比如 <code>top</code> , <code>right</code> , <code>bottom</code> , <code>left</code> 这些属性来调整，具体相对的含义是相对于原本它应该在的地方。相对调整之后留下来的地方会被保留下来，没有后续处理动作了。
</p>
</div>
</div>


<div class="outline-5">
<h5 id="orgheadline38">fixed</h5>
<div class="outline-text-5" id="text-4-4-4-3">
<p>
fixed的应用就是将某个元素总是显示在页面上，比如说某些弹窗广告。  <code>top</code> , <code>right</code> , <code>bottom</code> , <code>left</code> 这些属性可以辅助来调整这个弹窗具体的位置。
</p>
</div>
</div>


<div class="outline-5">
<h5 id="orgheadline39">absolute</h5>
<div class="outline-text-5" id="text-4-4-4-4">
<p>
absolute类似于fixed，不过其不是相对于视窗固定，而是相对于页面固定。比如下面这个aside设置:
</p>

<div class="highlight"><pre><span></span>aside {
    margin-left: -200px;
    width: 181px;
    position: absolute;
    background-color:#FDF6E3;
}
</pre></div>

<p>
这个aside是个目录，就放在正文的左边的，如果不用absolute布局的话，右边空间就不会释放出来。请参看 <a href="http://zh.learnlayout.com/position-example.html">这个网页的那个nav标签元素</a> 。
</p>
</div>
</div>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline42">其他零零碎碎的css属性</h3>
<div class="outline-text-3" id="text-4-5">
<p>
其他零零碎碎的css属性不建议初学者真的专门去学，在后面的探索过程中遇到了就查一下即可，一般 <a href="http://www.w3school.com.cn/index.html">w3school</a> 网站上都会有的。
</p>
</div>
</div>

<div class="outline-3">
<h3 id="orgheadline43">css框架</h3>
<div class="outline-text-3" id="text-4-6">
<p>
再了解上面的概念基础上，实际开发还是要利用前人做出来的一些css框架，好做出更加美观和专业的网页。
</p>

<ul class="org-ul">
<li>Bootstrap似乎很流行评价也不错，有点重量级。</li>
<li>Pure在github上很流行，很轻量级，我似乎更加喜欢这个一点。</li>
</ul>


<p>
本文html5入门到此就告一段落吧。
</p>
</div>
</div>
</div>


<div class="outline-2">
<h2 id="orgheadline47">附录</h2>
<div class="outline-text-2" id="text-5">
</div><div class="outline-3">
<h3 id="orgheadline45">!important 用法</h3>
<div class="outline-text-3" id="text-5-1">
<p>
css设置有时不可避免会发生样式重叠覆盖，当然一般是尽可能统一css设置，但有时嫌麻烦懒得弄了，你可以用 <code>!important</code> 来手工提高某个css设置的优先级<sup><a id="fnr.2" class="footref" href="#fn.2">2</a></sup>。如下所示：
</p>

<div class="highlight"><pre><span></span><span class="nt">table</span><span class="o">,</span> <span class="nt">th</span><span class="o">,</span> <span class="nt">td</span>
<span class="p">{</span>
    <span class="nb">margin</span><span class="o">:</span><span class="m">0</span> <span class="nb">auto</span><span class="p">;</span>
    <span class="nb">min-width</span><span class="o">:</span><span class="m">2em</span><span class="p">;</span>
    <span class="nb">text-align</span><span class="o">:</span><span class="nb">center</span> <span class="cp">!important</span> <span class="p">;</span>
    <span class="nb">padding</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>

<p>
上面严格控制表格各项都居中对齐。
</p>
</div>
</div>


<div class="outline-3">
<h3 id="orgheadline46">参考资料</h3>
<div class="outline-text-3" id="text-5-2">
<ol class="org-ol">
<li><a href="http://zh.html.net/">html.net</a> 网站提供的入门教程。</li>
<li><a href="http://www.w3school.com.cn/index.html">w3school</a> 网站。</li>
</ol>
</div>
</div>
</div>
<div id="footnotes">
<h2 class="footnotes">Footnotes: </h2>
<div id="text-footnotes">

<div class="footdef"><sup><a id="fn.1" class="footnum" href="#fnr.1">1</a></sup> <div class="footpara">我还不太确定一个个字是不是一个盒子，在 \(TeX\) 里面一个个字都是一个盒子。</div></div>

<div class="footdef"><sup><a id="fn.2" class="footnum" href="#fnr.2">2</a></sup> <div class="footpara">参考了  <a href="http://www.cnblogs.com/qieqing/articles/1224085.html">这个网页</a> 。</div></div>


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