美文网首页
HTML初级的模型

HTML初级的模型

作者: 淇漯草 | 来源:发表于2018-08-16 11:28 被阅读0次

    将HTML初级的结构,建立一个模型

    要素:
    一、声明
    二、全局属性
    三、内容(包含标题和段落), 标题, 段落
    四、文字属性,斜体,加粗
    五、图像
    六、链接
    七、表格与排版
    八、数据的提交和接收

    以下代码加上注释

    <!DOCTYPE html> # 声明
    
    <html> # 全局属性
    
    <head> # 网页
    
        <title>My first web page</title> # 标题
    
        <!-- This is a comment, by the way --> # 专用注释
    
    </head>
    
    <body> #内容
    
    <h1>My first web page</h1> # 文段标题
    
    <h2>What this is</h2>
    <p>A simple page put together using HTML.#文章段落 
    <em>  #强调 I said a simple page put together using HTML.</em> 
    A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>
    
    <h2>Why this is</h2>
    <ul> # 无序排列
        <li>To learn HTML</li> 子序列
        <li>
            To show off
            <ol> # 有序排列
                <li>To my boss</li>
                <li>To my friends</li>
                <li>To my cat</li>
                <li>To the little talking duck in my brain</li>
            </ol>
        </li>
        <li>Because I have fallen in love with my computer and want to give her some HTML loving.</li>
    </ul>
    
    <h2>Where to find the tutorial</h2>
    # 链接,图像
    <p><a href="http://www.htmldog.com"><img src="http://www.htmldog.com/badge1.gif" width="120" height="90" alt="HTML Dog"></a></p>
    
    <h3>Some random table</h3>
    # 表格
    <table>
        <tr> #行
            <td>Row 1, cell 1</td> #格子
            <td>Row 1, cell 2</td>
            <td>Row 1, cell 3</td>
        </tr>
        <tr>
            <td>Row 2, cell 1</td>
            <td>Row 2, cell 2</td>
            <td>Row 2, cell 3</td>
        </tr>
        <tr>
            <td>Row 3, cell 1</td>
            <td>Row 3, cell 2</td>
            <td>Row 3, cell 3</td>
        </tr>
        <tr>
            <td>Row 4, cell 1</td>
            <td>Row 4, cell 2</td>
            <td>Row 4, cell 3</td>
        </tr>
    </table>
    
    <h3>Some random form</h3>
    <p><strong>Note:
    </strong> 加粗It looks the part, but won't do a damned thing.</p>
    
    # 数据传输
    <form action="somescript.php" method="post">
    
    <p>Name:</p>
    <p><input name="name" value="Your name"></p>
    
    <p>Comments: </p>
    <p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>
    #文本框
    
    #输入类型
    <p>Are you:</p>
    <p><input type="radio" name="areyou" value="male"> Male</p>
    <p><input type="radio" name="areyou" value="female"> Female</p>
    <p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
    <p><input type="radio" name="areyou" value="asexual" checked> Asexual</p>
    
    <p><input type="submit"></p>
    
    </form>
    <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option value = "third option">Option 3</option>
        <option selected>Rodent</option>(初始选项)
    </select>
    
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:HTML初级的模型

          本文链接:https://www.haomeiwen.com/subject/wjqfbftx.html