简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >html基础知识的学习（基础标签-简单结构布局）—PHP培训第十期

html基础知识的学习（基础标签-简单结构布局）—PHP培训第十期

孔小帅
孔小帅原创
2019年12月22日 01:28:06778浏览

html基础知识的学习（基础标签-简单结构布局）—PHP培训第十期

html基本的文档结构

  • 语义化的标签
    • 标题<h1></h1><h2></h2><h3></h3>....<h6></h6>
    • 页眉<header></header>
    • 页脚<footer></footer>
    • 导航<nav></nav>
    • 主体<main></main>
    • 文章<article></article>
    • 片段<section></section>
    • 侧边栏<aside></aside>
    • 段落内容```<p>内容</p>

  • 标签简单布局实例：

    1.  <!DOCTYPE html>
    2.  <html lang="en">
    3.  <head>
    4.  <meta charset="utf-8" />
    5.    <title>页面布局</title>
    6.  </head>
    7.  <body>
    8.    <!--页眉-->
    9.   <header>
    10.       <!--导航--> 
    11.       <nav>
    12.           <a href="">About</a>
    13.           <a href="">Home</a>
    14.           <a href="">Connect</a>
    15.           <a href="">Blog</a>
    16.       </nav>
    17.   </header>
    18.   <!--主体-->
    19.   <main>
    20.       <!--文章-->
    21.       <article>
    22.          <header>
    23.               <!--h1标题-->
    24.               <h1>文章标题</h1>
    25.               <p>文章段落1</p>
    26.               <p>文章段落2</p>
    27.               <p>文章段落3</p>
    28.           </header>
    29.           <section>
    30.               <h2>文章标题</h2>
    31.               <p>文章段落1</p>
    32.               <p>文章段落2</p>
    33.               <p>文章段落3</p>
    34.           </section>
    35.           <footer>
    36.               <section>分页条</section>
    37.           </footer>
    38.       </article>
    40.   </main>
    41.  <section>分页条</section>
    42.  <!--侧边栏 广告条-->
    43.  <aside>
    44.  <!--无序列表显示推荐列表-->
    45.  <ul>
    46.          <li>推荐信息1</li>
    47.          <li>推荐信息2</li>
    48.          <li>推荐信息3</li>
    49.          <li>推荐信息4</li>
    50.  </ul>
    51.  </aside>
    53.          <aside><section><h2>广告位招商</h2></section></aside>
    54.         <aside>
    55.           <section>
    56.               <span>标签1</span>
    57.               <span>标签2</span>
    58.               <span>标签3</span>
    59.           </section>
    60.       </aside>
    61.  <!--页脚-->
    62.  <footer>
    63.    <div>
    64.    <a href="" alt="">链接1</a>
    65.    <a href="" alt="">链接2</a>
    66.    <a href="" alt="">链接3</a>
    67.    </div>
    68.  </footer>
    69.  </body>
    70.  </html>
    • 运行结果：
      运行结果

第二部分，基本文本标签

文本相关标签

序号 内容 标签样式
1 段落标签 <p></p>
2 将文本样式原样输出 <pre></pre>
3 某文本需要高亮显示 <span></span>
4 换行标签 <br />

标签应用样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>基本文本标签</title>
  6. </head>
  7. <body>
  8. <!--文本标签-p-->
  9. <p>
  10. 你今天裸奔了吗？哥
  11. </p>
  12. <!--pre标签将文本原样输出-->
  13. <pre>
  14. 举头望明月，
  15. 低头思故乡。
  16. </pre>
  17. <p>
  18. <!--span将文本高亮显示-->
  19. 你会读这首<span style="color:red">诗</span>诗吗？
  20. </p>
  21. <!--br换行标签的使用-->
  22. <p>
  23. 举头望明月，<br />
  24. 低头思故乡。
  25. </p>
  26. </body>
  27. </html>

运行结果

以下为语义化文本标签

序号 内容 标签样式
1 时间日期 ```<time></time>
2 缩写 <addr>
3 粗体显示文本 <b></b><strong></strong>
4 斜体显示文本 <i></i><em></em>
5 删除线 <del></del><s></s>
6 特别标记 <mark></mark>
7 引用，q为加双引号，blockquote为缩进显示 <q></q><blockquote></blockquote>
8 文本原样输出,和pre一样 <code></code>
9 进度条 <progress></progress>
10 地址斜体显示 <adress></adress>

语义化文本应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>语义化文本</title>
  6. </head>
  7. <body>
  8. <!--日期时间-->
  9. <time>2019-12-22 07:24</time><br>
  10. <span>2019-12-22 07:24</span><br>
  11. <!--粗体斜体显示-->
  12. <b>我是粗体吗？</b><br>
  13. <strong>我也是粗体吗？</strong><br>
  14. <i>我是斜体吗？</i><br>
  15. <em>我也是斜体吗？</em><br>
  16. <!--addr某缩写，例如：nnd可以鼠标放上显示奶奶的-->
  17. <addr title="奶奶的">nnd</addr>
  18. <p>
  19.     <!--sub和sup小标上标的显示-->
  20.     氧气的英文显示O<sup>2</sup><br>
  21.     给m加小标3显示为M <sub>3</sub>
  22. </p>
  23. <p>
  24.     <!--q给引用加双引号-->
  25.     许多的秘密都出自<q>维基解密</q>
  26.     <br>
  27.     <!--blockquote缩进显示-->
  28.     <blockquote title="http://php.cn">超文本标记语言是一种机动发射可令肌肤抵抗力简单来说会计法</blockquote>
  29. <br>
  30. <!--mark背景高亮显示-->
  31. <mark>php中文网</mark>是一个学习平台。
  32. </p>
  33. <p>
  34.     <!--s和del表示删除线-->
  35.     梨子原价为 <s>5元</s>，现在优惠 <span style="color:red">1元</span> <br>
  36.     苹果原价为 <s>15元</s>，现在优惠 <span style="color:red;font-size: 25px;">2元</span>
  37.     <!--code和pre的作用一样-->
  38.     <br>
  39.     <code>
  40.         var num=50;
  41.         var sum=0;
  42.         function int sum(){
  43.          return sum+=num;
  44.         }
  45.     </code><br>
  46.     <!--progress表示进度条，有些浏览器不支持就会显示完成的值-->
  47.     <progress value="50" max="100">全年任务完成50%</progress>
  48. </p>
  49. <footer>
  50.     <!--address地址斜体显示-->
  51.     联系地址：<address>合肥市xxxx。</address>
  52. </footer>
  53. </body>
  54. </html>

运行结果为

图像元素和链接

1 图像元素

  • <img src="" alt="" />
  • src表示图片路径，alt图片描述，图片无法显示时显示，width/height图片高度和宽度设置，一般只需要设置宽度就可以，会自动匹配图片高度。—

2 链接元素

  • <a href="..." target="..." title="">
  • href跳转到目标路径，可以为地址：href=“http://www.php.cn” ，也可以为邮箱地址：href=”mailto:xxx@123.com” ，可以打电话：href=”tel:134232323” ，可以文件下载,浏览器不解析：href=”123.zip”;
  • target 当前窗口打开target=”_self”,新窗口打开target=”_blank”,父窗口打开target=”_parent”,顶层窗口打开target=”_top”,指定窗口打开target=”name”,设置锚点打开target=”#maodian”
  • title 链接描述

图像元素和链接应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图像元素</title>
  6. </head>
  7. <body>
  8. <!--显示图片-->
  9. <img src="images/1.jpg" alt="狗和猫"><br>
  10. <!--路径中的图片不存在会显示alt中的文字-->
  11. <p>图片不存在会显示alt中的文字</p><br>
  12. <img src="images/111.jpg" alt="狗和猫">
  13. </body>
  14. </html>

图片元素运行结果

" class="reference-link">

链接元素<a href="" target="" title="">

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>链接元素</title>
  6. </head>
  7. <body>
  8. <!--跳转到指定网页,并在新窗口打开-->
  9. <a href="http://www.php.cn" target="_blank" title="php中文网">php中文网</a>
  10. <br>
  11. <!--发邮件，-->
  12. <a href="mailto:132@123.com">发邮件</a>
  13. <br>
  14. <!--打电话-->
  15. <a href="tel:13434343">打电话</a>
  16. <br>
  17. <!--下载文件-->
  18. <a href="demo1.zip">下载文件</a>
  19. <!-- ==============target属性说明-=============-->
  20. <br>
  21. <!--不写target，为默认在当前窗口打开和target=“_self”一样-->
  22. <a href="http://www.php.cn" >php中文网</a>
  23. <br>
  24. <a href="http://www.php.cn" target="_self">php中文网-self</a>
  25. <!--target=“_blank”新窗口打开-->
  26. <a href="http://www.php.cn" target="_blank">php中文网-blank</a>
  27. <!--target=“_parent”在父窗口打开-->
  28. <a href="http://www.php.cn" target="_parent">php中文网-parent</a>
  29. <!--target="_top"顶层窗口打开-->
  30. <a href="http://www.php.com" target="_top">php中文网 -top</a>
  31. <!--设置锚点#ddd，然后在打开-->
  32. <a href="#ddd">锚点跳转</a>
  34. <h1 id="ddd" style="height: 1000px">php中文网 </h1>
  36. </body>
  37. </html>

运行结果，截图时没有挨个链接截取，只截取了打电话的图片

" class="reference-link">

列表元素

无序列表代码样式-配合链接适合导航

  1. <ul>
  2. <li>...</li>
  3. <li>...</li>
  4. </ul>

有序列表代码样式

  1. <ol>
  2. <li>...</li>
  3. <li>...</li>
  4. </ol>

自定义列表-适合做导航和页脚

  1. <dl>
  2. <dt>标题</dt>
  3. <dd>内容</dd>
  4. </dl>

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>列表元素</title>
  6. </head>
  7. <body>
  8. <!--无序列表-适合导航-->
  9. <ul>
  10. <li><a href="">首页</a></li>
  11. <li><a href="">秒杀</a></li>
  12. <li><a href="">PLUS</a></li>
  13. <li><a href="">管理</a></li>
  14. </ul>
  15. <!--有序列表-可以通过无序列表实现-->
  16. <hr><!--水平分割线-->
  17. <h2>
  18. 商品列表
  19. </h2>
  20. <ol start="1" type="A"><!--start表示有序列表从1开始，按照A，B，C的顺序号进行排序-->
  21.  <li><a href="">办公 / 电脑</a></li>
  22.     <li><a href="">男装 / 女装 / 童装</a></li>
  23.     <li><a href="">食品 / 生鲜 / 特产</a></li>
  24.     <li><a href="">图书 / 文娱 / 教育</a></li>
  25.     <li><a href="">母婴 / 玩具 / 乐器</a></li>
  26. </ol>
  27. <hr>
  28. <!--自定义列表-->
  29. <dl>
  30. <dt>电话:</dt>
  31. <dd><a href="tel:12323232">21321321321</a></dd>
  32. <dt>邮箱:</dt>
  33. <dd><a href="mailto:kkkk@kkk.com">kkkk@kkk.com</a></dd>
  34. <dt>地址：</dt>
  35. <dd><adress>西安国际货运</adress></dd>
  36. </dl>
  37. </body>
  38. </html>

运行结果

" class="reference-link">

表格样式

表格代码样式：

  1. <table>
  2. <caption><th>...</th></caption><!--表的标题-->
  3. <thead><tr><td></td></tr></thead><!--表的表头-->
  4. <tbody><tr><td></td><td></td></tr><!--tr表示行，td表示列，tbody表示表体部分-->
  5. <tr><td></td></tr></tbody>
  6. <tfooter><tr><td></td></tr></tfooter><!--表的表尾-->
  7. </table>

表格应用实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格元素</title>
  6. </head>
  7. <body>
  8. <!--table表格-->
  9. <table border="1" cellpadding="5" cellspacing="0" width="75%" align="center">
  10.     <caption>
  11.         <h3>最新帖子列表</h3>
  12.     </caption>
  13.     <thead>
  14.     <th>ID</th>
  15.     <th>文章标题</th>
  16.     <th>文章分类</th>
  17.     <th>是否专题</th>
  18.     <th>阅读数</th>
  19.     <th>添加时间</th>
  20.     <th>状态</th>
  21.     <th>操作</th>
  22.     </thead>
  23.     <tbody align="center">
  24.     <tr>
  25.         <td>1001</td>
  26.         <td align="left"><a href="">html 标签学习</a></td>
  27.         <td>html</td>
  28.         <td>是</td>
  29.         <td>234</td>
  30.         <td>2019-12-22 0:44</td>
  31.         <td>已审核</td>
  32.         <td>
  33.             <a href="">编辑</a>
  34.             <a href="">查看状态</a>
  35.         </td>
  36.     </tr>
  37.     <tr>
  38.         <td>1002</td>
  39.         <td align="left"><a href="">html-表格元素学习</a></td>
  40.         <td>html</td>
  41.         <td>是</td>
  42.         <td>4342</td>
  43.         <td>2019-12-22 0:47</td>
  44.         <td>已审核</td>
  45.         <td>
  46.             <a href="">编辑</a>
  47.             <a href="">查看状态</a>
  48.         </td>
  49.     </tr>
  50.     <tr>
  51.         <td>1003</td>
  52.         <td align="left"><a href="">html-链接元素学习</a></td>
  53.         <td>html</td>
  54.         <td>是</td>
  55.         <td>43442</td>
  56.         <td>2019-12-22 0:48</td>
  57.         <td>已审核</td>
  58.         <td>
  59.             <a href="">编辑</a>
  60.             <a href="">查看状态</a>
  61.         </td>
  62.     </tr>
  63.     <tr>
  64.         <td>1004</td>
  65.         <td align="left"><a href="">html-图像元素学习</a></td>
  66.         <td>html</td>
  67.         <td>是</td>
  68.         <td>43432</td>
  69.         <td>2019-12-22 0:49</td>
  70.         <td>已审核</td>
  71.         <td>
  72.             <a href="">编辑</a>
  73.             <a href="">查看状态</a>
  74.         </td>
  75.     </tr>
  76.     </tbody>
  78. </table>
  79. <p align="center">
  80.     <a href="">上一页</a>
  81.     <a href="">1</a>
  82.     <a href="">2</a>
  83.     <a href="">3</a>
  84.     <a href="">4</a>
  85.     <a href="">...</a>
  86.     <a href="">24</a>
  87.     <a href="">25</a>
  88.     <a href="">下一页</a>
  89. </p>
  90. </body>
  91. </html>

运行结果

手写笔记

手写2
手写1

上一条：重命名文件下一条：JS/Jquery第课 定义函数，继续数组讲解 12月17号作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多