一、随课笔记

5.27 接上篇表单内容

---

Form表单（下）

下拉列表：

select属性：

name:此列表框的名字        multiple：多选，不用赋值           size :规定下拉列表中可见选项的数目(显示几行)  

disabled:规定禁用该下拉列表

<optgroup label="北京"></optgroup>——分块分类

option属性：

selected ：用来指定默认的选项          

value： 用来给<option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select>区域的名字的value 属性来获得该区域选中的数据项的

多行文本框：

<textarea></textarea>

属性： cols ：这文字区块的宽度 rows ：这文字区块的行数

e.g.<textarea name="" id="" cols="30" rows="10"></textarea>

Label标签：

一般和radio、checkbox类型一起使用。提升用户体验，没必要只点小圈或框

<fieldset>元素集：

fieldset 元素可将表单内的相关元素分组，通常和legend标签一起用，

legend标签定义了fieldset的提示信息，fieldset是块级元素。

表单域：

表单H5 input新增：

电子邮件类型 <input type="email"/>     注意：输入的内容中必须包含"@"，"@"后面必须具有内容

搜索类型<input type="search"/>

URL类型<input type="url"/>     注意：输入的内容中必须包含"http://"，后面必须有内容

颜色类型 <input type="color"/>

数字类型<input type="number"/>

属性：min：当前域能接受的最小值     max：当前域能接受的最大值     step：决定了域所接受值递增或递减的步长，默认为1

范围类型<input type="range" min="0" max="100" value="80"/>

属性：min：范围的下限值     max：范围的上限值     step：声明该值递增或递减的步长     value：设置初始值

日期类型 <input type="date" />   周类型<input type="week" />  月份类型 <input type="month" />

表单H5 属性新增：

placeholder 作用：默认提示 语法：<input type="text" placeholder="请输入用户名"/>

multiple 作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用 语法：<input type="email" multiple/>

autofocus 作用：自动获取焦点 语法：<input type="text" autofocus/> required 作用：防止域为空提交表单时 语法：<input type="text" required/>

minlength和 maxlength 作用：定制元素允许的最小字符数和最大字符数 语法：<input type="text" minlength="6" maxlength="18"/>

min和max 作用：定制元素允许的最小数字和最大数字 语法：<input type="number" min=”0” max=”100”/>

---

H5新增元素

div标签与span标签

对于块级元素与行内元素的回顾（见002）

新增的结构标签

<header>...</header>     头部         <nav>...</nav>    导航

<section>...</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分

<aside>...</aside>      侧边栏        <footer>...</footer>    页脚

<article>...</article>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

 

<figure>    用于图片组合

<img src="img.gif" alt="figure标签"  title="figure标签" />     <figcaption>figure的标题</figcaption> </figure>（dd）

 

<details> 标签用于描述文档或文档某个部分的细节

IE不支持 <details> 标签

<details>     <summary>details中的标题</summary>     <p>详细的内容</p> </details>

 

 <mark>  </mark>     定义带有记号的文本，它会给你要突出显示的文本下加个背景色。 

 

<meter> </meter>标签  定义度量衡。仅用于已知最大和最小值的度量。

low:最低临界点 high：最高临界点 <meter min="0" max="100" value="81" low="20" high="80"></meter>

 

<progress></progress>标签 定义运行中的进度（进程） <progress max="100" value="20"></progress>

max：定义完成值 value：定义当前值

 

<datalist></datalist>标签 定义选项列表,与 input 元素配合使用该元素，来定义 input 可能的值

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

一定使用 input 元素的 list 属性来绑定 datalist。

➡️

 

<video> </video>标签 <video> 标签定义视频，比如电影片段或其他视频流 <video src="movie.mp4" controls>  </video>

mp4 ogg 移动端 webM 高清

 

<audio></audio>标签 <audio> 标签定义声音，比如音乐或其他音频流 <audio src="someaudio.mp3">  </audio>

OGG MP3 WAV格式支持 loop可加=‘次数’

audio/video可用<source></source> 标签 <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

自动兼容可用格式

<audio controls>     

 <source src="horse.ogg" >      

 <source src="horse.mp3" >        

 Your browser does not support the audio element.

</audio> 

 

embed嵌入：

<embed/>标签定义嵌入的内容，比如插件，也可以用来嵌入声音 <embed>    标签必须有 src 属性

解决服务器上传大文件太贵问题

常用Youku等视频网站外链——网页-分享-embed连缀的分享即可

 

canvas画布：

<canvas> </canvas> 标签 canvas只是个容器，你可以通过控制坐标在canvas上绘制图形。一般配合js使用能实现非常复杂的动画效果

 

---

二、记

emmm看这时间的话py只能开个头了吧

---

倾听每个人的意见，可是只对极少数人发表你的看法。接纳每个人的批评，可是保留你自己的判断。

——莎士比亚