HTML（下）

最新推荐文章于 2022-04-10 18:43:47 发布

Smile96love

最新推荐文章于 2022-04-10 18:43:47 发布

阅读量155

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Smile96love/article/details/97285125

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.表单（name属性必不可少）：<input type="text(文本)/radio(单选)/submit(提交)/select(下拉列表)/textarea（文本域）/button(按钮)、datalist(预定义选项的下拉列表)/keygen()/output()/"password(密码)/checkbox(复选框)/number(包含数字值的输入字段)/date、datetime、datetime-local<无时区>、month、week(日期选择器)/time(时间选择器)/color(颜色选择器)/range(滑块控件)/email(电子邮件)/search(搜索字段)/tel(电话号码)/url(网址)/image(图片)/file(文件)">

表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符：

    <form>
    First name:<br>
    <input type="text" name="firstname">
    <br>
    Last name:<br>
    <input type="text" name="lastname">
    </form>

单选按钮允许用户在有限数量的选项中选择其中之一：

        <form>
        <input type="radio" name="sex" value="male" checked>Male
        <br>
        <input type="radio" name="sex" value="female">Female
        </form>

向表单处理程序（form-handler）提交表单的按钮，表单处理程序通常是包含用来处理输入数据的脚本的服务器页面，表单处理程序在表单的 action 属性中指定，点击提交，表单数据会被发送到名为 demo_form.asp 的页面，method 属性规定在提交表单时所用的 HTTP 方法（GET<可见，不安全> 或 POST<不可见，安全>），如果要正确地被提交，每个输入字段必须设置一个 name 属性：

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

fieldset—组合表单，legend— fieldset标题。效果如下：

<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

在这里插入图片描述
表单本身所有属性：

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

option定义待选择的选项，列表通常会把首个选项显示为被选选项。能够通过添加 selected 属性来定义预定义选项：<option value="fiat" selected>Fiat</option>

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

datalist为 input规定预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表，input的 list =datalist=的 id ,但Safari 或 IE9（以及更早的版本）不支持 datalist 标签：

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

在这里插入图片描述
number能够对数字做出限制，根据浏览器支持，限制可应用到输入字段：

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

效果如下：
在这里插入图片描述
限制属性如下，例如：

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>`

disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。

range—滑块控件，效果如下：
在这里插入图片描述

email—电子邮件，可在被提交时自动对电子邮件地址进行验证，某些智能手机会识别 email 类型，并在键盘增加 “.com” 以匹配电子邮件输入。

tel—电话号码，只有 Safari 8 支持。

value 属性规定输入字段的初始值
maxlength 属性规定输入字段允许的最大长度
autocomplete 属性规定表单或输入字段是否应该自动完成。=off/on(基于用户之前的输入值自动填写值)
autofocus 属性是布尔属性，如果设置，则规定当页面加载时inpu自动获得焦点。
form 属性规定input所属的一个或多个表单，如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

一个表单两种提交方式:
formaction 属性规定当提交表单时处理该输入控件的文件的 URL,覆盖 form的 action 属性,适用于 type=“submit” 以及 type=“image”。=网址
formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单），覆盖 form的 enctype 属性，适用于 type=“submit” 以及 type=“image”。
formmethod，get/post
formnovalidate ，不验证
formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。
multiple 属性是布尔属性，如果设置，则规定允许用户在 input中输入一个以上的值，适用于输入类型：email 和 file。

pattern 属性规定用于检查 input值的正则表达式，适用于以下输入类型：text、search、url、tel、email、and password。请使用全局的 title 属性对模式进行描述以帮助用户。效果如下：[A-z]{3}只能包含三个字母的输入字段（无数字或特殊字符）在这里插入图片描述
placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）,该提示会在用户输入值之前显示在输入字段中,适用于以下输入类型：text、search、url、tel、email 以及 password。—占位符文本

required 属性是布尔属性,如果设置，则规定在提交表单之前必须填写输入字段,适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

2.图形：
canvas在网页上绘制图形：创建 Canvas ：<canvas id="myCanvas" width="200" height="100"></canvas>→通过 JavaScript 来绘制：

<script type="text/javascript">
var c=document.getElementById("myCanvas");//使用 id 来寻找 canvas 元素
var cxt=c.getContext("2d");//创建 context 对象,getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cxt.fillStyle="#FF0000";//颜色
cxt.fillRect(0,0,150,75);//形状、位置和尺寸：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)
</script>

例子：
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
3.SVG 指可伸缩矢量图形（后期另外学）
Canvas 与 SVG 的比较：

Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

多媒体：

在这里插入图片描述

WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。

MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。

辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件，可用于播放音频和视频（以及其他）。辅助程序是使用 object标签来加载的：
使用 QuickTime 来播放 Wave 音频：

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="bird.wav" />
<param name="controller" value="true" />  //<param>	定义对象的参数。
</object>

使用 Flash 来播放 SWF 视频：

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>

使用 Windows Media Player 来播放 WMV 影片
下面的例子展示用于播放 Windows 媒体文件的推荐代码：

<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%"
 height="100%" autostart="true" showcontrols="true" 
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

音频：
embed：<embed height="100" width="100" src="song.mp3" />(属性src)
在这里插入图片描述
object：<object height="100" width="100" data="song.mp3"></object>（效果同embed,属性data）
audio：

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

在这里插入图片描述
注：可同时使用两种方式，以防万一

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

雅虎媒体播放器：

<!DOCTYPE html>
<html>
<body>

<p><a href="/i/song.mp3">播放 mp3</a></p>
<p><a href="/i/bird.wav">播放 wav</a></p>

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

</body>
</html>

视频：
video：

   <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>

把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

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

使用超链接：<a href="movie.swf">Play a video file</a>

Smile96love

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML（下）

1.表单（name属性必不可少）：<input type="text(文本)/radio(单选)/submit(提交)/select(下拉列表)/textarea（文本域）/button(按钮)、datalist(预定义选项的下拉列表)/keygen()/output()/"password(密码)/checkbox(复选框)/number(包含数字值的输入字段)/date、datetime...
复制链接

扫一扫