源码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<strong>1.有语义的DIV和标签们</strong>
<main>
<header>header(DIV)</header>
<nav>NO1(DIV)</nav>
<nav>NO2(DIV)</nav>
<article>
-----article(DIV)开始-----
<section>
-----section(DIV)开始-----
<address>>abbr:xxx.com</address>
<sup id="8888">我是锚点</sup>
<abbr title="xxx">abbr:xxx.com</abbr> <br>
<code>my code</code> <br>
<small>my small code</small> <br>
<time>my time:2022-03-01</time> <br>
原价：<del>$50.00</del> ；现价<ins>$5.00</ins> <br>
H<sub>2</sub>o <br>
<progress value="30" max="100">30</progress> <br>
<mark>my mark</mark> <br>
<cite>来源：自创</cite>
以下摘自互联网：
<blockquote>
故乡的歌，是一支清远的笛；总在有月亮的晚上响起。
故乡的面貌，却是一种模糊的怅望，仿佛雾里的挥手别离；
离别后；乡愁是一棵没有年轮的树；永不老去。
</blockquote>
<table border="1">
<caption>表格示例</caption>
<thead>
<tr>
<th>序号</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>00000000000</td>
</tr>
<tr>
<td>2</td>
<td>00000000000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>10</td>
<td>00000000000</td>
</tr>
</tfoot>
</table>
<img src="../1.png" width="145" height="126"><br>
<img src="../2.gif" width="145" height="126"><br>
<!-- begin 图像地图（image map）是一个具有可点击区域的图像，<area>标签用于在图像地图内定义可点击区域。 -->
<img src="../1.png" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<br>
<!-- end 图像地图（image map）是一个具有可点击区域的图像，<area>标签用于在图像地图内定义可点击区域。 -->
<audio src="../1.mp3" controls width="200" height="200"></audio>
<video src="../1.mp4" controls muted loop poster="../1.png" preload="auto" width="200" height="200"></video>
<br>
-----section(DIV)结束-----
</section>
<aside>aside(DIV)</aside>
</article>
-----article(DIV)结束-----
<footer>
<form action="a.do" method="post">
<fieldset>
<legend>提交建议</legend>
<label for="title">标题：</label>
<input type="text" name="title" id="title" size="5" required />
<label>内容：
<input type="text" name="content" size="5" maxlength="10" />
</label>
<label>电话：
<input type="tel" name="tel" placeholder="电话" size="8" value="123645678" readonly />
</label>
<label>邮箱：<input type="email" size="8" /></label>
</fieldset>
<fieldset>
<legend>大建议</legend>
<textarea placeholder="建议……" name="info" cols="40" rows="2"></textarea><br>
<select name="nick">
<option value="1">匿名</option>
<option value="2">实名</option>
</select><br>
<select name="more" multiple>
<optgroup label="11">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</optgroup>
<optgroup label="22">
<option value="4">4</option>
<option value="5">5</option>
</optgroup>
</select>
</fieldset>
<input type="datetime-local" name="时间" />
<input type="search" name="搜索" list="list" />
<datalist id="list">
<option value="4">你</option>
<option value="5">我</option>
</datalist>
<input type="reset" value="重置" />
<input type="submit" value="提交" />
</form>
</footer>
</main>
<hr>
<b>2.无语义的DIV和标签:</b>
<div>
你好！DIV
<span>我是span文本</span>
<p>我是段落</p>
<pre>pre:这里是个换行
</pre>
<s>没有语义的删除线</s>
<a href="https://yorbest.vip/" target="_blank">超链接</a>
<a href="#8888">锚点</a>
<a href="mailto:123456@qq.com">发送邮件</a>
<a href="tell:12345">拨打电话</a>
<a href="../1.png">图片预览</a>
</div>
</body>
</html>
效果：
效果
网友评论