HTML介绍
1.HTML 指的是超文本标记语言: Hyper Text Markup Language
1)超文本：超过普通文本。普通文本是.txt,普通文本只能书写字符数据。超文本是除了可以存放字符数据，还可以存放视频、音频图片等
2）标记：标签。主要用来标识的。超链接标签：a 图片标签：img 输入框标签：input
2.HTML作用： 使用标记标签来描述网页 。即写网站网页的。相当于整个网页的架构。
3.html的标签有两种：
1）双标签：<标签名 属性名="属性值" 属性名="属性值" 。。。>文本</标签名>
2）单标签：<标签名 属性名="属性值" 属性名="属性值" 。。。/>
**4.html不用编译。直接使用浏览器运行解析看效果。**
3.html5介绍
2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布，这是一次重大的革新。
HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以其能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。
目前支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari(苹果系统)，Opera等。不同的浏览器之间是有差异，同一个网页运行可能会不同。
注意：我们使用html书写的网站都是静态网页。就是什么时候打开网页都一样。
3.HTML语言特点 (了解)
1.不需要编译，直接使用浏览器运行
2.在任何地方都可以创建html文件，文件后缀名是.html或者.htm
3.由标签组成
4.标签是预定义的，不要随便定义。
5.html就是书写网页的，用来显示页面的
6.html页面整体结构：
<!--根标签-->
<html>
<!--头标签-->
<head>
.......
</head>
<!--体标签-->
<body>
.....
</body>
</html>4.使用记事本书写html(了解)
1.在桌面创建文件，文件后缀名是.html或者.htm
2.使用记事本打开文件，书写html标签
<!--根标签-->
<html>
<!--头标签-->
<head>
<!--页面的标题-->
<title>这是我的第一个html页面</title>
</head>
<!--体标签-->
<body>
<!--px在html中属于一种单位表示像素，这里可以加可以不加-->
<font color="red" size="7px">我是第一个html</font>
</body>
</html>3.使用浏览器运行查看显示的数据
小结：
1.创建的html文件的后缀名是：.html或者.htm
2.<title>标签的文本内容显示到页面的最上边，表示标题
3.px在html中属于一种单位表示像素，这里可以加可以不加
5.html编辑器-vscode
1 介绍
官网：
Visual Studio Code - Code Editing. Redefined
VSCode（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，是目前前端开发最常用的软件开发工具之一。
-
书写html文件代码
<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，但也可以书写中文 -->
<html lang="en">
<head>
<!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 标题标签 -->
<title>第一个html页面</title>
</head>
<body>
<h1>在vscode中书写的第一个html页面</h1>
</body>
</html>-
效果
6常见快捷键
1.新建文件：ctrl+N
2.ctrl+加号键：放大，ctrl+减号键：缩小 ****
3.新开窗口：ctrl+shift+n
4.关闭当前窗口：ctrl+w
5.显示/隐藏左侧边栏：ctrl+b ****
6.文件重命名：鼠标选中+f2 ****
7.自动换行：alt+z（标签过长需要拖动编辑器下方滚动条阅读时不太方便，可以一键换行）
8.注释：ctrl+/****
9.多行编辑：alt+鼠标左键
10.查找并打开文件：ctrl+p
11.移动当前行，向上alt+up（方向键↑） 向下alt+down****
12.在当前行上方插入一行：ctrl+shift+enter
13.向下复制一行:shift+alt+向下键****
14.删除一行：ctrl+D 自己修改的****
6.案例一_公司网站简介(掌握)
1.需求
使用html代码完成上述的页面显示效果
2.使用的技术点
-
标题标签、水平线、字体标签
<!--
1.标题标签
1）格式：<hn></hn> n的范围是1-6，依次递减
2）标题标签特点：
a:单独占一行
b:自动加粗
2.水平线
1）格式：<hr/>
2)属性：
a: noshade 的属性值是noshade，表示没有阴影即实心
b: size 表示水平线粗细
3.字体标签 ：
1）格式：<font></font>
2）属性：
a:字体大小 ： size,属性值范围：1-7 ，依次递增，默认是3。如果超过7px按照7px显示。
如果小于1px按照1px显示
b:字体样式：face
c:字体颜色：color，属性值有两种表示方式：
【1】英文字母：推荐使用
【2】使用十六进制表示:
#xxxxxx 表示使用红绿蓝三原色设置颜色
红绿蓝分别取值：00 -- FF，此处使用16进制。
#FF 00 00
红 绿 蓝
注意：如果每组两个数字是一样的可以只书写一个数字
#FF 00 00可以简写为：#F00
--><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.标题标签
1）格式：<hn></hn> n的范围是1-6，依次递减
2）标题标签特点：
a:单独占一行
b:自动加粗
2.水平线
1）格式：<hr/>
2)属性：
a: noshade 的属性值是noshade，表示没有阴影即实心
b: size 表示水平线粗细
3.字体标签 ：
1）格式：<font></font>
2）属性：
a:字体大小 ： size,属性值范围：1-7 ，依次递增，默认是3。如果超过7px按照7px显示。
如果小于1px按照1px显示
b:字体样式：face
c:字体颜色：color，属性值有两种表示方式：
【1】英文字母：推荐使用
【2】使用十六进制表示:
#xxxxxx 表示使用红绿蓝三原色设置颜色
红绿蓝分别取值：00 -- FF，此处使用16进制。
#FF 00 00
红 绿 蓝
注意：如果每组两个数字是一样的可以只书写一个数字
#FF 00 00可以简写为：#F00
-->
<h1>黑马程序员</h1>
<h2>黑马程序员</h2>
<h3>黑马程序员</h3>
<h4>黑马程序员</h4>
<h5>黑马程序员</h5>
<h6>黑马程序员</h6>
<!--<h7>黑马程序员</h7> 黑马程序员-->
<!--
水平线标签
-->
<hr size="10px"/>
<hr noshade="noshade" size="10px"/>
<!--
字体标签
-->
<font>锁哥</font>
锁哥
<font size="7px">锁哥最大的</font>
<font size="1px">锁哥最小的</font>
<font size="3px">锁哥默认的</font>
<font size="300px">哈哈哈</font>
<font size="-10px">呵呵</font>
<font size="5px" face="楷体">柳岩</font>
<font size="5px" face="宋体">柳岩</font>
<font size="5px" face="宋体" color="green">柳岩</font>
<font size="5px" face="宋体" color="#000000">杨幂</font>
<font size="5px" face="宋体" color="#FF0000">杨幂</font>
<font size="5px" face="宋体" color="#00FF00">杨幂</font>
<font size="5px" face="宋体" color="#0000FF">杨幂</font>
<font size="5px" face="宋体" color="#00F">杨幂</font>
<font size="5px" face="宋体" color="#ffffe0">杨幂</font>
</body>
</html>
小结：
1.标题标签：hn n范围是1-6 依次递减
2.水平线标签：hr 属性：noshade 表示没有阴影 size 水平线粗细
3.font字体标签：
1）color:字体颜色。英文字母 和十六进制表示：#RGB
2）size:字体大小 范围1-7 依次递增
3）face:字体样式 宋体
注意：从html5后开始font标签已经过时，但是还可以使用，各个浏览器还是兼容的。
格式化标签
<!--
3.格式化标签
1)加粗标签 ： b
2)倾斜标签： i
格式化标签可以组合在一起使用:哪个标签位于外面都可以
-->
段落和换行标签
<!--
4.段落
p:单独在一行，每个段落之间具有留白
5.换行标签
br:每个行之间没有留白
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
4.段落
p:单独在一行，每个段落之间具有留白
5.换行标签
br:每个行之间没有留白
-->
<p>公司简介
"中关村黑马程序员训练营"是由传智播客联合中关村软件园<br/>
解决当前软件开发技术飞速发展，而企业招不到优秀人才
课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。</p>
顶顶顶顶顶
<p><b>我是加粗的</b></p>
<i>我是斜体的</i>
<p><b><i>我既是加粗的，又是斜体的</i></b></p>
</body>
</html>
小结：
1.格式化标签：
1）b:加粗的
2）i:倾斜的
2.段落标签：p标签，具有留白
3.换行标签：br,没有留白
3.案例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>企业简介</h1>
<hr size="1px" color="yellow"/>
<p><font color="red">传智教育</font>(股票代码 003032)，隶属江苏传智播客教育科技股份有限公司，注册资本4亿元，是第一个实现A股IPO的教育企业，
公司致力于培养高精尖数字化人才，主要培养人工智能、python+大数据开发、智能制造、软件、互联网、区块链等数字化专业人才及数据分析、
网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验，且来自互联网或研究机构的IT精英组成，
负责研究、开发教学模式和课程内容。公司具有完善的课程研发体系，一直走在整个行业发展的前端，在行业内竖立起了良好的品质口碑。</p>
<p>民族振兴靠人才，中华民族正处于伟大复兴之路上，要赢得国际竞争，需要拥有大量的科技人才，我们将肩负起民族使命，在三尺讲台诲人不倦
著书立说，为科技行业培养出大量的优秀人才，促进民族伟大复兴！我们的使命是：<b>为中华民族伟大复兴而讲课，为千万学生少走弯路而著书。</b>></p>
<p>探索教育之路，长途漫漫。传智教育希望可以通过自己的努力，寻找出一条更符合人类自然成长规律的教育之路，建立起一个新的教育生态环境，
让中国的家长和孩子们在现有的教育体系之外，再多一些选择的机会。因此“<b>探索教育本源，开辟教育新生态</b>”便成为了所有传智人为之奋斗的终极愿景，
也是所有传智人共同努力的目标。为此，15年来，传智人不曾有一丝懈怠，相信在传智人的不懈努力下，大道不远，终在脚下。</p>
<hr size="1px" color="yellow"/>
<center>江苏传智播客教育科技股份有限公司</center>
<center>版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882</center>
</body>
</html>
7.特殊字符标签(掌握)
1.我们把特殊字符称为实体字符，所有的实体字符以 & 开头，以 ; 结尾。
<!--
特殊字符实体：
1.< < less than
2.> > greate than
3.空格：
4.人民币符号：¥
5.版权符号：©
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
特殊字符实体：
1.< < less than
2.> > greate than
3.空格：
4.人民币符号：¥
5.版权符号：©
-->
<java从入门到放弃>
我觉得我和你之间有点 距离
¥999
©2003-现在 Taobao.com 版权所有
</body>
</html> 
小结：
特殊字符实体：以&开始，以;结尾
1.< < less than
2.> > greate than
3.空格：
4.人民币符号：¥
5.版权符号：©
8.图片、音频、视频标签(掌握)
-
图片标签
在html中显示图片的标签使用的是：
<img/> 单标签
常见属性：
| 属性名称 | 含义 | 作用 |
|---|---|---|
| src | 图片的路径地址 | 表示图片的路径，一般使用当前服务器(只能显示当前项目中的图片)，也可以使用其它服务器，必须加http协议。不能使用本地地址。c:/aaa.jpg |
| width | 宽度 | 如果只设置其中一项，那么图片会等比例缩放 |
| height | 高度 | |
| title | 提示文本 | 鼠标悬停在图片上方会出现的文字信息 |
| alt | 替换文本 | 图片加载失败的时候才会出现的文字信息 |
| border | 边框 | 只能定义边框的粗细 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.图片标签：img
属性：
1）src:引入图片的地址，必须是服务器中的图片，不能是本地的图片
2) width:表示图片宽度
3）height:表示图片高度
4) title:表示鼠标放到图片上的提示信息
5）alt:图片加载失败显示的内容
6）border：图片边框
注意：
1. .. 表示当前页面的上一级路径及父目录
说明：../img/mm.jpg
a: .. 表示当前页面的上一级目录 d_html_case2_img_04
b:由于d_html_case2_img_04和img是同级目录，所以这里直接书写img,然后查找下面的mm.jpg
-->
<img src="../img/mm.jpg" width="500px" height="400px" title="这是一个很性感的美女">
<img src="../img/美女.jpg" width="500px" height="400px" title="这是一个很性感的美女" alt="这里曾经是一个美女" border="5px">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>
</body>
</html>
小结：
1.在html中引入图片的标签是：img
2.img标签的属性：
1）src:引入图片的地址，必须是服务器中的图片，不能是本地的图片
2) width:表示图片宽度
3）height:表示图片高度
4) title:表示鼠标放到图片上的提示信息
5）alt:图片加载失败显示的内容
6）border：图片边框
3.如果加载是其他服务器的图片，必须加http或者https协议
<img src="http://java.itcast.cn/2018czgw/images/logo2.png" alt="">
9.网站列表展示(掌握)
1.需要的技术点
1.1无序列表标签ul
<!--
1.无序列表标签ul
1)无序列表标签是：ul,单独存在没有意义，必须借助于子标签li
2）属性：type表示类型，具有三个属性值：
a:disc 实心圆 默认的
b:circle 空心圆
c:square 实心正方形注意啦：type属性如果使用在ul上面对所有的子标签li都起作用，如果作用在某个li标签上，那么只对当前li标签起作用
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.无序列表标签ul
1)无序列表标签是：ul,单独存在没有意义，必须借助于子标签li
2）属性：type表示类型，具有三个属性值：
a:disc 实心圆 默认的
b:circle 空心圆
c:square 实心正方形
注意啦：type属性如果使用在ul上面对所有的子标签li都起作用，如果作用在某个li标签上，那么只对当前li标签起作用
-->
<ul>
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
</ul>
<ul type="disc">
<li>三国演义</li>
<li type="circle">水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
</ul>
<ul type="circle">
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
</ul>
<ul type="square">
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
</ul>
</body>
</html>
1.2有序列表标签ol
<!--
2.有序列表标签ol
1)有序列表标签是：ol,单独存在没有意义，必须借助于子标签li
2）属性：type表示类型，具有以下几种属性值：
【1】:1 数字 默认的
【2】:a 小写字母
【3】:A 大写字母
【4】：罗马数字 i I
注意：
1.ol>li*4 按tab可以快速生成四个li标签
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
2.有序列表标签ol
1)有序列表标签是：ol,单独存在没有意义，必须借助于子标签li
2）属性：type表示类型，具有以下几种属性值：
【1】:1 数字 默认的
【2】:a 小写字母
【3】:A 大写字母
【4】：罗马数字 i I
注意：
1.ol>li*4 按tab可以快速生成四个li标签
-->
<ol>
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
</ol>
<ol type="1">
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
</ol>
<ol type="a">
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
</ol>
<ol type="A">
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
</ol>
<ol type="i">
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
</ol>
<ol type="I">
<li>三国演义</li>
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
</ol>
</body>
</html>
小结：
1.无序列表：
1.ul 子标签 li
2.属性：type:
属性值：
disc 实心圆 默认的
circle: 空心圆
square:实心正方形
2.有序列表：
1.ol 子标签 li
2.属性：type,属性值：
【1】:1 数字 默认的
【2】:a 小写字母
【3】:A 大写字母
【4】：罗马数字 i I
3.注意：type属性还可以使用在li标签，只是作用于单个li标签，不建议使用。建议使用在ul或者ol上面
1.3超链接标签：<a>
1.基本演示(掌握)
1.作用：可以实现页面的跳转
2.使用的标签是：a
3.a标签的属性如下：
| 名称 | 作用 | 取值 |
|---|---|---|
| href | 用于确定需要显示页面的路径（URL） | 必写属性 |
| target | 确定以何种方式打开href所设置的页面 | _blank 新窗口打开 _self 在自己的页面中打开，将原来页面覆盖。默认打开方式 |
<a href="书写要跳转的地址，如果是外网，需要加http或者https协议" target="以何种方式打开呀跳转的新的页面">文本</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.超链接标签:a可以实现页面的跳转
2.属性：
1）href:属性值书写要跳转的网站，外网必须加http或者https协议
2）target表示跳转的页面以何种方式打开：
_blank : 新窗口
_self:在原来窗口打开，默认的
-->
<a href="http://www.baidu.com">去百度</a>
<a href="http://www.itcast.cn" target="_blank">传智教育</a>
<a href="http://www.jd.com" target="_self">京东</a>
</body>
</html>2.空连接(理解)
如果在实际开发中我们需要使用js判断满足某种条件在实现跳转，不满足就不跳转，此时如果不满足那么不能跳转的实现我们可以使用空连接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
超链接标签的空连接实现
1.使用#,带来的问题：
1）在url后面多了一个#
2) 点击之后页面会有跳转效果
2.javascript:void(0) javascript表示我们后面学习的javascript一种协议，void(0)表示空函数
3.javascript:void(0);
4.javascript: 推荐使用 简单
5.javascript:;
-->
<a href="#">空连接#</a>
<a href="javascript:void(0)">空连接javascript:void(0)</a>
<a href="javascript:void(0);">空连接javascript:void(0);</a>
<a href="javascript:">空连接javascript:</a>
<a href="javascript:;">空连接:;</a>
</body>
</html>小结：
1.a标签可以实现页面的跳转：掌握
<a href="跳转的网站" target="以何种方式打开新的页面 _blank 新窗口 _self 覆盖原来的窗口"></a>2.空连接：不能跳转
<a href="javascript:"></a>2.案例实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="square">
<li>
<a href="http://www.itcast.cn" target="_blank">传智教育</a>
</li>
<li>
<a href="http://www.baidu.com">百度</a>
</li>
<li>
<a href="http://www.163.com">网易</a>
</li>
<li>
百合
</li>
</ul>
</body>
</html>
10.表格table标签(掌握)
1.技术点介绍
<table>
行：tr
列：td
表头：自动加粗和居中th,表示列
</table>
table标签单独存在没有意义，必须借助于子标签tr td th
table标签的属性：
| 名称 | 作用 |
|---|---|
| border | 表格边框 |
| width | 表格的宽度 |
| height | 表格的高度 |
| cellpadding | 单元格边沿与其内容之间的空白 |
| cellspacing | 单元格之间的空白 |
| bgcolor :background color | 表格的背景颜色 |
tr属性(行)：
| 名称 | 作用 |
|---|---|
| align | 单元格内容的水平对齐方式,取值：left 左 、right 右、center 居中 |
td(th)列属性:
| 名称 | 作用 |
|---|---|
| colspan | 单元格可横跨的列数(横向合并单元格) column |
| rowspan | 单元格可横跨的行数(纵向合并单元格) |
| align | 单元格内容的水平对齐方式,取值：left 左 、right 右、center 居中 |
2.简单的表格
需求：在页面上显示4个用户的编号、姓名、年龄、性别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
简单的表格实现
-->
<!--
需求：在页面上显示4个用户的编号、姓名、年龄、性别。
分析：
4个用户+1个表头---》一共5行 tr
四列：编号、姓名、年龄、性别
-->
<!--table>tr*5>td*4-->
<!--
1.cellspacing 单元格之间的距离
2.cellpadding 单元格内容和边框距离
-->
<table border="1px" width="500px" height="400px" cellspacing="0px" cellpadding="0px" bgcolor="green">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td>001</td>
<td>马保国</td>
<td>69</td>
<td>男</td>
</tr>
<tr>
<td align="center">002</td>
<td>柳岩</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>003</td>
<td>杨幂</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>004</td>
<td>刘德华</td>
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>
小结：
1.table标签表示表格标签
2.tr表示行
3.td表示列
4.th表示列，表示表头，自动加粗和居中
5.table的属性：
cellspacing：单元格之间的距离
cellpadding 单元格内容和边框距离
6.tr属性：
align: left 靠左 right 靠右 center 居中
7.td或者th属性：
align: left 靠左 right 靠右 center 居中
3.合并单元格
需求1: 实现跨行,制作电话本
分析：
上述案例有4行，先查看多的行数，2列。对于张三是跨2行的。
跨行使用td标签中的rowspan属性可以实现纵向合并单元格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
练习2：实现跨行
-->
<table border="1px" width="500px" height="400px" cellspacing="0px" cellpadding="0px">
<tr>
<th>姓名</th>
<th>手机号</th>
</tr>
<tr>
<!--
rowspan="2" 表示跨2行
-->
<td rowspan="2">张三</td>
<td>13800000011</td>
</tr>
<tr>
<!--<td>张三</td>-->
<td>13800000022</td>
</tr>
<tr>
<td>李四</td>
<td>139000000001</td>
</tr>
</table>
</body>
</html>需求2: 实现跨列,制作电话本
分析：
上述案例有3行，3列。查看多的列，对于手机号是跨2列的。
跨列使用td标签中的colspan(横向合并单元格)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
跨列表格：
-->
<table border="1px" width="500px" height="400px" cellspacing="0px" cellpadding="0px">
<tr>
<th>姓名</th>
<!--
表示第2列跨2列，占第2 3列
-->
<th colspan="2">手机号</th>
<!--<th>手机号</th>-->
</tr>
<tr>
<td>张三</td>
<td>1380000191</td>
<td>1380000191</td>
</tr>
<tr>
<td>李四</td>
<td>1390000191</td>
<td>1390000191</td>
</tr>
</table>
</body>
</html>小结：
1.th或者td具有属性：
1.rowspan:表示跨行
2.colspan:表示跨列
4.表格标签案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.表格标签：table
2.table标签的子标签：
1）行标签：tr
2) 列标签：td th
注意：th表示表格标题标签，自动加粗和居中显示
3.border="1px" 表示表格边框
4.cellspacing="0px" 表示表格单元格之间的距离是0，即没有距离
5.width="50%" 表示表格标签的宽度占页面的50%
6.tr的属性：align="center"，值center表示居中 left 靠左 right 靠右
-->
<table border="1px" cellspacing="0px" width="50%">
<!-- 第一行 -->
<tr align="center">
<!--第一列 -->
<th>序号</th>
<!--第二列 -->
<th>品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<!-- 第二行 -->
<tr align="center">
<!--第一列 -->
<td>010</td>
<!--第二列 -->
<td>
<img src="../img/三只松鼠.png" width="25px" height="25px">
</td>
<td>
三只松鼠
</td>
<td>
三只松鼠
</td>
</tr>
<tr align="center">
<!--第一列 -->
<td>
009
</td>
<!--第二列 -->
<td>
<img src="../img/优衣库.png" width="25px" height="25px">
</td>
<td>
优衣库
</td>
<td>
优衣库
</td>
</tr>
<tr align="center">
<!--第一列 -->
<td>008</td>
<!--第二列 -->
<td>
<img src="../img/小米.png" width="25px" height="25px">
</td>
<td>
小米
</td>
<td>
小米科技有限公司
</td>
</tr>
</table>
</body>
</html>
5.小结
1.表格标签使用的是table作为父标签，作用：使页面显示更加规整
2.table标签的子标签：
1）tr : 表格的行
2）td : 表格的列
3）th : 表格的列，表示这一列是自动居中加粗
4）caption：表示表格标题，居中显示
5）tbody:表示表格主体标签,我们不书写，浏览器也会添加，书写就不会添加
3.table标签的属性：
1）border:表格边框
2）width:表格宽度
3）height:表格高度
4）cellspacing:单元格之间的距离 外部
5）cellpadding:内容和单元格距离 内部
6）bgcolor:表格背景颜色
4.tr属性：
1）align: left 内容靠左 center : 内容居中 right：内容靠右
5.td属性：
1）align: left 内容靠左 center : 内容居中 right：内容靠右
2）rowspan:跨行 row
3）colspan:跨列 column
11.表单标签(掌握)
1form表单标签
1.单独存在没有意义，需要借助于子标签
2.form表示表单标签，常见属性：
1)action="提交数据的服务器地址"
2)method="提交后台服务器的数据的提交方式或者请求方式"
<!--
1.form标签常见属性：
1)action="提交数据的服务器地址"
2)method="提交后台服务器的数据的提交方式或者请求方式"
2.method的属性值：get post
get请求：
1)不安全的
2)提交后台服务器的数据位于url后面
http://127.0.0.1:端口号/资源?username=zhangsan&password=1234
3)传输数据大小具有限制
4)只能传输字符数据
post请求：http://127.0.0.1:端口号/资源
1）安全的
2）提交后台的数据位于请求体中 复习
3）传输的数据没有大小限制
4）可以传输字符数据，字节数据
3.如果数据想要别提交到指定的后台服务器，那么数据必须书写在form标签的文本中
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.form标签常见属性：
1)action="提交数据的服务器地址"
2)method="提交后台服务器的数据的提交方式或者请求方式"
2.method的属性值：get post
get请求：
1)不安全的
2)提交后台服务器的数据位于url后面
http://127.0.0.1:端口号/资源?username=zhangsan&password=1234
3)传输数据大小具有限制
4)只能传输字符数据
post请求：http://127.0.0.1:端口号/资源
1）安全的
2）提交后台的数据位于请求体中 复习
3）传输的数据没有大小限制
4）可以传输字符数据，字节数据
3.如果数据想要别提交到指定的后台服务器，那么数据必须书写在form标签的文本中
-->
<!--<form action="#" method="get">-->
<form action="#" method="post">
</form>
</body>
</html>2 input标签
1.表示输入项
<!--
input标签：
1.属性：
1)type,属性值：
【1】 text 默认的，表示文本
【2】 password 表示密码框
【3】 radio 单选按钮，只能选一个
【4】 checkbox 复选框，多选
【5】 file 上传文件
【6】 hidden 隐藏域 在实际开发中如果需要提交到后台服务器，但是页面上不显示的数据可以放到隐藏域中
【7】 image 表示图片 了解
【8】 submit 提交表单数据
【9】 reset 重置按钮
【10】 button 按钮
2) name属性
【1】用在单选按钮中，name属性值要一致，这样就可以实现单选按钮只能选择一个
【2】name属性值在实际开发中一定要书写，这样后台服务器可以根据name属性值获取输入项对应的数据
3) src属性：结合type属性值image一起使用，引入图片
4) value属性
【1】在type属性值submit reset button中表示显示的内容
【2】表示输入项输入的值，可以不写，那么就是输入项输入的值，也可以写，后台获取的是输入项中的值
5) checked属性：
使用在单选按钮和复选框中表示被选中
<input type="checkbox" checked="checked">篮球
<input type="checkbox" checked>登山
6) disabled : 使用在单选按钮和复选框中表示不能操作
7) readonly:使用在输入框中 text password 表示只读
8) size:输入框大小
9) maxlength：允许输入的字符的最大长度
-->
2.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
input标签：
1.属性：
1)type,属性值：
【1】 text 默认的，表示文本
【2】 password 表示密码框
【3】 radio 单选按钮，只能选一个
【4】 checkbox 复选框，多选
【5】 file 上传文件
【6】 hidden 隐藏域 在实际开发中如果需要提交到后台服务器，但是也没不显示的数据可以放到隐藏域中
【7】 image 表示图片 了解
【8】 submit 提交表单数据
【9】 reset 重置按钮
【10】 button 按钮
2) name属性
【1】用在单选按钮中，name属性值要一致，这样就可以实现单选按钮只能选择一个
【2】name属性值在实际开发中一定要书写，这样后台服务器可以根据name属性值获取输入项对应的数据
3) src属性：结合type属性值image一起使用，引入图片
4) value属性
【1】在type属性值submit reset button中表示显示的内容
【2】表示输入项输入的值，可以不写，那么就是输入项输入的值，也可以写，后台获取的是输入项中的值
5) checked属性：
使用在单选按钮和复选框中表示被选中
<input type="checkbox" checked="checked">篮球
<input type="checkbox" checked>登山
6) disabled : 使用在单选按钮和复选框中表示不能操作
7) readonly:使用在输入框中 text password 表示只读
8) size:输入框大小
9) maxlength：允许输入的字符的最大长度
-->
<form action="#">
用户名<input type="text" name="username" value="柳岩" readonly size="10px"/><br>
用户名<input name="username2" maxlength="3"/><br>
密码<input type="password" name="password"/><br>
性别：
<input type="radio" name="sex" checked="checked" disabled>男
<input type="radio" name="sex" >女
<br>
爱好：
<input type="checkbox" checked disabled>登山
<input type="checkbox" checked="checked" disabled="disabled">篮球
<input type="checkbox">习武
<input type="checkbox">皮划艇
<br>
您上传的种子文件：<input type="file"/>
<br>
<input type="hidden" value="iaiauauayyayay">
<br>
<!--<input type="image" src="../img/mm.jpg"/>-->
<input type="submit" value="注册">
<br>
<input type="reset">
<br>
<input type="button" value="登录">
</form>
</body>
</html>
小结：
input标签：
1.属性：
1）type:表示input标签表示的类型，具有如下属性值：
a:text 表示文本，默认的
b:password 表示密码框 自动加密
c:radio 表示单选按钮，只能选择一个
d:checkbox:复选框，多选
e:file:上传的文件
f:hidden:表示隐藏域，页面上确实存在，但是用户看不到。
应用场景：修改商品 删除商品 lakakj1981829191
g:image:引入图片 一般使用img标签引入图片 了解。
这里可以将页面的图片提交到后台服务器
h:submit:提交表单中的数据到后台服务器
i:reset:重置，重新输入
j:button: 按钮2）name:
a:对于单选按钮，我们必须给一个name属性，并且name属性值要一致，这样才可以实现单选
b:开发中对于name属性我们一定要书写，并且name属性值要和后台即java代码中的标准类中的成员变量名一致
3）value：
a:对于input标签中的type属性值：submit reset button 可以修改页面显示的内容，显示value中的内容
b:对于input标签的value属性，我们可以书写可以不书写，对于输入框一般不书写，提交后台服务器的数据就是输入框的数据.
对于input其他的内容一般都书写value
4）checked="checked" 属性：针对单选按钮和复选框的，表示默认被选中
5）readonly="readonly" 属性：针对输入框的，表示只读，不能修改
6) disabled="disabled" :针对单选按钮和复选框，表示不能操作
7)size="30px" 表示输入框大小 了解
8）maxlength="5" 输入框输入的最多的字符个数 了解
3下拉列表标签：<select>
<!--
下拉列表标签：select,单独存在没有意义，需要借助子标签option
1.子标签 option表示下拉框的选项
2.子标签option的value属性必须写，提交到后台的就是option的value属性值，如果不书写value，那么
提交后台的就是文本值
3.子标签option的selected属性表示被选中
4.select标签的属性：
1）name:name属性值必须写，这样后台根据name属性值获取选中的option的value属性值
2) size="2" 每次select标签中显示2个子标签option
3）multiple 表示可以显示多个option-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
下拉列表标签：select,单独存在没有意义，需要借助子标签option
1.子标签 option表示下拉框的选项
2.子标签option的value属性必须写，提交到后台的就是option的value属性值，如果不书写value，那么
提交后台的就是文本值
3.子标签option的selected属性表示被选中
4.select标签的属性：
1）name:name属性值必须写，这样后台根据name属性值获取选中的option的value属性值
2) size="2" 每次select标签中显示2个子标签option
3）multiple 表示可以显示多个option
-->
<form action="#">
<!--<select name="city" size="2">-->
<select name="city" multiple>
<option value="">-----------请选择-------------</option>
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
<option value="sz">深圳</option>
<option value="sz">深圳</option>
<option value="sz">深圳</option>
<option value="sz">深圳</option>
<option value="sz">深圳</option>
<option value="sz">深圳</option>
<option value="sz">深圳</option>
<option value="sz">深圳</option>
</select>
</form>
</body>
</html>
小结：
-
下拉列表标签：select,单独存在没有意义，需要借助子标签option
-
子标签option的value属性必须写，提交到后台的就是option的value属性值，如果不书写value，那么 提交后台的就是文本值
-
子标签option的selected属性表示被选中
-
select标签的属性： 1）name:name属性值必须写，这样后台根据name属性值获取选中的option的value属性值
2)size="2" 每次select标签中显示2个子标签option 了解 3）multiple 表示可以显示多个option 了解
4文本域标签：<textarea>
1.由行rows和列cols组成
<!--
文本域标签：<textarea>
-->
个人简介：
<br>
<textarea rows="10" cols="10"></textarea>
5按钮标签(了解)
button,表示按钮标签，<button type="button|reset|submit"> 按钮标签一般很少使用，提供“普通|重置|提交”功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
3.文本域标签：<textarea>:可以书写多个字符
由行rows和列cols组成
4.按钮标签： <button type="submit"></button>
type属性，常见三个属性值：
1）submit ：提交表单
2）reset ：重置表单
3）button ：按钮
注意：需要指定文本值来显示按钮标签在页面上显示内容
-->
<form action="#" method="post">
个人描述： <br/>
<textarea rows="10" cols="30"></textarea> <br>
<button type="submit">登录</button>
<button type="reset">重写</button>
<button type="button">注册</button>
</form>
</body>
</html>
6 label标签(掌握)
可以实现通过文本选中某个指定的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
5.label标签：可以实现通过文本选中某个指定的标签。
说明：
需要在label标签中书写一个for属性，属性值是要定位的标签的id属性值
6.补充：在input标签中具有一个属性：placeholder="请输入用户名" 表示输入框的提示信息，在输入框输入内容后
提示信息就消失了
-->
<form action="#" method="post">
<input type="radio" name="sex" id="male"> <label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label><br>
<label for="username"> 用户名:</label>
<input type="text" id="username" placeholder="请输入用户名">
</form>
</body>
</html>
小结：
1.文本域标签：textarea,由rows行和cols列组成
2.button按钮标签：在type属性值中具有三个内容：reset submit button
3.label标签:可以实现通过文本定位某个标签
<label for="某个标签的id属性值">用户名</label><br>
<input type="text" name="username" id="username">4.在input标签中具有一个属性：placeholder="请输入用户名" 表示输入框的提示信息，在输入框输入内容后提示信息就消失了
12.HTML5中新增的type类型的属性值(掌握)
| 值 | 描述 |
|---|---|
| color | 定义拾色器 |
| date | 定义日期字段（带有 calendar 控件） |
| datetime-local | 定义日期字段（带有 calendar 和 time 控件） |
| month | 定义日期字段的月（带有 calendar 控件） |
| week | 定义日期字段的周（带有 calendar 控件） |
| time | 定义日期字段的时、分（带有 time 控件） |
| 定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能 | |
| number | 定义带有 spinner 控件的数字字段，该文本框只能输入数字，可以对输入的数字进行加1和减1 |
| search | 定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
HTML5中新增的type类型的属性值
1.color:取色器
2.date:年月日
3.datetime-local：定义日期字段（带有 calendar 和 time 控件）年月日 时分
4.time定义日期字段的时、分（带有 time 控件）
5.email定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能
6.number定义带有 spinner 控件的数字字段，该文本框只能输入数字，可以对输入的数字进行加1和减1
7.search定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。
-->
<form action="#">
<input type="color"> <br>
<input type="datetime-local"> <br>
<input type="time"> <br>
<input type="email"> <br>
<input type="number"> <br>
<input type="search"> <br>
<input type="text"> <br>
<input type="submit">
</form>
</body>
</html>
13. 其它标签div & span(掌握)
1.div
div属于html中的块级标签，类似以h标签，单独占一行。单独使用没有意义，结合我们后面学习的CSS一起使用用来页面的布局的。现在实际开发中都使用div.
<!--
1.div标签
-->
<div>div1</div>
<div>div2</div>
<div>div3</div>
之前学习的块级标签：标题标签hn,br,p标签。
<!--
1.div标签
-->
<div>div1</div>
<div>div2</div>
<div>div3</div><p>我是p1</p>
<p>我是p2</p>
p标签作为块级标签每个段落之间具有留白，而div标签作为块级标签没有留白。
2.span
<!--
2.span标签
从html5后开始使用span标签取代了字体标签font,但是span标签必须结合css一起使用设置字体效果。
span标签属于行内标签，就是共处一行例如之前学习的input
-->
<span>span1</span>
<span>span2</span>
<span>span3</span>
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
