0403 html 基础知识 2
1.语义化元素
<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> <!-- .nav --> </div> <!-- 内容主体区 --> <div class="container"> <!-- 边栏 --> <div class="aside"></div> <!-- 主体区 --> <div class="main"> <div class="article"> <h3>php中文网1</h3> <p>web开发者的家园</p> </div> </div> </div> <!-- 页脚 --> <div class="fooler"> <div class="links"> <a href="">link1</a> <a href="">link2</a> <a href="">link3</a> </div> </div> <!-- .fooler>.links>a{link$}*3 --> </body></html>
- 预览
2.语义化的文本元素
<p>,<pre>,<br>,<span><time>,<addr>,<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>
- 预览
3.链接，列表与图像
<a>:链接<ul><li>无序列表<ul><li><ol><li>有序列表<ol><li><img>
<a href="https://www.php.cn" target="_self">php中文网</a> <!-- _self 当前窗口打开 _blank新窗口打开 --> <a href="0403.md" download="html教案">html教程</a> <!-- download 下载名称 --> <a href="tel:1522059****">咨询热线</a> <a href="mailto:2913***29@qq.com">联系我们</a> <a href="#anchon">跳转到锚点</a> <!-- 无序列表 --> <h3>购物车</h3> <ul> <li>苹果</li> <li>牛奶</li> <li>水果</li> </ul> <hr /> <!-- 有序列表 --> <h3>购物车</h3> <ol start="5"> <li>苹果</li> <li>牛奶</li> <li>水果</li> </ol> <hr /> <!-- 自定义列表 --> <dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dd>基础前端语言</dd> <dt>css</dt> <dd>层叠样式表</dd> <dt>javaScript</dt> <dd>前端通用</dd> </dl> <h1 id="anchon" style="margin-top: 1000px;"> 锚点 </h1>
4.表格与框架
| 标签 |
描述 |
| table |
定义表格 |
| th |
定义表头 |
| tr |
定义表格的行 |
| td |
定义表格单元 |
| caption |
定义表格的表题 |
| colgroup |
定义表格列的组 |
| col |
定义用于表格列的属性 |
| thead |
定义表格的页眉 |
| tbody |
定义表格的主体 |
| tfoot |
定义表格的页脚 |
<table border="1" cellpadding="5" cellspacing="0" width="500" height="100" align="center" > <colgroup bgcolor="lightpink"> <col bgcolor="lightgreen" /> <col bgcolor="yellow" span="2" /> <col /> <col /> </colgroup> <caption style="font-size: 1.5rem;margin-bottom: 10px;"> 员工信息表 </caption> <thead bgcolor="bule"> <tr> <th>部门</th> <th>ID</th> <th>姓名</th> <th>职务</th> <th>手机</th> </tr> </thead> <tbody> <tr> <td rowspan="2">开发部</td> <td>01</td> <td>zz</td> <td>xx</td> <td>cc</td> </tr> <tr> <!-- <td>开发部</td> --> <td>02</td> <td>aa</td> <td>ss</td> <td>dd</td> </tr> </tbody> <tbody> <tr> <td>销售部</td> <td>03</td> <td>aa</td> <td>ss</td> <td>dd</td> </tr> <tr> <td>销售部</td> <td>03</td> <td>aa</td> <td>ss</td> <td>dd</td> </tr> </tbody> <tfoot> <tr bgcolor="green"> <td>备注:</td> <td colspan="4" align="center">离职必须提前30天书面申请</td> </tr> </tfoot> </table>
- 预览效果
