聂文文学习笔记-HTML标签-day03

阅读数:1575 发布时间:2016-05-26 19:24:02

作者:zzl005 标签: 聂文文 HTML 委培班 w1

HTML标签

基础标签

元信息标签

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
    <meta name="description" content="html_tag" />
    <meta name="keywords" content="html, tag" />

样式标签

    <style type="text/css">
    h1 {color: red}
    p {color: blue}
    </style>

列表标签

    <h3>无序列表</h3>
    <ul>
        <li>car</li>
        <li>phone</li>
    </ul>
    <h3>有序列表</h3>
    <ol>
        <li>first</li>
        <li>
            <ul>
                <li>car</li>
                <li>phone</li>
            </ul>
        </li>
        <li>second</li>
    </ol>

分区标签

    <div style="background-color:red;text-align:center" >
        <h3>div</h3>
        <p>这是一个div。这是<span style="background-color:blue;">span</span>。</p>
    </div>
    <section style="background-color:blue;">
        <h3>section</h3>
        <p>这是一个section</p>
    </section>
    <header style="background-color:green;">
        <h3>header</h3>
        <p>这是一个header</p>
    </header>
    <footer style="background-color:pink;">
        <h3>footer</h3>
        <p>这是一个footer</p>
    </footer>
    <aside style="background-color:red;">
        <h3>aside</h3>
        <p>这是一个aside</p>
    </aside>

链接标签

    <a href="http://www.baidu.com">百度</a>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="/c5.css" />

文本标签

    <h1>标题</h1>
    <div>
        <p>
            <span>中国移动研究院表示关注。</span><br>
            长春工业大学发来贺电。<br>
            西祠胡同发来贺电。<br>
            山西某学院(<em>名字不记得了</em>)发来贺电。<br>
            常州工业职业技术学院发来贺电。<br>
            大连软件学院发来贺电。<br>
            <i>电子政务与云计算国家工程实验室发来贺电。</i><br>
            河南新乡学院不肯发来贺电,被我逼着发贺电。<br>
            艺龙技术部工程师发来贺电。<br>
            <strong>百度前端工程师发来贺电</strong>。<br>
            <hr>
            <b>江苏海悦集团发来隆重贺电。</b><br>
            <code>var x= 1;</code>
            <pre>
            for i = 1 to 10
                 print i
            next i
            </pre>
            <blockquote>这是长引用</blockquote>
            <q>引用</q>
            <address>
                written by <a href="mailto:webmaster@exaple.com">guyue</a>.<br>
                visit us at:<br>
                example.com<br>
                china
            </address>
            <acronym title="World Wide Wed">WWW</acronym>
            the <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.            
        </p>
    </div>

表单标签

    <form action="/html_form.asp" method="get">
        姓名:<input type="text" name="">
        密码:<input type="password" name="">
        <br>
        足球:<input type="checkbox" name="">
        <br>
        篮球:<input type="checkbox" name="">
        <br>
        <label for="male">Male</label>
        <input type="radio" checked="checked" id="male" name="sex">
        <br>
        <label for="female">Female</label>
        <input type="radio" id="female" name="sex">
        <br>
        <select name="">
            <option value="">first</option>
            <option value="">second</option>
        </select>
        <select name="">
            <option value="">first</option>
            <option value="" selected="selected">second</option>
        </select>
        <textarea rows="5" cols="10">
            there is nothing!
        </textarea>
        <input type="button" value="click"></input>
        <fieldset>
            <legend>健康信息</legend>
            身高:<input type="text" name=""></input>
            体重:<input type="text" name=""></input>
        </fieldset>
        <p>first name: <input type="text" name=""></input></p>
        <p>last name: <input type="text" name=""></input></p>
        <input type="submit" value="submit"></input>
        <input type="reset" value="reset"></input>
        <!-- html5新的input类型 -->
        E-mail: <input type="email" name="user_email" />
        Homepage: <input type="url" name="user_url" />
        Points: <input type="number" name="points" min="1" max="10" />
        Range:<input type="range" name="points" min="1" max="10" />
        Date: <input type="date" name="user_date" />
        Week: <input type="week" name="user_date" /> 
    </form>
    <!-- 文本域 -->
    <textarea rows="5" cols="10">
        文本域
    </textarea>
    <!-- 按钮 -->
    <button type="button">click me!</button>
    <select>
        <optgroup label="数字">
            <option value="1">1</option>
            <option value="2">2</option>
        </optgroup>
        <optgroup label="字母">
            <option value="a">a</option>
            <option value="b">b</option>
        </optgroup>
    </select>
    <input list="cars"></input>
    <datalist id="cars">
        <option value="BMW"></option>
        <option value="Ford"></option>
    </datalist>

编程标签

    <script type="text/javascript" src="http://www.xiuyetang.com/js/jquery-1.11.3.js"></script>

图像标签

    <img src="eg_goleft.gif" alt="向左转" />
    <img src="eg_goleft1.gif" alt="向左转" />    

音频/视频标签

    <video src="movie.ogg" controls="controls" width="300" loop="loop" autoplay="autoplay">
    </video>

图形标签

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    </canvas>
    <script type="text/javascript">

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.lineTo(10,10);
    cxt.stroke();

    </script>

SVG标签

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
      <polygon points="100,10 40,180 190,60 10,60 160,180"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>

表格标签

    <table border="1">
        <tr>
            <th>篮球</th>
            <th>足球</th>
            <th>排球</th>
        </tr>
        <tr>
            <td>10</td>
            <td>10</td>
            <td>10</td>
        </tr>
        <tr>
            <td>10</td>
            <td>10</td>
            <td>10</td>
        </tr>
    </table>

框架标签

    <frameset rows="50, 50">
        <frame src=""></frame>
        <frameset cols="25, 75">
            <frame></frame>
            <frame></frame>
        </frameset>
    </frameset>

相关文章推荐: