HTML（四）

HTML（四）

前言

本篇笔记中会先简单叙述一下flash，因为flash基本被淘汰，不过还是有可能会用上它。

然后会有一个很大的篇幅来记录表单。

flash嵌入

页面嵌入flash的方式有两个，object和embed两种（这两个元素也可以嵌入其他的东西，我们嵌入flash一般使用这两个元素），具体解释如下：

【注】：这两个元素都是可替换元素

object

<object data="" type=""></object>

data表示资源的路径，type表示资源的类型

涉及到了该资源类型需要先了解MIME类型——Multipurpose InternetMailExtensions（多用途互联网邮件类型）

MIME：mime类型中包括一些常见的图片、视频、文件、flash等相关类型

由于最早的互联网作用仅仅是互相发送邮件的作用，所以我们需要告知浏览器及互联网这些类型的资源是什么。

MIME类型中的具体对应原则请查看：

【W3C】：https://www.w3school.com.cn/media/media_mimeref.asp

param

在object中引入了flash小游戏，可以通过param来传递参数（比如音量大小、画质等等）。

<object data="./flash/xxx.swf" type="application/x-shockwave-flash">
	<param name="quality" value="high">
</object>

quality 表示画质

embed

这个元素在使用上与object没有什么区别，只不过想要对其传递参数可以直接卸载embed元素内

<embed quality="high" src="./flash/xxx.swf" type="application/x-shockwave-flash">

在embed元素中，src表示资源位置。

object和embed的具体差别

• 主要体现在浏览器兼容性当中。

  一般来说浏览器基本可以兼容object，如果不能兼容object的话可以使用embed来显示flash。所以我们一般为了获得flash资源更好的兼容性会使用以下写法：

    <object data="./flash/example.swf" type="application/x-shockwave-flash">
        <param name="quality" value="high">
        <embed src="./flash/xxx.swf" type="application/x-shockwave-flash">
    </object>

说明：浏览器解析页面的时候首先读到object，如果object可以识别，则embed是不可以作为object的子元素存在的，所以会被屏蔽；如果object无法识别，则浏览器跳过它，继续读取，直到读取到embed中。

表单元素

表单元素是一个统称，属于一个系列的元素，主要用于收集用户数据

input元素

该元素的含义是输入框(空元素)

<input type="">
/*type表示输入框输入的数据*/

该元素有多个属性，常见属性如下；

• type：输入框类型。例如：text、file等；

• value：输入框默认值；

• placeholder：显示提示的文本，文本框没有内容时显示。

  【注】：之前需要用JS来完成文本框中输入文字后覆盖默认值的功能；现在使用HTML元素中的属性即可；现在有些系统也可能还在使用JS完成。

  JS完成该功能可能会出现相关Bug，如果输入的值与placeholder的默认值一样，则不会覆盖默认值。即，鼠标再次移入后，之前输入的值会消失。

type属性的常见属性值

• text：文本框，很常见。

• password：表示密码框，会把输入的数据替换为字符。（没有加密等任何安全性，仅防止在你输入密码时，有人猥琐的窥屏）。

• date：日期选择框（该属性值具有兼容性问题，有些浏览器不支持）。

• search：搜索框，移动端常用（移动端使用搜索框的时候，输入法键盘的换行键会变为搜索操作）；WEB端使用的时候仅仅是在右边出现一个重新输入的x。该属性值同样存在兼容性问题。

• range：表示一个滑块，其中靠min和max来设置滑块的取值区间（各位可以联想一下滑动滑块对准拼图的验证是如何做的），数值的读取和显示需要使用JS。该属性值同样存在兼容性问题。

• color：自定义颜色的功能，自己试一试就知道了。需要JS来读取。

• number：只能输入数字的文本框，输入其他的不行。（该属性输入HTML5新加入的元素属性值，兼容性不好说），可以通过设置min和max来设置输入框中的最小值与最大值。（自己试一试，会发现一点点奇怪的现象）。还可以通过step来设置每次增加或减少的数值。

• checkbox：多选框，自己试试。

• radio：单选框，自己试去

  单选框有一个小小的问题，没有name属性对其进行分组的话，会发现单选框也可以全都选中，好比性别又男又女

• reset：重置输入

• button：普通按钮

• submit：提交按钮

  **以上有些属性值需要配合form表单显示，有些需要JS或者后端来实现操作。**根据前端编程规范，做静态页面的时候尽量不要涉及submit，reset等效果，尽量交给JS来完成（有些比较老的项目还是会使用这些，随机应变吧）。

• 补充一个属性值（textarea）：表示多行文本框；

  cols横向有多少个文字（英文）

  rows纵向有多少个文字（英文）

  如果纵向文字超出限制，就会产生滚动条。

  建议不使用cols和rows，控制区域大小使用CSS

  该元素中没有空白折叠

select元素

该元素表示下拉列表元素，与option元素一起使用（也只能他们俩一起使用）

<select>
    <option selected=”selected“>第一个选择</option>
    <option>第二个选择</option>
</select>
/*设置了一个下拉列表，并默认选中《第一个选择》*/

下拉列表中可以设置分组，帮助更好的选择。

        <select name="" id="">
            <optgroup label="进狱系呕像">
                <option value="">吴签</option>
            </optgroup>
            <optgroup label="人弃作（读一声）品">
                <option value="">大碗宽面</option>
            </optgroup>
        </select>
/*分组的数据是不能选择的，评论区里可以写上紧跟时事*/

注意事项在代码块的注释里，建议只看前半句

同时，select元素也可以多选：比较low，知道有这么个情况就好

        <select multiple=“multiple” name="" id="">
            <optgroup label="进狱系呕像">
                <option value="">吴签</option>
            </optgroup>
            <optgroup label="人弃作（读一声）品">
                <option value="">大碗宽面</option>
            </optgroup>
        </select>
/*在select元素中加入一个布尔值元素multiple即可*/

按钮元素（button）

前面记录input的时候有说过按钮的相关属性值，现在具体说明按钮这个元素。按钮（button）在HTML4就已经出现了，十多年的老元素，多数网站都在用这个。

<button>
    中间可以加多种元素，例如：文本、图片、视频等
</button>
/*默认属于提交按钮：submit，可以通过JS来修改具体功能*/

button常见属性

• button：普通按钮
• submit：提交按钮
• reset：重置按钮

button比较灵活，所以一般按钮都会选择button来操作

表单状态

readonly

表示该表单是否只读，该属性是布尔属性——不会改变表单的显示状态

disabled属性

表示该表单是否禁用，该属性是布尔属性——会改变表单的显示状态。

配合表单元素使用的元素

label

通常配合单选和多选来使用。

显式关联

        <input id="rad-man" name="gender" type="radio">
        <label for="rad-man">男</label>
        <input id="rad-women" name="gender" type="radio">
        <label for="rad-women">女</label>

• label通过for属性关联到某一个表单元素（与id相对应）。

隐式关联

        <label for="rad-man">
            <input id="rad-man" name="gender" type="radio">
            男
		</label>
        <label for="rad-women">
            <input id="rad-women" name="gender" type="radio">
            女
		</label>

• 直接使用label将单选框和文字包含起来

说明：以上两种样式有什么作用及区别，

作用就是单纯的点击文字也可以选中对应的按钮。

区别是显式关联时间label与单选框关联；而隐式关联是将单选框与文字放在一个空间内。具体逻辑不太一样。仅做了解即可。

datalist

该元素的含义是数据列表，该元素本身不会显示到页面上，通常用于和普通文本框配合使用——仅做了解即可。

        请输入你常用的浏览器
        <input list="userAgent" type="text">
        <datalist id="userAgent">
            <option value="Chrome">谷歌浏览器</option>
            <option value="IE">IE浏览器</option>
            <option value="Opera">欧朋浏览器</option>
        </datalist>

• datalist默认不显示在页面；
• datalist设定id，然后在文本框添加list属性，并设定为datalist的id；
• 这样子就可以在点击文本框的时候有下拉提示（有点像百度搜索那种，不过不是一个东西）。

form

通常将表单元素放入form元素中，作用是当提交的时候，会将form元素内部的表单内容一合适的方式提交服务器——这个大家都用过，不做赘述。

【注】：form元素对开发静态页面没有意义

fieldset

表示表单分组：语义上也是如此

其中有一个子元素，legend表示表单分组信息。

	<form action="">
        <fieldset>
            <legend>第一个分组</legend>
            <input type="text">第一个<br>
            <input type="text">第二个<br>
        </fieldset>
        <fieldset>
            <legend>第二个分组</legend>
            <input type="text">第三个<br>
            <input type="text">第四个<br>
        </fieldset>      
    </form>

具体样式如下图：

• 红色框选的是表单分组信息，两个黑框表示分组的样式
• 表单分组是带有语义的，分组的样式可以用CSS实现，但是分组最好要用这种（语义化的碎碎念）。

总结

本篇笔记记录的知识点相对简单，就是数量多（而且全是重点），其中没有什么特别需要总结的，有些概念需要加深理解——语义化、可替换元素：

• 语义化不做过多阐述，不过本篇笔记中记录的相关元素大多数都带有特定样式，而且我们都是用他的默认样式，这个并不违反语义化的概念。因为我们需要使用该元素的语义化，而恰巧他的样式对我们有帮助，所以我们就会使用他们；
• 可替换元素：书接上一条，可替换元素中的相关属性和显示的样式属于设定好或系统本身存在的样式，例如：日期（data），他的样式是计算机系统的日历表，我们无法更改样式。这一点就可以加深可替换元素的理解，可替换元素是无法更改元素内部显示的东西，从之前的图片、视频到现在的日历、文本框，我们只能使用默认样式，所以这就是可替换元素的本质。