1.主体构成
<!--解释文档类型-->
<!DOCTYPE html>
<!--一个html分为head+body两块-->
<html>
<!--头部-->
<head>
<!--描述文档的各种属性和信息,包括文档的标题、在web中的位置及其他文档的关系等-->
<!--绝大数文档头部包含的数据都不会真正作为内容显示给读者-->
</head>
<!--主体部分-->
<body>
</body>
</html>
2.基本细则
- Title
放在head中,定义网页的名称
<title>
This is a title
</title>
结果:
- Heading
<!--不同大小的heading-->
<h1>heading one</h1>
<h2>heading one</h2>
<h3>heading one</h3>
…
结果:
3. List
<!--无序号-->
<ur>
<li>List Item 1</li>
<li>List Item 2</li>
</ur>
<!--有序号-->
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
</ol>
结果:
4. Paragraph
<!--段落-->
<p>ashdahsduia asdasdhasdioasjdio</p>
<!--加粗-->
<p><strong>书撒刷刷</strong></p>
<!-超链接-->
<!--以新打开网页的方式-->
<p><a href="https://baidu.com" target="_blank"><strong>超链接</strong></a><p>
结果:
5. Table
<!--Table-->
<table>
<!--表头-->
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Email</th>
</tr>
</thead>
<!--主体-->
<tbody>
<tr>
<td>Lenord</td>
<td>Chan</td>
<td>45</td>
<td>ABC@qq.com</td>
</tr>
<tr>
<td>Lenord</td>
<td>Chan</td>
<td>45</td>
<td>ABC@qq.com</td>
</tr>
<tr>
<td>Lenord</td>
<td>Chan</td>
<td>45</td>
<td>ABC@qq.com</td>
</tr>
</tbody>
</table>
结果:
6. br、hr
空行、加横线的空行
7. Form
<!--form-->
<form>
<div>
<label>First Name</label>
<input type="text" name="firstname" placeholder="Enter First Name">
</div>
<div>
<label>Last Name</label>
<input type="text" name = "lastname" placeholder="Enter Last Name">
</div>
<div>
<label>Email</label>
<input type="email" name="email" placeholder="Enter Email">
</div>
<input type="submit" name="submit" value="Submit">
</form>
<button>This is a Button</button>
结果:
8. 加载图像
<!--Image-->
<!--alt定义如果无法加载图像时显示的文本-->
<img style = "width:100vw" src="C:/Users/16102/Desktop/图标.png" alt="This is a img tag">
结果:
9.引用
<!--Quotation-->
<p>
<cite>通过尝试自己没有做过的事情,可能会发掘出新的可能性</cite>——坂本龙一
</p>
结果: