html详细知识
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:字体样式：face
c:字体颜色：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:字体颜色。英文字母 和十六进制表示：#RGB
2）size:字体大小 范围1-7 依次递增
3）face:字体样式 宋体
注意：从html5后开始font标签已经过时，但是还可以使用，各个浏览器还是兼容的。
2-格式化标签
<--
3.格式化标签
1)加粗标签 ： b
2)倾斜标签： 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 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.版权符号：©
5-图片、音频、视频标签(掌握)
-
图片标签
在html中显示图片的标签使用的是：
<img/> 单标签
常见属性：
| 属性名称 | 含义 | 作用 |
|---|---|---|
| src | 图片的路径地址 | 表示图片的路径，一般使用当前服务器(只能显示当前项目中的图片)，也可以使用其它服务器，必须加http协议。不能使用本地地址。c:/aaa.jpg |
| width | 宽度 | 如果只设置其中一项，那么图片会等比例缩放 |
| height | 高度 | 如果只设置其中一项，那么图片会等比例缩放 |
| title | 提示文本 | 鼠标悬停在图片上方会出现的文字信息 |
| alt | 替换文本 | 图片加载失败的时候才会出现的文字信息 |
| border | 边框 | 只能定义边框的粗细 |
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.无序列表标签ul 1)无序列表标签是：ul,单独存在没有意义，必须借助于子标签li 2）属性：type表示类型，具有三个属性值： a:disc 实心圆 默认的 b:circle 空心圆 c:square 实心正方形 注意啦：type属性如果使用在ul上面对所有的子标签li都起作用，如果作用在某个li标签上，那么只对当前li标签起作用 -->
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标签 -->
小结：
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.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>
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属性可以实现纵向合并单元格。
<!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.小结
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
8-表单标签(掌握)
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标签的文本中 -->
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:表示隐藏域，页面上确实存在，但是用户看不到。 应用场景：修改商品 删除商品 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>