简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML基础知识中语义化元素,列表，链接，表格等
Blogger Information
Blog 28
fans 0
comment 0
visits 25672
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML基础知识中语义化元素,列表，链接，表格等
，多思曩惜，
Original
485 people have browsed it

0403 html 基础知识 2

1.语义化元素

  • <h1> - <h6>:划分段落
  • <header>:页眉
  • <footer>:页脚
  • <main>:主体
  • <aside>:边栏
  • <section>:区块
  • <nav>:导航
  • <div>:通用容器
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>传统方式：非语义化结构</title>
  7.   </head>
  8.   <body>
  9.     <!-- 页眉 -->
  10.     <div class="header">
  11.       <div class="nav">
  12.         <a href="">menu1</a>
  13.         <a href="">menu2</a>
  14.         <a href="">menu3</a>
  15.       </div>
  16.       <!-- .nav -->
  17.     </div>
  18.     <!-- 内容主体区 -->
  19.     <div class="container">
  20.       <!-- 边栏 -->
  21.       <div class="aside"></div>
  22.       <!-- 主体区     -->
  23.       <div class="main">
  24.         <div class="article">
  25.           <h3>php中文网1</h3>
  26.           <p>web开发者的家园</p>
  27.         </div>
  28.       </div>
  29.     </div>
  31.     <!-- 页脚 -->
  32.     <div class="fooler">
  33.       <div class="links">
  34.         <a href="">link1</a>
  35.         <a href="">link2</a>
  36.         <a href="">link3</a>
  37.       </div>
  38.     </div>
  39.     <!-- .fooler>.links>a{link$}*3 -->
  41.   </body>
  42. </html>
  • 预览

2.语义化的文本元素

  • <p>,<pre>,<br>,<span>
  • <time>,<addr>,<address>,<code>····
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>语义化的文本元素</title>
  7.   </head>
  8.   <body>
  9.     <time>2020-04-03</time>
  10.     <p>
  11.       <abbr title="超文本标记语言">HTML</abbr>
  12.     </p>
  13.     <p>2<sup>4</sup>=16</p>
  14.     <footer>
  15.       <address>合肥市</address>
  16.     </footer>
  17.     <p>
  18.       <code>
  19.         const username = 'admin'
  20.       </code>
  21.     </p>
  22.   </body>
  23. </html>
  • 预览

3.链接，列表与图像

  • <a>:链接
  • <ul><li>无序列表<ul><li>
  • <ol><li>有序列表<ol><li>
  • <img>
  1.  <a href="https://www.php.cn" target="_self">php中文网</a>
  2.     <!-- _self 当前窗口打开 _blank新窗口打开 -->
  3.     <a href="0403.md" download="html教案">html教程</a>
  4.     <!-- download 下载名称 -->
  5.     <a href="tel:1522059****">咨询热线</a>
  6.     <a href="mailto:2913***29@qq.com">联系我们</a>
  7.     <a href="#anchon">跳转到锚点</a>
  8.     <!-- 无序列表 -->
  9.     <h3>购物车</h3>
  10.     <ul>
  11.       <li>苹果</li>
  12.       <li>牛奶</li>
  13.       <li>水果</li>
  14.     </ul>
  15.     <hr />
  16.     <!-- 有序列表 -->
  17.     <h3>购物车</h3>
  18.     <ol start="5">
  19.       <li>苹果</li>
  20.       <li>牛奶</li>
  21.       <li>水果</li>
  22.     </ol>
  23.     <hr />
  24.     <!-- 自定义列表 -->
  25.     <dl>
  26.       <dt>HTML</dt>
  27.       <dd>超文本标记语言</dd>
  28.       <dd>基础前端语言</dd>
  29.       <dt>css</dt>
  30.       <dd>层叠样式表</dd>
  31.       <dt>javaScript</dt>
  32.       <dd>前端通用</dd>
  33.     </dl>
  34.     <h1 id="anchon" style="margin-top: 1000px;">
  35.       锚点
  36.     </h1>

4.表格与框架

  • <table> + <tr> + <td>
标签 描述
table 定义表格
th 定义表头
tr 定义表格的行
td 定义表格单元
caption 定义表格的表题
colgroup 定义表格列的组
col 定义用于表格列的属性
thead 定义表格的页眉
tbody 定义表格的主体
tfoot 定义表格的页脚 
  1. <table
  2.       border="1"
  3.       cellpadding="5"
  4.       cellspacing="0"
  5.       width="500"
  6.       height="100"
  7.       align="center"
  8.     >
  9.       <colgroup bgcolor="lightpink">
  10.         <col bgcolor="lightgreen" />
  11.         <col bgcolor="yellow" span="2" />
  12.         <col />
  13.         <col />
  14.       </colgroup>
  15.       <caption style="font-size: 1.5rem;margin-bottom: 10px;">
  16.         员工信息表
  17.       </caption>
  18.       <thead bgcolor="bule">
  19.         <tr>
  20.           <th>部门</th>
  21.           <th>ID</th>
  22.           <th>姓名</th>
  23.           <th>职务</th>
  24.           <th>手机</th>
  25.         </tr>
  26.       </thead>
  28.       <tbody>
  29.         <tr>
  30.           <td rowspan="2">开发部</td>
  31.           <td>01</td>
  32.           <td>zz</td>
  33.           <td>xx</td>
  34.           <td>cc</td>
  35.         </tr>
  36.         <tr>
  37.           <!-- <td>开发部</td> -->
  38.           <td>02</td>
  39.           <td>aa</td>
  40.           <td>ss</td>
  41.           <td>dd</td>
  42.         </tr>
  43.       </tbody>
  44.       <tbody>
  45.         <tr>
  46.           <td>销售部</td>
  47.           <td>03</td>
  48.           <td>aa</td>
  49.           <td>ss</td>
  50.           <td>dd</td>
  51.         </tr>
  52.         <tr>
  53.           <td>销售部</td>
  54.           <td>03</td>
  55.           <td>aa</td>
  56.           <td>ss</td>
  57.           <td>dd</td>
  58.         </tr>
  59.       </tbody>
  60.       <tfoot>
  61.         <tr bgcolor="green">
  62.           <td>备注:</td>
  63.           <td colspan="4" align="center">离职必须提前30天书面申请</td>
  64.         </tr>
  65.       </tfoot>
  66.     </table>
  • 预览效果
Correcting teacher：天蓬老师天蓬老师

Correction status：unqualified

Teacher's comments：学习总结补上
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！