html模板 

http://www.w3chtml.com/html5/


<!DOCTYPE html>
<head>
    <!-- <meta http-equiv="Refresh" content=3 /> 刷新 -->
　　<!-- <meta http-equiv="Refresh" content=3 ;Url=http://www.baidu.com /> 跳转 -->
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <!-- 设置编码 -->
　　<meta http-equiv="keywords" content="word1,word2" />                    <!-- 关键词 -->
　　<meta http-equiv="description" content="this is word web!!!" />         <!-- 描述 -->
　　<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9;IE=EmulateIE8" /> <!-- IE8即支持新的标准又支持旧的标准 -->
　　<meta name="author" content="" /> <!-- 作者 -->
　　<meta name="viewport" content="width=device-width, initial-scale=1.0,
            user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />      <!-- 移动端 -->
    <title>定义表格边框的方法</title>
　　<link ref= "shortcut icon" href="favicon.ico"/>   <!-- 导入图标 -->
   

　　<style>   <!-- 页面CSS -->
        body { padding-top: 200px; }
        table{ border-collapse:collapse; }
        td{ border:#ccc solid 1px; padding:5px; }
　　</style>
　　<script>   <!-- 页面JS -->
        document.write("Hello World!");
　　</script>
</head>
<body>
    <header>    <!-- header -->

    </header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <ul class="nav nav-pills">
          <li role="presentation" class="active"><a href="#">Home</a></li>
          <li role="presentation"><a href="#">Profile</a></li>
          <li role="presentation"><a href="#">Messages</a></li>
        </ul>
        <ol class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ol>
    </nav>
    <section>
        <div class="jumbotron">
          <h1>Hello, world!</h1>
          <p>sfsdfsdfsdfsdf</p>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
    </section>
    <article>
      <h1>Internet Explorer 9</h1>
      <p>hghhhhhhhhhhhhhhh</p>
    </article>
    <aside>
    </aside>
    <figcaption>
    </figcaption>
    <figure>
    </figure>
    <footer>
    </footer>



    <h1>bootstrap</h1>
    <div class="container">
    <div class="row" >
        <div class="col-xs-6 col-sm-3"
            style="background-color: #dedef8;
            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-xs-6 col-sm-3"
        style="background-color: #dedef8;box-shadow:
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut.
            </p>
        </div>

        <div class="clearfix visible-xs"></div>

        <div class="col-xs-6 col-sm-3"
        style="background-color: #dedef8;
        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
        <div class="col-xs-6 col-sm-3"
        style="background-color: #dedef8;box-shadow:
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim
            </p>
        </div>
    </div>
</div>




    <div  style="display:inline-block">
        <H1>template<span style="background: blue">asdf</span></H1>
        <p>this is a p<br/>br</p>
        <video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"></video>
        <audio controls><source src="horse.mp3" type="audio/mpeg"></audio>
    </div>
    <div>

    <img src="http://iph.href.lu/400x200?bg=454545" class="img-responsive" alt="dddd">
    <a href="#" class="thumbnail">
        <img src="http://iph.href.lu/400x200?bg=454545" class="img-responsive" alt="dddd">
    </a>
    <a href="#"></a>

    <pre>
        &nbsp;
    </pre>

    <progress value="22" max="100"></progress>

    <table width="100%" border="1" cellspacing="0" cellpadding="0"  align="center">
        <caption>table test</caption>
        <colgroup>
            <col span="2" style="background-color:#eee">
            <col style="background-color:grey">
          </colgroup>
          <thead style="background-color:green">
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                   <td><span class="label label-default">Default</span></td>
                <td><span class="label label-success">Success</span></td>
                <td><span class="label label-danger">Danger</span></td>
            </tr>
             <tr>
                <td><span class="label label-default">Default</span></td>
                <td><span class="label label-success">Success</span></td>
                <td><span class="label label-danger">Danger</span></td>
            </tr>
        </tbody>
        <tfoot style="background-color:red">
            <tr>
                <td><button class="btn btn-primary" type="button">Messages </button></td>
                <td><span class="label label-info">Info<span class="badge">4</span></span></td>
                <td>asdfsdf</td>
            </tr>
        </tfoot>
    </table>
    <textarea>asdfasdfasdfasdf</textarea>

    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>

    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

    <dl>
      <dt>Coffee</dt>
      <dd>- black hot drink</dd>
      <dt>Milk</dt>
      <dd>- white cold drink</dd>
    </dl>
    <iframe src="demo_iframe.htm" width="200" height="200" frameborder="0" name="iframe_a"></iframe>

    </div>
    <form action="#",method="GET/POST" enctype="multiple/form-data" autocomplete="on">
        <input type="file" name=""  multiple/>
        <input type="text" name="" readonly="readonly" disabled="disabled" placeholder="First name"/>
        <input type="password" name="" required/>
        <input type="submit" name=""  formenctype="multipart/form-data" autofocus/>
        <input type="reset" name=""/>
        <input type="button" name=""/>
        <input type="redio" name="r1" value=1/>
        <input type="redio" name="r1" value=2/>
        <input type="checkbox" name="c1" value=1 checked="checked"/>
        <input type="checkbox" name="c1" value=2>
        <input type="range" id="a" value="50">
        <input type="date" name="bday">
        <input type="color" name="favcolor">
        <input type="email" name="email">
        <input type="month" name="bdaymonth">
        <input type="number" name="quantity" min="1" max="5">
        <input type="search" name="googlesearch">
        <input type="time" name="usr_time">
        <input type="url" name="homepage">
        <input type="week" name="week_year">

        <select name="s1" size=2 multiple="multiple">
            <option value='1' selected="selected">XX</option>
            <option value='2'>XX</option>
            <optgroup label="group1">
                <option value='11'>XX</option>
                <option value='12'>XX</option>
            </optgroup>
            <optgroup label="group2">
                <option value='21'>XX</option>
                <option value='22'>XX</option>
            </optgroup>
        </select>


        <select>
          <optgroup label="Swedish Cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
          </optgroup>
          <optgroup label="German Cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </optgroup>
        </select>

        <fieldset>
          <legend>00000</legend>
          Name: <input type="text"><br>
          Email: <input type="text"><br>
          Date of birth: <input type="text">
        </fieldset>

        <input list="browsers" name="browser">
        <datalist id="browsers">
          <option value="Internet Explorer">
          <option value="Firefox">
          <option value="Chrome">
          <option value="Opera">
          <option value="Safari">
        </datalist>
    </form>


 　　<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://cdn.bootcdn.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <link ref= "stylesheet" type="text/css" href="1.css"/> <!-- 导入CSS -->
    <script type="text/javascript" src="1.js"></script>  <!-- 导入JS -->
    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</body>
</html>

 

posted on 2019-05-06 13:02  pvm  阅读(289)  评论(0)  编辑  收藏  举报

导航