html5基础知识

摘要:
Html5内容&lt---------------------<lin3615<-----------------------&书信电报;ppp<hhhhh<hhhh&lt------------------<//的详细说明t、 zoukankan.com/myvoice.ogg“controls=”控制“>&lt

html5

<!DOCTYPE>标签
html5只有一种,即:
<!DOCTYPE HTML>

示例:
<!DOCTYPE html>
<html>
<head>
<title>html5_title</title>
</head>
<body>
html5内容
</body>
</html>
---------------------
<a>标签
download属性,下载指定的文件(lin.gif),且下载的文件名为 lin3615.gif
示例:
<a href="http://t.zoukankan.com/images/lin3615.gif" download="lin3615.gif">
<img src="http://t.zoukankan.com/lin.gif" />
</a>

media属性

type属性,规定目标文档的MIME类型
示例:
<a href="http://www.lin3615.net/" type="text/html">lin3615</a>
-----------------
<article>标签
规定独立的自包含的内容(只是一种标记而已)
示例:
<body>
<article>
<h1>hhhh</h1>
<p>pppp</p>
</article>
</body>
---------------------
<aside>标签
定义其所处内容之外的内容(一种标记而已)
示例:
<body>
<p>ppp</p>
<aside>
<h3>hhhhh</h3>
hhhhh 的详细解释
</aside>
</body>
-----------------
<audio>标签
定义声音内容
示例:
<body>
<audio src="http://t.zoukankan.com/myvoice.ogg" controls="controls">
当浏览器不支持时将显示的内容
</audio>
</body>
其中属性列表:
autoplay="autoplay"
则音频在就绪后马上播放

controls="controls"
则向用户显示控件,如播放按钮

loop="loop"
则每当音频结束时重新开始播放

muted="muted"
视频输出应该被静音

preload="preload"
音频在页面加载时进行加载,并预备播放,如果用 "autoplay",则 preload 被忽略

src="http://t.zoukankan.com/url"
要播放的音频的 url
---------------------
<button>标签,建议用 input代替
属性列表
autofocus="autofocus"
当页面加载时按钮应当自动获得焦点

form="form_name"
按钮属于一个或多个表单

formaction="url"
覆盖 form元素的 action属性,与 type="submit"配合使用

formenctype=""
覆盖form元素的 enctype属性,与 type="submit"配合使用

formmethod="get" / "post"
覆盖 form元素的 method属性,与 type="submit"配合使用

formnovalidate="formnovalidate"
覆盖form元素 novalidate属性,与 type="submit"配合使用

formtarget="_blank/_self/_parent/_top"
覆盖 form元素的 target属性,与 type="submit"配合使用
--------------------
<canvas>标签(大学问)
用来定义图形,只是一个图形容器,必须使用脚本来绘制图形
<body>
<canvas id="myCanvas">
浏览器不支持
</canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx = canvas.getContent('2d');
ctx.fillStyle='#ff0000';
ctx.fillRect(10,10,80,100);
</script>
</body>
-------------------------
command命令按钮,只有ie9支持
------------------------
<datalist>
定义下拉列表,与 input 结合,datalist及其选项不会被显示出来,仅仅是合法的输入值列表,使用 input元素的 list属性来绑定 datalist
示例:
<body>
<input list="cars" />
<datalist id="cars">
    <option value="1111"></option>
    <option value="2222"></option>
    <option value="3333"></option>
</datalist>
</body>
---------------------
<dialog open="open">标签
用户交互的,只有 safari/chrome支持
-------------------
<embed>标签
定义外部交互内容或插件
属性表:
height: 设置嵌入内容高度
src:url 嵌入的内容 url
type:定义嵌入内容的 类型
设置嵌入内容宽度
示例:
<body>
<embed src="http://t.zoukankan.com/ok.swf" />
</body>
-------------------
<figure>  <figcaption>标签
<figure>:定义媒介内容的分组,以及其标题,与 figcaption 定义标题结合
<figcaption>:定义 figure元素的标题, figcaption 元素应该被置于 figure 元素的第一个或最后一个子元素的位置
示例:会缩进
<body>
<p>ppppp</p>
<figure>
  <figcaption>标题</figcaption>
    <img src="http://t.zoukankan.com/lin3615-p-3947208.html" />
</figure>
</body>
----------------
<footer>标签
定义 section 或 page 的页脚,文档中的页脚部分,里面应该包含别的元素
示例:
<body>
<footer>
<p>这是页脚部分</p>
</footer>
</body>
--------------------
<form> 标签
属性:
autocomplete="on" / "off" 规定是否启用表单自动完成功能
novalidate="novalidate":如果使用该属性,则提交表单时不进行验证
----------------
<header>标签
定义 section 或 page 的页眉
示例:
<body>
<header>
<p>this is header content</p>
</header>
</body>
------------------
<input>
属性:
autocomplete=on/off 规定是否使用输入字段的自动完成功能,默认 on
<body>
<form autocomplete="on">
<input type="text" name="xx" value="" />
<input type="email" name="email" autocomplete="off" />
<input type="submit" />
</form>
</body>
当在 email 中输入不合法的 email后,点击提交,会提示要求输入正确的 email,不让提交

autofoucs="autofocus":规定输入字段在页面加载时是否获得焦点

form="formid":规定输入字段所属的一个或多个表单
as:(t2也作为 form表单提交的一个元素值)
<body>
<form id="form1">
<input type="text" name="t1" />
<input type="submit" />
</form>
<input type="text" name="t2" form="form1" />
</body>

formaction="url" 覆盖 action中的url
同理
formenctype, formmethod, formnovalidate, formtarget
height="value"定义input字段的高度,适用于 type="image",单位为像素
同理: width

list 引用包含输入字段的预定义选项 datalist
as :
<body>
<form>
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="www" value="http://www.xxx.com" />
<option label="shop" value="http://shop.xxx.com" />
</datalist>
<input type="submit" />
</form>
</body>
点击输入 w时会提示 www,选择www时会自动填充 http://www.xxx.com

max="" min="" 最大值,最小值
as:
<form>
<input type="number" max="100" min="1" />
<input type="submit" />
</form>

multiple="multiple" 允许同时使用多个值
as:同时选择多个即可
<form>
<input type="file" value="" multiple="multiple" />
</form>

pattern:输入值的模式和格式
as:(数字)
<input type="text" name="tt" pattern="[0-9]*" />

placeholder="text" 帮助用户填写输入字段的提示信息
as
<input type="" name="" placeholder="输入你的内容" />

required="required"
提示规定输入字段的必需的
as:
<input type="" name="" required="required" />

step="numbervalue" 规定输入字的合法数字间隙
as:(点击一次,增加或减少3)
<input type="" value="" name="" step="3" />
--------------
<mark>标签
定义有记号的文本,突出显示部分文本
as:
<body>
aa bb <mark>ccc</mark>
</body>
--------------
<meter> 标签
使用 meter 元素来度量给定范围内的数据
as:
<body>
<meter value="3" min="0" max="10"></meter>
<meter value="0.6">60%</meter>
</body>
属性
form=form_id:规定 <meter>元素所属的一个或多个表单
height=number: 规定被视作高的值的范围
low=number: 规定被视作低的值的范围
max=number:规定范围的最大值
min=number:规定范围的最小值
optimum=number:规定度量的优化值
value=number 规定试题的当前值
----------------------
<nav>标签
定义导航链接
<body>
<nav>
<a href="http://t.zoukankan.com/lin3615-p-3947208.html">Home</a>
<a href="http://t.zoukankan.com/lin3615-p-3947208.html">Prev</a>
<a href="http://t.zoukankan.com/lin3615-p-3947208.html">Next</a>
</nav>
</body>
--------------
<progress>定义任何类型的任务进度
属性:
max=number:规定任务一共需要多少工作
value=number:规定已经完成多少任务
as:
<body>
<progress value="50" max="100"></progress>
</body>
-----------------
<section>
文档中的区段,比如章节,页眉,页脚等
as
<body>
<section>
  <h1>RMB</h1>
  <p>这是钱的解释</p>
</section>
</body>
--------------------
<select>
属性:
autofocus="focus"
form="form_id"
required="required" 规定文体区域是必填的
------------------------
<source>
定义媒介源
属性:
media="" 规定媒体资源的类型
src=url: 规定媒体文件的URL
type="" 规定媒体资源的 MIME类型
as:
<body>
<audio controls>
<source src="http://t.zoukankan.com/xx.mp3" type="audio/mpeg">
<source src="http://t.zoukankan.com/xx.ogg" type="audio/ogg">
你的浏览器不支持
</audio>
</body>
优先考虑支持的,如果两个都不支持,则显示文本
-------------
<textarea>
属性:
autofocus="autofocus"
form=form_id
maxlength=number
placeholder="text":描述文本区域预期值的简短提示
required="required"
wrap="hard/soft" : 规定当前表单元素中提交时,文本区域中的文本如何换行
-------------------
<time>
定义日期/时间
as:
<body>
<p>afsd<time>9:00</time></p>
<p>xzdf <time datetime="2014-09-03">Now</time></p>
</body>
-------------
<video>
定义视频
属性:
autoplay="autoplay"
controls="controls"
height="pixels": 设置视频播放器的高度
loop="loop":是否播放完后循环播放
muted="muted": 规定视频的音频输出应该被静音
poster="url": 规定视频下载时显示的图像,或者在用户点击播放按钮前的图像
preload="preload": 加载前进行预载,如果有 autoplay出现,则忽略
src="http://t.zoukankan.com/url":播放视频的 URL
width="pixel":设置视频播放器的高度
--------------------




免责声明:文章转载自《html5基础知识》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇nc的基本用法java for循环 &amp;lt;数字金子塔&amp;gt;下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

NPOI读取Excel

项目环境:Webform framework4.0 dll版本:NPOI2.0  dotnet2.0版本 这两天要做个excel导入的功能,想到以前用过NPOI,感觉很给力,今天写了个DEMO,写的时候还算顺利,毕竟以前用过,还是想记录下来,留着以后直接复制 把excel数据读取并拼接到DataTable中,为了使用SqlBulkCopy一次性拷贝到数据库...

ThreeJS读取GeoJson文件,绘制地图板

从网上大神那儿找来的代码,稍微修改了一下,ThreeJS感觉好难用,文档写的太简单了,不好下手 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>3D</title> &l...

PHP异步扩展Swoole笔记(1)

安装Swoole扩展 通过pecl安装, 系统中最好已经有http2依赖, 如果是Ubuntu, 可以直接通过apt安装nghttp2, 如果是Centos或者需要自己编译, 在Github下载nghttp2 https://github.com/tatsuhiro-t/nghttp2 后编译安装) 运行pecl需要autoconf, 如果没有会报错 Ca...

freemark使用总结

1.下拉框中使用三元表达式: <option value="1类" ${(bean.col5!?string="1类")?string('selected','')}>1类</option> 2.ftl页面中保留小数 <td><input type="text" class="form-control" valu...

【安全】CSRF、XSS攻击了解与防范

============================== 目录   一、了解CSRF攻击及防范   二、了解XSS攻击及防范 =============================== 一、了解CSRF攻击及防范 1、了解csrf   中文叫跨站请求伪造,指攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击...

走遍天下的三大vb控制结构

       学习VB编程语言,有些人认为很难,有些人却认为特别容易,一学就会,简单至极,你是否也有这样的感受呢?下面让我来为大家解惑答疑吧。         计算机执行的控制流程只能有三种基本控制结构组成,即:顺序结构、选择结构和循环结构。Visual Basic是采用事件驱动,由用户激发事件去执行相应的事件的处理过程。对于每一个事件处理内部而言,又总包...