HTML学习小结

给标题加颜色
    法1:inline style(内联样式):
        <h2 style="color:blue">html编程入门教程</h2>
    法2:CSS(层叠样式表):(用标签名作为选择器)
        <style>
        h2{
        color:blue;
           }
        </style>
        <h2>html编程入门教程</h2>
    法3:class类选择器(起任意名字作为选择器)
        <style>
        .head-color{
        color:blue;
        }
        </style>
        <h2 class="head-color">html编程入门教程</h2>
    
        用法:<style>
               选择器 {属性名称: 属性值;}
            </style>
        注意：一定要在属性值的后面加上分号;
    
    法4：id选择器(用id作为选择器)
        <style>
        #cat-photo-form{
          background-color:green;
        }
        </style>
        <h2 id="cat-photo-form">html编程入门教程</h2>
      
<!----------------------------------------------------------------------------------------------------------------->
类选择器:
    <style>
    .blue-text{
    color: blue;
    }
    </style>
    <h2 class="blue-text">html编程入门教程</h2>
 
<!----------------------------------------------------------------------------------------------------------------->
调整标题的字号
    <style>    
    h1{
    font-size: 30px;
    }
    </style>
    <h1>html编程入门教程</h1>
 
<!----------------------------------------------------------------------------------------------------------------->
设置段落的字号
    <style>
    p{
    font-size: 16px;
    }
    </style>
    <p>html编程入门教程</p>
 
<!----------------------------------------------------------------------------------------------------------------->
设置段落的字体
    <style>
    p{
    font-family: Monospace;
    }
    </style>
 
<!----------------------------------------------------------------------------------------------------------------->
引入外部样式表,引入谷歌Lobster字体的样式表
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    <h2 style="font-family:Lobster">CatPhotoApp</h2>

<!----------------------------------------------------------------------------------------------------------------->
多重属性值时,可自动降阶:
    有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。当Lobter字体不可用时,可自动切换成Monospace字体.
    <!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">-->
    <style>
    h2{
    font-family: Lobster, Monospace;
    }
    </style>
    <h2>CatPhotoApp</h2>
<!----------------------------------------------------------------------------------------------------------------->
使用图片
    <img src="/statics/codecamp/images/relaxing-cat.jpg">
    注意：img元素是自关闭元素，不需要结束标记。
 
<!----------------------------------------------------------------------------------------------------------------->
调整图片的大小
    <style>
    .larger-image{
    width:100px;
    }
    </style>
    <img src="/statics/codecamp/images/relaxing-cat.jpg" class="larger-image">
    
<!----------------------------------------------------------------------------------------------------------------->
给图片加边框
    <style>
    .thick-green-border{
    border-width:10px;
    border-color:green;
    border-style:solid;
    }
    </style>
    <img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">

    注意:应用多个class到一个元素，只需要在多个class之间用空格分开即可.例如：
    <img class="class1 class2">
    
<!----------------------------------------------------------------------------------------------------------------->
增加圆角边框
    border-radius(边框半径)的属性来让它的边框变成圆的。
    <style>
    .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius:10px;<!--可以是像素也可以是百分比-->
    }
    .smaller-image {
    width: 100px;
    }
    </style>
    <img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">
    此时可以将border-radius加在任意一个class中。
 
<!----------------------------------------------------------------------------------------------------------------->
创建錨点
    文字上加錨点<a href="http://freecatphotoapp.com">cat photos</a>

    图片上加錨点<a href="http://freecatphotoapp.com"><img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>
    
    固定链接: herf="#"
 
<!----------------------------------------------------------------------------------------------------------------->
图片的替换文本（alt属性）
    alt属性，也被称为alt text, 是当图片无法加载时显示的替代文本。alt属性对于盲人或视觉损伤的用户理解一幅图片中所描绘的内容非常重要，搜索引擎也会搜索alt属性。
      <img src="www.your-image-source.com/your-image.jpg" alt="your alt text">
<!----------------------------------------------------------------------------------------------------------------->
无序列表与有序列表
    <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
<!----------------------------------------------------------------------------------------------------------------->
创建表单,并添加预定义文本
    <input type="text">
    注意，input元素是自关闭的。
    placeholder为占位符。输入框中的预定义文本。
    <input type="text" placeholder="this is placeholder text">

<!----------------------------------------------------------------------------------------------------------------->
创建交互式的表单
    使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。action属性的值指定了表单提交到服务器的地址。
    <form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
    </form>
      
<!----------------------------------------------------------------------------------------------------------------->
创建表单按钮
    <form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
    <button type="submit">Submit</button>
    </form>
 
<!----------------------------------------------------------------------------------------------------------------->
把表单设置为必填
    如果你想把一个文本输入字段设置为必填项，在你的input元素中加上required属性就可以了，你可以使用： <input type="text" required>
    
    <form action="/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
    </form>
 
<!----------------------------------------------------------------------------------------------------------------->
创建单选按钮
    <form action="/submit-cat-photo">    
    <label><input type="radio" name="indoor-outdoor"> indoor</label>
    <label><input type="radio" name="indoor-outdoor"> outdoor</label>
    </form>
      所有关联的单选按钮应该具有相同的name属性。
<!----------------------------------------------------------------------------------------------------------------->
创建复选按钮
    <form action="/submit-cat-photo">
    <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label>
    </form>
 
<!----------------------------------------------------------------------------------------------------------------->
设置单选按钮和复选按钮的默认值
    <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
      <label><input type="checkbox" name="personality" checked> Loving</label>
    </form>

<!----------------------------------------------------------------------------------------------------------------->
在div元素中嵌套多个元素
    div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。所以可以利用CSS的继承关系把div上的CSS传递给它所有子元素。

    .gray-background {
    background-color: gray;
    }
    <div class="gray-background">
    <p>Things cats love:</p>
    <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
    </ol>
    </div>

<!----------------------------------------------------------------------------------------------------------------->
使用id属性设置标签样式
    <style>
    #cat-photo-form{
      background-color:green;
    }
    </style>

    <form id="cat-photo-form" action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
    </form>
    
<!----------------------------------------------------------------------------------------------------------------->
使用padding布局页面标签    
    有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。
    元素的 padding 控制元素内容 content和元素边框 border 之间的距离。
    .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
    }
      .yellow-box {
    background-color: yellow;
    padding: 10px;
    }
    <div class="box yellow-box">
    <h5>padding</h5>
    </div>
    
    用class控制样式时，最好使用多个class来控制。最外层定义所有标签需要的格式，再细化单单独一个需要的样式。最好不要每一个都对应一个class。

<!----------------------------------------------------------------------------------------------------------------->
标题的位置，正中，距离顶部25px
    .injected-text {
    margin-bottom: -25px;
    text-align: center;
    }
    
<!----------------------------------------------------------------------------------------------------------------->
使用margin布局页面标签
    <style>
    .injected-text {
    margin-bottom: -25px;
    text-align: center;
    }

    .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
    }

    .yellow-box {
    background-color: yellow;
    padding: 10px;
    }

    .red-box {
    background-color: red;
    padding: 20px;
    margin: 20px;
    }

    .green-box {
    background-color: green;
    padding: 20px;
    margin: 20px;
    }
    </style>
    <h5 class="injected-text">margin</h5>

    <div class="box yellow-box">
    <h5 class="box red-box">padding</h5>
    <h5 class="box green-box">padding</h5>
    </div>

    
<!----------------------------------------------------------------------------------------------------------------->
使用负值设置页面元素的margin属性
    元素的 margin 控制元素的 border 和元素实际所占空间的距离。
    如果你将一个元素的 margin 设置为负值，元素将会变大。
    
<!----------------------------------------------------------------------------------------------------------------->
为不同方向padding设置不同的值    
    <style>
    .box{
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
    }
    .green-box {
    background-color: green;
    padding-top:40px;
    padding-right:20px;
    padding-left:40px;
    padding-bottom:20px;
    }
    </style>
    <h5 class="box green-box">padding</h5>
    
<!----------------------------------------------------------------------------------------------------------------->
为不同方向padding设置不同的值的简写    
    <style>
    .box{
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
    }
    .green-box {
    background-color: green;
    padding:40px 20px 40px 20px;
    }
    </style>
    <h5 class="box green-box">padding</h5>
    
<!----------------------------------------------------------------------------------------------------------------->
为不同方向margin设置不同的值的简写    
    <style>
    .box{
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
    }
    .green-box {
    background-color: green;
    margin:40px 20px 40px 20px;
    }
    </style>
    <h5 class="box green-box">padding</h5>
    
<!----------------------------------------------------------------------------------------------------------------->
CSS 继承Body元素样式    
    <style>
    body {
    background-color: black;
    color:green;
    font-family:Monospace;
    }
    </style>
    <h1>Hello World</h1>
    
<!----------------------------------------------------------------------------------------------------------------->
CSS样式的覆盖
    我们刚刚证明了浏览器读取 CSS 的顺序是从上到下，这意味着，在发生冲突时，浏览器会使用最后的 CSS 声明。
    <style>
    body {
    background-color: black;
    font-family: Monospace;
    color: green;
    }
    .pink-text{
     color:pink;
    }
    </style>
    <h1 class="pink-text">Hello World!</h1>
    当具有多种CSS的样式时，一般呈现的都是取范围最小，离标签距离最近的样式。
    
<!----------------------------------------------------------------------------------------------------------------->
CSS 多个class处理样式覆盖
    在 <style> 部分中 class 声明的顺序却非常重要，第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明，它覆盖了 .pink-text 属性。

    <style>
    body {
    background-color: black;
    font-family: Monospace;
    color: green;
    }    
    .pink-text {
    color: pink;
    }
      .blue-text{
    color:blue;
    }
    </style>
    <h1 class="pink-text blue-text">Hello World!</h1>
    
<!----------------------------------------------------------------------------------------------------------------->
通过ID的样式属性覆盖class类的声明
    你声明的这个 CSS 在 pink-text类选择器的上面还是下面是无所谓的，因为 id 属性总是具有更高的优先级。
    <style>
    body {
    background-color: black;
    font-family: Monospace;
    color: green;
    }
    .pink-text {
    color: pink;
    }
    .blue-text {
    color: blue;
    }
    #orange-text{
     color:orange;
    }
    </style>
    <h1 id=orange-text class="pink-text blue-text">Hello World!</h1>
    
<!----------------------------------------------------------------------------------------------------------------->
内联样式覆盖class类的声明
    行内样式将覆盖style 中定义的所有 CSS。

    <style>
    body {
    background-color: black;
    font-family: Monospace;
    color: green;
    }
    #orange-text {
    color: orange;
    }
    .pink-text {
    color: pink;
    }
    .blue-text {
    color: blue;
    }
    </style>
    <h1 style="color:green" id="orange-text" class="pink-text blue-text">Hello World!</h1>
    
<!----------------------------------------------------------------------------------------------------------------->
!important属性确定最终的样式
    <style>
    body {
    background-color: black;
    font-family: Monospace;
    color: green;
    }
    #orange-text {
    color: orange;
    }
    .pink-text {
    color: pink !important;
    }
    .blue-text {
    color: blue;
    }
    </style>
    <h1 style="color:green" id="orange-text" class="pink-text blue-text">Hello World!</h1>
<!----------------------------------------------------------------------------------------------------------------->
覆盖总结：
    继承样式<<class样式<<多个class样式在后的那个样式<<id中的样式<<内联样式style=" "<<!important所在的那个样式
    
<!----------------------------------------------------------------------------------------------------------------->
CSS 十六进制白色表达方式
    0 是 hex code（十六进制编码）中最小的一个，它代表颜色的完全缺失。
    F 是 hex code（十六进制编码）中最大的一个，它代表最大可能的亮度。
    <style>
    body {
    background-color:#000000;
    }
    </style>
黑色：#000000         rgb(0,0,0)
白色：#FFFFFF       rgb(F,F,F) rgb(255,255,255)
红色：#FF0000 #F00
黄色：#FFFF00
绿色：#00FF00 #0F0
蓝色：#0000FF #00F
橙色：#FFA500
灰色：#808080
深灰色：#111111
    
<!----------------------------------------------------------------------------------------------------------------->