zoukankan      html  css  js  c++  java
  • 集腋成裘-01-html -html基础

    1 标签

      1.1 单标签

        注释标签 <!-- 注释标签 -->

        换行标签 <br/>

        水平线 <hr/>

        <img src="图片来源" alt="替换文本(图片不显示的时候)" title="提示文本(鼠标上移的时候)" width="宽度" height="高度">

      1.2 双标签

        <p>文本内容</p>

        <h1>标签h1-h6</h6>  (注意:最好只有一个h1)

        <font>文本标签</font>

        <strong>文本加粗</strong>  <b></b>

        <em>文本倾斜</em>     <i></i>

        <del>删除线</del>      <s></s>

        <ins>下划线</ins>      <u></u>

             <a href="跳转路径" title="提示文本(鼠标上移的时候)" target="_self(或者是_blank)"></a>

        <p id="Mao"></p>    <a href="#Mao">回到顶部</a>

        <sup>上标</sup>

        <sub>下标</sub>

      1.3 特殊字符

        空格    &nbsp;

        小于号<   &lt;

        大于号>  &gt;

        &号    &amp;

      1.4 列表

        无序列表

        <ul>

          <li></li>

        </ul> 

        有序列表

        <ol>

          <li></li>

        </ol> 

        自定义列表

        <dl>

          <dt></dt>

          <dd></dd>

        </dl>

      1.5 meta 的用法

      <meta charset="utf-8">
      <meta name="keywords" content="关键字,方便SEO搜索">
      <meta name="description" content="网页描述">
      <meta http-equiv="refresh" content="10; http://www.baidu.com">
      <meta name="Author" content="逍遥小天狼">

      1.6 link 的用法

      <link rel="stylesheet" type="text/css" href="css地址">
      <link rel="icon" href="图标地址">

      1.7 table用法

        <table border="1" width="500" height="300" cellspacing="0" cellpadding="10" align="center" >
            <tr align="center">
                <td>张三</td>
                <td>李四</td>
                <td>王五</td>
            </tr>
            <tr>
                <td>张三2</td>
                <td  bgcolor="red" align="center">李四2</td>
                <td>王五2</td>
            </tr>
        </table>
    table

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <link rel="stylesheet" type="text/css" href="css地址">
    <link rel="icon" href="图标地址">
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="关键字,方便SEO搜索">
        <meta name="description" content="网页描述">
    
        <meta name="Author" content="逍遥小天狼">
        <link rel="icon"  href="Image/favicon.ico">
    
        <table border="1" width="500" height="300" cellspacing="0" cellpadding="10" align="center" >
            <caption>表头</caption>
            <thead>
                <tr>
                    <th colspan="2">姓名  年龄</th>             
                    <th>地址</th>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>张三</td>
                    <td>30</td>
                    <td rowspan="2">中国</td>
                </tr>
                <tr>
                    <td valign="bottom">李四</td>
                    <td  bgcolor="red" align="center">20</td>
                     
                </tr>
                
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    
    </head>
    <bod
    </body>
    </html>
    table2

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <table width="500px" height="200px" bgcolor="green" cellspacing="1" align="center">
            <caption>课程表</caption>
            <tr bgcolor="white">         
                <th width="100px" colspan="2"></th>
                <th width="90px">星期一</th>
                <th width="90px">星期二</th>
                <th width="90px">星期三</th>
                <th width="90px">星期四</th>
                <th width="90px">星期五</th>
            </tr>
            <tr bgcolor="white">
                <td width="60px" rowspan="2">上午</td>
                <td width="40px">1</td>
                <td width="90px">语文</td>
                <td width="90px">数学</td>
                <td width="90px">物理</td>
                <td width="90px">化学</td>        
                <td width="90px">生物</td>
            </tr>
            <tr bgcolor="white">
                 
                <td width="40px">2</td>
                <td width="90px">体育</td>
                <td width="90px">音乐</td>
                <td width="90px">几何</td>
                <td width="90px">画画</td>        
                <td width="90px">舞蹈</td>
            </tr>
            <tr bgcolor="white">
                <td width="60px" rowspan="2">下午</td>
                <td width="40px">1</td>
                <td width="90px">体育</td>
                <td width="90px">画画</td>
                <td width="90px">音乐</td>
                <td width="90px">语文</td>        
                <td width="90px">音乐</td>
            </tr>
            <tr bgcolor="white">
                 
                <td width="40px">2</td>
                <td width="90px">英语</td>
                <td width="90px">舞蹈</td>
                <td width="90px">体育</td>
                <td width="90px">唱歌</td>        
                <td width="90px">体育</td>
            </tr>
        </table>
    </body>
    </html>
    课程表(细线)

     

     表单基本控件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <form action="1.php" method="post">
            <fieldset>
                <legend>分组信息</legend>
                用户名:<input type="text" maxlength="6" name="userName" value="我是默认值">
            <br><br>&nbsp;码:<input type="password" name="userPassWord">
            <br><br>
            <input type="radio" name="gender" checked="true"><input type="radio" name="gender" ><br><br>
            <!-- 多选功能 -->
            省(市):<select multiple="multiple">        
                <option>河南</option>
                <option>河北</option>
                <option selected="true">北京</option>
                <option>山东</option>
                <option>山西</option>                
            </select>
            <!-- 分组 -->
            市(区):<select>
                <optgroup label="北京市">
                    <option>海淀区</option>
                    <option>朝阳区</option>
                </optgroup>
            </select>
            <br><br>
            <!-- 多选框 -->
            <input type="checkbox" checked="true"> 语文
            <input type="checkbox"> 英语
            <input type="checkbox" checked="checked"> 数学
            <br><br>
            <!-- 多行文本域 -->
            <textarea cols="103px" rows="3"></textarea>
            <br><br>
            <!-- 文件上传空间 -->
            <input type="file">
            <br><br>
            <!-- 按钮 -->
            <input type="submit" text="提交">
            <input type="button" value="普通按钮">
            <input type="image" src="按钮.jpg">
            <input type="reset" value="重置">
            </fieldset>
            
            <fieldset>
                <legend>h5新特性</legend>
                <input type="url" >
                <br>
                <input type="date">
                <br>
                <input type="time">
                <br>
                <input type="email">
                <br>
                <input type="number" step="5">
                <br>
                <!-- 滑块 -->
                <input type="range" step=10>
            </fieldset>
        </form>
    </body>
    </html>
    form Demo

  • 相关阅读:
    78. Subsets
    93. Restore IP Addresses
    71. Simplify Path
    82. Remove Duplicates from Sorted List II
    95. Unique Binary Search Trees II
    96. Unique Binary Search Trees
    312. Burst Balloons
    程序员社交平台
    APP Store开发指南
    iOS框架搭建(MVC,自定义TabBar)--微博搭建为例
  • 原文地址:https://www.cnblogs.com/YK2012/p/8727815.html
Copyright © 2011-2022 走看看