search

博客列表 >0403作业

0403作业

a'ゞ子晨
a'ゞ子晨原创
2020年04月04日 06:20:58695浏览

语义化结构元素

<h1> - <h6>

-划分段落

<header>

-页眉，页面头部

<footer>

-页脚，页面底部

<main>

-页面主体（一个页面仅有一个）

<aside>

-边栏，广告，商品，栏目等

<section>

-具有某种功能的区块

<nav>

-导航

<div>

-通用容器，什么都能装

笔记

-多个页眉.header>.nav>a{menu$}x
-多个页脚.footer>.links>a{links$}x
-容器content
-容器containar
-边栏（类）aside
-广告位ads
-文章article
-

非语义化结构示例

  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"></div>
  12.       <a href="">munu1</a>
  13.       <a href="">munu2</a>
  14.       <a href="">munu3</a>
  15.     </div>
  16.     内容主体
  17.     <div class="content"></div>
  18.     边栏
  19.     <div class="aside">
  20.       <div class="ads"></div>
  21.       主体区
  22.       <div class="main">
  23.         <div class="article">
  24.           <h3>php中文网</h3>
  25.           <p>外部开发者的家园</p>
  26.         </div>
  27.       </div>
  28.     </div>
  30.     页脚
  31.     <div class="footer">
  32.       <div class="lnks">
  33.         <a href="">links1</a>
  34.         <a href="">links2</a>
  35.         <a href="">links3</a>
  36.       </div>
  37.     </div>
  38.   </body>
  39. </html>

语义化结构示例

  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.     页眉
  8.     <header>
  9.   <body>
  10.     <div class="header">
  11.       <div class="nav"></div>
  12.       <a href="">munu1</a>
  13.       <a href="">munu2</a>
  14.       <a href="">munu3</a>
  15.     </div>
  16. </header>
  17.     内容主体
  18.     <div class="content"></div>
  19.     边栏
  20.     <aside>
  21.     <div class="aside">
  22.       <section class="ads">广告位</section>
  23.     </aside>
  24.       主体区
  25.       <main>
  26.       <div class="main">
  27.         <article>
  28.             <header>
  29.           <h3>php中文网</h3>
  30.           <p>外部开发者的家园</p>
  31.           <footer></footer>
  32.         </header>
  33.         </article>
  34.     </main>
  36.       </div>
  37.     </div>
  39.     页脚
  40.     <footer>
  41.     <div class="footer">
  42.       <div class="lnks">
  43.         <a href="">links1</a>
  44.         <a href="">links2</a>
  45.         <a href="">links3</a>
  46.     </footer>
  47.       </div>
  48.     </div>
  49.   </body>
  50. </html>

语义化的文本元素

  1. <abbr title"超文本标记语言">HTML</abbr>
  1. <p>2<sup>4</sup>=16</p>

链接列表与图像

  1. - <a>链接
  2. -<ul><li>无序列表</li></ul>
  3. -<ol><li>有序列表</li></ol>

示例

  1. -当前窗口访问<a href="https://www.php.cn/">php中文网</a>
  2. -新标签页访问<a href="https://www.php.cn/" target="_blank">php中文网</a>
  3. -target指向目标
  4. -下载<a href="aaa.zip" download="html教案.md.zip">html下载</a>
  5. -download自定义文件名
  6. 打电话<a href="tel:13567891011">联系我们</a>
  7. -tel电话
  8. 发邮件<a href="mailto:123456@qq.com">给我们来信</a>
  9. -mailto发邮件
  10. 锚点/屏幕定位<a href="#anchor">跳转到当前页面的锚点</a>
  11. <h3 id:"anchor" style="gargin-top 1000px;">我是锚点</h3>
  12. -margin-top上边距
  13. -anchor锚点

列表的作用

  1. -无序列表<ul>
  2.       <li>苹果</li>
  3.       <li>香蕉</li>
  4.       <li>菠萝</li>
  5.     </ul>
  6. -<ul>无序
  8. -有序列表
  9. <ol>
  10.       <li>苹果</li>
  11.       <li>香蕉</li>
  12.       <li>菠萝</li>
  13.     </ol>
  15. <ol>有序
  17. -起始列表
  18. <ol start"5">...</ol>
  20. -自定义列表
  21. <dl>
  22. <dt>html</dt>
  23. <dd>超文本标记语言</dd>
  24. </dl>>
  26. -<dd>

表格与框架

  1. -表格由表头（可无）、表体（必须要有且自动生成）、表尾（可无）组成
  2. -<th>加粗、居中
  3. -<border>边宽
  4. -cellpadding 单元格填充
  5. -cellspacing 单实线
  6. -width 宽度
  7. -align排列
  8. -center居中
  9. -bgcolor背景颜色
  10. - <col bgcolor="red" span="2">按此颜色跨列多少行
  11. -rowspan行合并
  12. -colspan列合并
  13. ####示例
  14. <!DOCTYPE html>
  15. <html lang="en">
  16.   <head>
  17.     <meta charset="UTF-8" />
  18.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  19.     <title>Document</title>
  20.   </head>
  21.   <body>
  22.     <table border="1" cellpadding="5" cellspacing="0" width="500" align="center">
  23.         <colgroup bgcolor="lightgreen">
  24.             <col>
  25.             <col>
  26.             <col bgcolor="red" span="2">
  27.             <col>
  28.         </colgroup>
  29.       <caption style="font-size: 1.5rem;">
  30.         <b>员工信息表</b>
  31.       </caption>
  32.       <thead bgcolor="lightyellow">
  33.         <tr>
  34.             <th>部门</th>
  35.             <th>ID</th>
  36.             <th>姓名</th>
  37.             <th>职务</th>
  38.             <th>手机</th>
  39.           </tr>
  40.       </thead>
  41.       <tbody>
  42.         <tr>
  43.             <td rowspan="3" align="center">开发部</td>
  44.             <td>101</td>
  45.             <td>小王</td>
  46.             <td>主管</td>
  47.             <td>135********</td>
  48.             <tr>
  50.                 <td>102</td>
  51.                 <td>小张</td>
  52.                 <td>程序员</td>
  53.                 <td>136********</td>
  54.             </tr>
  55.             <tr> 
  56.                 <td>103</td>
  57.                 <td>小李</td>
  58.                 <td>实习生</td>
  59.                 <td>137********</td>
  60.             </tr>
  61.             <tr>
  62.                 <td rowspan="3" align="center">销售部</td>
  63.                 <td>104</td>
  64.                 <td>小马</td>
  65.                 <td>主管</td>
  66.                 <td>138********</td>
  67.             </tr>
  68.             <tr>
  69.                 <!-- <td>销售部</td> -->
  70.                 <td>105</td>
  71.                 <td>小刘</td>
  72.                 <td>客服</td>
  73.                 <td>139********</td>
  74.             </tr>
  75.             <tr>
  76.                 <!-- <td>销售部</td> -->
  77.                 <td>106</td>
  78.                 <td>小朱</td>
  79.                 <td>实习生</td>
  80.                 <td>140********</td>
  81.             </tr>
  82.             </tr>
  83.       </tbody>
  84.       <tfoot>
  85.           <tr>
  86.               <td>备注</td>
  87.               <td colspan="4" align="center">啊啊啊啊啊啊</td>
  88.           </tr>
  89.       </tfoot>
  90.       </tr>
  91.     </table>
  92.   </body>
  93. </html>

表单元素

-placeholder占位符，文本提示内容
-required 必须的
-autofocus自动对焦
-section单选框
-value值
-checked不二属性，真
-secret保密
-checkbox复选框

示例

  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>Document</title>
  7.   </head>
  8.   <body>
  9.     <h3>用户注册</h3>
  10.     <form action="">
  11.       <section>
  12.         <label for="username">用户名：</label>
  13.         <input
  14.           type="text"
  15.           id="username"
  16.           name="username"
  17.           placeholder="用户名不少于6位"
  18.           required
  19.           autofocus
  20.         />
  21.       </section>
  22.       <section>
  23.         <label for="password">密　码：</label>
  24.         <input
  25.           type="password"
  26.           id="password"
  27.           name="password"
  28.           placeholder="密码不少于6位"
  29.           required
  30.           size="10"
  31.         />
  32.         <section>
  33.           <label for="secret">性别：</label>
  34.           <div class="box">
  35.             <input type="radio" name="gender" id="male" value="male" /><label
  36.               for="male"
  37.               >男</label
  38.             >
  39.             <input
  40.               type="radio"
  41.               name="gender"
  42.               id="female"
  43.               value="female"
  44.             /><label for="female">女</label>
  45.             <input
  46.               type="radio"
  47.               name="gender"
  48.               id="secret"
  49.               value="secret"
  50.               checked
  51.             /><label for="secret">保密</label>
  52.           </div>
  53.         </section>
  54.         <!--  复选框 -->
  55.         <section>
  56.           <label for="programme">兴趣</label>
  57.           <div class="box">
  58.             <input
  59.               type="checkbox"
  60.               name="hobby[]"
  61.               id="game"
  62.               value="game"
  63.             /><label for="">游戏</label>
  64.             <input
  65.               type="checkbox"
  66.               name="hobby[]"
  67.               id="travel"
  68.               value="travel"
  69.             /><label for="">旅游</label>
  70.             <input
  71.               type="checkbox"
  72.               name="hobby[]"
  73.               id="shoot"
  74.               value="shoot"
  75.             /><label for="">摄影</label>
  76.             <input
  77.               type="checkbox"
  78.               name="hobby[]"
  79.               id="programme"
  80.               value="programme"
  81.               checked
  82.             /><label for="">编程</label>
  83.           </div>
  84.         </section>
  85.       </section>
  86.     </form>
  87.   </body>
  88. </html>
上一条：D3表格与表单控制下一条：关于链接，列表，表格，表单的入门见解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多