简体中文（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前端知识总结（2019-12-19）

第十期HTML前端知识总结（2019-12-19）

齐齐
齐齐原创
2019年12月21日 14:17:05926浏览

今天参加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>

表单手抄笔记

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



上一条：你所不知的 PHP 断言(assert)下一条：jquery选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多