前端三剑客 —— HTML (下)

目录

HTML

多媒体标签

Img***

a标签***

第一种用法:超链接

第二种用法:锚点

audio标签

video标签

表格标签

带标题的表格

跨行跨列标签

表格嵌套

列表标签

ul --- 它是无序列表标签

ol --- 它是有序列表

dl --- 它是数据列表

表单标签***

form标签

Input

Select --- 下拉菜单

textarea


HTML

HTML是Hyper Text Markup Language(超文本标记语言),它可以支持超链接、图片、视频、音乐等元素,然后使用不用的标签来对这些元素进行标记。

多媒体标签

Img***

这个标签的作用是在页面中引入图片

标签属性说明:

src:这个属性非常重要,用于指定图片显示的路径,可以是相对路径在链接中以https://是绝对路径(简单来说,在windows中带了盘符,在Linux中以/开头的路径就是绝对路径,其他都是相对路径,相对路径的参考点就是这个对象本身。)

width:用于指定图片显示的宽度,如果指定宽,则会根据宽度来等比例缩放

height:用于指定图片显示的高度,如果指定高,则会根据高度来等比例缩放。注意width和height两个属性不要同时指定,容易变形失帧

border:用于指定图片显示的边框粗细默认是无边框

alt:图片无法正常显示是才会显示该文字内容

title:当鼠标移动到图片上显示时显示的提示信息一般用于引擎优化

a标签***

这个标签是用作链接的标签

第一种用法:超链接

属性说明:

第二种用法:锚点

Demo1.html

Demo2.html

audio标签

这个标签是用于播放音乐的标签,常用支持格式为mp3格式

标签属性说明:

1.controls:用户对播放器进行控制器的,即显示播放按钮

2.src:用于指定音频文件的路径

3.autoplay:指定是否自动播放

4.loop:指定是否循环播放

video标签

标签属性说明:

1.src:指定要播放的视频课程,可以是相对路径,也可以是绝对路径。这个标签所支持的视频格式不多,目前只把持mg4、ogg两张格式

2.controls:显示播放按钮

3.autoplay:自动播放

4.loop:自动循环

5.width:设置播放器的宽度

6.height:设置播放器的高度

表格标签

在我们进行数据展示时,很多时候都会用到表格,特殊是在后台进行数据管理时,或者显示列表数据时,就会用到表格。

要使用表格就需要用到table标签,而表格由行和列组成。

表格的属性说明:

table:用于绘制表格

tr:用于绘制表格的行

td:用于绘制表格的列(单元格)

width:指定表格的宽度,也可以是td的属性

border:指定表格边框的粗细

cellspacing:指定单元格之间的间距

cellpadding:指定单元格边框与单元格中内容的距离

align:用于指定表格的对齐方式:

--- left:左对齐,默认值

--- center居中对齐

--- right:右对齐

align属性可以是table,也可以是tr、td的,如果table的,表示对整个表格有效,如果是tr的,表示对当前行有效;如果是td的,表示只对当前的单元格有效

带标题的表格

使用caption来指定表格的标题,使用thead标签来指定表格的头tbody来指定表格的数据区tfoot指定表格的尾部

td和th的区别:

1.td中的内容是普通格式,而th中的内容是加粗的格式

2.td中的内容是左对齐,而th的内容是居中对齐

<!-- -->   ---   注释标签

跨行跨列标签

相关代码如下:

相关属性说明:

1.colspan:用于指定跨多少,它的值是一个数字

2.rowspan:用于指定跨多少,它的值是一个数字

表格嵌套

代码中,被画了横线的,即为该版本不适用了,淘汰该种写法了。

列表标签

在HTML中,列表标签有以下几种:

ul --- 它是无序列表标签

标签属性说明

ul:用于指定无序列表

li:指定列表中的某一项

type:指定无序列表的格式,有以下几个值(了解):

---disc实心圆形,默认值

---square实心方形

---circle空心圆形

ol --- 它是有序列表

页面显示效果如下:

type属性有以下值:

1.数字,默认值

2.a,以小写字母a开始

3.A,以大写字母A开始

4.i,以罗马字开始

dl --- 它是数据列表

表单标签***

form标签

这个标签是用于表单提交的标签,一般在用户交互时就会用到form标签

页面显示效果如下:

标签属性说明:

1.name:用于给这个表单取一个唯一的名称,便于后续使用js来操作这个表单

2.action 表单提交的地址

3.method 表单提交的方式,有以下两个值:

--- get:表单以get方式提交

--- post:表单以post方式提交

补充get和post提交的区别:

1.get提交的数据会以参数的形式体现在浏览器地址栏中,而post提交1的数据是在请求头中

2.get请求方式提交的数据不能超过4K大小,而post请求提交方式理论上是没有大小限制的

Input

这是表单元素中非常重要一组标称,它有很多类型:

text:最常见的类型,用于提交文本字符串内容

 password:用于提交密码数据

 radio单选按钮

 checkbox多选按钮

 submit提交按钮

 button普通按钮

 image图片按钮

 file文件上传域

Select --- 下拉菜单

标签属性说明

name:表单提交时要获取对应元素值是所需要的属性

value:指定select中每一个元素的值

size:指定select可以看到的元素个数,默认值是1

multiple:表示可以多选

textarea

这个标签是用于输入大文本内容的标签。

标签属性说明:

name:用于获取元素值的属性

cols:用于指定这个文本框的宽度

rows:用于指定这个文本框的高度

  • 36
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值