简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html基础知识的学习（基础标签-简单结构布局）—PHP培训第十期
Blogger Information
Blog 4
fans 0
comment 1
visits 2685
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基础知识的学习（基础标签-简单结构布局）—PHP培训第十期
孔小帅
Original
784 people have browsed it

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

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！