0403 html 基础知识 2
1.语义化结构元素
<h1>-<h6>:划分段落<header>:页眉<footer>:页脚<main>：主体<aside>：边栏<section>：区块<nav>:导航<div>:通用容器1.1 非语义化结构
<!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>
1.2语义化结构
<!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>
2.语义化的文本元素
<p>：段落,<pre>：代码原样渲染,<br>：换行,<span>：通用内联元素<time>：时间,<abbr>：缩写,<address>：地址,<code>：代码段
2.1
<!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>
3.链接，列表与图象
<a>:链接
<ul><li>无序列表</li></ul><ol><li>有序列表</li></ol><img>:图像3.1链接
<!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>
3.1列表
<!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>
4.表格与框架
<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> <table border="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>
5.表单元素
<!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> <input type="text" id="username" name="username" maxlength="20" placeholder="不少于8位" required autofocus /> </section> <section> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="不少于8位" required size="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> <input type="radio" name="gender" id="secret" value="secret" checked /> <label for="secret">保密</label> </div> </section> <section> <label for="shoot">兴趣：</label> <div class="box"> <input type="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>
