对之前内容的复习并尝试将不同功能标签进行组合
学习新标签select、map与area
用css进行了一次很随意的页面布局和设计,太随意了就不发了/_ \ o( ̄┰ ̄*)ゞ
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<main>
<body>
<section class="s1">
<form action="f1" id="001">
<fieldset>
<legend>密码登录</legend>
账号/用户名:<input type="text"><br>
密码 :<input type="text"><br>
验证码 :<input type="text"><br>
<button class="b1">登陆</button>
<button class="b2">注册</button>
</fieldset>
</form>
</section>
<section class="s2">
<h2><select id="002" onchange="self.location.href=options[selectedIndex].value" name="select">
<OPTION selected>=== 选择 ===</OPTION>
<optgroup label="一组">
<option value="https://www.w3cschool.cn/htmltags/tag-select.html">更多文章</option>
</optgroup>
<optgroup label="二组">
<option value="https://www.bilibili.com/">随便写点</option></optgroup>
</select></h2>
</section>
<section class="s3">
<div>
<table ><caption ><p><strong>想不出来写什么了</strong></p></caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</section></div>
<section class="s4" id="004">
<menu>
<li><p></p></li>
</menu></p>
</section>
<section class="s5" id="005">
<h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>
<hr>
<h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p>
</section>
<section class="s6" id="006">
<img src="E:\网页设计储存\Edemo\Screenshot 2023-11-17 152747.jpg" width="20" height="20" alt="wenhao" usemap="#要用井号哦">
<map name="要用井号哦">
<area shape="rect" coords="20,20" href="Edemo\demo2.png" alt="other">
</map>
<p><abbr title="世界卫生组织"><b><em>WHO</em></b></abbr> 成立于 1948。</p>
<p title="W3Cschool">W3Cschool</p>
</section>
<section class="s7" id="007">
<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
</section>
<section class="s7" id="007">
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
</section>
</body></main>
</html>