HTML

参考

runoob

相关笔记

• javascript
• CSS
• PHP

属性

runoob

• accesskey
• dir
• class
• id
• hidden
• lang
• style

accesskey

accesskey 属性规定了激活元素的快捷键。

注意： 不同浏览器使用的快捷键方法不同：

• IE, Chrome, Safari, Opera 15+: [ALT] + accesskey
• Opera prior version 15: [SHIFT] [ESC] + accesskey
• Firefox: [ALT] [SHIFT] + accesskey

dir

• rtl
• ltr

<bdo dir="rtl">dir</bdo>

结果为：

dir

事件

runoob

<input type="text" onkeydown="displayResult()">

窗口事件

• onload 当文档加载时运行脚本

表单事件

• onselect
• onsubmit

键盘事件

• onkeydown
• onkeypress
• onkeyup

鼠标事件

• onclick
• ondblclick 双击鼠标
• onmousedown
• onmousemove
• onmouseout 当鼠标指针移出元素时运行脚本
• onmouseover 当鼠标指针移至元素之上时运行脚本
• onmouseup
• onmousewheel

Canvas

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Red rectangle
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140); 
ctx.stroke();
// Green rectangle
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
// Blue rectangle
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
</script>

您的浏览器不支持 HTML5 canvas 标签。

video/audio

• TODO

formulaire

• action

<form action="demo-form.php">
  <input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br>
  <input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
  <input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>
  <input type="submit" value="提交">
</form>

各种属性

• required 必填项
• pattern 正则表达式
• min max step 最小值、最大值、步长
• maxlength 最大长度
• readonly 只读
• disabled 禁用
• size 输入框大小
• multiple 多选
• autocomplete 自动完成
• list 选项列表
• type 规定输入元素的类型

<form action="demo-form.php">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required><br>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required><br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required><br>
  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" min="18" max="100" step="1"><br>
  <label for="message">留言:</label>
  <textarea id="message" name="message" maxlength="100"></textarea><br>
  <input type="submit" value="提交">
</form>

input

type

documentation

值	描述
button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox	定义复选框。
colorNew	定义拾色器。
dateNew	定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
monthNew	定义 month 和 year 控件（不带时区）。
numberNew	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
rangeNew	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
searchNew	定义用于输入搜索字符串的文本字段。
submit	定义提交按钮。
telNew	定义用于输入电话号码的字段。
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew	定义用于输入时间的控件（不带时区）。
urlNew	定义用于输入 URL 的字段。
weekNew	定义 week 和 year 控件（不带时区）。

<form action="demo-form.php">
  <input type="radio" name="gender" value="女"> 女<br>
  <input type="radio" name="gender" value= "男"> 男<br>
  <input type="submit" value="提交">
</form>

<form action="demo-form.php">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="重置">
  <input type="submit" value="提交">
</form>

select

doc

multiple

<form action="" method="post"> 
    <select multiple="multiple" name="q[]">
    <option value="">选择一个站点:</option>
    <option value="RUNOOB">Runoob</option>
    <option value="GOOGLE">Google</option>
    <option value="TAOBAO">Taobao</option>
    </select>
    <input type="submit" value="提交">
  </form>

---