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:字体样式: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.版权符号:©-->
<!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 | 边框 | 只能定义边框的粗细 |
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>
<!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:跨行 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 -->
<!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"> 按钮标签一般很少使用,提供“普通|重置|提交”功能。
<!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和减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>