第2章常用的HTML5标签-PHP培训九期线上班

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

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

1 HTML 与 HTTP 的关系

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

2. 结构标签

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

3. 元素, 标签与属性

4. HTML常用标签

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语义化内容结构标签

7.1 标签的应用场景

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航作业</title>
</head>
<body>
<ul>
    <li><a href="https://www.php.cn/">php首页</a></li>
    <li><a href="https://www.php.cn/course.html">教学</a></li>
    <li><a href="https://www.php.cn/course/type/3.html">入门</a></li>
    <li><a href="https://www.php.cn/blog.html">博客</a></li>
    <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>
</ul>
</body>
</html>

3商品信息表作业

<table border="1" cellspacing="0" cellpadding="10" width="500">
    <caption><h3>商品列表</h3></caption>
<!--    表头-->
    <thead>
    <tr bgcolor="aqua">
        <th>序号</th>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>总价</th>
    </tr>
    </thead>
<!--主体-->
    <tbody>
    <tr>
        <td>1</td>
        <td>手机</td>
        <td>9800</td>
        <td>2</td>
        <td>19600</td>
    </tr>
    <tr>
        <td>2</td>
        <td>电脑</td>
        <td>8800</td>
        <td>2</td>
        <td>26400</td>
    </tr>
    <tr>
        <td>3</td>
        <td>桌子</td>
        <td>800</td>
        <td>5</td>
        <td>4000</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4" align="center">应付金额</td>
<!--        <td></td>-->
<!--        <td></td>-->
<!--        <td></td>-->
        <td>45788</td>
    </tr>
    </tfoot>
</table>

4用户注册表单作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
</head>
<body>
<h3>用户注册表单</h3>
action:是表单提交的地址，服务器上处理表单的程序、脚本
method:提交类型.get方式会出现在url地址中，post不会出现在url中
<form action="/login.php" method="post">
    <p>
        <label for="username">用户名：</label> <!--   for的属性必须与下面的id值是一样的-->
        <input type="text" id="username" name="username" value="laoliu">
    </p>
    <p>
        <label for="password">密码：</label> <!--   placeholder为提示-->
        <input type="password" id="password" name="password" placeholder="不能少于8位数">
    </p>
    <p>
        <label for="email">邮箱：</label> <!--   placeholder为提示-->
        <input type="email" id="email" name="email" placeholder="xx@xxx.com">
    </p>
    <p>
        <label for="age">年龄：</label> <!--   placeholder为提示-->
        <input type="number" id="age" name="age" min="18" max="90">
    </p>
    <p>
        <label for="add">地址：</label> <!--   placeholder为提示-->
        <input type="text" id="add" name="add" placeholder="填写地址">
    </p>
    <p>
        <label for="tel">手机号：</label> <!--   placeholder为提示-->
        <input type="tel" id="tel" name="tel" placeholder="填写电话">
    </p>
</form>
</body>
</html>

5.<iframe>内联框架实现

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

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

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

第2章 常用的HTML5标签-PHP培训九期线上班

课件内容

教学内容

1 HTML 与 HTTP 的关系

2. 结构标签

3. 元素, 标签与属性

4. HTML常用标签

5. 细说表格

6. 细说表单

6.1 <form>元素属性

6.2 <input>元素属性

6.3 <input type="">type类型

6.4 <select><option>下拉列表

6.5 按钮

6.6 <textarea>文本域

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

7.1 标签的应用场景

7.2 注意事项:

8. 教学源码列表

9. 作业

作业

相关文章

6.1 `<form>`元素属性

6.2 `<input>`元素属性

6.3 `<input type="">`type类型

6.4 `<select><option>`下拉列表

6.6 `<textarea>`文本域