• html学习

    1.HTML:超文本标记语言

    基本结构：

     

    常用编辑器：sublime notepad++ code

    常用标签：

    <html></html> 创建一个HTML文档

    <head></head> 设置文档标题和其它在网页中不显示的信息

    <title></title> 设置文档的标题        

    <h1></h1> 最大的标题

    <pre></pre> 预先格式化文本          

    <u></u> 下划线

    <b></b> 黑体字    

    <p></p> 创建一个段落    

    <p align=""> 将段落按左、中、右对齐 　

    <br> 换行 插入换行符

    <p></p> 创建一个段落    

    <p align=""> 将段落按左、中、右对齐 　

    <br> 换行 插入换行符  

    2.使用html创建一个简单的表格：

     其代码为：

    <!DOCTYPE html>
<html>
<head>
    <meta charser="UTF-8">
    <title>shell</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
    <caption>受理员业务统计表</caption>
    <tr >
            <th wdith="80" colspan="2" rowspan="2">受理员</th>
            <th wdith="80" rowspan="2">受理数</th>
            <th wdith="80" rowspan="2">自办数</th>
            <th wdith="80" rowspan="2">直接答辩</th>
            <th wdith="80" colspan="2">拟办意见</th>
            <th wdith="80" colspan="2">返回修改</th>
            <th wdith="80" colspan="3">工单类型</th>
    </tr>
    <tr>
            <th>同意</th>
            <th>比例</th>
            <th>数量</th>
            <th>比例</th>
            <th>建议</th>
            <th>诉求件</th>        
    </tr>
    <tr>
            <th rowspan="8">受理处</th>
            <th>张三</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>总计</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
    </tr>
    <tr>
            <th rowspan="8">话务组</th>
            <th>李四</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>口口</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
    </tr>
    <tr>
            <th>总计</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
            <th>20</th>
    </tr>
    
</body>
<tfoot>2019.9.19</tfoot>
</html>

    3.用html简单制作网页布局：

    其代码为：

    <!DOCTYPE html>
<html>
<head>
    <meta charser="UTF-8">
    <title>baidu.com</title>
</head>
<body>
<table border="0" cellspacing="5" cellpadding="5" >
    <caption><input type="text" name="百度一下"> 搜索<br><br></caption>
    <tr >
            <td height="100" width="200"><img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1568951086&di=59d4a1686d7c29fc8cee19d080655e70&src=http://img1.cache.netease.com/catchpic/4/47/47E5E3CA5A91B67C4D76CF2F01970A3D.jpg" height="100" width="200"/></td>
            <td height="100" width="200"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569176180195&di=db248ea7ac4e89404c0d75ad12112b0a&imgtype=0&src=http%3A%2F%2Ftu.ossimage.com%3A9186%2Fgroup2%2FM00%2F2D%2F69%2FrBgICV1I9SKAIP9fAADGyMPQdB4418.jpg" height="100" width="200"/>
            </td>
            <td height="100" width="200"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569176252061&di=e1863ad81d1a7cb2a7f502d2022406b4&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20140505%2F20140505123748-458974997.jpg" height="100" width="200"/>
            </td>
            <td height="100" width="200"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569176308169&di=e1ee657f19ab3de67dff7f3e6e8eb7eb&imgtype=0&src=http%3A%2F%2Ftu.ossfiles.cn%3A9186%2Fgroup2%2FM00%2F1D%2F1E%2FrBgICV0xhkiAAZKTAAFklTjJTtU311.jpg" height="100" width="200"/>
            </td>
    </tr>
    <tr >
            <td height="100" width="200"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569176365316&di=86f172a8172fa809f80e59a0e6cd3ad1&imgtype=0&src=http%3A%2F%2Ftu.ossfiles.cn%3A9186%2Fgroup2%2FM00%2F35%2F92%2FrBgICV1ToemAROkWAAAtvgoOHfo243.jpg" height="100" width="200"/>
            </td>
            <td height="100" width="200"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2560809608,2128688023&fm=26&gp=0.jpg" height="100" width="200"/>
            </td>
            <td height="100" width="200"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569176331110&di=0832d6207d1f4f6a5008c1d93f3bb455&imgtype=0&src=http%3A%2F%2Fp9.qhimg.com%2Ft01b8c26a8663748461.gif" height="100" width="200"/>
            </td>
            <td height="100" width="200"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569176521153&di=5537c9bec062a309d87edaff70ee22d5&imgtype=0&src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-545d7b732cef5ce2ef26affc9acc8e03_1200x500.jpg" height="100" width="200"/>
            </td>
    </tr>
    <tr >
            <td height="100" width="200"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569771270&di=b090caf93469af0cba9da259a9cb600b&imgtype=jpg&er=1&src=http%3A%2F%2Ftu.ossfiles.cn%3A9186%2Fgroup2%2FM00%2F1C%2F88%2FrBgICV0xOOuACYXzAAB3bzoOFD0609.jpg" height="100" width="200"/>
            </td>
            <td height="100" width="200"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569176592619&di=ba84b037d81a68b789237c6564ef3a24&imgtype=0&src=http%3A%2F%2Ftu.ossfiles.cn%3A9186%2Fgroup2%2FM00%2F09%2F29%2FrBgICV0V03GAX_D4AACaykDarq0501.jpg" height="100" width="200"/>
            </td>
            <td height="100" width="200"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569176504074&di=4342805d9be69716af4643c54ee35810&imgtype=0&src=http%3A%2F%2Fwww.100estore.com%2Fr%2Fgou%2Fu%2F201509%2F29095728qouc.png" height="100" width="200"/>
            </td>
            <td height="100" width="200"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569176484379&di=7ee8cce293c14be46c04a159ddcd8ca0&imgtype=0&src=http%3A%2F%2Ftech.cnr.cn%2Flist%2F201206%2FW020120601355734599465.png" height="100" width="200"/>
            </td>
    </tr>
</body>
</html>

    4.html中简单的标签格式：

    　　<h1>test</h1>pentest

    　　<a href="www.baidu.com">百度一下</a><b><img src="#"></b>

    　

    　　<div style="background-color: red; 100px;height: 100px"></div>

    　　<h2>DIV标题</h2>

    　　

    　　<div style="background-color: blue; 125px;height: 40px"><h1>DIV标题</h1>
    　　</div>

     5.简单的布局：

    <div id="all" style=" 600px;
                     height:600px">
    <div id="all" style="background-color: blue"></div>
    <div id="header" style="background-color: #ffc500;text-align: center">
        <h1 style="margin-bottom: 0">头部数据</h1>
    </div>
    <div id="menu" style="background-color: red;text-align: center;100px;height: 500px;float: left;">
        <p>目录</p>
        <b>menu</b>
    </div>
    <div id="content" style="background-color: blue;text-align: center;height: 500px; 500px;float: right">
        <h1>这是标题</h1>
        <p>这是内容</p>
    </div>
    <div id="footer" style="background-color: #ffc500;clear: both;">尾巴</div>
</div>
  • 相关阅读:
    jQuery源代码学习笔记_01
    jQuery学习心得
    前端笔试题目练习
    JavaScript Date学习实例：获取3分钟前的时间“hhmmss”格式
    JavaScript Date 学习心得
    Javascript 中的false、0、null、undefined和空字符串对象
    JavaScript比较运算符——"== != === !=="区别
    JavaScript运算符优先级——"++,--,&&,||“
    JavaScript操作符（=？，)优先级
    JavaScript控制流及关键字与C语言之比较
  • 原文地址：https://www.cnblogs.com/geyuezgh/p/11576520.html
Copyright © 2020-2023  润新知