当前位置: 首页 > news >正文

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.<  &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;

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>

小结:

  1. 下拉列表标签:select,单独存在没有意义,需要借助子标签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 了

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 控件)
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>

http://www.mrgr.cn/news/29274.html

相关文章:

  • SwiftUI开发教程系列 - 第十二章:本地化与多语言支持
  • 【分布式】BASE理论
  • 元器件封装
  • 【Python】轻松实现机器翻译:Transformers库使用教程
  • 源码解析-Spring Eureka
  • echarts-gl 3D柱状图配置
  • JMeter 中使用 Gson 操作请求中的Boby参数
  • 【mechine learning-11-梯度下降的数学公式推导】
  • 直流斩波电路
  • Selenium with Python学习笔记整理(网课+网站)
  • 0基础跟德姆(dom)一起学AI 数据处理和统计分析03-Numpy环境搭建
  • 换脸动漫转真人:ComfyUI无实物Cosplay
  • 养殖场中的分布式光伏发电
  • iptables限制网速
  • Android AlertDialog圆角背景不生效的问题
  • 昆明网站制作流程与设计技巧
  • 【C++】日期类基础题
  • 【C++】探秘二叉搜索树
  • C++速通LeetCode中等第3题-字母异位词分组
  • # windows 运行框输入mrt提示错误:Windows 找不到文件‘mrt‘。请确定文件名是否正确后,再试一次
  • 交流电力控制电路之交流调压电路
  • docker镜像加速器,亲测可用。
  • 基于C++实现(控制台)仓库管理系统
  • AI雷达智能电子名片小程序源码系统 人人可以创建属于自己的名片 带完整的安装代码包以及的搭建部署教程
  • 智能BI项目第三期
  • 简单题28-找出字符传中第一个匹配项的下标(Java and Python)20240918