html select 大数据类型,02 - HTML5知识点汇总二

这篇讲完,HTML的标签就差不多要告一段落了!接下来会是Css的样式

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

表单标签

专门用来搜集用户信息

在HTML中，标签/标记元素都是指HTML中的标签

例如： a标签/a元素/a标记

表单元素其实就是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都是特殊的外观和默认的功能

表单格式：

示例代码 :

常见的表单元素

input元素，有一个type的属性，这个属性有很多不同类型的取值，取值不同，功能和外观就不同

示例代码 :

帐号:

密码:

帐号:

密码:

性别:

男

女

保密

爱好：

篮球

足球

羽毛球

棒球

图片展示

表单

小Demo

示例代码 :

帐号:

密码:

表单

Label标签

默认情况下文字和输入框是没有关联关系的，如果想点击文字时让对应的输入框聚焦时，那么就需要把文字和输入框绑定

要想让输入框和文字绑定在一起，那么我们可以使用label标签

绑定的格式：

1.将文字利用label标签包裹起来

2.给输入框添加一个id属性

3.在label标签中通过for属性和输入框里面的id绑定起来

示例代码 :

帐号:

密码:

帐号:

**label标签**

Datalist标签

datalist标签

作用：给输入框绑定带选项

datalist格式

示例代码 :

待选项内容

小Demo

示例代码 :

请输入你的车型:

奔驰

宝马

奥迪

路虎

宾利

图片展示

**绑定下拉选项**

表单标签3

示例代码 :

邮箱:

域名:

电话:

时间:

颜色:

**input属性**

select标签

select标签

作用：用于定义下拉列表

格式：

示例代码 :

列表数据

注意点：

1.下拉列表不能输入内容，但是可以直接在列表中选择内容

2.可以通过给option添加一个selected属性来指定列表的默认值

3.可以通过给option包裹一个optgroup标签来给下拉列表中的数据分类

textarea标签

作用：定义一个多行的输入框

注意点：

**1.默认情况下输入框可以无限换行

2.默认情况下输入框有自己的宽度和高度

3.可以通过cols和rows来指定输入框的宽度和高度，但是还是可以无限换行**

示例代码 :

朝阳区

昌平区

通州区

天河区

越秀区

文明区

---

图片展示

**下拉菜单**

小Demo

示例代码 :

注册界面

帐号:

密码:

性别:

男

女

保密

爱好:

篮球

足球

足浴

个人简介：

生日:

邮箱:

手机:

图片展示

表单练习

video和audio

video标签是用来播放视频的

格式：

video标签的属性

1.src：用于告诉video标签需要播放的视频地址

2.autoplay：用于告诉video标签是否自动播放视频

3.control：用于告诉video标签是否需要显示控制条

4.poster：用于告诉video标签视频没有播放之前显示的占位图片

5.loop：一般用于做广告视频，用于告诉video标签视频播放完毕之后是否循环播放

6.preload：预加载视频，但是需要注意，这个属性和autoplay相冲，如果设置了autoplay属性，那么preload属性就会失效

7.muted：静音

8.width/height：和img标签的设置方式一模一样

video第二种格式

示例代码 :

由于视频数据非常重要，所以五大浏览器厂商都不愿意指出别人的视频格式，所以导致了没有一种视频格式是所有浏览器都支持的，所以W3C为了解决这个问题，就推出了第二个video标签的格式

video标签第二种格式存在的意义就是为了解决浏览器的适配问题

video元素支持三种视频格式，我们可以把这三种格式都通过source标签指定给video标签，那么当浏览器播放视频的时候它就会自动检测一种自己支持的格式来播放

注意点：

当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式，但是显然所有浏览器都通过video标签播放视频还有一个前提条件，就是浏览器必须支持H5标签，否则无法播放。如果想实现所有浏览器都可以播放视频，后续会学到js里面的一个框架html5media来实现

示例代码 :

audio和video的用法相同

详情和概论

利用summary标签来描述概要信息，默认情况是折叠显示，想看详情必须点击。

格式：

概要信息

详情信息

示例代码 :

周杰伦

周杰伦(Jay Chou)，华语天王巨星。1979年1月18日出生于台湾省新北市，中国台湾流行乐男歌手、音乐人、演员、导演、编剧、监制、商人。

图片展示

**详情概要**

marquee标签

作用：跑马灯

格式：

内容

属性：

**1.direction：设置滚动方向left/right/up/down

2.scrollamount:设置滚动的速度，值越大越快

3.loop：设置滚动的次数，默认值是1

4.behavior：设置滚动类型，slide滚动到边界就停止，alternate滚动到边界就弹回**

注意点：

marquee不是W3C推荐的标签，在官网也找不到这个标签，但是各大浏览器都支持非常好。

示例代码 :

随便写点内容

随便写点内容

随便写点内容

随便写点内容

---

随便写点内容

随便写点内容

---

随便写点内容

---

随便写点内容

随便写点内容

---


**跑马灯效果**

HTML中被废弃的标签

为什么html中有一部分标签会被废弃

因为当前HTML中的标签只有一个作用，就是添加语义

而早期的HTML中的标签有一部分标签是没有语义的，所以这部分标签就被淘汰

示例代码 :

---

这些标签都是用来修改样式的

b(bold) 加粗

u(underlined) 下划线

i(italic) 倾斜

s(strikethrough) 删除线

注意点：

1.以后在开发中不到万不得已，不要用这些废弃的标签

2.如果一定要使用，一般情况下都是用来作为css的钩子来使用

3.这些新增标签替代被废弃的

示例代码 :

strong == b 语义：定义重要性强调的文字

ins(inseted) == u 语义：定义插入的文字

em (emphasized)== i 语义：定义强调的文字

del(deleted) == s 语义：定义被删除的文字

字符实体

在HTML中对空格/回车/tab不敏感，会把多个空格和回车和Tab都当作一个空格来处理

什么是字符实体

在HTML中有的字符是被HTML保留的，有的HTML字符在HTML中是有特殊含义的，在浏览器中不能直接显示出来，那么这些东西要想显示出来就必须通过字符实体来实现

就是一个空格的意思，有几个 就有几个空格会显示出来，切记最后一定要加分号

小于符号

大于符号>：> (greater than)的缩写

版权符号：©

书山有路勤为径 学海无涯苦作舟