HTML(待完善)

typora-copy-images-to: img

前端api:

https://www.w3school.com.cn/

1.前端知识介绍(了解)

4天内容比较细碎多。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

小结：

前端知识点不需要单独安装特有的软件。只需要浏览器即可。谷歌、火狐、IE.

网站=后台+前端网页

2.HTML的概述(了解)

1.HTML应用场景

各大门户网站的网页都是由html编写的

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

京东网站的html代码

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.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.标签的文本内容显示到页面的最上边，表示标题

3.px在html中属于一种单位表示像素，这里可以加可以不加

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:字体样式：facec:字体颜色：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:字体样式：facec:字体颜色：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:字体颜色。英文字母  和十六进制表示：#RGB2）size:字体大小 范围1-7 依次递增3）face:字体样式 宋体注意：从html5后开始font标签已经过时，但是还可以使用，各个浏览器还是兼容的。

格式化标签

<!--3.格式化标签1)加粗标签 ： b2)倾斜标签：  i格式化标签可以组合在一起使用:哪个标签位于外面都可以
-->

<!--3.格式化标签1)加粗标签 ： b2)倾斜标签：  i格式化标签可以组合在一起使用:哪个标签位于外面都可以
--><b>我是加粗的</b><i>我是倾斜的</i><b><i>我既是加粗的又是倾斜的</i></b>

段落和换行标签

<!--4.段落p:单独在一行，每个段落之间具有留白5.换行标签br:每个行之间没有留白
-->

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

7.特殊字符标签(掌握)

1.我们把特殊字符称为实体字符，所有的实体字符以 & 开头，以 ; 结尾。

  <!--特殊字符实体：1.<  &lt; less than2.>  &gt;  greate than3.空格：&nbsp;4.人民币符号：&yen;5.版权符号：&copy;-->

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--特殊字符实体：1.<  &lt; less than2.>  &gt;  greate than3.空格：&nbsp;4.人民币符号：&yen;5.版权符号：&copy;-->&lt;java从入门到放弃&gt;我觉得我和你之间有点&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;距离&yen;999&copy;2003-现在 Taobao.com 版权所有
</body>
</html>

小结：

  特殊字符实体：以&开始，以;结尾1.<  &lt; less than2.>  &gt;  greate than3.空格：&nbsp;4.人民币符号：&yen;5.版权符号：&copy;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

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.jpga: .. 表示当前页面的上一级目录 d_html_case2_img_04b:由于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.无序列表标签ul1)无序列表标签是：ul,单独存在没有意义，必须借助于子标签li2）属性：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.无序列表标签ul1)无序列表标签是：ul,单独存在没有意义，必须借助于子标签li2）属性：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.有序列表标签ol1)有序列表标签是：ol,单独存在没有意义，必须借助于子标签li2）属性：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.有序列表标签ol1)有序列表标签是：ol,单独存在没有意义，必须借助于子标签li2）属性：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超链接标签：

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.表格标签：table2.table标签的子标签：1）行标签：tr2) 列标签：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:跨行 row3）colspan:跨列 column

11.表单标签(掌握)

1form表单标签

1.单独存在没有意义，需要借助于子标签

2.form表示表单标签，常见属性：

1)action="提交数据的服务器地址"
2)method="提交后台服务器的数据的提交方式或者请求方式"

 <!--1.form标签常见属性：1)action="提交数据的服务器地址"2)method="提交后台服务器的数据的提交方式或者请求方式"2.method的属性值：get  postget请求：1)不安全的2)提交后台服务器的数据位于url后面http://127.0.0.1:端口号/资源?username=zhangsan&password=12343)传输数据大小具有限制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  postget请求：1)不安全的2)提交后台服务器的数据位于url后面http://127.0.0.1:端口号/资源?username=zhangsan&password=12343)传输数据大小具有限制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:表示隐藏域，页面上确实存在，但是用户看不到。应用场景：修改商品 删除商品 lakakj1981829191g: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其他的内容一般都书写value4）checked="checked" 属性：针对单选按钮和复选框的，表示默认被选中5）readonly="readonly" 属性：针对输入框的，表示只读，不能修改6) disabled="disabled" :针对单选按钮和复选框，表示不能操作7)size="30px" 表示输入框大小 了解8）maxlength="5" 输入框输入的最多的字符个数  了解

3下拉列表标签：

   <!--下拉列表标签：select,单独存在没有意义，需要借助子标签option1.子标签 option表示下拉框的选项2.子标签option的value属性必须写，提交到后台的就是option的value属性值，如果不书写value，那么提交后台的就是文本值3.子标签option的selected属性表示被选中4.select标签的属性：1）name:name属性值必须写，这样后台根据name属性值获取选中的option的value属性值2) size="2" 每次select标签中显示2个子标签option3）multiple 表示可以显示多个option-->

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--下拉列表标签：select,单独存在没有意义，需要借助子标签option1.子标签 option表示下拉框的选项2.子标签option的value属性必须写，提交到后台的就是option的value属性值，如果不书写value，那么提交后台的就是文本值3.子标签option的selected属性表示被选中4.select标签的属性：1）name:name属性值必须写，这样后台根据name属性值获取选中的option的value属性值2) size="2" 每次select标签中显示2个子标签option3）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,表示按钮标签，按钮标签一般很少使用，提供“普通|重置|提交”功能。

<!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 控件）
email	定义用于 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和减17.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>

14.配置idea快捷键：alt+/

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

工程和模块补充

# 1.工程1）一个工程下面包含多个模块；2）开发中我们都是创建工程，不会创建模块，一个项目对应一个工程。# 2.模块1）模块属于工程下面的

今日作业：

1.完成每日必做题

2.完成课上案例

     4.time定义日期字段的时、分（带有 time 控件）5.email定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能6.number定义带有 spinner 控件的数字字段，该文本框只能输入数字，可以对输入的数字进行加1和减17.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>

~~~

13. 其它标签div & span(掌握)

1.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标签作为块级标签没有留白。

[外链图片转存中…(img-qjyaPBLU-1708919771330)]

2.span

 <!--2.span标签从html5后开始使用span标签取代了字体标签font,但是span标签必须结合css一起使用设置字体效果。span标签属于行内标签，就是共处一行例如之前学习的input--><span>span1</span><span>span2</span><span>span3</span>

14.配置idea快捷键：alt+/

[外链图片转存中…(img-toDUEBPw-1708919771330)]

[外链图片转存中…(img-PcWwtLmP-1708919771331)]

[外链图片转存中…(img-Bp2TReX7-1708919771331)]

[外链图片转存中…(img-ou3uvrYe-1708919771331)]

[外链图片转存中…(img-FqFZiBX3-1708919771331)]

[外链图片转存中…(img-tTcROQ9X-1708919771331)]

工程和模块补充

# 1.工程1）一个工程下面包含多个模块；2）开发中我们都是创建工程，不会创建模块，一个项目对应一个工程。# 2.模块1）模块属于工程下面的

今日作业：

1.完成每日必做题

2.完成课上案例

3.预习

HTML(待完善)

1.前端知识介绍(了解)

2.HTML的概述(了解)

1.HTML应用场景

2.HTML介绍

3.html5介绍

3.HTML语言特点 (了解)

4.使用记事本书写html**(了解)**

6.案例一_公司网站简介(掌握)

1.需求

2.使用的技术点

3.案例实现(每个人必须完成)

7.特殊字符标签(掌握)

8.图片、音频、视频标签(掌握)

图片标签

9.网站列表展示(掌握)

1.需要的技术点

1.1无序列表标签ul

1.2有序列表标签ol

1.3超链接标签：

1.基本演示(掌握)

2.空连接(理解)

2.案例实现(课下必须完成)

10.表格table标签(掌握)

1.技术点介绍

2.简单的表格(课下完成)

3.合并单元格(课下完成)

4.表格标签案例

5.小结

11.表单标签(掌握)

1form表单标签

2 input标签

3下拉列表标签：

4**文本域标签：<**textarea>

5按钮标签(了解)

6 label标签(掌握)

12.HTML5中新增的type类型的属性值(掌握)

13. 其它标签div & span(掌握)

1.div

2.span

14.配置idea快捷键：alt+/

工程和模块 补充

13. 其它标签div & span(掌握)

1.div

2.span

14.配置idea快捷键：alt+/

工程和模块 补充

相关文章

4.使用记事本书写html(了解)

4文本域标签：<textarea>

工程和模块补充

工程和模块补充