HTML初级的模型
2018-08-16 本文已影响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>
