HTML5基础代码整合

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5基础代码整合</title>
</head>
<style type="text/css">

</style>
<body>
<p>这是我的我第一个网页</p>
    <hr size="20" color="#999999">
<p align="center" style="color:#F06">学习HTML5其实很容易</p>
    <strong>字体标签,---strong和b标签都用于粗体显示文字</strong>
    <h1>这是h1标签的效果</h1>
    <h2>这是h2标签的效果</h2>
    <h3>这是h3标签的效果</h3>
    <h4>这是h4标签的效果</h4>
    <h5>这是h5标签的效果</h5>
    <h6>这是h6标签的效果</h6>
    <a href="http://www.baidu.com">这是一个连接百度的超链接</a>
    <div id=text1 align="center">
    <h1>《静夜思》</h1>
        <b>唐·李白</b>
        <h3>床前明月光,地上鞋两双。</h3>
        <h3>举头望明月,低头点蚊香。</h3>
        <h2>【诗文解释】</h2>
        <h4>暂时:略!</h4>
        <br>
        详情:<a href="http://www.google.com">http://www.google.com</a>
    </div>
    
<hr>
    
    <div id=text2>
    <header align="center">
        <h1>Web开发工作室</h1>
        </header>
        
        <footer align="center">
        <h3>版权所有 &copy; Web开发工作室 &nbsp;&nbsp;&nbsp;Copyright 2016 All Rights Reserved</h3>
        </footer>
    </div>
    
        <hr>
        <br>
        <br>
    
    <div id=text3>
    <form action="http://www.baidu.com" method="post">请输入您要查找的内容:
        <input type="text" name="wd">
        <input type="submit" value="提交到百度搜索">
        </form>
    </div>
    
        <hr>
        <br>
    
    <div id=text4 align="center">
    <form>
        请输入您的姓名:<input type="text" name="username"><br>
        请输入您的密码:<input type="password" name="pwd"><br>
            <input type="submit" value="提交">
        </form>
    </div>
    
        <hr>
        <br>
        
    <div id=text5>
    <form>
        <b>请选择你喜欢的水果:</b><br>
            <input type="checkbox" name="fruit" value="apple">苹果<br>
            <input type="checkbox" name="fruit" value="orange">橘子<br>
            <input type="checkbox" name="fruit" value="mango">芒果<br>
            <input type="submit" value="提交">
        </form>
    </div>
    
        <hr>
        <br>
    
<div id=text6>
    <form>
        <b>请选择你喜欢的水果:</b><br>
            <input type="radio" name="fruit" value="apple">苹果<br>
            <input type="radio" name="fruit" value="orange">橘子<br>
            <input type="radio" name="fruit" value="mango">芒果<br>
            <input type="submit" value="提交">
        </form>
    </div>
    
        <hr>
        <br>
    
<div id=text7>
    <form>
        <b>请选择你喜欢的水果:</b><br>
            <select name="fruit">
            <option value="apple">苹果</option>
                <option value="orange">橘子</option>
                <option value="mango">芒果</option>
            </select>
            <input type="submit" value="提交">
        </form>
    </div>
    
        <hr>
        <br>
    
    <div id=text8>
    <form>
        <p>请提出您宝贵的意见:</p>
            <textarea name="wenbenkuang" cols="50" rows="3"></textarea><br>
            <input type="submit" value="提交">
        </form>
        
    </div>
    
        <hr>
        <br>
    
    <div id=text9>
    <form>
        <p>Webpage: <input type="url" list="url_list" name="link"></p>
            <datalist id="url_list">
            <option label="baidu" value="http://www.baidu.com">
                <option label="google" value="http://www.google.com">
                <option label="yahoo" value="http://www.yahoo.com">
            </datalist>
        </form>
    </div>
    
        <hr>
        <br>
        
    <div id=text10>
    <form>
        请输入查询内容:<input type="text" required>
            <input type="submit" value="提交">
        </form>
    </div>
    
        <hr>
        <br>
    
    <div id=text11>
    <form>
        请输入查询内容:<input type="text" required oninvalid="setCustomValidity('请输入您想查询的内容,此处不能为空!')" οninput="setCustomValidty('')">
            <input type="submit" value="提交">
        </form>
    </div>
    
        <hr>
        <br>
    
    <div id=text12>
    <form>
        URL:&nbsp;<input type="url"><br><br>
            Email:<input type="email"><br><br>
            <input type="submit">
        </form>
    </div>
        
        <hr>
        <br>
    
    <div id=text13>
    <form>
        <b>用户:<input type="text" maxlength="5"></b>
            <input type="submit">
        </form>
    </div>
     
        <hr>
        <br>
        
    <div id=text14>
    <form>
        <b>查找:<input type="number" id="count" name="count" min="0" max="100" step="10"></b>
            <input type="submit">
        </form>
    </div>
    
    <hr>
    <br>
    
    <div id=text15>
    <form>
        E_mail:<input type="email" name="unse_email">
            <input type="submit" value="无验证提交" formnovalidate>
            <input type="submit">
        </form>
    </div>
    
        <hr>
        <br>
        
    <div id=text16>
    <ul>
        <li>ul称为无序列表标签。</li>
            <li>无序列表中的项目符号是几何图形。</li>
        </ul>
        <ol type='1' start='2'>
        <li>ol称为有序列表标签。</li>
            <li>li称为李诶奥项目</li>
            <li>有序列表中的项目符号是数字或者字母排序</li>
        </ol>
    </div>
        
        <hr>
        <br>
    
    <div id=text17 align="center">
    <table border="1">
        <caption>东部地区的人均GDP下降</caption>
            <tr>
            <th scope="col">第一季度</th>
                <th scope="col">第二季度</th>
                <th scope="col">第三季度</th>
                <th scope="col">第四季度</th>
            </tr>
            <tr>
            <td>20.4</td>
                <td>27.4</td>
                <td>0.58</td>
                <td>64</td>
            </tr>
        </table>
    </div>
        
        <hr>
        <br>
    
    <div id=text17 align="center">
    <table border="1">
        <caption>东部地区的人均GDP下降</caption>
            <tr>
            <th scope="col">第一季度</th>
                <th scope="col">第二季度</th>
                <th scope="col">第三季度</th>
                <th scope="col">第四季度</th>
            </tr>
            <tr align="center">
            <td>20.4</td>
                <td>27.4</td>
                <td>0.58</td>
                <td>64</td>
            </tr>
        </table>
    </div>
    
        <hr>
        <br>
    
    <div id=text18>
    <table border="1" width="100%">
        <caption>副食品清单</caption>
            <colgroup span="1" style="background:#0F0"/>
            <colgroup span="2" style="background:#C00"/>
            <thead>
            <tr>
                <th>食物</th>
                    <th>饮料</th>
                    <th>糖果</th>
                </tr>
            </thead>
            <tfoot>
            <tr>
                <td>100袋</td>
                    <td>50箱</td>
                    <td>130kg</td>
                </tr>
            </tfoot>
            <tbody>
            <tr>
                <td>面包</td>
                    <td>可乐</td>
                    <td>金丝猴</td>
                </tr>
                <tr>
                <td>蛋糕</td>
                    <td>凉茶</td>
                    <td>徐福记</td>
                </tr>
            </tbody>
        </table>
    </div>
        
        <hr>
        <br>
    
    <div id=text19>
    <table width="100%" border="3">
        <tr>
            <th rowspan="3">值班人员</th>
            </tr>
            <tr>
            <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
            </tr>
            <tr>
            <td>李强</td>
                <td>张民</td>
                <td>王平</td>
            </tr>
        </table>
</div>
    
        <hr>
        <br>
        
        <div id=text20>
        <table width="100%" border="5" style="color:#30F">
        <tr>
            <th colspan="3">值班人员</th>
            </tr>
            <tr>
            <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
            </tr>
            <tr>
            <td>李强</td>
                <td>张民</td>
                <td>王平</td>
            </tr>
        </table>
    </div>
    
    <hr>
        <br>
        
<div id=text21 align="center">
    <p>iframe可以在HTML5页面里面显示另外一个网页</p>
        <p>使用iframe显示百度页面</p>
        <iframe src="http://www.baidu.com" width="900" height="300" frameborder="1" scrolling="no">
        <!--这是一个框架-->
        </iframe>
    </div>
    
    <hr>
        <br>
    
    <div id=text22 align="center">
            <p>
                <img src="img1.jpg" alt="图片替代文字" title="图片提示文字:):););)" width="300" height="260" />
                </p>
                <p>
                把鼠标移动到图片上悬停一会儿,你就可以看到提示文字!
                </p>
            </body>
    </div>
    
    <hr>
        <br>
        
    <div id=text23>
    <p>图片组合</p>
        <figure>
        <input type="image" src="image1.jpg" width="300" height="200">
            <input type="image" src="image2.jpg" width="300" height="200">
            <input type="image" src="image3.jpg" width="300" height="200">
        </figure>
    </div>
    
    <hr>
        <br>
        
     <div id=text24>
     
     </div>
     
</body>
</html>
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值