02 - HTML5知识点汇总二
2016-10-25 本文已影响48人
西巴撸
这篇讲完,HTML的标签就差不多要告一段落了!接下来会是Css的样式
本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!
博客地址 点击跳转
表单标签
专门用来搜集用户信息
在HTML中，标签/标记元素都是指HTML中的标签
例如：<a> a标签/a元素/a标记
- 表单元素其实就是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都是特殊的外观和默认的功能
表单格式：
- 示例代码 :
<form>
<表单元素>
</form>
常见的表单元素
-
input元素，有一个type的属性，这个属性有很多不同类型的取值，取值不同，功能和外观就不同
-
示例代码 :
<form>
<!--明文输入框-->
帐号:<input type="text"/><br/><br/>
<!--暗文输入框-->
密码:<input type="password"><br/><br/>
<!--给输入框设置默认值-->
帐号:<input type="text" value="请输入帐号"/><br/><br/>
密码:<input type="password"><br/><br/><br/>
<!--
单选框
注意点：
1.默认情况下单选框不会互斥，要想单选框互斥，必须给每一个设置一个name属性，然后name值还必须设置相同的值
2.要想让单选框默认选中某一个框，那么给input添加一个checked属性
3.在HTML中如果属性的取值和属性的名称一样，可以只写一个，但是在企业开发中不要省略取值
-->
性别:
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
<input type="radio" name="gender" checked="checked"/>保密<br>
<!--
多选框
-->
爱好：
<input type="checkbox"/>篮球
<input type="checkbox"/>足球
<input type="checkbox"/>羽毛球
<input type="checkbox" checked="checked"/>棒球
</form>
- 图片展示
表单
小Demo
- 示例代码 :
<form action="http://www.520it.com">
帐号:<input type="text" name="username"/><br/><br/>
密码:<input type="password" name="password"/><br/>
<!--
定义普通按钮
可以通过value属性来给按钮指定标题
作用：配合JS完成一些动画操作
-->
<input type="button" value="我是按钮" onclick="alert(123)"/>
<!--
图片按钮
作用：配合JS完成一些动画操作
-->
<input type="image" src="images/register.jpg" onclick="alert(345)">
<!--
重置按钮
作用：用于清空表单中已经填好的数据
注意点：
如果想改重置按钮默认的按钮标题可以通过value属性来修改
-->
<input type="reset" value="清空"/>
<!--
提交按钮
作用：将表单中已经填好的数据，提交到远程服务器
注意点：
要想把表单中填好的数据提交到远程服务器，必须具备两个条件
1.需要给form表单添加一个action的属性，通过这个属性提交到服务器
2.需要给需要提交到服务器的表单元素添加一个name属性
-->
<input type="submit"/>
<!--
隐藏域
作用：配合提交按钮将一下数据悄悄的提交到服务器
Ajax
-->
<input type="hidden" name="cc" value="mimimi"/>
表单
Label标签
- 默认情况下文字和输入框是没有关联关系的，如果想点击文字时让对应的输入框聚焦时，那么就需要把文字和输入框绑定
- 要想让输入框和文字绑定在一起，那么我们可以使用label标签
- 绑定的格式：
1.将文字利用label标签包裹起来
2.给输入框添加一个id属性
3.在label标签中通过for属性和输入框里面的id绑定起来
- 示例代码 :
<form action="">
<!--
这种绑定方式是官方推荐，不论是后面需要聚焦的输入框是不是和前面的文字对应都可以实现
-->
<label for="account">帐号:<input type="text" id="account"><br/></label>
<label for="pwd">密码:<input type="password" id="pwd"/></label>
<!--
虽然把帐号可以包裹在label标签里面也可以实现绑定，但是有局限性
如果后面绑定的输入框不是前面对应的文字的时候就无法实现聚焦
-->
<label>
帐号:<input type="text">
</label>
**label标签**
Datalist标签
datalist标签
- 作用：给输入框绑定带选项
datalist格式
- 示例代码 :
<datalist>
<option>待选项内容</option>
</datalist>
小Demo
- 示例代码 :
请输入你的车型:<input type="text" list="cars">
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
<option>宾利</option>
</datalist>
- 图片展示
**绑定下拉选项**
表单标签3
- 示例代码 :
<form action="">
<!--
可以自动校验驶入的内容是否符合邮箱的格式
-->
邮箱:<input type="email"/>
<!--k
可以自动校验驶入的内容是否符合域名的格式
-->
域名:<input type="url">
<!--
输入框中只可以输入数字
-->
电话:<input type="number">
<!--
可以通过日历来选择时间
-->
时间:<input type="date">
<!--
可以通过取色板来选择颜色
-->
颜色:<input type="color">
<input type="submit">
</form>
**input属性**
select标签
select标签
- 作用：用于定义下拉列表
格式：
- 示例代码 :
<select>
<optgroup label="分组名">
<option>列表数据</option>
</optgroup>
</select>
- 注意点：
1.下拉列表不能输入内容，但是可以直接在列表中选择内容
2.可以通过给option添加一个selected属性来指定列表的默认值
3.可以通过给option包裹一个optgroup标签来给下拉列表中的数据分类
textarea标签
- 作用：定义一个多行的输入框
- 注意点：
**1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度，但是还是可以无限换行**
- 示例代码 :
<select>
<optgroup label="北京">
<option>朝阳区</option>
<option>昌平区</option>
<option>通州区</option>
</optgroup>
<optgroup label="广州">
<option>天河区</option>
<option>越秀区</option>
<option>文明区</option>
</optgroup>
</select>
<hr/>
<textarea name="dd" id="aa" cols="2" rows="5"></textarea>
- 图片展示
**下拉菜单**
小Demo
- 示例代码 :
<form action="http://www.520it.com">
<!--
fieldest标签给表单添加一个边框
lengend标签给表单添加一个标题
-->
<fieldset>
<legend>注册界面</legend>
<p>
<label for="username">帐号:<input type="text" id="username" name="account"></label>
</p>
<p>
<label for="pws">密码:<input type="password" id="pws" name="pwd"></label>
</p>
<p>
性别:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" checked="checked" value="sec">保密
</p>
<p>
<!--注意点
单选框和多选框都需要指定相同的name值
-->
爱好:
<input type="checkbox" name="sport" value="basketball">篮球
<input type="checkbox" name="sport" value="football">足球
<input type="checkbox" name="sport" checked="checked" value="crazy">足浴
</p>
<p>
个人简介：
<textarea role="15" rows="6" name="desc"></textarea>
</p>
<p>
生日:<input type="date" name="birthday">
</p>
<p>
邮箱:<input type="email" name="email">
</p>
<p>
手机:<input type="number" name="phone">
</p>
<input type="submit" value="注册">
<input type="reset" value="清空">
<!--不加value值之前服务器的反馈
account=111&
pwd=222&
gender=on&
sport=on&
sport=on&d
esc=jest+do+it&
birthday=2016-10-03&
email=12345%40qq.com&
phone=12345678910
-->
<!--
除了按钮类型的input标签以外，其他类型的标签都可以通过添加value属性来指定将来提交到服务器的值
-->
<!--加了value值之后服务器的反馈，这才是完美匹配
account=111&
pwd=222&
gender=male&
sport=basketball&
sport=crazy&
desc=just+do+it&
birthday=2016-10-13&
email=87987%40qq.com&
phone=90898787890
-->
</fieldset>
</form>
-
图片展示
表单练习
video和audio
video标签是用来播放视频的
格式：
<video src=""></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第二种格式
- 示例代码 :
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
- 由于视频数据非常重要，所以五大浏览器厂商都不愿意指出别人的视频格式，所以导致了没有一种视频格式是所有浏览器都支持的，所以W3C为了解决这个问题，就推出了第二个video标签的格式
- video标签第二种格式存在的意义就是为了解决浏览器的适配问题
video元素支持三种视频格式，我们可以把这三种格式都通过source标签指定给video标签，那么当浏览器播放视频的时候它就会自动检测一种自己支持的格式来播放 - 注意点：
当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式，但是显然所有浏览器都通过video标签播放视频还有一个前提条件，就是浏览器必须支持H5标签，否则无法播放。如果想实现所有浏览器都可以播放视频，后续会学到js里面的一个框架html5media来实现
- 示例代码 :
<video controls="controls">
<source src="images/sb1.webm" type="video/webm">
<source src="images/sb1.mp4" type="video/mp4">
<source src="images/sb1.ogg" type="video/ogg">
</video>
audio和video的用法相同
详情和概论
利用summary标签来描述概要信息，默认情况是折叠显示，想看详情必须点击。
格式：
<details>
<summary>概要信息</summary>
详情信息
</details>
- 示例代码 :
<details>
<summary>周杰伦</summary>
周杰伦（Jay Chou），华语天王巨星。1979年1月18日出生于台湾省新北市，中国台湾流行乐男歌手、音乐人、演员、导演、编剧、监制、商人。
</details>
- 图片展示
**详情概要**
marquee标签
作用：跑马灯
-
格式：
<marquee>内容</marquee> - 属性：
**1.direction：设置滚动方向left/right/up/down
2.scrollamount:设置滚动的速度，值越大越快
3.loop：设置滚动的次数，默认值是1
4.behavior：设置滚动类型，slide滚动到边界就停止，alternate滚动到边界就弹回**
-
注意点：
marquee不是W3C推荐的标签，在官网也找不到这个标签，但是各大浏览器都支持非常好。 -
示例代码 :
<!--设置滚动方向-->
<marquee>随便写点内容</marquee>
<marquee direction="right">随便写点内容</marquee>
<marquee direction="up">随便写点内容</marquee>
<marquee direction="down">随便写点内容</marquee>
<hr/>
<!--设置滚动速度-->
<marquee scrollamount="1">随便写点内容</marquee>
<marquee scrollamount="10">随便写点内容</marquee>
<hr/>
<!--设置滚动次数-->
<marquee loop="1">随便写点内容</marquee>
<hr/>
<!--设置滚动类型-->
<marquee behavior="slide">随便写点内容</marquee>
<marquee behavior="alternate">随便写点内容</marquee>
<hr/>
<!--图片滚动-->
<marquee>
</marquee>
**跑马灯效果**
HTML中被废弃的标签
为什么html中有一部分标签会被废弃
- 因为当前HTML中的标签只有一个作用，就是添加语义
- 而早期的HTML中的标签有一部分标签是没有语义的，所以这部分标签就被淘汰
- 示例代码 :
<br><hr><font>
<b><u><i><s>这些标签都是用来修改样式的
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中是有特殊含义的，在浏览器中不能直接显示出来，那么这些东西要想显示出来就必须通过字符实体来实现
就是一个空格的意思，有几个 就有几个空格会显示出来，切记最后一定要加分号
小于符号<：< (less than)的缩写
大于符号>：> (greater than)的缩写
版权符号：©
