Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 2019.12.19 第一次前端作业
Blogger Information
Blog 30
fans 0
comment 1
visits 22030
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
2019.12.19 第一次前端作业
Admin
Original
808 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>布局标签</title>
  6. </head>
  7. <body>
  8. <header>
  9.     <nav>
  10.         <a href="">Home</a>
  11.         <a href="">About</a>
  12.         <a href="">Connect</a>
  13.         <a href="">Blog</a>
  14.     </nav>
  15. </header>
  16. <!--主体-->
  17. <main>
  18.     <article>
  19.         <header>
  20.             <h1>文章标题</h1>
  21.             <p>文章段落1</p>
  22.             <p>文章段落2</p>
  23.         </header>
  25.         <section>
  26.             <h2>标题2</h2>
  27.             <p>文章段落1</p>
  28.             <p>文章段落2</p>
  29.         </section>
  31.         <footer>
  32.             <section>分页条</section>
  33.         </footer>
  34.     </article>
  36.     <aside>
  37.         <ul>
  38.             <li>推荐信息1</li>
  39.             <li>推荐信息2</li>
  40.             <li>推荐信息3</li>
  41.             <li>推荐信息4</li>
  42.             <li>推荐信息5</li>
  43.         </ul>
  44.     </aside>
  45.     <aside>
  46.         <section>
  47.             <h3>广告位招商</h3>
  48.         </section>
  49.     </aside>
  50.     <section>
  51.         <span>标签1</span>
  52.         <span>标签2</span>
  53.         <span>标签3</span>
  54.     </section>
  55. </main>
  56. <!--页脚-->
  57. <footer>
  58.     <div class="link">
  59.         <a href="">链接1</a>
  60.         <a href="">链接4</a>
  61.         <a href="">链接3</a>
  62.     </div>
  63. </footer>
  64. </body>
  65. </html>
标签 寓意
<header> 用于头部信息
<main> 导航链接,前后按钮
<nav> 导航链接,前后按钮
<article> 包含文章
<section> 章节、页眉、页脚或文档中的其他部分,一般包含h标签
<aside> 侧边栏
<footer> 页脚

常用标签

1. 文本相关

序号 标签 描述
1 <p> 段落内容
2 <pre> 按源码格式原样显示
3 <br> 换行(源码中的换行会被解析来空格)
4 <span> 与<div>类似,无语义, 主要用作内容的样式钩子

2. 语义化文本

序号 标签 描述
1 <time> 描述日期或时间
2 <abbr> 缩写
3 <sub> 下标
4 <sup> 上标
5 <address> 地址,通常用在<footer>中
6 <s> / <del> 删除线, <s>无语义
7 <code> 显示代码块,通常与代码格式化插件配合,才能高亮关键字
8 <progress> 进度条
9 <b> / <strong> 加粗, <b>无语义
10 <i> / <em> 斜体, <i>无语义
11 <mark> 高亮标记, 默认为内容添加黄色背景
12 <q> / <blockquote> 引用, 内容加双引号

img标签要点


总结一下img的要点
alt 属性用于图片加载不出来的时候给搜索引擎看的。
<img>标签很特殊个人认位使用的时候需要申明是块元素还是行元素。

表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>细说表格</title>
  6. </head>
  7. <body>
  8. <table border="1" cellpadding="5" cellspacing="0" width="600" align="center">
  9.     <caption>商品清单</caption>
  11.     <thead bgcolor="lightblue">
  12.         <tr>
  13.             <th>编号</th>
  14.             <th>类别</th>
  15.             <th>名称</th>
  16.             <th>单价</th>
  17.             <th>数量</th>
  18.             <th>金额</th>
  19.         </tr>
  20.     </thead>
  22.     <tbody align="center">
  23.         <tr>
  24.             <td>1</td>
  25.             <td rowspan="2">3C</td>
  26.             <td>笔记本电脑</td>
  27.             <td>8900</td>
  28.             <td>1</td>
  29.             <td>8900</td>
  30.         </tr>
  31.         <tr>
  32.             <td>2</td>
  33.             <td>数码单反相机</td>
  34.             <td>13800</td>
  35.             <td>1</td>
  36.             <td>13800</td>
  37.         </tr>
  38.         <tr>
  39.             <td>3</td>
  40.             <td>服饰</td>
  41.             <td>冠军卫衣</td>
  42.             <td>1000</td>
  43.             <td>2</td>
  44.             <td>2000</td>
  45.         </tr>
  46.     </tbody>
  48. <!--    底部-->
  49.     <tfoot align="center">
  50.     <tr>
  51. <!--        <td colspan="3">合计:</td>-->
  52.         <td colspan="4">合计:</td>
  53. <!--        <td></td>-->
  54. <!--        <td></td>-->
  55.         <td>4</td>
  56.         <td>24700</td>
  57.     </tr>
  58.     </tfoot>
  59. </table>
  62. </body>
  63. </html>


表格几乎没有难点：
<caption>表格标题
<th> 通常用于表格列标题
<thead>
<tbody> 这三个都是语义标签头身尾
<tfoot>
需要注意的是行合并列合并！
colspan 列
rowspan 行
小技巧：个人推荐合并表格的时候先写出完整表格再去合并！减少出错！大佬除外。

特别重要的表单！！！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>编辑课程</title>
  6.     <style>
  7.         td {
  8.             border: 1px solid lightgray;
  9.             border-radius: 3px;
  10.         }
  12.         td:first-child label {
  13.             background-color: #eee;
  14.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <table border="0" cellpadding="10" cellspacing="9" align="center" width="700">
  21.     <caption>编辑课程</caption>
  23.     <tbody>
  24.     <tr>
  25.         <td>
  26.             <label for="course_name">课程名称</label>
  27.             <input type="text" id="course_name" name="course_name" value="微信小程序-企业微网站">
  28.         </td>
  29.         <td>
  30.             <label for="duration">课程时间</label>
  31.             <input type="number" id="duration" name="duration" value="200">分钟
  32.         </td>
  33.     </tr>
  35.     <tr>
  36.         <td>
  37.             <label for="course_type">课程类别</label>
  38.             <select name="course-type" id="course_type">
  39.                 <option value="0" selected>视频</option>
  40.                 <option value="1">手册</option>
  41.                 <option value="2">实战</option>
  42.                 <option value="3">工具</option>
  43.             </select>
  44.         </td>
  45.         <td>
  46.             <label for="is_vip">是否VIP</label>
  47.             <select name="is_vip" id="is_vip">
  48.                 <option value="0" selected>免费课程</option>
  49.                 <option value="1">线上直播课</option>
  50.                 <option value="2">VIP课程</option>
  51.             </select>
  52.         </td>
  53.     </tr>
  55.     <tr>
  56.         <td>
  57.             <label for="course_difficulty">课程难度</label>
  58.             <select name="course-course_difficulty" id="course_difficulty">
  59.                 <option value="0" selected>初级</option>
  60.                 <option value="1">中级</option>
  61.                 <option value="2">高级</option>
  62.             </select>
  63.         </td>
  64.         <td>
  65.             <label for="course_classify">课程分类</label>
  66.             <select name="course_classify" id="course_classify">
  67.                 <option value="0" selected>PHP</option>
  68.                 <option value="1">CSS</option>
  69.                 <option value="2">HTML</option>
  70.             </select>
  71.         </td>
  72.     </tr>
  74.     <tr>
  75.         <td>
  76.             <label for="course_status">状态</label>
  77.             <select name="course_status" id="course_status">
  78.                 <option value="0">待审核</option>
  79.                 <option value="1" selected>正常</option>
  80.                 <option value="2">下架</option>
  81.             </select>
  82.         </td>
  83.         <td>
  84.             <label for="update_status">更新状态</label>
  85.             <select name="update_status" id="update_status">
  86.                 <option value="0" selected>更新中</option>
  87.                 <option value="1">更新完</option>
  88.             </select>
  89.         </td>
  90.     </tr>
  92.     <tr>
  93.         <td>
  94.             <label for="is_live">正在直播</label>
  95.             <select name="is_live" id="is_live">
  96.                 <option value="0">是</option>
  97.                 <option value="1" selected>否</option>
  98.             </select>
  99.         </td>
  100.         <td>
  101.             <label for="order">排序</label>
  102.             <input type="number" id="order" name="order" value="0">
  103.         </td>
  104.     </tr>
  106.     <tr>
  107.         <td>
  108. <!--            使用复选框后面的label进行关联-->
  109.             <label>是否必修</label>
  110.             <input type="checkbox" id="required" name="required"><label for="required">必修</label>
  111.         </td>
  112.         <td>
  113.             <label for="price">价格</label>
  114.             <input type="number" id="price" name="price" value="0">
  115.         </td>
  116.     </tr>
  118. <!--    上传本地图片, 使用一行一列布局, 涉及列合并-->
  119.     <tr>
  120.         <td colspan="2">
  121.             <a href="">上传本地图片</a>
  122.             <img src="1.png" alt="" width="80">
  123.             <span>封面为420*260像素的 PNG/JPG/GIF 格式图片</span>
  124.         </td>
  125.     </tr>
  127.     <tr>
  128.         <td>封面小图册</td>
  129.         <td>封面为 PNG/JPG/GIF 图片格式</td>
  130.     </tr>
  132.     <tr>
  133.         <td >关键词</td>
  134.         <td>微信,小程序,微信小程序</td>
  135.     </tr>
  139.     <tr>
  140.         <td colspan="2">课程简介</td>
  141.     </tr>
  142.     <tr>
  143.         <td colspan="2">
  144.             <ol>
  145.                 <li>介绍小程序开发,开发者工具</li>
  146.                 <li>介绍小程序文档</li>
  147.                 <li>微官网项目</li>
  148.                 <li>首页,产品, 产品详情,新闻,新闻详情,关于我们</li>
  149.             </ol>
  150.         </td>
  151.     </tr>
  153.     <tr>
  154.         <td colspan="2">课程需知</td>
  155.     </tr>
  156.     <tr>
  157.         <td colspan="2">
  158.             <ol>
  159.                 <li>熟悉html+css</li>
  160.                 <li>熟悉js</li>
  161.                 <li>熟悉php</li>
  162.             </ol>
  163.         </td>
  164.     </tr>
  165.     </tbody>
  167.     <tfoot>
  168.     <tr>
  169.         <td colspan="2" align="center">
  170.             <button>保存</button>
  171. <!--            button默认type类型为提交,设置为type="button",需要由js设置其行为-->
  172.             <button type="button">取消</button>
  173.         </td>
  174.     </tr>
  175.     </tfoot>
  176. </table>
  177. </body>
  178. </html>


表单重点知识梳理
表单最重要的一点就是圈地！圈地标签<form>表单内容必须在此标签中！
<form>标签有两个必填属性 action 和 method 前者是数据提交的地址 后者是提交类型post get
假设你的<input>类型是 file 用来上传图片那么<form>标签中需要一个属性 enctype=”multipart/form-data”

  1. <input>标签checkbox类复选框的时候 name 一般使用 “名字[ ]”数组的形式提交。
  2. <input>标签radio需要注意的是 两个必须得是同一个name 不然你的单选框就飘了。
  3. <input>标签 hidden类 这个就非常优秀！可以传递一些用户看不到的内容。
  4. 下拉列表是个奇葩！他不用<input>用<select>与<option>选中项是在<option>中加入selected
    5.<input>标签checkbox类radio的预先选中都是checked!

iframe

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <ul>
  9.         <li><a href="https://baidu.com"    target="content">百度</a></li>
  10.         <li><a href="https://sogou.com"    target="content">搜狗</a></li>
  11.         <li><a href="#"    target="content">博客</a></li>
  12.     </ul>
  13.     <!-- name属性非常重要 可以与a标签的target一起用 但是这个内置页面不利于seo所以适合在后台使用 -->
  14.     <!-- 欢迎页面可以用srcdoc代替在里面写代码 -->
  15.     <iframe srcdoc="<h1>你好欢迎来到后台管理</h1>" name="content" width="300" height="600"></iframe>
  16. </body>
  17. </html>

手抄



看群里的朋友都在作业后面写点感想，我也来写一点。
学习有两种，一种是学习新的知识，一种是查漏补缺。学习是一个枯燥的过程，但是也是磨练自己的途径。
自从学了计算机，已经有2年没有动过笔了。感谢老师让我再次提笔！

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