我的博客欢迎讨论啊，又问必答哦^_^
HTML简单总结
HTML
视频
基础源码
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="G:\\桌面\\1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
- control 属性供添加播放、暂停和音量控件。
- 包含宽度和高度属性也是不错的主意。
<video> 与 </video>之间插入的内容是供不支持 video 元素的浏览器显示的- video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格 式
<!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls="controls"> <source src="/i/movie.ogg" type="video/ogg"> <source src="/i/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>
属性列表
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| height | pixels | 设置视频播放器的高度 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性 |
| src | url | 要播放的视频的 URL |
| width | pixels | 设置视频播放器的宽度 |
音频
源码
<video src="file:///G:/%E6%A1%8C%E9%9D%A2/1.mp4" width="320"height="240"controls="control">
your brwser does not support the video tag
</video>
- 支持多个source文件以浏览器可识别的第一个文件使用
属性列表
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 “autoplay”，则忽略该属性 |
| src | url | 要播放的音频的 URL |
Canvas
用途简介
-
canvas实际上只是提供一个画框,画图有JavaScript完成
-
画布为矩形区域，可以控制每一个像素
-
元素创建
<canvas id="myCanvas" width="180" height="180" style="border: 1px solid #CA5355"></canvas> -
通过JavaScrip来绘制
<script type="text/javascript"> var c=document.getElementById("myCanvas"); //寻找指定canvas var cxt=c.getContext("2d"); //内建HTML5的对象,内置多种绘图方法 // 绘制红色矩形 cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
举例
- 画三角
<body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> </body>
web存储
localStorage
- 没有时间限制，第二天，下一年数据依然可用
- 实例
<!--创建与访问--> <script type="text/javascript"> localStorage.lastname="Smith"; document.write("Last name:" + localStorage.lastname); </script> <!--记录访问次数--> <script type="text/javascript"> if(localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); </script>
sessionStorage
- 针对也个seeion的数据储存,关闭界面后数据消失
- 实例
<!--创建与访问--> <script type="text/javascript"> sessionStorage.lastname="Tom"; document.write("Last name:" + sessionStorage.lastname); </script> <!--记录访问次数--> <script type="text/javascript"> if(sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits "+ sessionStorage.pagecount + " time(s)."); </script>
input类型
基本结构
action后面接提交的地址method方法为gettype后接提交类型
具体例子
-
提交数字
<body> <form action="/example/HTML 5/demo_form.asp" method="get"> <input type="number" name="points" min="0" max="10" step="3" value="6" /> <input type="submit" /> </form> </body> -
提交日期
<body> <form action="/example/HTML 5/demo_form.asp" method="get"> Date: <input type="date" name="user_date" /> <input type="submit" /> </form> </body> <body> <form action="/example/HTML 5/demo_form.asp" method="get"> Date and time: <input type="datetime" name="user_date" /> <input type="submit" /> </form> </body> -
提交网址
<body> <form action="/example/HTML 5/demo_form.asp" method="get"> Homepage: <input type="url" name="user_url" /><br /> <input type="submit" /> </form> </body> -
提交邮件
<body> <form action="/example/HTML 5/demo_form.asp" method="get"> E-mail: <input type="email" name="user_email" /><br /> <input type="submit" /> </form> </body> -
提交搜索
<body> <form action="/example/html5/demo_form.asp" method="get"> Points: <input type="search" name="search" /> <input type="submit" /> </form> </body> -
范围内选择提交
<body> <form action="/example/html5/demo_form.asp" method="get"> Points: <input type="range" name="points" min="1" max="10" /> <input type="submit" /> </form> </body>
表单元素
datalist
- datalist元素规定输入域的所选列表
- 列表通过option元素创建
- 指定输入域的id
- option 元素永远都要设置 value 属性
- 简单码源
<form action="/example/HTML 5/demo_form.asp" method="get"> WebPage:<input type="url" list="url_list" name="link"/> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn"/> <option label="Google" value="http://www.google.com"/> <option label="Microsoft" value="http://www.microsoft.com"/> </datalist> <input type="submit"/> </form>
keygen
- 验证用户登录
- 是密钥对生成器,提交表单时生成一个私钥一个公钥
- 私钥存于客户端,公钥发送到服务器.公钥用于之后验证客户端证书
- 不幸的是浏览器对此元素的支持度非常欠缺
- 简单源码
<form action="/example/HTML 5/demo_form.asp" method="get"> Username: <input type="text" name="usr_name"/> Encryption: <keygen name="security"/> <input type="submit"/> </form>
output
- 作为计算结果输出显示
- for 规定一个或多个元素的 id 列表，以空格分隔。这些元素描述了计算中使用的元素与计算结果之间的关系
- form 规定 元素所属的一个或多个表单的 id 列表，以空格分隔
- name 规定 元素的名称
- 简单码源
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0<input type="range" id="a" value="50">100 + <input type="number" id="b" value="50"> = <output name="x" for="a b"></output> </form>
表单属性
-
autocomplete
- 将使浏览器记录所提交的表单值,并在之后的提交中降至前的提交作为选项列举出来供选择
- 部分浏览器需要开启此功能才能使该属性生效
- autocomplete 适用于
<form>标签，以及以下类型的<input>标签：text, search, url, telephone, email, password, datepickers, range 以及 color。 - 相关代码
<form action="path" method="get" autocomplete="on"> First name:<input type="text" name="fname"/><br/> Last name:<input type="text" name="lname"/><br/> E-mail:<input type="email" name="email" autocomplete="off"/><br/><input type="submit"><br/> </form>
-
autofocus
- 在页面加载时,域自动获得焦点,也就是将鼠标自定放在域内
- autofocus属性适用于所有
<input>标签类型 - 简单代码
<form action="html" method="get"> First name: <input type="text" name="fname" ><br> Last name: <input type="text" name="lname" autofocus="autofocus"><br> <input type="submit"/> </form>
-
form
- form属性规定输入域所属的一个或多个表单
- form属性适用于所有
<input>标签的类型 - form属性必须引用所属表单的
id <form></form>这个是标签不是form属性,<input form="">这个是属性- 如需引用一个以上的表单,使用空格分隔的列表
- 简单源码
<form action="G:\桌面\1.md" method="get" id="user_form"> First name:<input type="text" name="fname"/> <input type="submit"/> </form> <p>下面的输入域在form元素以外,但仍是表单的一部分.</p> Last name:<input type="text" name="lname" form="user_form"/>
-
表单重写属性
-
允许重写form元素的某些属性设定
-
适用于
<input>标签的submit和image -
这些属性对于创建不同的提交按钮有帮助
-
属性于用途
属性 重写 formaction action formenctype enctype formnovalidate novalidate formmethod method formtarget target -
简单代码
<form action="html" methon="get" id="user_form"> E-mail:<input type="email" name="userid"/><br/> <input type="submit" value="Submit"/><br/> <!--更改属性,不进行验证是否符合input的类型--> <input type="submit" formnovalidate="ture" value="Submit without validation"/><br/> </form>
-
-
height 和 width
- 规定用于
image类型的input标签的图像的高度和宽度 - 仅适用于
image类型的<input>标签 - 简单代码
<form action="html" method="get"> User name:<input type="text" name="user_name"/><br/> <input type="image" src="img/IMG_20180926_194715.jpg" value="houze" width="99" height="99"/> </form>
- 规定用于
-
list属性
- 规定输入域的datalist
- datalist是输入域的选项列表
- 适用于以下
<input>标签:test,search,url,telephone,email,date pickers,number,range,color - 简单代码
<form action="html" method="get"> Webpage:<input type="url" list="url_list" name="link"/> <datalist id="url_list"> <option label="W3Shollo" value="http://www.w3school.com.cn"/> <option label="Google" value="http://www.google.com"/> <option label="Microsoft" value="http://www.microsoft.com"/> </datalist> </form>
-
min, max 和 step
- 为包含数字或日期的
input类型提供约束 max最大值,min最小值,step输入域规定合法的数组间隔- 适用于以下类型的
<input>标签：date pickers、number以及range - 简单代码
<!--，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9)--> <form action="/example/HTML 5/demo_form.asp" method="get"> Points: <input type="number" name="points" min="0" max="10" step="3"/> <input type="submit" /> </form>
- 为包含数字或日期的
-
multiple
- 规定输入域中可选多个值
- 使用于
eamil和file类型的<input>标签 - 简单代码
<form action="html" method="get"> Select images:<input type="file" name="img" multiple="multiple"/> <input type="submit"/> </form> <p>当浏览文件时,请试着选择多个文件</p>
-
novalidata
- 规定在提交表单时不应该验证
form或input域 - 属性适用于
<form>以及以下类型的<input>标签：text,search,url,telephone,email,password,date pickers,range以及color. - 简单代码
<form action="/example/HTML 5/demo_form.asp" method="get" novalidate="true"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form>
- 规定在提交表单时不应该验证
-
pattern
- 规定用于验证 input 域的模式（pattern),其实也是限定输入格式
- 模式（pattern） 是正则表达式
- 适用于以下类型的
<input>标签：text,search,url,telephone,email以及password - 简单代码
<!--下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字--> <form action="/example/HTML 5/demo_form.asp" method="get"> Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /> <input type="submit" /> </form>
-
placeholder
- 提供一种提示（hint），描述输入域所期待的值
- 于以下类型的
<input>标签：text,search,url,telephone,email以及password - 提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失
- 简单代码
<form action="/example/HTML 5/demo_form.asp" method="get"> <input type="search" name="user_search" placeholder="Search W3School" /> <input type="submit" /> </form>
-
require
- 属性规定必须在提交之前填写输入域（不能为空)
- 适用于以下类型的
<input>标签：text,search,url,telephone,email,password,date pickers,number,checkbox,radio以及file。 - 简单代码
<form action="/example/HTML 5/demo_form.asp" method="get"> Name: <input type="text" name="usr_name" required="required" /> <input type="submit" /> </form>
标签
<a>超链接标签<a href="http://ainiya.xyz">我的博客</a>"
<abbr>缩写
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1948.
-
<address>标签定义文档作者或拥有者的联系信息- 如果
<address>元素位于<article>元素内部，则它表示该文章作者或拥有者的联系信息 <address>元素通常呈现为斜体。大多数浏览器会在该元素的前后添加换行<address> Written by W3School.com.cn<br /> <a href="mailto:us@example.org">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </address>
- 如果
-
<area>定义图像映射中的区域- 可以定义图片中的一个区域到超链接
-
<article>定义外部内容- 外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。 亦或是来自其他外部源内容
- 标签的内容独立于文档的其余部分
- 和超链接有些相似,但这个试试将其页面进行了加载,没有进行跳转操作
-
<b>- 定义粗体文本
- 定义部分比文本中的其他部分更重要
the house with the <b>red</b> door
-
<base>-
为页面上的所有链接规定默认地址或默认目标
-
使用指定的基本 URL 来解 析所有的相对 URL。这其中包括
<a>、<img>、<link>、<form>标签中的 URL -
把
<base>标签排在 head 元素中第一个元素的位置，这样 head 中其他元素就可以利用<base>元素中的信息了 -
属性
属性 值 描述 href URL 规定作为基准 URL 在页面中使用的 URL target _blank \ _parent \ _self \ _top 在何处打开页面上的链接。该属性会被每个链接中的 target 属性覆盖 -
简单代码
<!doctype html> <html> <head> <base href="http://mpic.tiankong.com/" target="_blank"/> </head> <body> <a href="fff/a07/fffa07d7409dfcad0ca9f996f42a9112/640.jpg@!240h"> 美丽的图片 </a> </body> <body> </body> </html> -
-
<bdo>- 覆盖默认的文本方向
- 支持所有标准事件和属性
<bdo dir="rtl">Here is some text</bdo>从右向左<bdo dir="ltl">Here is some text</bdo>从左向右
-
<blockquote- 定义摘自另一个源块引用
- 之间的文本通常会进行缩进,以从常规文本中脱离出来
- 如果是标记不需要段落分割的短引用,可以使用
<p>标签 - 属性
cite引用的URL, 如果引用来自网络 - 简单代码
<h1>About WWF</h1> <p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
-
<body>- 定义文档的主题
<body>包含文档的所有内容， 比如文档，超链接，图表， 表格，列表等
-
<br/>- 插入简单的换行符
- 这是一个空标签,没有结束符
- 标签来输入空行，而不是分隔段落
- 简单代码
hello tom<br/>我不是一个人，两个人
-
<button>-
定义按钮
-
可在button元素放至内容， 比如文本或者图像，这是该元素与通过input元素创建的按钮的不同之处。
-
请始终为按钮规定type属性。不同的浏览器根据type属性使用不同的默认值
-
如果在HTML表单中使用button元素，不同的浏览器会提交不同的按钮值，请使用input元素在html表单中创建按钮
-
相关属性
属性 值 描述 autofocus autofocus 如果设置,则当页面完成加载后使该按钮会的焦点 disabled disabled 禁用按钮 form form_name 规定按钮属于哪个表单 formaction url 规定当提交表单时向何处提交表单数据.并覆盖表单的 action 属性,该属性与 type=“submit” 配合使用。 formmethod delete/get/post/put 规定如何发送表单数据，覆盖表单的method属性,该属性与 type=“submit” 配合使用。 formnovalidate formnovalidate 如果设置，指示在提交时是否验证表单，覆盖表单的novalidate属性,该属性与 type=“submit” 配合使用。 formtarget _blank/_self/_parent/_top/framename 规定在何处打开action中的RUL。覆盖表单的target属性,该属性与 type=“submit” 配合使用。 name button_name 规定按钮名称 type button/reset/submit 定义按钮类型 value some_value 规定按钮的初始值。可有脚本进行修改
-
-
<canvas>- 标签定义图形，比如图表和其他图像
- 可以使用JavaScript在其区域内进行绘图
- 属性height， width
<canvas id="myCanvas" height="50" width="50"></canvas>
-
<caption>- 定义表格标题
- 必须紧随
<table>标签之后 - 只能对每个表格定义一个标题
- 使用css更改其位置
- 支持html的标准属性
- 支持html的事件属性
-
短语元素
<em> <strong> <dfn> <code> <samp> <kbd> <var> <cite>标签 用途 <em>呈现为被强调的文本 <strong>定义重要的文本 <dfn>定义一个定义项目 <code>定义计算机代码文本 samp定义样本文本 <kbd>定义键盘文本。表示文本是从键盘上键入的。通常用于与计算机相关的文档或手册中 <var>定义变量。可以将其与 <pre>及<code>标签配合使用<cite>定义引用。可以使用该标签对参考文献的引用进行定义，不如书籍或杂志的标题 -
<col>- 为表格中的一个或多个列定义属性值
- 只能在表格或列组中使用该元素
- col元素是空元素。如需创建列，必须在 tr 元素内规定 td 元素
- 如果需要为一个或多个列规定属性值，使用该元素
- 如果需要向一个列组规定相同的属性值，使用
<colgroup>元素 - 属性
span定义<col>应当横跨的列数 - 简单代码
<table> <col style="color:blue" /> <col span="1" style="color:blue" /> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table>
-
<colgroup>- 定义表格列的组。通过此标签，可以对列进行组合，以便格式化
- 该元素只有在
<table>中 才是合法的 - colgroup 元素只能包含 col 元素。
- colgroup 元素无法创建表格列。如需创建列，必须在 tr 元素内规定 td 元素
- 如果需要向一个列组规定相同的属性值，请使用该元素
- 如果需要为一个或多个列规定属性值，请使用 col 元素
- 性
span定义<colgroup>应当横跨的列数 - 简单代码
<table> <colgroup span="3" style="color:blue"></colgroup> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table>
-
<command>- 标签定义命令按钮，比如单选按钮、复选框或按钮
- 但目前仅有ie9支持,所以没什么用,不写了
-
<datalist>- 定义选项列表
- 与input元素配合使用,来定义input可能的值
- datalist及其选项当点击时会被显示出来,它仅仅是合法的输入值列表
- 使用 input 元素的 list 属性来绑定 datalist
- 例子
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
更新2019-04-22
-
<dd>- 定义一个定义列表中对项目的描述
- 例子
<h2>一个定义列表：</h2> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
-
<del>- 定义文档中已删除的文本
- 与 一起使用，描述文档中的更新和修正
- 属性
cite值是url定义指向另一文档的url,该文档解释了文本被删除的原因 - 属性
datetime值YYYY-MM-DDThh:mm:ssTZD定义文本被删除的日期和时间 <p>a dozen is <del>21</del> 12 pieces</p>
-
<details>- 用于描述文档或文档某个部分的细节
- 与
<summary>标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details - 属性
open值open定义detail是否可见 <details>This document was written in 2010.</details>
-
<div>- 签定义文档中的 division/section,章节
- 使用
<div>标签对块级元素进行组合，这样就可以使用样式对它们进行格式化。
<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div> -
<dl>- 定义一个列表
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> -
<dt>- 定义一个定义列表中的一个项目，以及dialog中的角色
<--例子1--> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> <--例子2--> <dialog> <dt>老师</dt> <dd>2+2 等于？</dd> <dt>学生</dt> <dd>4</dd> <dt>老师</dt> <dd>答对了！</dd> </dialog>
- 定义一个定义列表中的一个项目，以及dialog中的角色
-
<embed>-
定义嵌入的内容,比如插件
-
<embed>标签必须有 src 属性属性 值 描述 height pixels 设置嵌入式内容的高度 src url 定义嵌入内容的类型 type type 定义嵌入式内容的类型 width pixels 设置嵌入式内容的宽度
-
1377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
