HTML5

最新推荐文章于 2023-03-16 17:01:16 发布

罪恶的拓海

最新推荐文章于 2023-03-16 17:01:16 发布

阅读量930

点赞数

本文链接：https://blog.csdn.net/Bulid_Evolto/article/details/99005305

版权

《HTML5-笔记》

学习内容

HTML的概述

目标

学习HTML的概念和作用

概念

HTML：Hyper Text Markup Language 超文本标记语言。

HTML的作用：就是开发网页的。

[外链图片转存失败(img-U8gKeWri-1565364140584)(/)]

超文本：(超人) 不同于普通文本，超文本不但可以阅读，还可以有交互的功能，还可以设置字体，颜色，添加图片等。
标记语言：由一些固定标记组成

[外链图片转存失败(img-cEplIXDz-1565364140584)(/)]

标签格式：以<开头，以>结束。
纠错：浏览器有自动纠错的功能，如果网页中有错误，浏览器不会报错。

运行方式

[外链图片转存失败(img-GfLVUqe3-1565364140588)(/)]

保存在：服务器上
运行在：浏览器端，从服务器上把网页下载。然后再解析。

小结

什么是HTML？
Hyper Text Markup Language 超文本标记语言。用来做网页的
HTML保存在服务器，运行在浏览器

HTML5的介绍

目标

学习HTML5的概念和特点

[外链图片转存失败(img-EsLNJNmS-1565364140588)(/)]

HTML5的概念

HTML的第5个版本，简称H5。

HTML5的特点

HTML5的特点:在桌面和移动平台上有一致的用户体验。

2014年10月29日，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布，这是一次重大的革新。HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

目前支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等。不同的浏览器之间是有差异的，同一个网页在不同的浏览器上运行结果可能不同。

[外链图片转存失败(img-gTKrAeo4-1565364140588)(/)]

HTML5的作品

[外链图片转存失败(img-ZUkxtDPu-1565364140588)(/)]

小结

什么是HTML5，它有什么特点？

HTML的第5个版本，特点让移动端和PC端有相同的用户体验。

网页的基本结构、使用idea创建网页

目标

学习idea创建HTML

常见的HTML编辑器

HBuilder
Adobe Dreamweaver CS
SublimeText
NotePad
IDEA

使用IntelliJ IDEA创建html

一个网页项目建议按如下目录创建结构

[外链图片转存失败(img-NkTy5ifW-1565364140588)(/)]

创建静态Web模块
指定工程名和保存位置
创建HTML文件，选择html5的版本

创建HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<h1>世界,你好!</h1>
</body>
</html>

HTML的基本结构

标签名 作用
html 根元素(根标签)
head 网页头部
body 网页主体，网页的内容写在body中
注释格式：
嵌套：不能嵌套
点右上角一排浏览器按钮运行，idea会使用内置的服务器在指定的浏览器上运行。
在浏览器上运行的结果
访问地址：运行在自己的服务器上。
通常不需要修改浏览器文件的地址，如果要修改可以在这里操作

标签名	作用
html	根元素(根标签)
head	网页头部
body	网页主体，网页的内容写在body中
注释	格式：<!-- 内容 --> 嵌套：不能嵌套

小结

使用idea创建HTML步骤

新建static web模块
在模块上右键-> New -> HTML FILE

文本标签的学习

目标

学习标签的分类
学习文本标签的使用

HTML标签的分类

有否有主体	格式
有主体标签	<标签名>主体内容</标签名>
没有主体标签	<标签名></标签名> 简化为：<标签名/>

是否换行	特点
块标签	自带换行效果
内联标签	不带换行效果

文本标签介绍

[外链图片转存失败(img-GjA4myhm-1565364140592)(/)]

[外链图片转存失败(img-CEvHdA02-1565364140592)(/)]

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!--指定字符集，注释：ctrl + / -->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有主体标签, 块标签。 -->
<!--作用：用于文章的标题,有6级标题，级数越小，字越大 -->
<h1>我们是害虫</h1>
<!--align属性的作用：指定对齐方式，常用：center,left,right-->
<h2 align="center">我们是害虫</h2>
<h3 align="right">我们是害虫</h3>
<h4>我们是害虫</h4>
<h5>我们是害虫</h5>
<h6>我们是害虫</h6>
<!--没有主体: 水平线，块标签 -->
<hr/>
<!--width指定宽度, color: 颜色, size: 粗细。单位是像素 -->
<hr width="400" color="red" size="5"/>
<!--没有换行的标签，内联标签。-->

<!--font在H5版本中已经不使用，设置：颜色，大小，字体 -->
<font color="green" size="30" face="楷体">这是普通文本</font><br/>
<!--b和strong标签都是加粗:  bold -->
<font color="green" size="30" face="楷体"><b>这是普通文本</b></font><br/>
<!--i斜体  italic -->
<font color="green" size="30" face="楷体"><b><i>这是普通文本</i></b></font>

<!--p分段，每个分段之间有一定的间隔，首行没有缩进-->
<p>
超文本： 不同于普通文本，比普通文本功能更强文本。设置文本大小，颜色，样式。可以有音乐，视频。还可以点击，跳转到其它页面去。
</p>
<p>
标记语言： 整个网页由各种标记组成。
</p>
<p>
不同于编程语言，它通过标记符号来标记要显示网页中的各个部分。
</p>
</body>
</html>

小结

说说下面文本标签的作用	功能
h1~h6	标题标签，h1最大
font	字体标签，设置文字的颜色，大小，字体
br	换行
p	段落
hr	水平分割线
b	加粗
i	倾斜

案例：制作黑马公司介绍

目标

使用已经学习的文本标签，制作如下的公司介绍的页面

效果

[外链图片转存失败(img-hLvXNt3O-1565364140592)(/)]

步骤

“公司介绍”使用标题标签完成。例如：<h2>
两条橙色的线使用水平线完成
这个文档被划分成4个段落，使用段落标签<p>完成
“中关村黑马程序员训练营” 需要使用font标签完成
“传智播客” 需要斜体<i> 和粗体<b> 组合完成
第2行与第3行是一个普通的换行，需要使用<br/>完成
最下面的页脚使用2号字体大小，灰色，居中

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中关村黑马程序员训练营</title>
</head>
<body>
<h2>黑马公司介绍</h2>
<hr color="orange" size="4"/>
<p>
    <!--使用实体字符：&nbsp;表示空格，半角空格-->
    <!--ctrl+alt+t 用标签包裹 -->
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font color="red">"中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
    <br/>目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
</p>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，
    必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
</p>
<p>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>
<hr color="orange" size="4"/>
<!--center标签用于居中-->
<center>
<font color="#808080">江苏传智播客教育科技股份有限公司<br/>
版权所有Copyright © 2006-2018, All Rights Reserved 苏ICP备16007882</font>
</center>
</body>
</html>

小结

案例中我们用到了哪些标签?

font

center

列表标签：有序列表和无序列表

目标

学习有序列表和无序列表的使用

[外链图片转存失败(img-6Yjrb6nt-1565364140592)(/)]

标签介绍

[外链图片转存失败(img-ucVUpZp4-1565364140592)(/)]

案例需求

制作如图所示的菜单列表，左边列是有序列表，右边列是无序列表

效果

[外链图片转存失败(img-fjBjbrql-1565364140596)(/)]

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<!--
ol是有序列表，有编号。ol是容器，包含li标签，每个li就是一个列表项
order 有序 list 列表。
type指定编号的类型默认是数字编号
 -->
<h2>有序列表</h2>
<!--1表示数字编号-->
<ol type="1">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ol>
<ol type="A">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ol>
<ol type="I">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ol>

<h2>无序列表</h2>
<!--1表示数字编号-->
<ul type="disc">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ul>
<ul type="circle">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ul>
<ul type="square">
    <li>金拱门</li>
    <li>地沟油炒蛋</li>
    <li>红烧狮子头</li>
</ul>
</body>
</html>

小结

有序列表使用什么标签？

ol-li
无序列表使用什么标签？

ul-li

块标签与内联标签

目标

学习span标签和div标签的作用和区别

span和div介绍

标签	作用	特点
span	都是容器可以包裹其他内容	是内联标签，不带换行功能，用于小范围的内容的划分
div		是块标签，自带换行功能，用于一段的范围的内容划分，通常网页布局使用div将网页分成不同块

[外链图片转存失败(img-P3NIWS3j-1565364140596)(/)]

div作用

[外链图片转存失败(img-H6Edv4p4-1565364140596)(/)]

<div> 元素是块级元素，浏览器会在其前后显示折行。它是可用于组合其他 HTML 元素的容器。 <div> 元素是英文division，起到分割的意思。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的一个常见的用途是文档布局。

span作用

[外链图片转存失败(img-rfOqPTbb-1565364140596)(/)]

<span>元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

案例

通过代码认识div和span的功能和特点

效果

[外链图片转存失败(img-bWLokJmi-1565364140596)(/)]

万维网联盟又称W3C理事会1994年10月在麻省理工学院计算机科学实验室成立。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span和div</title>
</head>
<body>
<span style="background-color: yellow; color: red;">万维网联盟，又称W3C理事会。</span>1994年10月在麻省理工学院计算机科学实验室成立。
<div style="background-color: yellow; color: red;">万维网联盟，又称W3C理事会。</div>1994年10月在麻省理工学院计算机科学实验室成立。
</body>
</html>

小结

div标签和span标签的主要区别是什么？
span和div都是容器，可以包裹其他内容。

区别：

span不换行
div自带换行

实体字符

目标

当页面上需要使用一些特殊符号的时候怎么办呢？

[外链图片转存失败(img-rutZPsRZ-1565364140596)(/)]

格式

以**&开头，以分号结尾，如：  表示空格**

常用的实体字符表

[外链图片转存失败(img-tmxm4ymA-1565364140596)(/1551683521415.png)]

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实体字符</title>
</head>
<body>
&nbsp;&nbsp;我前面有空格<br/>
大于&gt;<br/>

小于&lt;<br/>

圆&yen;<br/>
与符号&amp;<br/>
双引号&quot;<br/>
版权&reg;
</body>
</html>

小结

所有的实体字符都以什么符号开头&，以什么符号结尾;

&xxx;

图像标签

目标

学习img标签在页面上显示图片

[外链图片转存失败(img-seMXFY9B-1565364140596)(/)]

基本语法

<img src="图片文件名"/>
src不能绝对路径

常用属性

属性名	作用
src	指定图片的地址
width	指定图片宽度
height	指定高度
alt	如果图片丢失，出现的替换文字
title	如果鼠标移动到图片上显示的文本信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
<!--
src 指定图片的地址
width 指定图片宽度
height 指定高度
alt 如果图片丢失，出现的替换文字
title 如果鼠标移动到图片上显示的文本信息
-->
<img src="img/girl1.jpg" /><br/>
<img src="img/girl1.jpg" width="50%" title="我是漂亮的女生"/><br/>
<img src="img/girl1.jpg" height="500" width="200"/><br/>
<img src="img/girl1.jpg1" alt="我是女生"/>
</body>
</html>

小结

图像标签的格式？

<img src="图片的路径"/>
width: 图片的宽度
height: 图片的高度
title: 鼠标移上显示的文字
alt: 图片找不到显示的问题

案例：家用电器排行榜

目标

制作家用电器排行榜案例

[外链图片转存失败(img-DVH7S4D8-1565364140596)(/)]

步骤分析

家用电器排行榜使用标题标签
水平分割线使用hr
图片使用img标签

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家用电器排行榜</title>
</head>
<body>
<h2>家用电器排行榜</h2>
<!--img是内联标签，不换行-->
<hr color="orange" size="2"/>

<img src="img/tv02.jpg">
索尼KLV-40R476A  55英寸  &yen;3599.00
<hr color="orange" size="2"/>

<img src="img/tv03.jpg">
海信LED93247  50英寸  ¥2486.00
<hr color="orange" size="2"/>

<img src="img/tv04.jpg">
三星98EAC  60英寸  ¥4777.00
<hr color="orange" size="2"/>

<img src="img/tv05.jpg">
创维42E5CHR  42英寸  ¥2799.00
<hr color="orange" size="2"/>
</body>
</html>

小结

在这个案例中我们用到了哪些标签？

img

链接标签：基本使用

目标

学习链接标签的基本语法

[外链图片转存失败(img-12x9OdJ4-1565364140596)(/)]

语法

<a href="跳转的目的地">内容</a>

属性名	作用
href	跳转的目的地
title	鼠标移动上来显示的文字
target	打开链接的方式 _self: 在本窗口打开 _blank: 在新的窗口打开

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--跳本地服务器-->
<!--
title 如果鼠标移动到链接文字上显示的文本信息
target 
_self 在当前窗口中打开链接，默认值
_blank 在新的窗口中打开链接地址
-->
<a href="demo06.html" title="充值会员才可以哦" target="_blank">点我有惊喜哦</a><br/>
<!--跳其它服务器-->
<a href="http://www.baidu.com">百度</a><br/>

<a href="mailto:lqx@163.com">给我发邮件</a>
</body>
</html>

调用发邮件客户端语法

<a href="mailto:邮箱地址">给我发邮件</a>

小结

链接标签的作用是什么？哪个属性用于指定跳转的其它页面？

可以跳转到其他网页。

href

<a href=“目的地”>显示的内容</a>

链接标签：设置锚点

目标

使用锚点定位到同一个网页中不同的位置

锚点的步骤

定义锚点 <a name=“锚点名字”>内容</a>
跳转到锚点 <a href="#锚点名字">内容</a>

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义锚点</title>
</head>
<body>
<!--使用锚点-->
<a href="#girl">我是女生</a>
<a href="#boy">我是男生</a>
<a href="#eye">大眼睛</a>
<hr color="red"/>
<!--定义锚点-->
<h2>
    <a name="girl">我是女生</a>
</h2>
<img src="img/football.jpg" height="700">
<h2>
    <a name="boy">我是男生</a>
</h2>
<img src="img/boy.jpg" height="400">
<h2>
    <a name="eye">大眼睛</a>
</h2>
<img src="img/girl2.jpg" height="700">
</body>
</html>

小结

如何定义锚点？
```
<a name="锚点名"></a>
```
如何跳转到锚点？
```
<a href="#锚点名"></a>
```

表格标签：基本使用

目标

学习表格的基本使用

表格的作用

用来显示多条数据
用于一些网页的布局，后期会使用div布局

案例：表格的基本使用

[外链图片转存失败(img-FTC4aROM-1565364140596)(/)]

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示数据</title>
</head>
<body>
<!--
表格的容器：table
border: 外边框的粗细
width: 表格的宽度
align: 用在table，tr, td上面
   table: 表示整个表格对齐
   tr: 表示一行对齐
   td: 表示一格对齐

thead: 表格头部
tbody: 表格的主体, tr的父元素是：tbody，无论代码中有没有
tfoot: 表格的脚部
在逻辑上将表格分成不同的部分，都是不可见的
-->
<table border="3" width="500" align="center">
    <caption>联系人的地址</caption>
    <!--创建一行: tr table row -->
    <tr>
        <!--
        td表示一个单元格：表格的内容
         th表示表格的列标题：加粗，居中
         -->
        <th>
            姓名
        </th>
        <th>
            电话
        </th>
        <th>
            地址
        </th>
    </tr>
    <tr align="center">
        <td align="center">
           Bill Gates
        </td>
        <td>
            12873612873
        </td>
        <td>
            西雅图
        </td>
    </tr>
    <tr align="center">
        <td align="center">
            Steven Jobs
        </td>
        <td>
            230984230
        </td>
        <td>
            天堂
        </td>
    </tr>
</table>
</body>
</html>

表格的结构标签

[外链图片转存失败(img-txuOHxXw-1565364140600)(/)]

[外链图片转存失败(img-1PM86OuD-1565364140600)(/)]

表格属性

[外链图片转存失败(img-xxpXFZO8-1565364140600)()]

小结

表格结构	标签
表格容器	table
行	tr
列标题	th，加粗，居中
单元格	td

案例：学生成绩表

目标

在这里插入图片描述

步骤分析

表格有标题，使用caption标签
使用thead、tbody、tfoot对表格进行分块
第一行有表格列标题，使用th标签
表格的每一行都居中，使用tr标签的align属性居中对齐
成绩和总成绩分别有跨行和跨列的要求
使用属性设置表格之间的间隔为0
使用属性设置文本与表格边框之间的距离为4

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生成绩表</title>
</head>
<body>
<!--cellspacing 单元格之间的间隔-->
<!--
cellpadding 单元格边框与内容之间的间隔
padding 内边距
-->
<table width="500" border="2" align="center" cellspacing="0" cellpadding="4">
    <caption>学生成绩表</caption>
    <thead>
    <tr>
        <th>
            编号
        </th>
        <th>
            姓名
        </th>
        <th>
            性别
        </th>
        <th>
            成绩
        </th>
    </tr>
    </thead>
    <tbody>
    <!--一行居中-->
    <tr align="center">
        <td>
            100
        </td>
        <td>
            潘金莲
        </td>
        <td>
            女
        </td>
        <td>
            80
        </td>
    </tr>
    <tr align="center">
        <td>
            200
        </td>
        <td>
            潘金莲
        </td>
        <td>
            女
        </td>
        <!--跨2行-->
        <td rowspan="2">
            90
        </td>
    </tr>
    <tr align="center">
        <td>
            300
        </td>
        <td>
            潘金莲
        </td>
        <td>
            女
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr align="center">
        <td>
            总成绩
        </td>
        <!--跨三列-->
        <td colspan="3">
            900
        </td>
    </tr>
    </tfoot>
</table>
</body>
</html>

小结

以上案例中用到了哪些标签属性？

rowspan: 跨行
colspan：跨列
cellspacing：表格之间的间距
cellpadding：表格内容与边框的间距

表单标签介绍和基本属性(重点)

目标

学习表单标签的作用
学习表单标签中的2个属性

表单介绍

现实中的表单，类似我们去银行办理信用卡填写的单子。如下图

[外链图片转存失败(img-0mNhoGaW-1565364140600)()]

目的是为了收集用户信息

在我们网页中，我们也需要跟用户进行交互收集用户资料，此时也需要表单。

网页中表单的作用：收集用户的数据，并将收集的数据发送给服务器，表单标签也是一个容器。

[外链图片转存失败(img-cUSM5IHY-1565364140600)()]

案例：表单登录

[外链图片转存失败(img-KfpwZ0XQ-1565364140600)()]

FORM表单格式

select * from user；

<form>
    收集数据标签
</form>

常用属性

属性	作用
action	数据提交的目的地
method	数据提交方式

GET与POST的区别

提交方法	特点
GET	不安全
POST	安全

[外链图片转存失败(img-77DQFFUT-1565364140600)()]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录表单</title>
</head>
<body>
    <!--
        不要写成from,form表单用于将数据发送给服务器
        action属性：数据提交的目的地.如果服务器不存在会出现404
        method属性：表示提交的方式，可以使用get或post。默认是get方法
    -->
    <form action="server" method="get">
        <!--input默认是文本框,如果文本框中的数据需要提交给服务器,必须指定name属性-->
        用户名: <input name="user" type="text"/><br/>
        密码: <input name="pwd" type="password"/><br/>

        <!--type="submit"表示提交按钮-->
        <input type="submit"/>
    </form>
</body>
</html>

小结

表单标签的作用?

收集用户的数据
form表单标签有哪两个属性?

action: 数据提交的目的地

method:数据提交的方式
input标签的作用？有哪些属性？

input标签的作用:让用户来输入数据

input标签的属性：

type: 输入框的类型

name: 指定数据的含义/名称，让服务器知道这个数据的含义

value: 值

表单_文本框、密码框、单选框、复选框(重点)

目标

结合表格布局，制作如图所示的注册页面

效果

[外链图片转存失败(img-dd8nHvMc-1565364140600)()]

步骤

整个表格由8行2列组成，第1列显示文本
用户名、密码、性别、爱好、照片使用input标签，设置不同的type属性
学历使用select，个人简介使用textarea
最后1行跨2列，注册、清空、按钮的type分别是submit、reset、button

[外链图片转存失败(img-fSYPQLMv-1565364140600)()]

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<h2>用户注册</h2>
<hr/>
<form action="server" method="get">
    <table>
        <tr>
            <td>
                <!--for指定文本框的id-->
                <label for="user">用户名：</label>
            </td>
            <!--
            id不能重复
            如果得到光标,称为获取焦点 focus
            -->
            <td><input type="text" name="user" id="user"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" name="password" id="password">
            </td>
        </tr>
        <tr>
            <td>
                性别：
            </td>
            <td>
                <!--
                radio表示单选框
                相同名字的单选框是一组，一组只能选中一个。
                必须指定value属性，如果没有指定，值是on
                checked属性表示默认选中，属性名与属性值一样
                -->
                <input type="radio" name="gender" value="男" checked="checked">男
                <input type="radio" name="gender" value="女">女
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <!--
                复选框type是checkbox
                可以同时选中多个
                -->
                <input type="checkbox" name="hobby" value="游泳">游泳
                <input type="checkbox" name="hobby" value="看书" checked="checked">看书
                <input type="checkbox" name="hobby" value="跳楼">跳楼
                <input type="checkbox" name="hobby" value="上吊">上吊
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="注册">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

小结

上面学的所有的标签都是：input标签
只是type不同：
1. 文本框：type=“text”
2. 密码框：type=“password”
3. 单选框：type=“radio”
4. 复选框：type=“checkbox”
  默认选中：checked=“checked”

表单_其它控件的学习

目标

表单中其它控件的作用和常用属性

[外链图片转存失败(img-CqMpiuMR-1565364140600)()]

表单控件

[外链图片转存失败(img-j5gqrNPX-1565364140604)()]

[外链图片转存失败(img-kY6ihv7O-1565364140604)(/../../../../%E5%B9%BF%E5%B7%9E%E9%BB%91%E9%A9%ACJavaEE%E5%B0%B1%E4%B8%9A110%E6%9C%9F/day19(HTML&CSS)]/%E7%AC%94%E8%AE%B0/img/)

[外链图片转存失败(img-04Rq7HOV-1565364140604)()]

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <h2>用户注册</h2>
    <hr color="gray" size="1"/>
    <form action="server" method="get">
        <!--1.	整个表格由8行2列组成，第1列显示文本-->
        <table>
            <tr>
                <td>
                    <!--lable for后面是id值:user,当点击文字的时候也能让文本框获取焦点-->
                    <label for="user">用户名:</label>
                </td>
                <td><input name="user" id="user" placeholder="请输入用户名"/></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td>
                    <input name="pwd" type="password" placeholder="请输入密码"/>
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <!--radio是单选框 name相同的单选框作为一组.只能有一个是被选中的-->
                    <input type="radio" name="gender" value="男"/>男
                    <input type="radio" name="gender" value="女" checked="checked"/>女
                </td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td>
                    <!--checkbox是多选框 可以同时选中多个值-->
                    <input type="checkbox" name="hobby" value="游泳"/>游泳
                    <input type="checkbox" name="hobby" value="上网"/>上网
                    <input type="checkbox" name="hobby" value="电影" checked="checked"/>电影
                    <input type="checkbox" name="hobby" value="看书"/>看书
                </td>
            </tr>
            <tr>
                <td>学历:</td>
                <td>
                    <!--select下拉菜单,
                        size="3" 表示显示3行
                        multiple表示可以多选-->
                    <select name="edu" size="3" multiple="multiple">
                        <!--一个option就是一个选项,value值会被提交-->
                        <option value="1">本科</option>
                        <option value="2">硕士</option>
                        <option value="3" selected="selected">专科</option>
                        <option value="4">博士</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>照片:</td>
                <td>
                    <!--
                    文件域 type="file"
                    accept: 表示文件列表显示的文件类型，格式： 大类型/小类型。
                    image/* 表示所有图片类型
                    -->
                    <input type="file" name="photo" accept="image/*">
                </td>
            </tr>
            <tr>
                <td>个人简介</td>
                <td>
                    <!--
                        rows表示行数
                        cols表示列数
                        textarea没有value属性,textarea的主体内容就是他提交的值
                    -->
                    <textarea name="intro" cols="40" rows="6"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="注册"/>
                    <!--reset还原表单的内容-->
                    <input type="reset" value="清空"/>
                    <!--以后用的多,用于JS编程-->
                    <input type="button" value="普通按钮"/>

                    <!--也可以表示以上三种按钮,默认是submit类型-->
                    <button>普通按钮</button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

小结

下拉列表使用select标签，每个选项是一个option标签，每个option都有value属性，如果要默认选中的属性是什么selected=“selected”
多行文本域textarea标签，它的主体就是它的值。没有value属性
提交按钮：type=submit
重置按钮：type=reset
普通按钮：type=button

HTML5中input新增的type类型(了解)

目标

了解HTML5中新增的几个type作用

效果

[外链图片转存失败(img-7XlPf1k9-1565364140604)()]

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5中的input新增type</title>
</head>
<body>
    <form action="server">
        <!--type="date" 日期选择控件-->
        生日: <input type="date" name="birthday"/><br/>
        <!--type="email" 邮件验证控件-->
        邮箱: <input type="email" name="email"/><br/>
        <!--type="color" 颜色选择控件-->
        颜色: <input type="color" name="color"><br/>
        <!--type="number" 数字验证控件-->
        数字: <input type="number" name="qq"><br/>

        <input type="submit" value="提交">
    </form>
</body>
</html>

小结

type属性值	作用
date	日期控件
email	只能输入email地址
color	选择一个颜色
number	只能输入数字

案例：黑马旅游页面的布局

目标

[外链图片转存失败(img-kvlun9FY-1565364140604)(/)]

步骤

创建最外面的表格，边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%，居中对齐
创建7行tr和td
上面的4行，设置为thead
中间部分设置为tbody
最后2行，设置为tfoot

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马旅游首页</title>
</head>
<body>
<!--
布局7行
宽度可以用百分比和像素2种单位
单元格间隔、单元格与内容的间隔都设置成0
-->
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
    <!--四行头部-->
    <thead>
    <!--第1行-->
    <tr>

    </tr>
    <!--第2行-->
    <tr>

    </tr>
    <!--第3行-->
    <tr>

    </tr>
    <!--第4行-->
    <tr>

    </tr>
    </thead>

    <!--中间主体-->
    <tbody>
    <!--第5行-->
    <tr>

    </tr>
    </tbody>

    <!--最后2行-->
    <!--第6行-->
    <tfoot>
    <tr>

    </tr>
    <!--第7行-->
    <tr>

    </tr>
    </tfoot>
</table>
</body>
</html>

小结

整体框架是一个7行1列的表格

案例：黑马旅游页面的头部

目标

[外链图片转存失败(img-xhZraWbd-1565364140604)(/)]

步骤

第1行：直接在里面插入一张图片top_banner.jpg即可，图片的宽度使用100%
第2行：
1. 使用表格嵌套，插入一个1行3列的表格。边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%。
2. 表格只有1行，全部居中
3. 第1列的图片：logo.jpg，第2列的图片search.png，宽度设置为500，第3列图片hotel_tel.png
第3行：
1. 插入一个1行10列的表格
2. 边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%，背景色设置#ffc900。
3. 在每个单元格中输入一个菜单项，每个菜单项上可以加上a标签，单元格的高度设置为45
4. tr对齐居中，让表格中的文字居中
第4行：插入一张图片banner_3.jpg，宽度为100%

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马旅游首页</title>
</head>
<body>
<!--
布局7行
宽度可以用百分比和像素2种单位
单元格间隔、单元格与内容的间隔都设置成0
-->
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
    <!--四行头部-->
    <thead>
    <!--第1行,内容不能放在tr中，放在td或th-->
    <tr>
        <td>
            <img src="img/top_banner.jpg" width="100%">
        </td>
    </tr>
    <!--第2行-->
    <tr>
        <td>
            <!--表格嵌套-->
            <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                <tr align="center">
                    <td>
                        <img src="img/logo.jpg">
                    </td>
                    <td>
                        <img src="img/search.png" width="70%">
                    </td>
                    <td>
                        <img src="img/hotel_tel.png">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第3行-->
    <tr>
        <td>
            <table bgcolor="#ffc900" border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                <tr align="center">
                    <!--设置单元格的高度-->
                    <td height="45">
                        <a href="index.html">首页</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>地沟油</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第4行-->
    <tr>
        <td>
            <img src="img/banner_3.jpg" width="100%">
        </td>
    </tr>
    </thead>

    <!--中间主体-->
    <tbody>
    <!--第5行-->
    <tr>

    </tr>
    </tbody>

    <!--最后2行-->
    <!--第6行-->
    <tfoot>
    <tr>

    </tr>
    <!--第7行-->
    <tr>

    </tr>
    </tfoot>
</table>
</body>
</html>

小结

头部四行

第一行，一张图片

第二行，嵌套一行3列的表格

第三行，嵌套一行10列的表格

第四行，一张图片

案例：黑马旅游页面的主体

目标

[外链图片转存失败(img-NZCX35Uf-1565364140604)(/)]

步骤分析

主体部分嵌套一个6行1列的表格，边框、内边距、单元格间距都为0，表格宽度为95%，表格设置居中。
其中1，3，5行在td中添加图标icon_5.jpg、icon_6.jpg、icon_7.jpg和文字，下面使用hr添加水平线，粗细2，颜色为：#ffc900，td单元格的高度为80
第2行嵌套一个1行4列的表格，每个单元格插入1张图片jiangxuan_1.jpg和文字。文字使用p。价格使用font标签设置为红色。
第4行嵌套一个1行2列的表格，左边1列单元格插入1张图片guonei_1.jpg，右边1列嵌套一个2行3列的表格，每个单元格插入1张图片和文字。
第6行与第4行的制作方法相同，左边1列的图片名为jiangwai_1.jpg，修改文字和图片即可

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马旅游首页</title>
    <style>
        p {
            font-size: 12px;
        }

        font {
            font-size: 12px;
        }
    </style>
</head>
<body>
<!--
布局7行
宽度可以用百分比和像素2种单位
单元格间隔、单元格与内容的间隔都设置成0
-->
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
    <!--四行头部-->
    <thead>
    <!--第1行,内容不能放在tr中，放在td或th-->
    <tr>
        <td>
            <img src="img/top_banner.jpg" width="100%">
        </td>
    </tr>
    <!--第2行-->
    <tr>
        <td>
            <!--表格嵌套-->
            <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                <tr align="center">
                    <td>
                        <img src="img/logo.jpg">
                    </td>
                    <td>
                        <img src="img/search.png" width="70%">
                    </td>
                    <td>
                        <img src="img/hotel_tel.png">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第3行-->
    <tr>
        <td>
            <table bgcolor="#ffc900" border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                <tr align="center">
                    <!--设置单元格的高度-->
                    <td height="45">
                        <a href="index.html">首页</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>地沟油</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第4行-->
    <tr>
        <td>
            <img src="img/banner_3.jpg" width="100%">
        </td>
    </tr>
    </thead>

    <!--中间主体-->
    <tbody>
    <!--第5行-->
    <tr>
        <td>
            <table border="0" width="95%" cellpadding="0" cellspacing="0" align="center">
                <!--1行-->
                <tr>
                    <td height="80">
                        <img src="img/icon_5.jpg">黑马精选
                        <hr color="orange" size="3"/>
                    </td>
                </tr>
                <!--2行-->
                <tr>
                    <!--
                    1行4列
                    100%与父容器的宽度一样
                    -->
                    <td>
                        <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                            <tr>
                                <td>
                                    <img src="img/jiangxuan_1.jpg">
                                    <p>
                                        上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                    </p>
                                    <font color="grey">网付价</font>
                                    <font color="red">&yen;899起</font>
                                </td>
                                <td>
                                    <img src="img/jiangxuan_1.jpg">
                                    <p>
                                        上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                    </p>
                                    <font color="grey">网付价</font>
                                    <font color="red">&yen;899起</font>
                                </td>
                                <td>
                                    <img src="img/jiangxuan_1.jpg">
                                    <p>
                                        上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                    </p>
                                    <font color="grey">网付价</font>
                                    <font color="red">&yen;899起</font>
                                </td>
                                <td>
                                    <img src="img/jiangxuan_1.jpg">
                                    <p>
                                        上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                    </p>
                                    <font color="grey">网付价</font>
                                    <font color="red">&yen;899起</font>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--3行-->
                <tr>
                    <td height="80">
                        <img src="img/icon_6.jpg">国内游
                        <hr color="orange" size="3"/>
                    </td>
                </tr>
                <!--4行-->
                <tr>
                    <!--1行2列-->
                    <td>
                        <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                            <tr>
                                <td>
                                    <img src="img/guonei_1.jpg">
                                </td>
                                <td>
                                    <!--2行3列-->
                                    <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                                        <tr>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--5行-->
                <tr>

                </tr>
                <!--6行-->
                <tr>

                </tr>
            </table>
        </td>
    </tr>
    </tbody>

    <!--最后2行-->
    <!--第6行-->
    <tfoot>
    <tr>

    </tr>
    <!--第7行-->
    <tr>

    </tr>
    </tfoot>
</table>
</body>
</html>

小结

主体是六行一列的表格

案例：黑马旅游页面的底部

目标

[外链图片转存失败(img-GUjxI1Zw-1565364140604)(/)]

步骤

第6行插入图片footer_service.png，宽度100%

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马旅游首页</title>
    <style>
        p {
            font-size: 12px;
        }

        font {
            font-size: 12px;
        }
    </style>
</head>
<body>
<!--
布局7行
宽度可以用百分比和像素2种单位
单元格间隔、单元格与内容的间隔都设置成0
-->
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
    <!--四行头部-->
    <thead>
    <!--第1行,内容不能放在tr中，放在td或th-->
    <tr>
        <td>
            <img src="img/top_banner.jpg" width="100%">
        </td>
    </tr>
    <!--第2行-->
    <tr>
        <td>
            <!--表格嵌套-->
            <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                <tr align="center">
                    <td>
                        <img src="img/logo.jpg">
                    </td>
                    <td>
                        <img src="img/search.png" width="70%">
                    </td>
                    <td>
                        <img src="img/hotel_tel.png">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第3行-->
    <tr>
        <td>
            <table bgcolor="#ffc900" border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                <tr align="center">
                    <!--设置单元格的高度-->
                    <td height="45">
                        <a href="index.html">首页</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>地沟油</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                    <td>
                        <a>国内游</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--第4行-->
    <tr>
        <td>
            <img src="img/banner_3.jpg" width="100%">
        </td>
    </tr>
    </thead>

    <!--中间主体-->
    <tbody>
    <!--第5行-->
    <tr>
        <td>
            <table border="0" width="95%" cellpadding="0" cellspacing="0" align="center">
                <!--1行-->
                <tr>
                    <td height="80">
                        <img src="img/icon_5.jpg">黑马精选
                        <hr color="orange" size="3"/>
                    </td>
                </tr>
                <!--2行-->
                <tr>
                    <!--
                    1行4列
                    100%与父容器的宽度一样
                    -->
                    <td>
                        <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                            <tr>
                                <td>
                                    <img src="img/jiangxuan_1.jpg">
                                    <p>
                                        上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                    </p>
                                    <font color="grey">网付价</font>
                                    <font color="red">&yen;899起</font>
                                </td>
                                <td>
                                    <img src="img/jiangxuan_1.jpg">
                                    <p>
                                        上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                    </p>
                                    <font color="grey">网付价</font>
                                    <font color="red">&yen;899起</font>
                                </td>
                                <td>
                                    <img src="img/jiangxuan_1.jpg">
                                    <p>
                                        上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                    </p>
                                    <font color="grey">网付价</font>
                                    <font color="red">&yen;899起</font>
                                </td>
                                <td>
                                    <img src="img/jiangxuan_1.jpg">
                                    <p>
                                        上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                    </p>
                                    <font color="grey">网付价</font>
                                    <font color="red">&yen;899起</font>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--3行-->
                <tr>
                    <td height="80">
                        <img src="img/icon_6.jpg">国内游
                        <hr color="orange" size="3"/>
                    </td>
                </tr>
                <!--4行-->
                <tr>
                    <!--1行2列-->
                    <td>
                        <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                            <tr>
                                <td>
                                    <img src="img/guonei_1.jpg">
                                </td>
                                <td>
                                    <!--2行3列-->
                                    <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                                        <tr>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                            <td>
                                                <img src="img/jiangxuan_2.jpg">
                                                <p>
                                                    上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)
                                                </p>
                                                <font color="grey">网付价</font>
                                                <font color="red">&yen;899起</font>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--5行-->
                <tr>

                </tr>
                <!--6行-->
                <tr>

                </tr>
            </table>
        </td>
    </tr>
    </tbody>

    <!--最后2行-->
    <!--第6行-->
    <tfoot>
    <tr>
        <td>
            <img src="img/footer_service.png" width="100%">
        </td>
    </tr>
    <!--第7行-->
    <tr>
        <td align="center" bgcolor="orange" height="45">
            <font>江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</font>
        </td>
    </tr>
    </tfoot>
</table>
</body>
</html>

小结

脚部，第六行是一张图片，第七行，文字背景，高度，字体颜色和大小

学习总结

能够使用idea创建html文档
能够使用h1~h6、hr、p、br 等与文本有关的标签

文本标签	功能
h1~h6	标题标签，h1最大
hr	水平分割线
br	换行
p	段落
b	加粗
i	q倾斜

能够使用有序列表ol-li和无序列表ul-li显示列表内容

序列表
<ol>
	<li>aa</li>
	<li>aa</li>
</ol>

和无序列表
<ul>
	<li>aa</li>
	<li>aa</li>
</ul>

能够使用块标签div与内联标签span

内联标签span: 不带换行功能

块标签div:自带换行

div和span都是包裹一些内容

能够使用图片img标签把图片显示在页面中

<img src="图片的位置"/>

属性名	作用
src	指定图片路径
width	图片宽度
height	图片高度,如果宽度或高度只指定一个,会自动缩放
alt	图片找不到时显示的文字
title	鼠标移动到图片上显示的文字

能够使用超链接a标签跳转到一个新页面

<a href="跳转的目的地">内容</a>

属性名	作用
href	跳转的目的地
title	鼠标移动上显示的文字
target	打开网页的形式 _self:在本窗口打开连接 _blank:在新窗口打开连接

能够使用table、tr、td标签定义表格

标签名	作用
table	表格容器
tr	表示一行
th	列标题,加粗,居中
td	一个普通的单元格
caption	表格标题
thead	表格头
tbody	表格主体
tfoot	表格脚

能够制作黑马旅游网的首页

是一个七行一列的表格，里面各种图片或嵌套其他表格

能够使用表单form标签创建表单容器

<form>
	收集用户的数据
	<input/>
</form>

能够使用表单中常⽤的input标签创建输入项
input标签的type:

text: 普通的文本框
password: 密码框
radio: 单选框
checkbox:多选框
submit:提交按钮
reset: 重置按钮
button: 普通按钮
file: 选择一个文件

能够使用表单select标签定义下拉选择输入项

<select name="数据的名字">
	<option value="提交的值">内容1</option>
	<option value="提交的值">内容2</option>
</select>

能够使用表单textarea标签定义文本域

<textarea name="数据的名字" rows="行数" cols="列数">

</textarea>

罪恶的拓海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5

《HTML5-笔记》学习内容HTML的概述目标学习HTML的概念和作用概念 HTML：Hyper Text Markup Language 超文本标记语言。 HTML的作用：就是开发网页的。超文本：(超人) 不同于普通文本，超文本不但可以阅读，还可以有交互的功能，还可以设置字体，颜色，添加图片等。标记语言：由一些固定标记组成标签格式：以<开头，以>结...
复制链接

扫一扫