<HTML学习笔记>

•最重要的表单元素是<input>元素，<input>可以根据不同的type属性变化为多种形态：

*<select>元素定义下拉列表,和<datalist>标签区分

*<option>元素定义待选择项；可以通过selected属性预选择一些属性。

*<textarea>定义多行输入文字字段

*<button>元素定义可点击按钮实例：<button type="button" onclick="alert('hello world')">点击我！ </button>

*<datalist>元素为<input>元素规定了预定义选项列表，用户会在输入数据时看到预定义下的选项。注意：<input>元素的list属性必须引用<datalist>的ID属性

*<input type="password">定义密码段

*<input type="submit">定义提交按钮

*<input>元素用于<form>标签内

*<input type=ridio> 定义单选按钮

*<input type="checkbok">定义多选按钮

*使用<input type> 元素都需要命名

*<input type="month"> 允许用户选择月份和年份；< input type="week">是允许用于选择周和年；<input type="time"> 允许用户选择时间（无时区）；<input type="datetime-local"> 允许用户选择日期和时间（无时区）

*<input type="email"> 用于应该包含电子邮件地址的输入字段

*<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）;<input type="tel"> 用于应该包含电话号码的输入字段。

*<input type="url"> 用于应该包含 URL 地址的输入字段,浏览器会自动验证用户是否输入了正确的URL地址

*<input type="number">用于数字段，用 min mix进行限制；<input type="date">提供日期编辑 :可以用min max限制；<input type="color"> 使用会出现颜色选择器；<input type="range"> 用于应该包含一定范围内的值的输入字段，输入字段可显示为滑块控件。

input 元素属性：

*value 属性规定输入字段的初始值

*在input元素内添加readonly，表示输入字段只读 (不能修改)，readonly 属性不需要值，直接输入即可；disabled 属性规定输入字段是禁用的，被禁用的元素是不可用和不可点击的，也不会提交，和readonly属性一样，只需要输入即可，

autofocus 属性是布尔属性，如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点（同样只需输入即可）

*size 属性规定输入字段的尺寸,改变输入框的长短，maxlength 属性规定输入字段允许的最大长度（限制输入字数）

*autocomplete 属性规定表单或输入字段是否应该自动完成,当自动完成开启，浏览器会基于用户之前的输入值自动填写值

*novalidate 属性属于 <form> 属性，novalidate填写在form属性中，表示不对输入数据进行验证

*提示：如需引用一个以上的表单，请使用空格分隔的表单 id 列表;如：<form id="form1">

*formaction 属性规定当提交表单时处理该输入控件的文件的 URL(formaction对于一个URL，用于提交按钮的链接)。

*formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。

*formnovalidate属性如果设置，则规定在提交表单时不对 <input> 元素进行验证。

*formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。

*height 和 width 属性规定 <input> 元素的高度和宽度。（把点击按钮设置为图像，必须对图像的height和width属性进行设置）

*list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。

*min 和 max 属性规定 <input> 元素的最小值和最大值

*multiple 属性是布尔属性,如果设置，则规定允许用户在 <input> 元素中输入一个以上的值

*<input type="file">这个属性用于上传文件

*pattern 属性规定用于检查 <input> 元素值的正则表达式。

*placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述），就是输入框为输入器内有的文字

*required 属性是布尔属性，提交前必须输入字段

*step 属性规定 <input> 元素的合法数字间隔，示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等与min max组合使用

•无序列表:<ul>标签；有序列表:<ol>标签；定义列表由<dl>标签开始，每个定义列表由<dt>;注释列表由<dd>开始。定义列表不仅是一列项目，而是项目及其注释的集合。

•dvi属于块级元素，HTML的分类容器。span的是行内元素

*dvi如果布局在<style>标签内用.号命名，那么在<body>标签内的dvi后面需要加class，用#命名，则需要加id。

•使用target属性必须要命名 name=" " 用于改变链接的打开方式。

•<head>元素是所有头部元素的容器，<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表、提供元信息，等等。

*<base><link><meta><script>以及 <style>都可以添加到<head>标签内

•<title>元素在所有HTML/XHTML文档中都是必须的。

*title元素能够：定义浏览器工具栏中的标题

*提供页面被添加到收藏夹时的显示标题

*显示在搜索引擎结果中的页面标题

•<form>定义HTML表单，HTML表单用于收集用户输入。

*<form>标签应该放在<body>标签内

插入音频：

*<object> 的作用是支持 HTML 助手（插件）

*<embed> 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

*<object> 标签也可以定义外部（非 HTML）内容的容器。

*<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。可以添加<audio> 和<embed>两种播放标签，HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。实例：

</audio>

*使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 实例：

<!DOCTYPE html>
<html>
<body>

</body>
</html>

插入视频：

可以使用 <object> 标签

可以使用 <video> 标签

最好的 HTML 解决方法

HTML 5 + <object> + <embed>：

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素                            *也可以把视频上传到优酷，然后加入这样的代码

*也可以把视频上传到优酷，然后加入这样的代码：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

posted @ 2016-09-08 10:57 自学前端开发阅读(207) 评论(0) 收藏举报

刷新页面返回顶部

<HTML学习笔记>

•最重要的表单元素是<input>元素，<input>可以根据不同的type属性变化为多种形态：

input 元素属性 ：

插入音频：

插入视频：

公告

input 元素属性：