今天学习的内容主要包含了四大块：
- 表单，以及一堆标签；
- video/audio
- marquee跑马灯标签
- 废弃的标签
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
1.表单，以及一堆标签
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单练习</title>
</head>
<body>
<form action="http://www.520it.com">
<!--
fieldset标签：可以给表单添加一个边框
legend标签：可以给边框指定一个标题
-->
<fieldset>
<legend>注册界面</legend>
<p>
账号: <input type="text" name="account">
</p>
<p>
密码: <input type="password" name="pwd">
</p>
<p>
性别:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" checked="checked" value="yao">保密
</p>
<p>
<!--注意点:
单选框和多选框的name都需要指定相同的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 cols="30" rows="10" 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>
<p>
<input type="submit" value="注册">
<input type="reset" value="清空">
</p>
</fieldset>
</form>
</body>
</html>
例子中出现的标签：
1.fieldset+legend：给表单添加一个外框，同时再给表单添加一个标题。
2.input根据type的不同，可以是：
- text：文本输入框；
- password：暗文输入框，比如密码输入框的类型；
- radio：单选框，比如性别的选择，通常和name属性配合使用；
- checkbox：多选框，比如兴趣爱好；
- date：日期；
- email：自动识别输入的内容是不是email，如果不是则报错；
- number：强制输入的内容只能是数字，配合maxlegend=“数字”使用；
- submit：用于将表单中的内容提交到对应的网址，和form表单的action（填写url）配合使用。
- reset：将表单中填写的内容全部清空。
3.name：通常一个input按钮就会带上一个name标签，这样在以后ajax使用中会知道它是用于和服务器做交互使用的。通常比如这个栏是用于输入名称，那么name="acount"，如果是密码，那么name="password"，目的是规范，好识别。
4.value：比如上面的性别选项中，第一项是男，那么它的value就会默认添加male 的名称，最后配合name，就会提交给服务器，变成gender=male，用于储存/验证等。
5.checked：格式就是checked=“checked”，目的是在多选项中提前选中一个，作为提示用户这里可以选择选中。和select一样意思，只是使用的配合标签不同。
6.textarea：大面积的输入内容，它常用的属性有这些： - cols：横排输入个数；
- rows：竖排输入个数；
- resize：通过css设置成none，那么表格大小将不能在浏览器中被拖动大小；
7.label：通过包裹文本框前面的文字，让文字与右边对应的文本框产生，关联，当我们点击汉字的时候，也能激活文本框，用于提升用户体验。格式比如： <label for="zhanghao">账号：</label><input type="text" id="zhanghao" name="account">
8.按钮换背景：通过css实现，格式：background: url(图片路径);
9.details:详情与概要，比如一个人然后一堆简介，summary里面只是填写人名，详细内容填写人的生平事迹。当我们点击到人旁边的箭头的时候，详细信息才会显示出来。格式：
<details>
<summary>概要信息</summary>
详情信息
</details>
10.datelist：用户可以自己输入内容，也可以输入提供的库里面的内容。格式如下：
<datalist>
<option>待选项内容</option>
</datalist>
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…·…·…·…·…
2.video/audio:
video：格式一：<video src=""></video>
video：格式二：
<video>
<source src="" type="">
<source src="" type="">
</video>
video标签属性：
- src: 用于告诉video标签需要播放的视频地址
- autoplay: 用于告诉video标签是否需要自动播放视频
- controls: 用于告诉video标签是否需要显示控制条
- poster: 用于告诉video标签视频没有播放之前显示的占位图片
- loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
- preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
- muted:静音
- width/height: 和img标签中的一模一样
audio与vidio使用异同点：
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…·…·…·…·…
3.marquee：跑马灯
格式：
<marquee>内容</marquee>
属性：
- direction: 设置滚动方向 left/right/up/down
- scrollamount: 设置滚动速度, 值越大就越快
- loop: 设置滚动次数, 默认是-1, 也就是无限滚动
- behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
注意：W3C不推荐，但是浏览器厂商都完美支持这个标签。这类标签现在使用的比较少，主要现在的设计都讲究简洁，用这个标签有点花哨。
4.被废弃的标签：
废弃他们的原因主要是为了让语义和修饰分家：
<b> <u> <i> <s>以上标签都是没有语义的,都是用来修改样式的
b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本天津下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的
以前：
<b>我是文字</b>
<u>我是文字</u>
<i>我是文字</i>
<s>我是文字</s>
现在：
<strong>我是文字</strong>
<ins>我是文字</ins>
<em>我是文字</em>
<del>我是文字</del>
实际上：更多的是通过css来实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>40-HTML中被废弃的标签</title>
<style type="text/css">
.one {
font-weight: bold;
}
.two {
text-decoration: underline;
}
.three {
font-style: italic;
}
.four {
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="one">我是文字</p>
<p class="two">我是文字</p>
<p class="three">我是文字</p>
<p class="four">我是文字</p>
<p>原价 <del>999</del>，现价 <ins>9.9</ins></p>
</body>
</html>
这里的font在css中的使用：可以分开写，也可以连写：
font的属性：
- style
- weight
- size
- family
1.style：规定文字样式的属性
格式：font-style: italic;
取值：
normal ： 正常的， 默认就是正常的
italic : 倾斜的
快捷键：
fs font-style: italic;
fsn font-style: normal;
2.weight：规定文字粗细的属性
格式： font-weight: bold;
单词取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线， 默认就是细线
数字取值：
100-900之间整百的数字
快捷键
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
3.size：规定文字大小的属性
格式：font-size: 30px;
单位：px（像素 pixel）
注意点： 通过font-size设置大小一定要带单位， 也就是一定要写px
快捷键
fz font-size:;
fz30 font-size: 30px;
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…·…·…·…·…
4.family：规定文字字体的属性
格式：font-family:"楷体";
注意点：
1.如果取值是中文， 需要用双引号或者单引号括起来
2.设置的字体必须是用户电脑里面已经安装的字体
快捷键
ff font-family:;
缩写格式：font: style weight size family;
注意点：
1.在这种缩写格式中有的属性值可以省略
sytle可以省略
weight可以省略
2.在这种缩写格式中style和weight的位置可以交换
3.在这种缩写格式中有的属性值是不可以省略的
size不能省略
family不能省略
4.size和family的位置是不能顺便乱放的
size一定要写在family的前面, 而且size和family必须写在所有属性的最后
网友评论