第2章 常用的HTML5标签10月29日作业

  1. 描述HTML与HTTP是什么,他们之间有什么联系?
  2. 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
  3. 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
  4. 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
  5. 制作一个网站后面, 要求使用<iframe>内联框架实现
  6. 总结: 为什么推荐使用语义化的标签?
    要求:
  7. 将作业发布到博客中
  8. 将作业手抄一份, 拍照后发布到博客中。

    课件内容

    教学内容

1 HTML 与 HTTP 的关系

  • HTTP: 超文本传输协议
  • HTML: 超文本标记语言

HTML与HTTP

HTML与HTTP

HTML与HTTP

2. 结构标签

除了前面提及的html文档结构标签(html/head/body)外,还有一些用在body中的内容结构标签

文档结构

3. 元素, 标签与属性

HTML与HTTP

4. HTML常用标签

HTML与HTTP

5. 细说表格

  • 表格是最重要的数据格式化工具, 早期还是主要网页布局工具(基本废弃)
  • 表格是由一组标签组成,要注意正确的嵌套关系
  • <table>: 表格所有元素都应该包含在一组<table>标签中
  • 表格是由行<tr>与列<td>组成,一行中多个称为列的单元格
  • 表格中的数据仅允许保存在单元格标签中: <td>...</td>

  • <table>中有四个常用的子标签

    • <caption>: 设置表格标题,如”学生信息表”
    • <thead>: 表头部分, 内部应该是<tr><th>...</th>...</tr>
    • <tbody>: 表格主体, 内部应该是:<tr><td>...</td>...</tr>
    • <tfoot>: 表格底部, 内部子标签与<tbody>相同
    • <tbody>可以不只一个, 而其它三个仅允许出现一次

  • 表格可以通过属性设置基本样式, 例如边框,宽度等, 推荐使用CSS实现

  • 表格单元格的合并操作:
    • 列方向: <td colspan="n">
    • 行方向: <td rowspan="n">

6. 细说表单

  • 表单是用户与服务器交互的重要入口,请求与数据, 都要通过表单发送
  • 所以表单是服务器受到攻击的主要来源, 表单数据的安全性非常重要
  • 表单的用户数据存在于各种类型的表单控件中, 例如文本框,下拉列表,复选框等
  • 表单元素是由由一组标签组成: <form>,<input>, <select>,<textarea>…

6.1 <form>元素属性

  • <form>元素,也叫表单元素, 它是组织表单控件的载体(可选,但推荐总是写上它)
  • action: 后台处理脚本地址
  • method: 请求提交方式,GET / POST
  • name: 表单名称,用在js中较多

6.2 <input>元素属性

<input>: 表单控件元素, 控件类型由type属性决定, 常用属性:

  • type: 默认为text,输入文本框
  • name: 后台接收用户数据的变量名称, 这里称为表单字段
  • value: 默认值,可选
  • required: 是否是必填项?
  • placeholder: 输入提示文本信息
  • size: 控件显示长度, 推荐使用css控制
  • maxlength: 允许用户输入的最多字符数量
  • disabled: 字段禁用, 此时数据不会被提交到服务器
  • readonly: 只读字段, 允许提交,但不允许用户修改

6.3 <input type="">type类型

  • text: 输入文本框, 默认值
  • password: 输入文本用星号*或实心圆点代替
  • email: 输入文本必须为邮箱格式
  • url: 输入内容为URL地址格式
  • tel: 电话号码, 移动端会自动调出数字键盘
  • search: 搜索框
  • number: 只允许输入数字,允许设置取值区间,有自增/减小按钮
  • hidden: 隐藏域, 数据会发送, 但是页面上用户看不到
  • radio: 单选按钮, 与name, checked配合
  • checkbox: 复选框, 与name, checked配合
  • file: 文件上传控件
  • date / week / month: 日期控件,不同浏览器可能表现不同

6.4 <select><option>下拉列表

  • 下拉列表, 可以预置一些选项供用户选择, 用户体验好,并且很安全
  • 下拉列表中的字段名name和值value属性分别在二个标签中
  • <select name="..."><option value="...">...
  • 允许多选, 使用selected设置默认选项

6.5 按钮

  • <input type="button">: 普通按钮, 点击不会提交表单
  • <input type="submit">: 提交按钮, 点击后会提交表单
  • <input type="reset">: 重置按钮,点击后会重置控件为默认值
  • <button>: 提交按钮,等价<button type="submit">
  • <button type="button">: 普通按钮, 点击不会提交表单

6.6 <textarea>文本域

  • 文本域本质上就是一个多行文本框, 大家可课后查阅相关资料学习

7. HTML语义化内容结构标签

HTML与HTTP

7.1 标签的应用场景

  1. <header>: 页眉/头, 通常放导航, LOGO,搜索框,注册入口等信息, 可出现多次
  2. <footer>: 页脚/底, 通常放网站版权,备案, 联系方式, 友情链接,快速访问等
  3. <nav: 导航, 可以用在页面中任何需要导航的地方
  4. <main>: 主体, 展示页面主要内容, 一个页面中, 该元素应该只出现一次
  5. <artical>: 独立的内容容器, 不仅仅是文档,内部通常是<h2><p><img><a>...
  6. <section>: 一组内容类似的容器/区块,内部可是任何内容,如文本图片视频等
  7. <aside>: 与主体无关的内容, 如广告,侧边栏推荐信息等
  8. <div>: 通胀容器, 也是使用最多的, 可以容纳任何内容

7.2 注意事项:

  • 以上结构标签全部为块级元素, 如果可能, 推荐使用语义化标签
  • 所谓块级元素: 无论内部有无内容, 都默认占据一行, 其它元素全部折行显示

8. 教学源码列表

  • demo1.html: html文档结构
  • demo2.html: 标题与段落标签
  • demo3.html: 链接标签
  • demo4.html: 图像标签
  • demo5.html: 列表标签
  • demo6.html: 表格标签
  • demo7.html: 表单与常用控件标签
  • demo8.html: 内联框架标签
  • demo9.html: 通用容器与语义化标签

9. 作业

  • 描述HTML与HTTP是什么,他们之间有什么联系?
  • 制作一个导航,要求使用到列表,链接,图片,并使用图片做为链接元素
  • 制作一张商品信息表, 要求用到标题, 头部与底部, 行与列方向的合并
  • 制作一张完整的用户注册表单, 要求尽可能多的用到学到的表单控件
  • 制作一个网站后面, 要求使用<iframe>内联框架实现
  • 总结: 为什么推荐使用语义化的标签?

    作业

    1.*HTML超文本标记语言，英文全称为： Hyper Text Markup Language。HTTP超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。HTML超文本编写的文档要通过HTTP超文本传输协议去实现传输。

2.导航作业

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>导航作业</title>
  6. </head>
  7. <body>
  8. <ul>
  9.     <li><a href="https://www.php.cn/">php首页</a></li>
  10.     <li><a href="https://www.php.cn/course.html">教学</a></li>
  11.     <li><a href="https://www.php.cn/course/type/3.html">入门</a></li>
  12.     <li><a href="https://www.php.cn/blog.html">博客</a></li>
  13.     <li><a href="https://www.php.cn/k.html"><img src="https://www.php.cn/static/images/footer5.gif?1" alt="" width="80"></a></li>
  14. </ul>
  15. </body>
  16. </html>

3商品信息表作业

  1. <table border="1" cellspacing="0" cellpadding="10" width="500">
  2.     <caption><h3>商品列表</h3></caption>
  3. <!--    表头-->
  4.     <thead>
  5.     <tr bgcolor="aqua">
  6.         <th>序号</th>
  7.         <th>名称</th>
  8.         <th>单价</th>
  9.         <th>数量</th>
  10.         <th>总价</th>
  11.     </tr>
  12.     </thead>
  13. <!--主体-->
  14.     <tbody>
  15.     <tr>
  16.         <td>1</td>
  17.         <td>手机</td>
  18.         <td>9800</td>
  19.         <td>2</td>
  20.         <td>19600</td>
  21.     </tr>
  22.     <tr>
  23.         <td>2</td>
  24.         <td>电脑</td>
  25.         <td>8800</td>
  26.         <td>2</td>
  27.         <td>26400</td>
  28.     </tr>
  29.     <tr>
  30.         <td>3</td>
  31.         <td>桌子</td>
  32.         <td>800</td>
  33.         <td>5</td>
  34.         <td>4000</td>
  35.     </tr>
  36.     </tbody>
  37.     <tfoot>
  38.     <tr>
  39.         <td colspan="4" align="center">应付金额</td>
  40. <!--        <td></td>-->
  41. <!--        <td></td>-->
  42. <!--        <td></td>-->
  43.         <td>45788</td>
  44.     </tr>
  45.     </tfoot>
  46. </table>

4用户注册表单作业

  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. action:是表单提交的地址，服务器上处理表单的程序、脚本
  10. method:提交类型.get方式会出现在url地址中，post不会出现在url中
  11. <form action="/login.php" method="post">
  12.     <p>
  13.         <label for="username">用户名：</label> <!--   for的属性必须与下面的id值是一样的-->
  14.         <input type="text" id="username" name="username" value="laoliu">
  15.     </p>
  16.     <p>
  17.         <label for="password">密码：</label> <!--   placeholder为提示-->
  18.         <input type="password" id="password" name="password" placeholder="不能少于8位数">
  19.     </p>
  20.     <p>
  21.         <label for="email">邮箱：</label> <!--   placeholder为提示-->
  22.         <input type="email" id="email" name="email" placeholder="xx@xxx.com">
  23.     </p>
  24.     <p>
  25.         <label for="age">年龄：</label> <!--   placeholder为提示-->
  26.         <input type="number" id="age" name="age" min="18" max="90">
  27.     </p>
  28.     <p>
  29.         <label for="add">地址：</label> <!--   placeholder为提示-->
  30.         <input type="text" id="add" name="add" placeholder="填写地址">
  31.     </p>
  32.     <p>
  33.         <label for="tel">手机号：</label> <!--   placeholder为提示-->
  34.         <input type="tel" id="tel" name="tel" placeholder="填写电话">
  35.     </p>
  36. </form>
  37. </body>
  38. </html>

5.<iframe>内联框架实现

  1. <h3>用户注册表单</h3>
  2. action:是表单提交的地址，服务器上处理表单的程序、脚本
  3. method:提交类型.get方式会出现在url地址中，post不会出现在url中
  4. <form action="/login.php" method="post">
  5.     <p>
  6.         <label for="username">用户名：</label> <!--   for的属性必须与下面的id值是一样的-->
  7.         <input type="text" id="username" name="username" value="laowang">
  8.     </p>
  9.     <p>
  10.         <label for="password">密码：</label> <!--   placeholder为提示-->
  11.         <input type="password" id="password" name="password" placeholder="不能少于8位数">
  12.     </p>
  13.     <p>
  14.         <label for="email">邮箱：</label> <!--   placeholder为提示-->
  15.         <input type="email" id="email" name="email" placeholder="xx@ccc.com">
  16.     </p>
  17.     <p>
  18.         <label for="age">年龄：</label> <!--   placeholder为提示-->
  19.         <input type="number" id="age" name="age" min="18" max="90">
  20.     </p>
  21.     <p>
  22.         <label for="add">地址：</label> <!--   placeholder为提示-->
  23.         <input type="text" id="add" name="add" placeholder="填写地址">
  24.     </p>
  25.     <p>
  26.         <label for="tel">手机号：</label> <!--   placeholder为提示-->
  27.         <input type="tel" id="tel" name="tel" placeholder="填写电话">
  28.     </p>
  29. </form>

6.总结: 为什么推荐使用语义化的标签?

  • `代码结构清晰，可读性高，减少差异化，便于团队开发和维护。
  • `在页面没有加载CSS的情况下，也能呈现良好的内容结构，提升用户体验。
  • `对搜索引擎友好，良好的结构和语义，有助于爬虫抓取更多的有效信息。

更多相关文章

  1. 尝试用css各类选择器添加样式制作一个注册表单
  2. 利用表格常用标签制造一个商品列表
  3. 完成一个用户注册页面，对表单字段进行验证（密码长度、密码一致、验
  4. 完成一个用户注册页面, 用xmind文件中总结的字符串函数库,对表单
  5. 模板字面量、标签函数、解构赋值与对象字面量的简化
  6. 表单事件、键盘事件、get
  7. 第十九课 表单事件&键盘事件&GET方法
  8. css_0630作业
  9. 表单的基础知识

随机推荐

  1. MySQL / PHP：将整行推入关联数组，_without_
  2. PHP简单防刷计数器
  3. 当使用opendkim在MTA签名时，DKIM失败(身体
  4. MySQLi处理查询两次或两次出错
  5. 用于cdn集成的文件类型的域更改正则表达
  6. PHP会话变量没有转移到我登录的页面，但是
  7. 腾讯AI鉴权demo(PHP版)
  8. php综合复习题大全（下）——提升篇
  9. 为什么我没有滚动条？
  10. Nginx php-fpm和Memcached的问题