• HTML基本内容


    设置背景色:<body bgcolor="#AAAAAA">,设置背景图:<body background="1.png">。

    颜色的知识:

    颜色值的取值范围:#00——#FF(0—255)。RGB:由三个颜色值组合而成,R=#FF0000、G=#00FF00、B=#0000FF,通过R+G+B组合,从而形成不同颜色。

    像素:只能设置为整数,如果含有小数(100.4px),是会报错的 —— 因此就算把像素设置为某个整数,浏览器也会根据实际情况将高度、宽度等调整为float或者double(反正是这两个)。

    常用HTML文本格式:

    <p><em>着重文字</em></p>
    <p><i>斜体字</i></p>
    <p><small>小号字</small></p>
    <p><strong>加粗文字</strong></p>
    <p>文字<sup>上标</sup></p>
    <p>文字<sub>下标</sub></p>
    <p><ins>插入字</ins></p>
    <p><del>删除线</del></p>

    HTML标签的id特性不能包含"."字符,故一般用"_"作替代。

    a标签的使用:

    跳转的方式:

    <!--在top.html中-->
    <body>
        <iframe src="child.html"></iframe>
    </body>
    
    <!--在child.html中-->
    <body>
        <a href="http://www.baidu.com" target="_parent">此页面的parent现在是top.html</a>
        <br /><!--所以而这现在是同样的效果:在top.html中百度-->
        <a href="http://www.baidu.com" target="_top">现在的top是top.html</a>
    </body>

    在当前html文档内,进行跳转:

    <!--forward向first跳转:这里只能是a标签-->
    <a name="first">first</a>
    <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 />
    <a href="#first">forward</a>

    为所有链接(<a>、<img>、<link>、<form>)存在的base标签:

    <head>
        <base href="http://www.baidu.com" target="_blank" />
    </head>
    
    <!--当a的href为空字符串、没有指明target之时,base标签就提供了默认的href(或者说基准的)、target ; base默认会将当前页面的url,作为空href替换的url-->
    <a href="">test</a>

    单行文本框:

    <!--value为文本框的值,即文本显示值-->
    <input id="Price" name="Price" type="text" value="10">

    单选按钮(同一组的必须使用同一个name作为组名):

    <input type="radio" name="sex" /><input type="radio" name="sex" />

    下拉列表

    <select size="3">
        <!--size的值为显示选项的个数-->
        <!--option最重要的就是Text、Value、Selected-->
        <option value="1">选项一</option>
        <option value="2">选项二</option>
        <option value="3">选项三</option>
    </select>

    提交选择:

    @{
        var imagePath = "";
        if (Request["Choice"] != null)
        { imagePath = "../Images/" + Request["Choice"]; }
    }
    <form method="post">
        <select name="Choice">
            <!--这是一个元素(select,option只是它的值,选中哪个,值就是哪个)-->
            <option value="p1.gif">Photo 1</option>
            <option value="p2.gif">Photo 2</option>
        </select>
        <input type="submit" value="Submit" />
        @if (imagePath != "")
        {
            <p>
                <img src="@imagePath" alt="Sample" />
            </p>
        }
    </form>

    表格的使用:

    <!--定义表格: cellpadding为每一格的边距,cellspacing是格与格之间的间距,colspan的值表示一个格子占据多少个单元格-->
    <table border="1" cellpadding="10">
        <!--表格的标题-->
        <caption>请填写表格</caption>
        <!--对于每一行的内容,都写在tr里面-->
        <tr>
            <!--定义表头-->
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        <tr>
        <tr>
            <!--实际内容-->
            <td>汤姆</td>
            <td></td>
            <td>20</td>
        </tr>
        <tr>
            <td>杰瑞</td>
            <td></td>
            <td></td>
        </tr>
    <table>

     列表的使用:

    <!--有序列表: A/a(以大小写字母排序),I/i(以大小写的罗马数字排序);start是排序的起始数字(只能是数字)-->
    <ol type="A" start="10">
        <li>帽子</li>
        <li>衣服</li>
        <li></li>
    </ol>
    <!--无序列表: 默认是disc(实心圆),还有circle(空心圆)、square(实心方块)-->
    <ul type="square">
        <li></li>
        <li></li>
        <li></li>
    </ul>

    自定义列表与普通列表的区别主要在于:自定义可以对列表项,进行描述。

    div元素是组合HTML元素的一个容器,于是就可以对容器这个整体进行样式的设计(还可以针对容器中某一种元素进行设计),这就类似于移动开发的stackView。

    span元素也是一种容器,与div的区别在于:它只是文本的容器。

    HTML的布局:

    可以使用div元素布局,也可以用table,它们都可以达到相同或相近的效果,下面布一个"国"字型的局:

    效果如下:

    使用div布局:

    <body>
        <!--全局的控制-->
        <div id="container">
            <div id="heading"></div>
            <div id="content_left"></div>
            <div id="content_body"></div>
            <div id="content_right"></div>
            <div id="footing"></div>
        </div>
    </body>
    
    /*外部样式*/
    body{
        margin: auto;
    }
    #container{
        width: 100%;
        height: 735px;
        background-color: #f4f4f4;
    }
    #heading{
        width: 100%;
        height: 10%;
        background-color: burlywood;
    }
    #content_left{
        width: 20%;
        height: 80%;
        background-color: Background;
        float: left;
    }
    #content_body{
        width: 60%;
        height: 80%;
        background-color: gold;
        float: left;
    }
    #content_right{
        width: 20%;
        height: 80%;
        background-color: Background;
        float: left;
    }
    #footing{
        width: 100%;
        height: 10%;
        background-color: chartreuse;
        clear: both;
    }

     一般不会有人用table布局,因为难度大,占资源。

    框架的使用:

    <!--frameset不能在body中使用,所以应该把body删掉;
    但是H5要求html中必须含有body一次,所以frameset和frame已不被H5所使用:cols是竖向,横向框架是rows-->
    <frameset rows="20%, 50%, 30%">
        <frame src="a.html"></frame>
        <frame src="b.html"></frame>
        <frame src="c.html"></frame>
    </frameset>

     H5使用的是内联框架iframe:

    <!--默认情况下,iframe是有边框的: src的url可以是本地的,也可以是网络上的(必须指定协议)-->
    <!--iframe的用法相当于一个网页中的浏览器-->
    <iframe src="http://www.baidu.com" frameborder="0"></iframe>

     HTML的实体:

    实体的含义:

    <body>
        <html><!--此时文本内容<html>是不能显示的,必须将两个尖括号转换成对应实体-->
        &lt;html&gt;<!--这时就能正确显示了,其中"<"的实体是"&lt;"、">"的实体是"&gt;"-->
    </body>

    具体的标签对应的实体不用记,用时百度即可。

    对DOM的Attribute和Property的理解:

    特性Attribute:是DOM节点自身所带的属性,如id、class等。

    属性Property:为DOM对象所附加的内容,例如childNodes、firstChild等。可以在浏览器审查的Properties栏中查看。

  • 相关阅读:
    lightoj1027_数学求期望
    lightoj1232_完全背包
    2013 ACM/ICPC Asia Regional Chengdu Online
    数位DP专题
    状态压缩DP专题
    树形DP专题
    hdu 1198 Farm Irrigation
    hdu 4739 Zhuge Liang's Mines 2013 ACM/ICPC Asia Regional Hangzhou Online
    hdu 4745 Two Rabbits 2013 ACM/ICPC Asia Regional Hangzhou Online
    动态规划专题uva
  • 原文地址:https://www.cnblogs.com/quanxi/p/6009934.html
Copyright © 2020-2023  润新知