<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html test Sophon</title>
</head>
<body>
<!-- [Headings] -->
<h1>Heading One</h1>
<h2>Heading One</h2>
<h3>Heading One</h3>
<h4>Heading One</h4>
<h5>Heading One</h5>
<h6>Heading One</h6>
<!-- [Paragraph] -->
<!-- Lorem10 随机生成文本10个词长度 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, porro.</p>
<!-- 超链接 <a></a> -->
<p><a href = "https://google.com">Hyperlink current page Jump</a></p>
<p><a href = "https://baidu.com" target="_blank">Hyperlinks open a new page</a></p>
<!-- [Lists] -->
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ol>
<!-- [Table] --> <!-- 表格 -->
<table>
<thead>
<tr> <!-- table row 行 -->
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Major</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sophon</td> <!-- Tabele date cell -->
<td>18</td>
<td>abc@qq.com</td>
<td>computer</td>
</tr>
<tr>
<td>EastHu</td> <!-- Tabele date cell -->
<td>20</td>
<td>def@qq.com</td>
<td>law</td>
</tr>
</tbody>
</table>
<br> <!-- 换行 -->
<hr> <!-- 分割线 -->
<br>
<!-- [Forms] --> <!-- 表单 -->
<form action="form.js" method="POST"> <!-- html不处理逻辑，action指向一个文件；method提交表单更安全 -->
<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="text" name="email" placeholder="Enter Email">
</div>
<input type="submit" name="submit" value="Submit"> <!-- 提交按钮(在Form里面，目的是为了提交表单) -->
</form>
<br>
<button>This is a Button</button> <!-- 单独新建按钮(点击无用，因为html不处理逻辑) -->
<br>
<br>
<br>
<!-- [Image] --> <!-- 图片 -->
<!-- width宽边vw占浏览器比例， src来源，alt图片无法显示就打印文字 -->
<img style="width: 50vw" src="img/picture.jpg" alt="This is a img tag">
<br>
<!-- [Quotation] --> <!-- 引用 -->
<blockquote>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem nobis repudiandae officia dolore soluta nihil facilis provident magnam iure illo, dolorem ipsa reiciendis laboriosam odio corporis vero ullam, beatae et.</blockquote>
<!-- 鼠标移到ZAFU上显示 -->
<p><abbr title="Zhejiang A&F University">ZAFU</abbr> is a beautiful college</p>
<!-- 引用名人名言 -->
<p><cite>There are only zero or countless absenteeism</cite> by LuXun</p>
<div style="margin-top:1000px"></div> <!-- 页面下面增加1000个像素，看起来方便，这里用到了CSS内容 -->
</body>
</html>
2020.11.7
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
