Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第十期HTML前端知识总结（2019-12-19）
Blogger Information
Blog 22
fans 1
comment 0
visits 17742
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前端知识总结（2019-12-19）
齐齐
Original
930 people have browsed it

今天参加php十期培训的第一次作业，代码编辑器选择一款比较流行的软件（PhpStorm），可适用于前后端开发。在本地通过模拟虚拟的环境，用phpstudy搭建。运行效果查看，采用谷歌浏览器

demo1

代码部分

  1. 第一个页面尝试
  2. 第二次效果测试

运行结果

注意：网页在没有指定编码的情况下，出现乱码。在页面head里面通过关键字meta设置对应的编码，常见为utf-8、gb2312、gbk。当页面语言被设置为lang=”en”，为英文。谷歌浏览器提示是否翻译

demo2（语义化标签）

HTML5在html基础上，增加了一些语义化标签来替换一些常用div(div class=“header”)块，例如：<header>，<footer>，<nav>等等，能够让搜索引擎更好的识别网页中的内容。

代码部分

  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.    <nav>
  11.        <a href="">首页</a>
  12.        <a href="">关于我们</a>
  13.        <a href="">公司新闻</a>
  14.        <a href="">公司案例</a>
  15.    </nav>
  16. </header>
  17. <!--主体-->
  18. <main>
  19. <!--    内容区块-->
  20.     <article>
  21.         <h1>城镇医疗保险缴纳已经接近尾声</h1>
  22.         <P>相对2018年，一级医疗保险从220元，变为250元</P>
  23.         <P>相对2018年，二级医疗保险从550元，增长为625元</P>
  24.     </article>
  25. <!--    片断-->
  26.      <section>
  27.          <h2>20号为今年最后的缴纳期限</h2>
  28.          <P>请还没有缴纳的人，尽快缴纳费用</P>
  29.          <P>如果缴纳了职工医疗保险的人员，请别在重复缴纳城乡医疗保险，费用不退</P>
  30.      </section>
  31. <!--    侧边栏-->
  32.      <aside>
  33.          <h5>最新文章</h5>
  34.          <p>全国都在为健康缴费，你给钱了？</p>
  35.          <p>缴纳城乡医疗保险后，你可以享受什么，你都了解吗？</p>
  37.      </aside>
  38. </main>
  39. <!--底部-->
  40. <footer>
  41. <p>中国税务局</p>
  42. <!--友情链接-->
  43. <div class="flink">
  44.     <a href="#">百度</a>
  45.     <a href="">taobao</a>
  46. </div>
  47. </footer>
  48. </body>
  49. </html>

运行结果

demo3（基本文本标签和语义化文本标签）

常用的基本标签让整个页面看上去更有规范性，语义化文本标签和语义化一样，让搜索引擎能够识别，了解标签中的内容是什么。例如<adderes>代表地址信息,<time>代表时间，上下标<sup>,<sub>,进度条progress,code代表代码块。blockquote引用能包含<p>标签

代码部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基本文本标签</title>
  6. </head>
  7. <body>
  8. <p>今年的双十二，你买了什么东西？</p>
  9. <pre>
  10.     1
  11.         2
  12.     3
  13.         4
  14.     会不会觉得很厉害的样子？
  15. </pre>
  16. <p>如果给你一次机会，给你一百万，寿命减少20年，你愿意换吗？</p>
  17. <span>可能只有傻子才愿意换吧！</span>
  18. <br>
  19. <br>
  20. <h3>语义化文本标签</h3>
  21. <time>2019年12月20日16:02:22</time>
  22. <!--如果换成span，语义会变变弱，搜索引擎不能更好识别-->
  23. <span>2019年12月20日16:03:58</span>
  24. <P>看看这一段和下一段的html区别在哪里</P>
  25. <!--缩写的文本出现下划线，完整的内容在title属性中-->
  26. <P>看看这段和上一段的<abbr title="HyperText Markup Language">HTML</abbr>有区别吗？看着</P>
  27. <h3>上下标</h3>
  28. <!--上标-->
  29. <p>3<sup>3</sup>=27
  30. 5<sup>2</sup>=25
  31.  <br>
  32.   <br>
  33. <!-- 下标-->
  34.    你知道<sub style="color:#f60;">中国那个地方</sub>的火锅最好吃？
  35. </p>
  36. <!--地址默认格式：换行并斜体显示-->
  37. <footer>
  38.     公司地址：<address>沙河路155号</address>
  39. </footer>
  40. <!--删除线的两种显示方式-->
  41. <p>
  42. 羊肉原价：<s>45元</s>，现价<span>40元</span>
  43. 鸡肉原价：<del>22元</del>，现价<span>17元</span>
  44. </p>
  45. <!--代码片段，通常与pre配合显示-->
  46. <p>
  47.     <code>
  48.        var name="齐齐";
  49.         echo name;
  50.     </code>
  51. </p>
  52. <!--进度条，每个浏览器渲染会有所差别-->
  53. <p>
  54. <progress value="30" max="100">
  55. 已经完成30%
  56. </progress>
  57. <progress value="70" max="100">下载70%</progress>
  58. </p>
  59. <p>
  60. <!--  强调2种方式  -->
  61.     <b>第一种方式是使用b标签</b>
  62.     <br>
  63.     <br>
  64.     <strong>第二种方式是使用strong标签</strong>
  65.     <br>
  66.     <br>
  67. <!--  斜体2种方式  -->
  68.     <i>你是喜欢这种斜体标签还是下面种</i>
  69.     <br>
  70.     <em>这种斜体标签网页中也能看见</em>
  71.     <br>
  72.     <br>
  73.     <!-- 高亮标签，默认渲染为黄色-->
  74.     你看是<mark>我</mark>亮，还是他亮
  75. </p>
  76. <p>
  77. <!-- 引用-->
  78.     <q>本文引用山海经第三章</q>
  79. </p>
  80.     <blockquote cite="http://www.baidu.com"><p>百度在中国，用户超级多</p></blockquote>
  81. </body>
  82. </html>

运行结果

demo4（图片和链接）

图片<img>标签是单标签，不用像其他标签一样，需要闭合。其中的最主要属性src，代表图片的地址，可是本地图片，也可以是网络图片。alt属性，在图片无法找到的情况下，里面的文本内容会被显示出来。限制图片的尺寸大小，可以用width和height来限制。<a>功能非常强大，能下载文件，能发邮件，还能打电话。a标签的target属性控制链接打开的地方。

图片代码部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图片和链接</title>
  6. </head>
  7. <body>
  8. <!--图片用img-->
  9. <img src="images/11.jpg" alt="犬夜叉">
  10. <!--设置图片大小，设置宽度，高度自动缩放-->
  11. <img src="images/11.jpg" alt="犬夜叉" width="200">
  12. <!--当图片不显示时，会出现提示文本-->
  13. <br>
  14. <img src="images/55.jpg" alt="犬夜叉" width="200">
  15. <!--点击会打开a标签中的href属性指定的链接地址-->
  16. <a href="http://baidu.com">百度</a>
  17. <!--当浏览器不能解析的时，会自动下载不会打开，例如一个压缩包-->
  18. <a href="demo4.zip">下载文件</a>
  19. <!--href属性还能发邮件，当加入mailto关键字-->
  20. <a href="mailto:3225518143@qq.com">给我发邮件</a>
  21. <!--打电话-->
  22. <a href="tel:13225518141">给我打电话</a>
  23. <br>
  24. <br>
  25. <!--target属性设置在什么地方打开，默认在当前窗口-->
  26. <a href="http://baidu.com">百度</a>
  27. <a href="http://baidu.com" target="_self">百度</a>
  28. <!--在新窗口打开-->
  29. <a href="http://baidu.com" target="_blank">百度</a>
  30. <!--父级窗口打开-->
  31. <a href="http://baidu.com"  target="_parent">百度</a>
  32. <!--顶级窗口打开-->
  33. <a href="http://baidu.com"  target="_top">百度</a>
  34. <!--描点点击跳转到对应的地方-->
  35. <br>
  36. <br>
  37. <a href="#zl"  target="_parent">点击跳转</a>
  38. <!--当加上高度后，效果看上去更加明显-->
  39. <h3 id="zl" style="height: 1000px;">你终于找到我了</h3>
  40. </body>
  41. </html>

运行结果

demo5（列表与表格）

代码部分

无序列表<ul><li>相对有序列表<Ol><li>，运用地方更多。无序列表前面的序列号，无序列表可以通过css来实现。
表格<table>由表格标题<caption>，表格头部<thead>，表格主体<tbody>，表格底部<tfoot>组成，都为可选内容。合并单元格列colspan,例如colspan=2合并2列。合并行单元格用rowspan属性，后面数字代表合并几行。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>列表和表格</title>
  6. </head>
  7. <body>
  8. <h3>列表</h3>
  9. <!--无序列表用的比较多，与链接标签配合，形成导航-->
  10. <ul>
  11.     <li><a href="">首页</a></li>
  12.     <li><a href="">关于我们</a></li>
  13.     <li><a href="">公司新闻</a></li>
  14.     <li><a href="">公司案例</a></li>
  15. </ul>
  16. <!--水平分割线-->
  17. <hr>
  18. <!--有序列表-->
  19. <p>水果清单</p>
  20. <ol>
  21.     <li>苹果</li>
  22.     <li>葡萄</li>
  23.     <li>香蕉</li>
  24.     <li>桃子</li>
  25. </ol>
  26. <!--自定义列表-->
  27. <dl>
  28.     <dt>电话：</dt>
  29.     <dd><a href="135147777777">135147777777</a></dd>
  30.     <dt>邮箱：</dt>
  31.     <dd><a href="mailto:3225518143@qq.com">3225518143@qq.com</a></dd>
  32.     <dt>地址：</dt>
  33.     <dd><address>新华路100号</address></dd>
  34. </dl>
  35. <h3>细说表格</h3>
  36. <table border="1" cellpadding="5" cellspacing="0" width="400" align="center">
  37. <caption>购物清单</caption>
  38. <thead bgcolor="green">
  39. <tr>
  40.     <th>编号</th>
  41.     <th>类别</th>
  42.     <th>名称</th>
  43.     <th>单价</th>
  44.     <th>数量</th>
  45.     <th>金额</th>
  46. </tr>
  47. </thead>
  48. <tbody>
  49.     <tr>
  50.         <td>1</td>
  51.         <td>3C</td>
  52.         <td>笔记本电脑</td>
  53.         <td>5000</td>
  54.         <td>2</td>
  55.         <td>10000</td>
  56.     </tr>
  57.     <tr>
  58.         <td>2</td>
  59.         <td rowspan="2">水果</td>
  60.         <td>苹果</td>
  61.         <td>4.5</td>
  62.         <td>2</td>
  63.         <td>9</td>
  64.     </tr>
  65.     <tr>
  66.         <td>3</td>
  67.         <td>柚子</td>
  68.         <td>2</td>
  69.         <td>5</td>
  70.         <td>10</td>
  71.     </tr>
  72. </tbody>
  73. <tfoot align="center">
  74.     <td colspan="4">合计</td>
  75.     <td>9</td>
  76.     <td>10019</td>
  77. </tfoot>
  78. </table>
  79. <h3>最新文章列表</h3>
  80. <table border="1" cellspacing="0" cellpadding="5" width="75%" align="center">
  81.     <caption>
  82.         <h3>最新文章列表</h3>
  83.     </caption>
  84.   <thead>
  85.       <tr>
  86.           <th>ID</th>
  87.           <th>文章标题</th>
  88.           <th>文章分类</th>
  89.           <th>是否专题</th>
  90.           <th>阅读数</th>
  91.           <th>添加时间</th>
  92.           <th>状态</th>
  93.           <th>操作</th>
  94.       </tr>
  95.   </thead>
  96.   <tbody>
  97.       <tr>
  98.           <td>1</td>
  99.           <td align="left">php中的对象序列化操作</td>
  100.           <td>php</td>
  101.           <td>是</td>
  102.           <td>2311</td>
  103.           <td>2019-10-23 11:34:22</td>
  104.           <td>已审核</td>
  105.           <td>
  106.               <a href="">编辑</a> |
  107.               <a href="">查看评论</a>
  108.           </td>
  109.       </tr>
  110.       <tr>
  111.           <td>2</td>
  112.           <td align="left">JavaScript原型继承的原理分析</td>
  113.           <td>javascript</td>
  114.           <td>是</td>
  115.           <td>1356</td>
  116.           <td>2019-10-23 11:34:22</td>
  117.           <td>已审核</td>
  118.           <td>
  119.               <a href="">编辑</a> |
  120.               <a href="">查看评论</a>
  121.           </td>
  122.       </tr>
  123.       <tr>
  124.           <td>1004</td>
  125.           <td align="left"><a href="">php怎么上传文件保存到本地?</a></td>
  126.           <td>php</td>
  127.           <td>是</td>
  128.           <td>6754</td>
  129.           <td>2019-01-29 10:29:22</td>
  130.           <td>已审核</td>
  131.           <td>
  132.               <a href="">编辑</a> |
  133.               <a href="">查看评论</a>
  134.           </td>
  135.       </tr>
  137.       <tr>
  138.           <td>1005</td>
  139.           <td align="left"><a href="">cmd怎么运行php文件?</a></td>
  140.           <td>php</td>
  141.           <td>是</td>
  142.           <td>6754</td>
  143.           <td>2019-04-19 14:11:32</td>
  144.           <td>已审核</td>
  145.           <td>
  146.               <a href="">编辑</a> |
  147.               <a href="">查看评论</a>
  148.           </td>
  149.       </tr>
  151.       <tr>
  152.           <td>1006</td>
  153.           <td align="left"><a href="">html中的下拉列表分组的使用</a></td>
  154.           <td>html</td>
  155.           <td>是</td>
  156.           <td>3421</td>
  157.           <td>2019-06-03 17:11:32</td>
  158.           <td>已审核</td>
  159.           <td>
  160.               <a href="">编辑</a> |
  161.               <a href="">查看评论</a>
  162.           </td>
  163.       </tr>
  165.       <tr>
  166.           <td>1007</td>
  167.           <td align="left"><a href="">Flex布局中的主轴对齐方式有哪些</a></td>
  168.           <td>css</td>
  169.           <td>是</td>
  170.           <td>6599</td>
  171.           <td>2019-10-29 15:21:02</td>
  172.           <td>已审核</td>
  173.           <td>
  174.               <a href="">编辑</a> |
  175.               <a href="">查看评论</a>
  176.           </td>
  177.       </tr>
  179.       <tr>
  180.           <td>1008</td>
  181.           <td align="left"><a href="">ThinkPHP6改变了什么</a></td>
  182.           <td>php</td>
  183.           <td>是</td>
  184.           <td>4381</td>
  185.           <td>2019-09-19 16:31:52</td>
  186.           <td>已审核</td>
  187.           <td>
  188.               <a href="">编辑</a> |
  189.               <a href="">查看评论</a>
  190.           </td>
  191.       </tr>
  193.       <tr>
  194.           <td>1009</td>
  195.           <td align="left"><a href="">Laravel框架artisan命令总结</a></td>
  196.           <td>php</td>
  197.           <td>是</td>
  198.           <td>7683</td>
  199.           <td>2019-10-23 18:01:22</td>
  200.           <td>已审核</td>
  201.           <td>
  202.               <a href="">编辑</a> |
  203.               <a href="">查看评论</a>
  204.           </td>
  205.       </tr>
  206.       <tr>
  207.           <td>1010</td>
  208.           <td align="left"><a href="">position绝对定位与固定定位</a></td>
  209.           <td>css</td>
  210.           <td>是</td>
  211.           <td>1221</td>
  212.           <td>2019-06-12 11:21:32</td>
  213.           <td>已审核</td>
  214.           <td>
  215.               <a href="">编辑</a> |
  216.               <a href="">查看评论</a>
  217.           </td>
  218.       </tr>
  219.   </tbody>
  220. </table>
  221. <p align="center">
  222.     <a href="">上一页</a> 
  223.     <a href="">1</a> 
  224.     <a href="">2</a> 
  225.     <a href="">3</a> 
  226.     <a href="">4</a> 
  227.     <a href="">...</a> 
  228.     <a href="">23</a> 
  229.     <a href="">24</a> 
  230.     <a href="">下一页</a>
  231. </p>
  232. </body>
  233. </html>

运行结果


demo7（内联框架）

内联框架<iframe>在网站后台开发中，常用的一种手段。通过点击菜单中的链接，在指定的窗口中打对应的内容。srcdoc可以直接代替scr，可在属性中直接html代码，写欢迎语。name值非常重要，它是链接到该框架的入口。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>内联框架</title>
  6. </head>
  7. <body>
  8. <!--在当前页面载入一张地图，百度地图，工具->分享，将获得链接粘贴到src-->
  9. <iframe src="https://j.map.baidu.com/e0/y_r" frameborder="0" width="500" height="400"></iframe>
  10. <!--内联框架，无法被搜索引擎抓取，做SEO友好特别差。多用于后台管理页面菜单-->
  11. <!--最丑的后台程序小案例-->
  12. <hr>
  13. <ul style="float:left;margin-right: 30px;">
  14.     <li><a href="demo1.html" target="cd">首页</a> </li>
  15.     <li><a href="demo5.html" target="cd">文章列表</a> </li>
  16.     <li><a href="demo2.html" target="cd">文章栏目</a> </li>
  17. </ul>
  18. <!--srcdoc可以直接代替scr，可在属性中直接html代码，写欢迎语-->
  19. <!--name值非常重要，它是链接到该框架的入口-->
  20. <iframe srcdoc="<h2>欢迎光临齐齐CMS</h2>" frameborder="1" name="cd" width="400" height="300"></iframe>
  21. </body>
  22. </html>

表单手抄笔记

表单是用户和网站数据交互的重要方式。相对其他类型的标签相比，多了好多元素和属性。



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