本文档通过实例展示了HTML的基本结构及使用方法，包括不同类型的列表、颜色样式、表单元素和表格布局等内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.red{
color:#F00}
.green{
color:#0F0}
.blue{
color:#00F}
</style>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
</script>
<body>
<header>
<h1>这是整个页面的标题</h1>
<nav>
<ul>
<a>栏目1 | </a>
<a>栏目2 | </a>
<a>栏目3 |</a>
</ul>
</nav>
</header>
<section>
<h2>财经板块</h2>
</section>
<section>
<h2>体育板块</h2>
</section>
<aside>
<h2>相关新闻</h2>
<p>这里是一些相关的新闻内容</p>
</aside>
<ul>
<li>i walk the line</li>
<li>out among the stars</li>
<li>rock and roll shoes</li>
</ul>
<ol>
<li>i walk the line</li>
<li>out among the stars</li>
<li>rock and roll shoes</li>
</ol>
<ol type="a">
<li>i walk the line</li>
<li>out among the stars</li>
<li>rock and roll shoes</li>
</ol>
<dl>
<dt>名称</dt>
<dd>深圳站</dd>
<dt>级别</dt>
<dd>四等车站</dd>
<dt>业务</dt>
<dd>办理旅客乘降</dd>
<dd>办理行李、包裹托运</dd>
<dd>办理整车货物发到</dd>
</dt>
</dl>
<p>这段文字有<span class ="red">红</span><span class="green">绿</span><span class="blue">蓝</span>
<p><em>北京</em>获得2022年冬奥会举办权</p>
<p><strong>北京</strong>获得2022年冬奥会举办权</p>
<p>正常字体</p>
<p><big>大字体</big></p>
<p><small>小字体</small></p>
<form>
<p><label>姓名:<input name="username" type="text" placeholder="请输入您的名字" required="required" /></label></p>
<fieldset>
<legend>性别：</legend>
<p><label><input type="radio" name="sex" value="male" checked />男</label></p>
<p><label><input type="radio" name="sex" value="female" />女</label></p>
</fieldset>
<p>
<label for="equipment">请选择预约的机器:</label>
<select name="equipment">
<option value="1">分光光度计</option>
<option value="2">气象色谱仪</option>
<option value="3">低速离心机</option>
</select>
</p>
<p>
<label><input type="checkbox" name="rule" />遵守实验仪器使用规范</label></p>
<p><button>提交表单</button></p>
<table border="2">
<tr>
<td colspan="2">学生信息表</td>
</tr>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张丽</td>
<td>23</td>
</tr>
<tr>
<td>万丽</td>
<td>19</td>
</tr>
</table>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
