美文网首页
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初级的模型

    将HTML初级的结构,建立一个模型 要素:一、声明二、全局属性三、内容(包含标题和段落), 标题, 段落四、文字属...

  • html初级

    2018-3-13 搭建http-sever本地开发环境 1.安装http-server-------在命令行中输...

  • html初级

    1 html 结构 1. 称为根标签,所有的网页标签都在中。 2. 标签用于定义文档的头部,它是所有头部元素...

  • HTML 初级入门

    一个简单的html的结构 1. 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎...

  • html初级总结

    段落 换行 删除线 斜体 下划线 加粗 添加属性 块元素,布局,换行 内联元素,布局,不换行 添加图片,并且图片不...

  • HTML初级须知

    一、什么是HTML HTML的英文全称是Hypertext Marked Language,中文叫做“超文本标记语...

  • vsCode 前端插件推荐

    1、HTMLSnippets (提示初级的H5代码片段); 2、HTML CSS Support (让 html ...

  • 2018-08-21

    通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型...

  • 四、JavaScript HTML DOM

    通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型...

  • HTML JS DOM

    通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型...

网友评论

      本文标题:HTML初级的模型

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