收藏
天蓬老师批改状态：合格
老师批语：挺好, 有个图更好
<h1>-<h6>:划分段落<header>:页眉<footer>:页脚<main>：主体<aside>：边栏<section>：区块<nav>:导航<div>:通用容器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>传统方式：非语义化结构</title></head><body><!---页眉--><div class="header"><div class="nav"><a href="">Menu1</a><a href="">Menu2</a><a href="">Menu3</a></div></div><!---内容主体区--><div class="container"><!---边栏--><div class="aside"><div class="ads">广告位</div></div><!---主体区--><div class="main"><div class="article"><h3>php中文网</h3><p>WEB开发者的家园</p></div></div></div><!---页脚--><div class="footer"><div class="links"><a href="">links1</a><a href="">links2</a><a href="">links3</a></div></div></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>语义化结构</title></head><body><!---页眉--><header><nav><a href="">Menu1</a><a href="">Menu2</a><a href="">Menu3</a></nav></header><!---内容主体区--><div class="container"><!---边栏--><aside><section class="ads">广告位</section></aside><!---主体区--><main><article><header></header><h3>php中文网</h3><p>WEB开发者的家园</p><footer></footer></article></main></div><!---页脚--><footer><section class="links"><a href="">links1</a><a href="">links2</a><a href="">links3</a></section></footer></body></html>
<p>：段落,<pre>：代码原样渲染,<br>：换行,<span>：通用内联元素<time>：时间,<abbr>：缩写,<address>：地址,<code>：代码段
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>语义化的文本元素</title></head><body><time>2020-04-03 </time><p><abbr title="超文本标记语言">HTML</abbr></p><p>2<sup>4</sup>=16</p><footer><address>合肥市政务新区</address></footer><p><code>const username = 'admin'</code></p></body></html>
<a>:链接
<ul><li>无序列表</li></ul><ol><li>有序列表</li></ol><img>:图像
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>链接元素</title></head><body><a href="https://www.php.cn" target="_blank">PHP中文网</a><a href="https://www.php.cn">PHP中文网</a><a href="0403.zip" download="html教程.md.zip">html教程0403</a><a href="tel:1571111111">咨询热线</a><a href="mailto:123@qq.com">联系我们</a><a href="#author1">跳转到锚点1</a><a href="#author2">跳转到锚点2</a><h1 id="author1" style="margin-top:1000px;">我是锚点1</h1><h1 id="author2" style="margin-top:2000px;">我是锚点2</h1></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>列表元素</title></head><body><!---无序列表--><ul><li>苹果5斤</li><li>梨3斤</li><li>葡萄9斤</li></ul><hr /><!---有序列表--><ol start="5"><li>苹果5斤</li><li>梨3斤</li><li>葡萄9斤</li></ol><hr /><!---自定义列表--><dl><dt>HTML</dt><dd>超文本标记语言</dd><dd>是一种标识性的语言</dd><dt>css</dt><dd>层叠样式表</dd><dt>PHP</dt><dd>超文本预处理器</dd><dt>MYSQL</dt><dd>数据库</dd></dl></body></html>
<table> + <tr> + <td>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表格元素</title></head><body><tableborder="1"cellpadding="5"cellspacing="0"width="500"height="200"align="center"><colgroup bgcolor="lightpink"><col /><col bgcolor="lightgreen" /><col bgcolor="yellow" span="2" /><col /><col /></colgroup><caption style="font-size:1.5rem;margin-bottom:10px;">员工信息表</caption><thead bgcolor="lightblue"><tr><th>部门</th><th>ID</th><th>姓名</th><th>职务</th><th>手机</th></tr></thead><tbody><tr><td rowspan="3" align="center">开发部</td><td>101</td><td>小王</td><td>主管</td><td>13313313313</td></tr><tr><td>102</td><td>小王</td><td>主管</td><td>13313313313</td></tr><tr><td>103</td><td>小王</td><td>主管</td><td>13313313313</td></tr><tr><td rowspan="2" align="center">销售部</td><td>103</td><td>小王</td><td>主管</td><td>13313313313</td></tr><tr><td>103</td><td>小王</td><td>主管</td><td>13313313313</td></tr></tbody><tfoot bgcolor="wheat"><td>备注</td><td colspan="4">所有员工离职必须提交申请</td></tfoot></table></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表单元素1</title></head><body><h3>用户注册</h3><form action=""><section><label for="username">用户名：</label><inputtype="text"id="username"name="username"maxlength="20"placeholder="不少于8位"requiredautofocus/></section><section><label for="password">密码：</label><inputtype="password"id="password"name="password"placeholder="不少于8位"requiredsize="10"/></section><section><label for="secret">性别：</label><div class="box"><input type="radio" name="gender" id="male" value="male" /><label for="male">男</label><input type="radio" name="gender" id="female" value="female" /><label for="female">女</label><inputtype="radio"name="gender"id="secret"value="secret"checked/><label for="secret">保密</label></div></section><section><label for="shoot">兴趣：</label><div class="box"><inputtype="checkbox"name="hobby[]"id="game"value="game"checked/><label for="">游戏</label><input type="checkbox" name="hobby[]" id="travel" value="travel" /><label for="">旅游</label><input type="checkbox" name="hobby[]" id="shoot" value="shoot" /><label for="">摄影</label></div></section></form></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
