2. HTML


2.1 官方文档

2.1.1 地址: https://www.w3school.com.cn/html/index.asp.

2.1.2 离线文档: W3School 离线手册(2017.03.11 版).ch

2.2 网页

2.2.1 网页的组成

在这里插入图片描述

2.2.2 案例演示

在这里插入图片描述

  • ff 进入到 调试页面 ctrl + shift + i
  • 谷歌浏览器 进入到 调试页面 ctrl + shift + i

2.3 HTML 介绍

2.3.1 HTML 是什么

  1. HTML(HyperText Mark-up Language)即超文本标签语言(可以展示的内容类型很多)
  2. HTML 文本是由 HTML 标签组成的文本,可以包括文字、图形、动画、声音、表格、链接等
  3. HTML 的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容

2.3.2 HTML 运行方式

2.3.2.1 本地运行

在这里插入图片描述
浏览器使用情况分布:

在这里插入图片描述

2.3.2.2 远程访问

在这里插入图片描述

2.4 HTML 快速入门

2.5 HTML 基本结构

2.5.1 html 基本结构

在这里插入图片描述

2.6 HTML 标签

2.6.1 html 的标签/元素 文档

  1. 在线文档 : https://www.w3school.com.cn.

在这里插入图片描述

  1. 离线手册

在这里插入图片描述

2.6.2 html 的标签/元素-说明

  1. HTML 标签用两个尖括号 “<>” 括起来
  2. HTML 标签一般是双标签,如 <b> 和 <b/> 前一个标签是起始标签,后一个标签为结束标签
  3. 两个标签之间的文本是 HTML 元素的内容
  4. 某些标签称为 “单标签” ,因为它只需单独使用就能完整地表达意思,如 <br/> <hr/>
  5. HTML 元素指的是从开始标签到结束标签的所有代码

在这里插入图片描述

2.6.3 html 标签注意事项和细节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签使用细节</title>
</head>
<body>
<!--
    标签使用细节:
    1.标签不能交叉嵌套
    2.标签必须正确关闭
    3.注释不能嵌套
    4. html 语法不严谨。有时候标签不闭合,属性值不带””也不报错
-->
<!--标签不能交叉嵌套-->
<!--<div><span>tom</div></span> 错误用法-->
<div><span>tom</span></div>
<!--标签必须正确关闭-->
<span>jack</span>
<!--注释不能嵌套 -->
<!--html 语法不严谨。有时候标签不闭合,属性值不带””也不报错-->
<font color="red">张飞</font>
<font color=blue>关羽</font>
<br/>
</body>
</html>

2.6.4 font 字体标签

  • 应用实例 创建 font.html
  • 在网页上显示 北京 ,并修改字体为 微软雅黑,颜色为红色

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font标签</title>
</head>
<body>
<!-- 字体标签
    应用实例 1:在网页上显示 北京 ,并修改字体为 微软雅黑,颜色为蓝色。
    font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
    (1)color 属性修改颜色
    (2)face 属性修改字体
    (3)size 属性修改文本大小
    多说一句,对应标签的属性,顺序不做要求
-->
<font size="40px" face="微软雅黑" color="red">北京</font>
</body>
</html>

2.6.5 字符实体

  1. 在网页上显示一些特殊的符号,称为字符实体(也叫符号实体)。
  2. 应用实例 创建 char-entity.html 文件,将 <hr /> 标签以文本方式显示在页面。
    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符实体</title>
</head>
<body>
<!--特殊字符 应用实例:
    把 <hr/> 变成文本 显示在页面上
    常用的特殊字符:
    <: &lt;
    >: &gt;
    空格: &nbsp;
-->
jack<br/>
tom<hr/>
&lt;hr/&gt;标签:表示线条

<!--浏览器会将 <hr/>解析成一条线-->
<br/>

xjs xsl &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; hello~
</body>
</html>

2.6.6 字符实体一览表

在这里插入图片描述


在这里插入图片描述

2.6.7 标题标签

  1. 标题使用 <h1> - <h6> 标签进行定义
  2. <h1> 定义最大的标题
  3. <h6> 定义最小的标题。
  4. 应用实例 创建 title.html

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
<!-- 标题标签
应用实例:演示标题 1 到 标题 6 的
h1 - h6 都是标题标签 h1 : 最大 h6 : 最小
align: 属性是对齐属性
left: 左对齐(默认)
center :居中
right : 右对齐
-->
<h1>标签1</h1>
<h2>标签2</h2>
<h3 align="center">标签3</h3>
<h4>标签4</h4>
<h5>标签5</h5>
<h6 align="right">标签6</h6>
</body>
</html>

2.6.8 超链接标签

  1. 超链接是指从一个网页指向一个目标的链接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序
  2. 应用实例 创建 link.html:链接到 搜狐网站

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
<!--
    老韩说明:
    a 标签是 超链接
    href 属性设置连接的地址
    target 属性设置哪个目标进行跳转
        _self : 表示当前页面(默认值), 即使用当前替换目标页
        _blank :  表示打开新页面来进行跳转
    点击超链接,打开邮件
-->
<a href="http://www.sohu.com">百度一下</a><br/>
<a href="http://www.sohu.com" target="_blank">搜狐</a>
<br/>
<a href="mailto:tom@sohu.com">联系管理员</a>
</body>
</html>

2.6.9 无序列表 ul/li

  1. ul/li 基本语法

在这里插入图片描述


  1. 应用实例 创建: ul_li.html
    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul li标签</title>
</head>
<body>
<!--
    ul :  表示无序列表
    li :  列表项
    type属性:指定列表项前的符号
-->
<h1>五虎将</h1>
<ul type="circle">
    <li>jack</li>
    <li>tom</li>
    <li>smith</li>
    <li>mary</li>
    <li>milan</li>
</ul>
</body>
</html>

2.6.10 有序列表 ol/li

  1. ol/li 基本语法

在这里插入图片描述


  1. 应用实例 创建: ol-li.html

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表ol-li</title>
</head>
<body>
<!--
    ol :  表示有序列表
    li :  列表项
    type属性:指定列表项前排序方式
    type 设定数目款式,其值有五种,默认为 start="1"。
    i可以取以下值中的任意一个:
    1 阿拉伯数字 1, 2, 3, ...
    a 小写字母 a, b, c, ...
    A 大写字母 A, B, C, ...
    i 小写罗马数字 i, ii, iii, ...
    I 大写罗马数字 I, II, III, ... 。
-->
<h1>五虎将</h1>
<ol type="I" start="5">
    <li>关羽</li>
    <li>赵云</li>
    <li>张飞</li>
    <li>马超</li>
    <li>黄忠</li>
</ol>
</body>
</html>

2.6.11 图像标签(img)

  1. img 标签可以在 html 页面上显示图片
  2. 应用实例: 创建 img.html:如图

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--
    应用实例:使用 img 标签显示一张美女的照片。
    img:  标签是图片标签,用来显示图片
    src:  属性可以设置图片的路径
    width:  属性设置图片的宽度
    height: 属性设置图片的高度
    border:  属性设置图片边框大小
    alt:  属性设置当指定路径找不到图片时,用来代替显示的文本内容
    相对路径:从工程名开始算
    绝对路径:盘符:/目录/文件名

    路径:在 web 中路径分为相对路径和绝对路径两种
    相对路径: . 表示当前文件所在的目录
            .. 表示当前文件所在的上一级目录
    文件名 : 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略
    绝对路径: 正确格式是: http://IP地址:port/工程名/资源路径 , 即使用url方式定位资源
            错误格式是: 盘符:/目录/文件名
-->
<h1>图片标签的演示</h1>
<!-- ./imgs/1.png 表示当前路径下的 imgs文件夹下的 1.png-->
<!-- 在进行图片缩放时,建议指定 width 或者 height 即可,浏览器会按照比例显示-->
<img src="imgs/1.png" width="400"><br/>
<img src="imgs/1.png" height="150" border="10px"><br/>
<img src="imgs/-1.png" alt="找不到图片"><br/>
<!--绝对路径访问-->
<!--http://localhost:63342/html/imgs/1.png-->

<!--应用实例:将图片做成超链接-->
<a href="http://www.baidu.com" target="_blank">
    <img src="imgs/1.png"><br/>
</a>

</body>
</html>
  1. 应用实例:将图片做成超链接
<!--应用实例:将图片做成超链接-->
<a href="http://www.baidu.com" target="_blank">
    <img src="imgs/1.png"><br/>
</a>

2.6.12 表格(table)标签(!!!)

  1. 基本语法

在这里插入图片描述


  1. 应用实例 修改: table.html: 显示 3 行 3 列的表格

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!-- 说明:
    table: 标签是表格标签 border: 设置表格标签
    width: 设置表格宽度  height: 设置表格高度
    align: 设置表格相对于页面的对齐方式
    cellspacing: 设置单元格间距
    tr :是行标签 th :是表头标签  td :是单元格标签
    align: 设置单元格文本对齐方式  b :是加粗标签
    px:表示像素 - java 坦克大战
    ctrl +shift + 下光标
    -->

<table width="500" border="6" align="center">
    <h1 align="center">表格标签的使用</h1>
    <tr>
        <th>名字</th>
        <th>住址</th>
        <th>邮件</th>
    </tr>
    <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
        <td>第1行第3列</td>
    </tr>
    <tr>
        <td>第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>
    <tr>
        <td>第3行第1列</td>
        <td>第3行第2列</td>
        <td>第3行第3列</td>
    </tr>
</table>
</body>
</html>

2.6.13 表格标签-跨行跨列表格

  1. 编写如下网页: 修改: table2.html

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格(跨行跨列)</title>
</head>
<body>
<!--
    column列
    合并列 : colspan="列数"
    合并行 : rowspan="行数"
    cellspacing : 指定单元格间的空隙大小 :0 表示没有空隙
    bordercolor: 指定表格边框的演示
    border: 表格边框
    width: 表格的宽度
    思路:
    1. 先把整个表格的完整的行和列,展示出来5*3
    2. 在使用合并的技术,来处理
    3. 如果是16进制的颜色,前面#
-->
<table border="1" height="250" bordercolor="#E87EFA" cellspacing="0" width="500">
    <tr>
        <!--合并了3列-->
        <td align="center" colspan="3">第1行第1列</td>
    </tr>
    <tr>
        <!-- 合并行,跨行 row行-->
        <td rowspan="2">第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
    </tr>
    <tr>

        <td>第3行第2列</td>
        <td>第3行第3列</td>
    </tr>
    <tr>
        <!--合并行,跨行 row行-->
        <td rowspan="2">第4行第1列</td>
        <td>第4行第2列</td>
        <td>第4行第3列</td>
    </tr>
    <tr>
        <td>第5行第2列<img src="imgs/2.png" width="100"></td>
        <td>第5行第3列</td>
    </tr>
</table>
</body>
</html>

2.6.14 form(表单)标签介绍(!!!)


在这里插入图片描述


解读 :

  • url 表示定位一个 web 资源的路径
  • method 主要有两种 get ,post ,默认是 get ,区别后面说

2.6.15 form(表单)元素-小练习

  1. 编写如下网页: 修改: form_login.html 和 ok.html, 只是一个模拟演示

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单登录</title>
</head>
<body>
<!--
    说明:
    1. form 表示表单
    2. action: 提交到哪个页面
    3. method: 提交方式 ,常用 get 和 post
    4. input type=text 输入框
    5. input type=password 密码框
    6. input type=submit 提交按钮
    7. input type=reset 重置按钮

    小技巧: 为了个汉字对齐,输入全角的空格即可
    多说一句: method 不写默认是get
-->
<h1>登录系统</h1>
<form action="ok.html" method="get">
    用户名:<input type="text" name="username"><br/>
    密 码:<input type="password" name="username"><br/>
    <input type="submit" value="登录"> <input type="reset" value="重新填写">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
</head>
<body>
    <h1>恭喜你,登录成功~</h1>
</body>
</html>

2.6.16 input 标签/元素


在这里插入图片描述


2.6.17 select/option/textarea 标签


在这里插入图片描述


2.6.18 表单综合练习

  1. 请完成如下界面, 相对来说比较多

在这里插入图片描述


  1. 创建: form-all.html,完成上面的界面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单综合案例</title>
</head>
<body>
<!--
    form 标签就是表单
    input type=text : 是文件输入框  value 设置默认显示内容
    input type=password 是密码输入框 value 设置默认显示内容
    input type=radio 是单选框 name 属性可以对其进行分组
    checked="checked"表示默认选中input

    type=checkbox 是复选框 checked="checked"表示默认选中

    input type=reset 是重置按钮 value 属性修改按钮上的文本
    input type=submit 是提交按钮 value 属性修改按钮上的文本
    input type=button 是按钮 value 属性修改按钮上的文本
    input type=file 是文件上传域
    input type=hidden 是隐藏域
    当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的
    时候同时发送给服务器)

    select 标签是下拉列表框
    option 标签是下拉列表框中的选项
    selected="selected"设置默认选中

    textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
    rows 属性设置可以显示几行的高度
    cols 属性设置每行可以显示几个字符宽度

    特别提醒,一定一定使用form 标签将input元素包起来
    一定一定要给input元素设置 name属性,否则,数据提交不到服务器
    注意:checkbox是复选框,如果希望是同一组 保证name属性一致
    注意:在checkbox  select radio 提交数据的时候是value属性的值
-->
<form>
    用户注册信息<br/>
    用户名称: <input type="text" name="username"><br/>
    用户密码: <input type="password" name="pwd1"><br/>
    确认密码: <input type="password" name="pwd2"><br/>
    选择你喜欢的运动项目:
    <input type="checkbox" name="sport" value="lq">篮球<br/>
    <input type="checkbox" name="sport" value="zq" checked>足球<br/>
    <input type="checkbox" name="sport" value="sq" checked>手球<br/>
    请选择性别 :
    <input type="radio" name="gender" value="male"><br/>
    <input type="radio" name="gender" value="female"><br/>
    请选择城市:
    <select name="city">
        <option>--选择--</option>
        <option value="cd">成都</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select><br/>
    自我介绍:
    <textarea rows="6" cols="20"></textarea><br/>
    选择你的文件(头像)<input type="file" name="myfile"><br/>
    <input type="submit" value="提交"/> <input type="reset" value="重置"/>
</form>
</body>
</html>

2.6.19 表单格式化

  1. 完成如下界面

在这里插入图片描述


  1. 创建: form-format.html,说明: 可以从前面的 html 拷贝一份修改即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单格式化</title>
</head>
<body>
<!--
    form 标签就是表单
    input type=text : 是文件输入框  value 设置默认显示内容
    input type=password 是密码输入框 value 设置默认显示内容
    input type=radio 是单选框 name 属性可以对其进行分组
    checked="checked"表示默认选中input

    type=checkbox 是复选框 checked="checked"表示默认选中

    input type=reset 是重置按钮 value 属性修改按钮上的文本
    input type=submit 是提交按钮 value 属性修改按钮上的文本
    input type=button 是按钮 value 属性修改按钮上的文本
    input type=file 是文件上传域
    input type=hidden 是隐藏域
    当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的
    时候同时发送给服务器)

    select 标签是下拉列表框
    option 标签是下拉列表框中的选项
    selected="selected"设置默认选中

    textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
    rows 属性设置可以显示几行的高度
    cols 属性设置每行可以显示几个字符宽度

    特别提醒,一定一定使用form 标签将input元素包起来
    一定一定要给input元素设置 name属性,否则,数据提交不到服务器
    注意:checkbox是复选框,如果希望是同一组 保证name属性一致
    注意:在checkbox  select radio 提交数据的时候是value属性的值
-->
<form>
    <h1>用户注册信息</h1>
    <table>
        <tr>
            <td>用户名称: </td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>用户密码: </td>
            <td><input type="password" name="pwd1"></td>
        </tr>
        <tr>
            <td>确认密码: </td>
            <td><input type="password" name="pwd2"></td>
        </tr>
        <tr>
            <td>选择你喜欢的运动项目:</td>
            <td><input type="checkbox" name="sport" value="lq">篮球 <input type="checkbox" name="sport" value="zq" checked>足球 <input type="checkbox" name="sport" value="sq" checked>手球</td>
        </tr>
        <tr>
            <td>请选择性别 :</td>
            <td><input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female"></td>
        </tr>
        <tr>
            <td>请选择城市:</td>
            <td><select name="city">
                <option>--选择--</option>
                <option value="cd">成都</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
            </select></td>
        </tr>
        <tr>
            <td>自我介绍:</td>
            <td><textarea rows="6" cols="20"></textarea></td>
        </tr>
        <tr>
            <td>选择你的文件(头像)</td>
            <td><input type="file" name="myfile"></td>
        </tr>
        <tr>
            <td><input type="submit" value="提交"/></td>
            <td><input type="reset" value="重置"/></td>
        </tr>
    </table>
</form>
</body>
</html>

2.6.20 表单提交注意事项

  1. action 属性设置提交的服务器地址/资源

  2. method 属性设置提交的方式 GET(默认值)或 POST

  3. 表单提交的时候,数据没有发送给服务器的三种情况

    ① 表单某个元素项 (比如 text,password) 没有 name 属性值
    ② 单选、复选 (下拉列表中的 option 标签) 都需要添加 value 属性,以便发送给服务器
    ③ 表单项不在提交的 form 标签中

  4. GET 请求的特点是:

    ① 浏览器地址栏中的地址是: action 属性 [+?+ 请求参数 ]
    ② 请求参数的格式是:name=value&name=value
    ③ 如:http://localhost:63342/html/ok.htmlusername=jack&pwd1=111
    ④ 不安全
    ⑤ 它有数据长度的限制 (不同的浏览器规定不一样,一般 2k)

  5. POST 请求的特点是:

    ① 浏览器地址栏中只有 action 属性值
    ② 提交的数据是携带在 http 请求中,不会展示在地址栏
    ③ 相对于 GET 请求要安全
    ④ 理论上没有数据长度的限制

POST /html/ok.html HTTP/1.1
Host: localhost:63342
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:96.0) Gecko/20100101 Firefox/96.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate
Content-Type: application/x-www-form-urlencoded
Content-Length: 71
Origin: http://localhost:63342
Connection: keep-alive
Referer: http://localhost:63342/html/form_detail.html?_ijt=p9rigkmgq9e926nrqfl8n48rvn
Cookie: Idea-8296e770=051f8eb8-a3c7-4f88-abe7-d3358f766022
Upgrade-Insecure-Requests: 1
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Pragma: no-cache
Cache-Control: no-cache

username=jack&pwd1=&pwd2=&sport=lq&sport=sq&gender=male&city=bj

  1. 代码演示: 修改/创建: form-detail.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交数据的注意事项和细节!!</title>
</head>
<body>
<!--
    解读: 表单必须掌握!!!!
    1. action表示将form表单的数据提交给哪个url,即服务器的哪个资源(servlet)
    2. method 表示提交的方式 主要是get / post, 默认是get
    3. 如果form表单的元素,没有写name属性,则数据不会提交
    4. 对应select checkbox radio 标签,提交的数据是value指定的值
    5. 对应checkbox 复选框,可以提交多个字,但是name是统一的,都是sport sprot=xx&sport=yy
    6. 提交的数据,一定要放在 form标签内,否则数据不会提交
    Get 和 Post 的区别简述
    1. Get 请求数据是显示在浏览器地址栏 http://localhost:63342/html/ok.html?username=jack&pwd1=111&pwd2=11&sport=lq&sport=sq&gender=male&city=bj&myfile=
    2. Get 请求不安全的,而且数据是有长度限制的, 建议有重要信息,不要使用Get
    3. Post 请求数据是和http传输的,在http体中,相对安全
    4. Post 传输的数据长度理论上没有限制,但是在实际的应用中,也不能太大 , 即合理即可
 -->
<form action="ok.html" method="post">
    <h1>用户注册信息</h1>
    <table>
        <tr>
            <td>用户名称: </td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>用户密码: </td>
            <td><input type="password" name="pwd1"></td>
        </tr>
        <tr>
            <td>确认密码: </td>
            <td><input type="password" name="pwd2"></td>
        </tr>
        <tr>
            <td>选择你喜欢的运动项目:</td>
            <td><input type="checkbox" name="sport" value="lq">篮球 <input type="checkbox" name="sport" value="zq" checked>足球 <input type="checkbox" name="sport" value="sq" checked>手球</td>
        </tr>
        <tr>
            <td>请选择性别 :</td>
            <td><input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female"></td>
        </tr>
        <tr>
            <td>请选择城市:</td>
            <td><select name="city">
                <option>--选择--</option>
                <option value="cd">成都</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
            </select></td>
        </tr>
        <tr>
            <td>自我介绍:</td>
            <td><textarea rows="6" cols="20"></textarea></td>
        </tr>
        <tr>
            <td>选择你的文件(头像)</td>
            <td><input type="file" name="myfile"></td>
        </tr>
        <tr>
            <td><input type="submit" value="提交"/></td>
            <td><input type="reset" value="重置"/></td>
        </tr>
    </table>
</form>
</body>
</html>

2.6.21 div 标签

  1. <div> 标签可以把文档分割为独立的、不同的部分
  2. <div> 是一个块级元素。它的内容自动地开始一个新行。
  3. 应用实例 修改 div.html

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div 标签</title>
</head>
<body>
<!--
    解读:
    1. <div> 标签可以把文档分割为独立的、不同的部分
    2. <div> 是一个块级元素。它的内容自动地开始一个新行, 不需要写<br/>
    style : 样式-> CSS 详细介绍, 先简单的使用,混个眼熟
-->
hello,world
<div>
    <h3 style="color: blue">this is a h3</h3>
    <a href="http://www.baidu.com">goto 百度</a>
</div>
</body>
</html>

2.6.22 p 标签

  1. <p> 标签定义段落
  2. p 元素会自动在其前后创建一些空白
  3. 应用实例 p.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
<!--
    解读:
    1. <p> 标签定义段落
    2. p 元素会自动在其前后创建一些空白
-->
hello,world
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>

2.6.23 span 标签

  1. span 标签是内联元素,不像块级元素 (如:div 标签、p 标签等) 有换行的效果
  2. 如果不对 span 应用样式,span 标签没有任何的显示效果
  3. 语法:<span>内容</span>
  4. 应用实例 修改 span.html

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
</head>
<body>
<!--
    解读span标签:
    1. span标签是内联元素,不像块级元素(如:div标签、p标签等)有换行的效果。
    2. 如果不对span应用样式,span标签没有任何的显示效果
    3. 语法:<span>内容</span>
    说明:
    (1) span标签是内联元素(内嵌元素, 行内元素), 没有换行效果
    (2) 如果不对span应用样式,span标签没有任何的显示效果
    (3) 往往是为了单独的去控制某个关键的内容
-->
您的购物车有<sapn style="color: red;font-size: 40px">10</sapn>个商品
</body>
</html>

2.7 课堂测试

在这里插入图片描述


1.HTML 指的是?

您的回答:超文本标记语言(Hyper Text Markup Language)

2.Web 标准的制定者是?

您的回答:万维网联盟(W3C)

3.在下列的 HTML 中,哪个是最大的标题?

您的回答:<h1>

4.在下列的 HTML 中,哪个可以插入折行?

您的回答:<br>

5.在下列的 HTML 中,哪个可以添加背景颜色?

您的回答:<body bgcolor=“yellow”>

6.请选择产生粗体字的 HTML 标签:

您的回答:<b>

7.请选择产生斜体字的 HTML 标签:

您的回答:<i>

8.在下列的 HTML 中,哪个可以产生超链接?

您的回答:<a href=“http://www.w3school.com.cn”>W3School</a>

9.如何制作电子邮件链接?

您的回答:<a href=“mailto:xxx@yyy”>

10.如何在新窗口打开链接?

您的回答:<a href=“url” target=“_blank”>

11.以下选项中,哪个全部都是表格标签?

您的回答:<table><tr><td>

12.请选择可以使单元格中的内容进行左对齐的正确 HTML 标签:

您的回答:<td align=“left”>

13.如何产生带有数字列表符号的列表?

您的回答:<ol>

14.如何产生带有圆点列表符号的列表?

您的回答:<ul>

15.在下列的 HTML 中,哪个可以产生复选框?

您的回答:<input type=“checkbox”>

16.在下列的 HTML 中,哪个可以产生文本框?

您的回答:<input type=“text”>

17.在下列的 HTML 中,哪个可以产生下拉列表?

您的回答:<select>

18.在下列的 HTML 中,哪个可以产生文本区(textarea)?

您的回答:<textarea>

19.在下列的 HTML 中,哪个可以插入图像?

您的回答:<img src=“image.gif”>

20.在下列的 HTML 中,哪个可以插入背景图像?

您的回答:<body background=“background.gif”>

2.8 HTML 课后作业

2.8.1 课后练习 1: 员工表格

  • 需求: 编写代码,创建 homework01.html 显示如下网页

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息</title>
</head>
<body>
<h2 align="center">雇员薪资信息</h2>
<table bgcolor="silver" align="center" border="2px" cellspacing="0" bordercolor="blue"width="500" height="200">
    <tr align="center">
        <th>编号</th>
        <th>名字</th>
        <th>性别</th>
        <th>薪水</th>
        <th>职位</th>
        <th>email</th>
    </tr>
    <tr align="center">
        <td>111</td>
        <td>宋江</td>
        <td></td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
    <tr align="center">
        <td>111</td>
        <td>宋江</td>
        <td></td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
    <tr align="center">
        <td>111</td>
        <td>宋江</td>
        <td></td>
        <td>1000.00</td>
        <td>总裁</td>
        <td>sj@163.com</td>
    </tr>
</table>
</body>
</html>
  • 体验下用CSS控制样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息</title>
    <!-- 使用css完成[体验下] -->
    <style type="text/css">
        table, tr, td {
            border: 2px solid blue;
            border-collapse: collapse;
        }
        /*设置table的背景色*/
        table {
            background-color: #CCCCCC;
            /*表格中的文字居中*/
            text-align: center;
        }
    </style>
</head>
<body>
<!--
    分析
    1. 一共有4行6列
-->
<div align="center">
<h1>雇员薪资信息</h1>
<table border="1px" width="800">
    <tr>
        <th>第1行1列</th>
        <th>第1行2列</th>
        <th>第1行3列</th>
        <th>第1行4列</th>
        <th>第1行5列</th>
        <th>第1行6列</th>
    </tr>
    <tr>
        <td>第1行1列</td>
        <td>第1行2列</td>
        <td>第1行3列</td>
        <td>第1行4列</td>
        <td>第1行5列</td>
        <td>第1行6列</td>
    </tr>
    <tr>
        <td>第1行1列</td>
        <td>第1行2列</td>
        <td>第1行3列</td>
        <td>第1行4列</td>
        <td>第1行5列</td>
        <td>第1行6列</td>
    </tr>
    <tr>
        <td>第1行1列</td>
        <td>第1行2列</td>
        <td>第1行3列</td>
        <td>第1行4列</td>
        <td>第1行5列</td>
        <td>第1行6列</td>
    </tr>
</table>
</div>
</body>
</html>

2.8.2 课后练习 2: 课程表

  • 需求: 编写代码,创建 homework02.html 显示如下网页

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课表安排</title>
</head>
<body>
<h2 align="center">课程表</h2>
<table align="center" border="2" bordercolor="blue">
    <tr>
        <td>第1行第1列</td>
        <td colspan="5" align="center">第1行第2列</td>
        <td colspan="2" align="center">第1行第7列</td>
    </tr>
    <tr>
        <td>第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
        <td>第2行第4列</td>
        <td>第2行第5列</td>
        <td>第2行第6列</td>
        <td>第2行第7列</td>
        <td>第2行第8列</td>
    </tr>
    <tr>
        <td rowspan="4" align="center">第3行第1列</td>
        <td>第3行第2列</td>
        <td>第3行第3列</td>
        <td>第3行第4列</td>
        <td>第3行第5列</td>
        <td>第3行第6列</td>
        <td>第3行第7列</td>
        <td rowspan="4" align="center">第3行第8列</td>
    </tr>
    <tr>
        <td>第4行第2列</td>
        <td>第4行第3列</td>
        <td>第4行第4列</td>
        <td>第4行第5列</td>
        <td>第4行第6列</td>
        <td>第4行第7列</td>
    </tr>
    <tr>
        <td>第5行第2列</td>
        <td>第5行第3列</td>
        <td>第5行第4列</td>
        <td>第5行第5列</td>
        <td>第5行第6列</td>
        <td>第5行第7列</td>
    </tr>
    <tr>
        <td>第6行第2列</td>
        <td>第6行第3列</td>
        <td>第6行第4列</td>
        <td>第6行第5列</td>
        <td>第6行第6列</td>
        <td>第6行第7列</td>
    </tr>
    <tr>
        <td rowspan="2" align="center">第7行第1列</td>
        <td>第7行第2列</td>
        <td>第7行第3列</td>
        <td>第7行第4列</td>
        <td>第7行第5列</td>
        <td>第7行第6列</td>
        <td>第7行第7列</td>
        <td rowspan="2" align="center">第7行第8列</td>
    </tr>
    <tr>
        <td>第8行第2列</td>
        <td>第8行第3列</td>
        <td>第8行第4列</td>
        <td>第8行第5列</td>
        <td>第8行第6列</td>
        <td>第8行第7列</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述


  • 体验下CSS控制样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课表安排</title>
    <!-- 这里体验使用css, 大家还是可以使用前面学习过的知识 -->
    <style type="text/css">
        table,tr,td {
            border: 1px solid blue;
            text-align: center; /*文本居中*/
        }

        table {
            /*这里的border样式,只针对table表的外框*/
            border: 2px solid blue;
        }

    </style>
</head>
<body>
<div align="center">
    <!--
        1. 分析有8行8列
    -->
    <h1>课表安排</h1>
    <table border="1" width="800">
        <tr>
            <td>1</td>
            <td colspan="5">2</td>

            <td colspan="2">7</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <!-- 跨4行 , 下面的单元格没有-->
            <td rowspan="4">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <!-- 跨4行 , 下面的单元格没有-->
            <td rowspan="4">8</td>
        </tr>
        <tr>

            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>

            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>

            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <!-- 跨2行-->
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <!-- 跨2行-->
            <td rowspan="2">8</td>
        </tr>
        <tr>

            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
    </table>
</div>
</body>
</html>

在这里插入图片描述


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

要学就学灰太狼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值