乐趣区

关于html:HTML之布局表单框架颜色笔记小结

作者：

jiezi

在

1 html布局

1.1 应用div块元素

  • <div> 元素是用于分组 HTML 元素的块级元素；

1.1.1 举例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>布局学习</title>
</head>

<body>
    <div id="container" style="width: 1920;">
        <div id="title" style="background-color: rgb(172, 132, 140);">
            <h2 style="margin-bottom: 0">NoamaNelson的博客
                <div>
                    <span style="text-align: center;font-size: small;">专一测试畛域的测试技术钻研，测试实践、测试方法、测试治理等测试常识分享
                    </span>
                </div>
            </h2>

        </div>
        <br>
        <div id="menu" style="background-color:rgb(201, 201, 219);float: left;">
            1000&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100万&nbsp;&nbsp;&nbsp;&nbsp;10<br>
            原创&nbsp;&nbsp;&nbsp;&nbsp;周排名&nbsp;&nbsp;&nbsp;&nbsp;总排名&nbsp;&nbsp;&nbsp;&nbsp;拜访&nbsp;&nbsp;&nbsp;&nbsp;等级<br>
            <br>
            5000&nbsp;&nbsp;&nbsp;&nbsp;1000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10万&nbsp;&nbsp;&nbsp;&nbsp;8000<br>
            积分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;粉丝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获赞&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;评论&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;珍藏<br>
        </div>
        <div id="content" style="text-align: center;background-color: khaki;height: 500;">
            内容在这里内容在这里内容在这里<br>
            内容在这里内容在这里内容在这里<br>
            内容在这里内容在这里内容在这里<br>
            内容在这里内容在这里内容在这里<br>
            内容在这里内容在这里内容在这里<br>

        </div>

        <div id="text">
            <h3 style="clear: both;">热门文章</h3>
            <div style="background-color: khaki;float: left;">
                <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p>
                <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p>
                <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p>
            </div>
        </div>
        <div id="list">
            <h3 style="clear: both;">文章分类</h3>
            <div style="background-color: rgb(112, 102, 7);float: left;">
                <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p>
                <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p>
                <p>Visual Studio2019装置闪退（不弹出<br>下载界面）等问题解决办法 </p>
            </div>
        </div>

    </div>
</body>

</html>

1.2 应用表格

  • 能够应用 HTML <table> 标签创立布局；

1.2.1 举例

<!DOCTYPE html>
<html>

<head> 
    <meta charset="utf-8"> 
    <title>布局学习</title> 
</head>

<body>

    <table width="1000" border="0">
        <tr>
            <td colspan="2" style="background-color:#dfbe82;">
                <h1>NoamaNelson的博客</h1>
            </td>
        </tr>

        <tr>
            <td style="background-color:#979690;width:100px;vertical-align:top;">
                <b>文章分类</b><br>
                Python<br>
                C++<br>
                JAVA<br>
                PHP<br>
            </td>
            <td style="background-color:#f5b1b1;height:200px;width:400px;vertical-align:top;">
                文章内容</td>
        </tr>
        <tr>
            <td colspan="2" style="background-color:#998f86;text-align:center;">
                版权信息</td>
        </tr>
    </table>

</body>

</html>

2 表单

2.1 表单阐明

  • 表单是一个蕴含表单元素的区域；
  • 表单元素是容许用户在表单中输出内容；
  • 表单应用表单标签 <form> 来设置；
  • 格局：
<form>
内容局部
</form>

2.2 表单标签

标签 阐明
<form> 供用户输出的表单
<input> 输出域
<textarea> 文本域 (一个多行的输出控件)
<label> <input> 元素的标签，个别为输出题目
<fieldset> 一组相干的表单元素，并应用外框蕴含起来
<legend> <fieldset> 元素的题目
<select> 下拉选项列表
<optgroup> 选项组
<option> 下拉列表中的选项
<button> 一个点击按钮
<datalist> 一个事后定义的输出控件选项列表
<keygen> 表单的密钥对生成器字段
<output> 一个计算结果

2.3 输出元素-文本域

  • 通过<input type="text"> 标签来设定；
  • 应用场景：比方用户在表单中输出字母、数字等字符；
  • 默认宽度为20个字符；
  • 举例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单学习</title>
</head>

<body>
    <h2>1、输出元素：文本域</h2>
    <form>
        please input height:&nbsp;<input type="text" height="height"><br>
        please input weight:&nbsp;<input type="text" weight="weight"><br>
    </form>
</body>

</html>

2.4 输出元素-明码字段

  • 通过标签<input type="password"> 来定义；
  • 输出的明码不显示，以星号或圆点代替；
  • 举例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单学习</title>
</head>

<body>
    <h2>1、输出元素：文本域</h2>
    <form>
        please input height:&nbsp;<input type="text" height="height"><br>
        please input weight:&nbsp;<input type="text" weight="weight"><br>
    </form>

    <h2>2、输出元素：明码字段</h2>
    <form>
        please input password:&nbsp;<input type="password" name="pwd"><br>
        please input password again:&nbsp;<input type="password" name="pwd"><br>
    </form>

</body>

</html>

2.5 输出元素-单选按钮

  • 通过标签<input type="radio"> 定义;
  • 举例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单学习</title>
</head>

<body>
    <h2>1、输出元素：文本域</h2>
    <form>
        please input height:&nbsp;<input type="text" height="height"><br>
        please input weight:&nbsp;<input type="text" weight="weight"><br>
    </form>

    <h2>2、输出元素：明码字段</h2>
    <form>
        please input password:&nbsp;<input type="password" name="pwd"><br>
        please input password again:&nbsp;<input type="password" name="pwd"><br>
    </form>

    <h2>3、输出元素：单选按钮</h2>
    <form>
        please select:&nbsp;<input type="radio" value="是">是<br>
        please select:&nbsp;<input type="radio" value="否">否<br>
    </form>

</body>

</html>

2.6 输出元素-复选框

  • 通过标签<input type="checkbox"> 定义；
  • 举例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单学习</title>
</head>

<body>
    <h2>1、输出元素：文本域</h2>
    <form>
        please input height:&nbsp;<input type="text" height="height"><br>
        please input weight:&nbsp;<input type="text" weight="weight"><br>
    </form>

    <h2>2、输出元素：明码字段</h2>
    <form>
        please input password:&nbsp;<input type="password" name="pwd"><br>
        please input password again:&nbsp;<input type="password" name="pwd"><br>
    </form>

    <h2>3、输出元素：单选按钮</h2>
    <form>
        please select:&nbsp;<input type="radio" value="是">是<br>
        please select:&nbsp;<input type="radio" value="否">否<br>
    </form>

    <h2>4、输出元素：复选框</h2>
    <form>
        你都在哪个网站写博客，请抉择：<br>
        &nbsp;<input type="checkbox" name="boke" value="CSDN">CSDN<br>
        &nbsp;<input type="checkbox" name="boke" value="博客园">博客园<br>
        &nbsp;<input type="checkbox" name="boke" value="开源中国">开源中国<br>
        &nbsp;<input type="checkbox" name="boke" value="简书">简书<br>
        &nbsp;<input type="checkbox" name="boke" value="掘金">掘金<br>
        &nbsp;<input type="checkbox" name="boke" value="思否">思否<br>
        &nbsp;<input type="checkbox" name="boke" value="GitHub">GitHub<br>
        &nbsp;<input type="checkbox" name="boke" value="集体网站">集体网站<br>

    </form>
</body>

</html>

2.7 输出元素-提交按钮

  • 通过标签<input type="submit"> 定义；
  • 单击确认按钮时，表单的内容会被传送到另一个文件；
  • 表单的动作属性定义了目标文件的文件名；
  • 举例：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单学习</title>
</head>

<body>
    <h2>1、输出元素：文本域</h2>
    <form>
        please input height:&nbsp;<input type="text" height="height"><br>
        please input weight:&nbsp;<input type="text" weight="weight"><br>
    </form>

    <h2>2、输出元素：明码字段</h2>
    <form>
        please input password:&nbsp;<input type="password" name="pwd"><br>
        please input password again:&nbsp;<input type="password" name="pwd"><br>
    </form>

    <h2>3、输出元素：单选按钮</h2>
    <form>
        please select:&nbsp;<input type="radio" value="是">是<br>
        please select:&nbsp;<input type="radio" value="否">否<br>
    </form>

    <h2>4、输出元素：复选框</h2>
    <form>
        你都在哪个网站写博客，请抉择：<br>
        &nbsp;<input type="checkbox" name="boke" value="CSDN">CSDN<br>
        &nbsp;<input type="checkbox" name="boke" value="博客园">博客园<br>
        &nbsp;<input type="checkbox" name="boke" value="开源中国">开源中国<br>
        &nbsp;<input type="checkbox" name="boke" value="简书">简书<br>
        &nbsp;<input type="checkbox" name="boke" value="掘金">掘金<br>
        &nbsp;<input type="checkbox" name="boke" value="思否">思否<br>
        &nbsp;<input type="checkbox" name="boke" value="GitHub">GitHub<br>
        &nbsp;<input type="checkbox" name="boke" value="集体网站">集体网站<br>
    </form>

    <h2>5、输出元素：提交按钮</h2>
    <form name="input" action="xxx.py" method="GET">
        用户名:&nbsp;<input type="text" name="name"><br>
        密&nbsp;码:&nbsp;<input type="password" name="pwd"><br>
        &nbsp;<input style=background-color:yellow; type="submit" value="submit"><br>
    </form>
</body>

</html>

3 框架

3.1 语法

  • 应用标签<iframe>定义；
  • 作用是：通过框架能够在一个窗口中能够显示多个页面；
  • 语法：
<iframe src="url"></iframe>

3.2 设置iframe宽高

  • 应用height 和 width 属性用来定义iframe标签的高度与宽度；
  • 默认为像素单位，也可应用比例；
  • 举例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>框架学习</title>
    </head>
    <body>
        <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe>&nbsp;&nbsp;&nbsp;
        <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe>&nbsp;&nbsp;&nbsp;
        <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe>&nbsp;&nbsp;&nbsp;<br>
        <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe>&nbsp;&nbsp;&nbsp;
        <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe>&nbsp;&nbsp;&nbsp;
        <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe>&nbsp;&nbsp;&nbsp;<br>
    </body>
</html>

3.3 iframe边框移除

  • 应用frameborder 属性定义iframe边框；
  • 属性值为0，则示意移除边框；
  • 举例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>框架学习</title>
    </head>
    <body>
        <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" frameborder="0" width="300" height="300"></iframe>&nbsp;&nbsp;&nbsp;
        <iframe name="csdn" src="https://blog.csdn.net/NoamaNelson" width="300" height="300"></iframe>&nbsp;&nbsp;&nbsp;
    </body>
</html>

  • 另外还有三个值的含意如下：

DENY：该网站页面不容许被嵌套；
SAMEORIGIN：该页面能够在雷同域名页面中被嵌套；
ALLOW-FROM uri：该页面能够在指定起源页面中进行嵌套。

4 色彩

  • HTML 色彩由红色、绿色、蓝色混合而成；

4.1 色彩名

  • HTML和CSS色彩标准定义有141个色彩名称（其中17个规范色彩）；
  • 17规范色彩：彩色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色；
  • 比方色彩名：Bule、Black等等；

4.2 色彩值

  • 色彩值由十六进制来示意红、绿、蓝（RGB）；
  • 每个色彩的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)；
  • 十六进制值的写法为 # 号后跟三个或六个十六进制字符。

4.3 色彩举例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>色彩学习</title>
    </head>
    <body>
        <p style=background-color:yellow; >会当凌绝顶，</p>
        <p style=background-color:rgb(82,82,218); >一览众山小。</p>
        <p style=background-color:#FF0000>前两句是啥？。</p>
    </body>
</html>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章