htmledit_views">
1-标题标签、水平线、字体标签
<!--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
-->小结：
1.标题标签：hn n范围是1-6 依次递减 2.水平线标签：hr 属性：noshade 表示没有阴影 size 水平线粗细 3.font字体标签： 1）color:字体颜色。英文字母 和十六进制表示：#RGB2）size:字体大小 范围1-7 依次递增3）face:字体样式 宋体注意：从html5后开始font标签已经过时，但是还可以使用，各个浏览器还是兼容的。
2-格式化标签
<--3.格式化标签1)加粗标签 ： b2)倾斜标签： i格式化标签可以组合在一起使用:哪个标签位于外面都可以
--><b>我是加粗的</b><i>我是倾斜的</i><b><i>我既是加粗的又是倾斜的</i></b>3-段落和换行标签
<!--4.段落p:单独在一行，每个段落之间具有留白5.换行标签br:每个行之间没有留白
-->小结：
1.格式化标签：1）b:加粗的2）i:倾斜的 2.段落标签：p标签，具有留白 3.换行标签：br,没有留白
4-特殊字符标签(掌握)
1.我们把特殊字符称为实体字符，所有的实体字符以 & 开头，以 ; 结尾。
<!--特殊字符实体：1.< < less than2.> > greate than3.空格： 4.人民币符号：¥5.版权符号：©-->html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--特殊字符实体：1.< < less than2.> > greate than3.空格： 4.人民币符号：¥5.版权符号：©--><java从入门到放弃>我觉得我和你之间有点 距离¥999©2003-现在 Taobao.com 版权所有
</body>
</html>小结：
特殊字符实体：以&开始，以;结尾1.< < less than2.> > greate than3.空格： 4.人民币符号：¥5.版权符号：©
5-图片、音频、视频标签(掌握)
-
图片标签
在html中显示图片的标签使用的是：
<img/> 单标签
常见属性：
| 属性名称 | 含义 | 作用 |
|---|---|---|
| src | 图片的路径地址 | 表示图片的路径，一般使用当前服务器(只能显示当前项目中的图片)，也可以使用其它服务器，必须加http协议。不能使用本地地址。c:/aaa.jpg |
| width | 宽度 | 如果只设置其中一项，那么图片会等比例缩放 |
| height | 高度 | 如果只设置其中一项，那么图片会等比例缩放 |
| title | 提示文本 | 鼠标悬停在图片上方会出现的文字信息 |
| alt | 替换文本 | 图片加载失败的时候才会出现的文字信息 |
| border | 边框 | 只能定义边框的粗细 |
html">1.图片标签：img属性：1）src:引入图片的地址，必须是服务器中的图片，不能是本地的图片2) width:表示图片宽度3）height:表示图片高度4) title:表示鼠标放到图片上的提示信息5）alt:图片加载失败显示的内容6）border：图片边框
注意：1. .. 表示当前页面的上一级路径及父目录说明：../img/mm.jpg小结：
1.在html中引入图片的标签是：img 2.img标签的属性：1）src:引入图片的地址，必须是服务器中的图片，不能是本地的图片2) width:表示图片宽度3）height:表示图片高度4) title:表示鼠标放到图片上的提示信息5）alt:图片加载失败显示的内容6）border：图片边框 3.如果加载是其他服务器的图片，必须加http或者https协议
6-网站列表展示(掌握)
1.需要的技术点
1.1无序列表标签ul
<!--1.无序列表标签ul1)无序列表标签是：ul,单独存在没有意义，必须借助于子标签li2）属性：type表示类型，具有三个属性值：a:disc 实心圆 默认的b:circle 空心圆c:square 实心正方形 注意啦：type属性如果使用在ul上面对所有的子标签li都起作用，如果作用在某个li标签上，那么只对当前li标签起作用-->
1.2有序列表标签ol
<!--2.有序列表标签ol1)有序列表标签是：ol,单独存在没有意义，必须借助于子标签li2）属性：type表示类型，具有以下几种属性值：【1】:1 数字 默认的【2】:a 小写字母【3】:A 大写字母【4】：罗马数字 i I注意：1.ol>li*4 按tab可以快速生成四个li标签-->
小结：
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>
html"><!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.jd.com" target="_self">京东</a>
</body>
</html>2.空连接(理解)
如果在实际开发中我们需要使用js判断满足某种条件在实现跳转，不满足就不跳转，此时如果不满足那么不能跳转的实现我们可以使用空连接。
html"><!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>
7-表格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属性可以实现纵向合并单元格。
html"><!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(横向合并单元格)。
html"><!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.小结
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
8-表单标签(掌握)
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标签的文本中-->
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：允许输入的字符的最大长度 -->
小结：
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>
<!--下拉列表标签：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 -->
html"><!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,表示按钮标签，<button type="button|reset|submit"> 按钮标签一般很少使用，提供“普通|重置|提交”功能。
html"><!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标签(掌握)
可以实现通过文本选中某个指定的标签。
html"><!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和减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>
![[Python数据可视化]Plotly Express: 地图数据可视化的魅力](https://i-blog.csdnimg.cn/direct/36e63daaa110498a93ec1bb26765c3c6.jpeg)
