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

Home > List of blog posts > 第2章常用的HTML5标签-PHP培训九期线上班

Blogger Information

Blog 3

fans 0

comment 1

visits 1341

Special Recommendation

More>

Related recommendations

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的情况下，也能呈现良好的内容结构，提升用户体验。
`对搜索引擎友好，良好的结构和语义，有助于爬虫抓取更多的有效信息。

Correcting teacher：

PHPz

Correction status：Uncorrected

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

学习环境及常用软件的安装调试-PHP培训九期线上班

2020-02-20 05:46:21

课件内容

教学内容

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. 作业

作业

课件内容

教学内容

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>`文本域