博客园_webabcd - 专注于asp.net, html5, silverlight

千呼万唤 HTML 5 (7) - 表单元素

2012-02-08T02:10:00Z

千呼万唤 HTML 5 (7) - 表单元素

介绍
HTML 5: 表单元素

表单元素 - form, label, button, select, option, optgroup, datalist, textarea, fieldset, legend, progress, meter, keygen, output
表单验证

示例
1、form - 表单
element/form/form.html

<!doctype html>
<html>
<head>
    <title>form</title>
</head>
<body>

    <!--
        form - 表单，用于提交子元素数据到服务端
          accept-charset - 指定提交数据的编码格式
          action - 提交的目标地址
          autocomplete - 是否对所有子元素启用自动完成功能（on 或 off）
          enctype - 编码类型（application/x-www-form-urlencoded 或 multipart/form-data 或 text/plain）
          method - form 的 method（默认是 GET）
          name - form 的 name
          novalidate - 提交时是否不需要验证，boolean 类型
          target - form 的 target
    -->

    <form action="#">
        <input type="text" name="txt" value="webabcd" />
        <input type="submit" name="btn" value="submit" />
    </form>

</body>
</html>

2、label - 关联其它元素
element/form/label.html

<!doctype html>
<html>
<head>
    <title>label</title>
</head>
<body>

    <!--
        label - 关联其它元素
          form - 指定 label 所属的表单，多个用空格分开
          for - 关联元素的 id

        DOM
          form, htmlFor
          control - 返回 label 所关联的元素
    -->

    <label><input type="checkbox" /> checkbox title</label>

    <br />

    <input id="chk" type="checkbox" />
    <label id="lbl" for="chk">checkbox title</label>

    <script type="text/javascript">
        var lbl = document.getElementById("lbl");
        alert(document.getElementById("lbl").htmlFor);
        alert(document.getElementById("lbl").control.outerHTML);
    </script>
</body>
</html>

3、button - 按钮元素
element/form/button.html

<!doctype html>
<html>
<head>
    <title>button</title>
</head>
<body>

    <!--
        button - 按钮元素
          autofocus - 页面加载后是否自动置为焦点，boolean 类型
          disabled - 是否无效，boolean 类型
          form - 指定关联的 form 的 id
          formaction - 指定关联 form 的 action
          formenctype - 指定关联 form 的编码类型
          formmethod - 指定关联 form 的 method
          formnovalidate - 指定关联 form 在提交时是否不需要验证，boolean 类型
          formtarget - 指定关联 form 的 target
          type - 按钮类型（button 或 submit 或 reset）
    -->
    
    <button type="button">button</button>

</body>
</html>

4、select - 下拉列表框元素, option - 选项, optgroup - 选项组
element/form/select_option_optgroup.html

<!doctype html>
<html>
<head>
    <title>select option optgroup</title>
</head>
<body>
    <!--
        select - 下拉列表框元素
          autofocus, disabled, form, name, required, size
          multiple - 是否可多选，boolean 类型

        option - 选项
          disabled, label, selected, value

        optgroup - 选项组
          disabled, label
    -->

    <select>
        <option value="1" label="aaa" />
        <option value="2" label="bbb" />
        <option value="3" label="ccc" selected />
        <option value="4" label="ddd" />
        <option value="5" label="eee" />
    </select>

    <select multiple>
        <option value="1">aaa</option>
        <option value="2">bbb </option>
        <option value="3" selected>ccc</option>
        <option value="4" selected>ddd</option>
        <option value="5">eee </option>
    </select>

    <select>
        <optgroup label="optgroup 1">
            <option value="1">aaa</option>
            <option value="2">bbb </option>
        </optgroup>
        <optgroup label="optgroup 2">
            <option value="3">ccc</option>
            <option value="4">ddd </option>
        </optgroup>
        <optgroup label="optgroup 3">
            <option value="5" selected>eee</option>
            <option value="6">fff </option>
        </optgroup>
    </select>
</body>
</html>

5、datalist - 数据列表元素, option - 数据项
element/form/datalist_option.html

<!doctype html>
<html>
<head>
    <title>datalist option</title>
</head>
<body>

    <!--
        datalist - 数据列表元素
        option - 数据项
          value - 数据项的值
          label - 数据项的说明
    -->

    <input type="email" list="contacts" />

    <datalist id="contacts">
        <option value="aabb@aa.com" label="张三" />
        <option value="ccdd@cc.com" label="李四" />
        <option value="eeff@ee.com" label="王五" />
    </datalist>

</body>
</html>

6、textarea - 文本区域元素
element/form/textarea.html

<!doctype html>
<html>
<head>
    <title>textarea</title>
</head>
<body>

    <!--
        textarea - 文本区域元素
          autofocus, dirname, disabled, maxlength, name, placeholder, readonly, required - 参考 /element/form/input/_attributes.html
          cols - 显示的列数（单位：字符数）
          rows - 显示的行数（单位：字符数）
          wrap - 换行方式
            soft - 需要换行则换行（相当于 wrap）
            hard - 强制不换行（相当于 nowrap）
    -->
    
    <textarea cols="3" rows="3">
aaabbbccc
    </textarea>

</body>
</html>

7、fieldset - 用于定义一个区域, legend - 用于定义一个区域的标题，它是 fieldset 的第一个子元素
element/form/fieldset_legend.html

<!doctype html>
<html>
<head>
    <title>fieldset legend</title>
</head>
<body>

    <!--
        fieldset - 用于定义一个区域
          form - 指定所属表单，多个用空格分开
          disabled - 是否无效（Opera 支持此标准）

        legend - 用于定义一个区域的标题，它是 fieldset 的第一个子元素 
    -->

    <fieldset disabled>
        <legend>
            <label>
                <input type="checkbox" /> title
            </label>
        </legend>
        <p>
            p1
        </p>
        <p>
            p2
        </p>
        <p>
            p3
        </p>
    </fieldset>
</body>
</html>

8、progress - 进度元素
element/form/progress.html

<!doctype html>
<html>
<head>
    <title>progress</title>
</head>
<body>
    <!--
        progress - 进度元素
          value - 当前进度值
          max - 进度的最大值
          form - 对应的 form 的 id
    -->

    <progress id="progress" max="100"></progress>

    <script type="text/javascript">
        var progressBar = document.getElementById('progress');
        progressBar.value = 10;
    </script>

</body>
</html>

9、meter - 用来表示一个范围已知且可度量的值
element/form/meter.html

<!doctype html>
<html>
<head>
    <title>meter</title>
</head>
<body>

    <!--
        meter - 用来表示一个范围已知且可度量的值
          form - 对应的 form 的 id
          value - 当前值
          min - 最小值
          max - 最大值
          low - 低水平的值
          high - 高水平的值
          optimum - 最适宜的值
    -->
    
    <span>血糖含量：</span>
    <meter value="60" min="0" max="100" low="20" high="80" optimum="50" />

</body>
</html>

10、keygen - 呈现出一个键值对生成器，提交表单后，公钥发往服务端，私钥保存在客户端
element/form/keygen.html

<!doctype html>
<html>
<head>
    <title>keygen</title>
</head>
<body>
    
    <!--
        keygen - 呈现出一个键值对生成器，提交表单后，公钥发往服务端，私钥保存在客户端
          autofocus, challenge, disabled, form, keytype
    -->

    <keygen />

</body>
</html>

11、output - 用于呈现计算结果
element/form/output.html

<!doctype html>
<html>
<head>
    <title>output</title>
</head>
<body>

    <!--
        output - 用于呈现计算结果（必须要有起始和结束标记）
          form, name
          for - 关联元素的 id，可以有多个
    -->
    
    <output id="output"></output>

    <script type="text/javascript">

        document.getElementById("output").value = 10 * 10;

    </script>

</body>
</html>

12、表单验证
element/form/_validate.html

<!doctype html>
<html>
<head>
    <title>表单验证</title>
</head>
<body>

    <!--
        表单验证（Opera  支持此标准）

        required - 指定是否为必填元素
        pattern - 用指定的正则表达式对 input 的值做验证
        url, email, number 等有验证功能的元素

        element.validity - 返回验证状态，ValidityState 对象
        ValidityState - 验证状态对象
          valid - 是否通过了验证（以下 8 个值都为 false，则此值为 true），boolean 类型
          valueMissing - 是否没有值（对应的元素如果设置为必填但没有值的时候，此值为 true），boolean 类型
          typeMismatch - 是否值的类型与期望类型不匹配，boolean 类型
          patternMismatch - 是否正则表达式验证失败，boolean 类型
          tooLong - 是否字符过多，boolean 类型
          rangeUnderflow - 是否比预设的最小值还要小，boolean 类型
          rangeOverflow - 是否比预设的最大值还要大，boolean 类型
          stepMismatch - 是否不匹配 step 的设置（比如 step 为 3，那么如果值要匹配 step 的话，则一定要为 3 的倍数），boolean 类型
          customError - 是否有自定义错误信息，boolean 类型

        element.setCustomValidity("错误信息") - 用于指定自定义的错误信息
        element.setCustomValidity("") - 用于清除自定义的错误信息
    -->

    <form action="#">
        <input type="text" name="txt" id="txt" required />
        <input type="email" name="email" id="email" />
        <input type="submit" name="btn" value="submit" />

        <br />
        <input type="button" value="验证 email 元素" onclick="validateEmail();" />
    </form>

    <script type="text/javascript">

        function validateEmail() {
            var email = document.getElementById("email");
            var validityState = email.validity;

            alert
            (
                validityState.valid + "\n" +
                validityState.valueMissing + "\n" +
                validityState.typeMismatch + "\n" +
                validityState.patternMismatch + "\n" +
                validityState.tooLong + "\n" +
                validityState.rangeUnderflow + "\n" +
                validityState.rangeOverflow + "\n" +
                validityState.stepMismatch + "\n" +
                validityState.customError
            );
        }

    </script>

</body>
</html>

OK
[源码下载]

本文链接

千呼万唤 HTML 5 (6) - 表单元素之 input 元素

2012-02-06T01:20:00Z

[源码下载]

千呼万唤 HTML 5 (6) - 表单元素之 input 元素

作者：webabcd

介绍
HTML 5: 表单元素之 input 元素

表单元素之 input 元素 - text, password, url, telephone, email, search, file, radio, checkbox, button, submit, reset, number, range, image, hidden, color, datetime, datetime-local, date, time, month, week
input 元素的通用属性 - autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step

示例
1、text - 文本框
element/form/input/text.html

<!doctype html>
<html>
<head>
    <title>text</title>
</head>
<body>

    <!--
        text - 文本框
          autocomplete - 是否启用自动完成功能，“on”或“off”
          placeholder - 提示文本（Opera 支持此标准）
    -->

    <input type="text" autocomplete="on" placeholder="请输入。。。" />

</body>
</html>

2、password - 密码框
element/form/input/password.html

<!doctype html>
<html>
<head>
    <title>password</title>
</head>
<body>

    <!--
        password - 密码框
    -->

    <input type="password" value="111111" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);
    
    </script>

</body>
</html>

3、url - url 框
element/form/input/url.html

<!doctype html>
<html>
<head>
    <title>url</title>
</head>
<body>

    <!--
        url - url 框，文本框形式
    -->

    <input type="url" value="http://www.cnblogs.com/" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);
    
    </script>

</body>
</html>

4、telephone - 电话框
element/form/input/telephone.html

<!doctype html>
<html>
<head>
    <title>telephone</title>
</head>
<body>

    <!--
        telephone - 电话框，文本框形式
    -->

    <input type="telephone" value="110" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);
    
    </script>

</body>
</html>

5、email - 电子邮件框
element/form/input/email.html

<!doctype html>
<html>
<head>
    <title>email</title>
</head>
<body>

    <!--
        email - 电子邮件框，文本框形式
    -->

    <input type="email" value="www@abc.com" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);
    
    </script>

</body>
</html>

6、search - 搜索框
element/form/input/search.html

<!doctype html>
<html>
<head>
    <title>search</title>
</head>
<body>

    <!--
        search - 搜索框，文本框形式
    -->

    <input type="search" value="我是 search，是一个有特殊语义的 text" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);
    
    </script>

</body>
</html>

7、file - 用于上传文件
element/form/input/file.html

<!doctype html>
<html>
<head>
    <title>file</title>
</head>
<body>

    <!--
        file - 用于上传文件
    -->

    <input type="file" />

</body>
</html>

8、radio - 单选框
element/form/input/radio.html

<!doctype html>
<html>
<head>
    <title>radio</title>
</head>
<body>

    <!--
        radio - 单选框
          checked - 是否是选中状态
          name - 相同的是同一组
    -->

    <input id="rad" type="radio" checked name="rad" />
    <label for="rad">radio button title</label>

    <input id="rad2" type="radio" name="rad" />
    <label for="rad2">radio button title</label>

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);
    
    </script>

</body>
</html>

9、checkbox - 复选框
element/form/input/checkbox.html

<!doctype html>
<html>
<head>
    <title>checkbox</title>
</head>
<body>

    <!--
        checkbox - 复选框
          checked - 是否是选中状态
    -->

    <input id="chk" type="checkbox" checked />
    <label for="chk">checkbox title</label>

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].checked);
    
    </script>

</body>
</html>

10、button - 一般按钮
element/form/input/button.html

<!doctype html>
<html>
<head>
    <title>button</title>
</head>
<body>

    <!--
        button - 一般按钮
    -->
    
    <input type="button" value="button" />

</body>
</html>

11、submit - 提交按钮
element/form/input/submit.html

<!doctype html>
<html>
<head>
    <title>submit</title>
</head>
<body>

    <!--
        submit - 提交按钮，用于提交 form 内元素
    -->

    <form action="#">
        <input type="text" />

        <input type="submit" value="submit button" />
    </form>

</body>
</html>

12、reset - 复位按钮
element/form/input/reset.html

<!doctype html>
<html>
<head>
    <title>reset</title>
</head>
<body>

    <!--
        reset - 复位按钮，用于复位 form 内元素
    -->

    <form action="#">
        <input type="text" />

        <input type="reset" value="reset" />
    </form>

</body>
</html>

13、number - 数字输入框
element/form/input/number.html

<!doctype html>
<html>
<head>
    <title>number</title>
</head>
<body>

    <!--
        number - 数字输入框（Opera 支持此标准）
          value - 数字的值
          min - 数字的最小值
          max - 数字的最大值
          step - 上下箭头增减数字的时候，指定其步长
    -->

    <input type="number" value="10" min="10" max="100" step="10" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);
    
    </script>

</body>
</html>

14、range - 滑动条
element/form/input/range.html

<!doctype html>
<html>
<head>
    <title>range</title>
</head>
<body>

    <!--
        range - 滑动条（Opera 支持此标准）
          value - 数字值
          min - 数字的最小值
          max - 数字的最大值
          step - 步长
    -->

    <input type="range" value="50" min="0" max="100" step="10" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);
    
    </script>
</body>
</html>

15、image - 显示图片
element/form/input/image.html

<!doctype html>
<html>
<head>
    <title>image</title>
</head>
<body>
    
    <!--
        image - 显示图片
          src - 图片地址
    -->

    <input type="image" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />

</body>
</html>

16、hidden - 隐藏元素，不会显示
element/form/input/hidden.html

<!doctype html>
<html>
<head>
    <title>hidden</title>
</head>
<body>

    <!--
        hidden - 隐藏元素，不会显示
    -->

    <input type="hidden" value="我是 hidden" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);
    
    </script>

</body>
</html>

17、color - 颜色选择器
element/form/input/color.html

<!doctype html>
<html>
<head>
    <title>color</title>
</head>
<body>

    <!--
        color - 颜色选择器（目前仅 Opera 支持此标准）
          value - 选中的颜色值
    -->

    <input type="color" value="#FF0000" />

    <script type="text/javascript">

        alert(document.getElementsByTagName("input")[0].value);
    
    </script>

</body>
</html>

18、datetime - 日期时间输入/选择框（UTC）, datetime-loca - 日期时间输入/选择框（本地时区）, date - 日期输入/选择框, time - 时间输入/选择, month - 月份输入/选择框, week - 星期输入/选择框
element/form/input/datetime_datetime-local_date_time_month_week.html.html

<!doctype html>
<html>
<head>
    <title>datetime datetime-local date time month week</title>
</head>
<body>

    <!--
        目前仅 Opera 支持此标准

        datetime - 日期时间输入/选择框（UTC）
        datetime-loca - 日期时间输入/选择框（本地时区）
        date - 日期输入/选择框
        time - 时间输入/选择框
        month - 月份输入/选择框
        week - 星期输入/选择框
    -->

    <input type="datetime" />
    <br />

    <input type="datetime-local" />
    <br />

    <input type="date" />
    <br />

    <input type="time"" />
    <br />

    <input type="month" />
    <br />

    <input type="week" />

</body>
</html>

19、input 元素的通用属性
element/form/input/_attributes.html

<!doctype html>
<html>
<head>
    <title>input 元素的通用属性: autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step</title>
</head>
<body>

    <!--请用 opera 测试-->

    <form action="#">
    
        <!--
            autocomplete - 是否启用自动完成功能（on 或 off）
        -->
        <input type="text" autocomplete="on" />
        <br />
    
        <!--
            placeholder - 用于定义提示文本
        -->
        <input type="text" autocomplete="on" placeholder="请输入。。。" />
        <br />

        <!--
            pattern - 用指定的正则表达式对 input 的值做验证
        -->
        <input pattern="[0-9]" value="6" />
        <br />

        <!--
            dirname - 用于将文本排列方向以参数的形式发给服务端
              示例：下面的 input 在 submit 后，会自动增加参数 &textdir=ltr
        -->
        <input type="text" name="textName" dirname="textdir" />
        <br />

        <!--
            size - 指定 input 的显示宽度（单位：字符数）
        -->
        <input type="text" value="webabcd" size="10" />
        <br />

        <!--
            maxlength - 指定可输入的最大字符长度
        -->
        <input type="text" maxlength="10" />
        <br />

        <!--
            readonly - 指定 input 是否是只读模式
        -->
        <input type="text" value="webabcd" readonly />
        <br />

        <!--
            required - 指定是否为必填元素
        -->
        <input type="text" required />
        <br />

        <!--
            list - 指定建议数据源，建议数据源为一个 datalist 元素。所谓建议数据源可以理解为：系统推测的用户可能输入的内容列表，以方便用户输入，但并不会限制用户的输入
        -->
        <input type="email" list="contacts" />
        <datalist id="contacts">
            <option value="aabb@aa.com" />
            <option value="ccdd@cc.com" />
            <option value="eeff@ee.com" />
        </datalist>
        <br />

        <!--
            multiple - 是否可多选
              如下例：可以在一个 input 中选择多个 email
        -->
        <input type="email" list="contacts2" multiple />
        <datalist id="contacts2">
            <option value="aabb@aa.com" />
            <option value="ccdd@cc.com" />
            <option value="eeff@ee.com" />
        </datalist>
        <br />

        <!--
            以下属性适用于 type="range", type="number" 等
            min - 数字的最小值
            max - 数字的最大值
            step - 步长
        -->
        <input type="range" value="50" min="0" max="100" step="10" />
        <br />

        <input type="submit" value="submit" />

    </form>
</body>
</html>

OK
[源码下载]

本文链接

千呼万唤 HTML 5 (5) - 元素的通用属性

2012-02-02T01:02:00Z

[源码下载]

千呼万唤 HTML 5 (5) - 元素的通用属性

作者：webabcd

介绍
HTML 5: 元素的通用属性

元素的通用属性 - accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone

示例
1、accesskey - 用于定义快捷键
element/_globalAttributes/accesskey.html

<!doctype html>
<html>
<head>
    <title>accesskey</title>
</head>
<body>

    <!--
        accesskey - 用于定义快捷键。快捷键为：alt + accesskey，参考第一个示例
          第二个示例描述为：有全键盘的设备快捷键为：ctrl + alt + q（目前 IE 为：ctrl + shift + q），仅有小键盘的设备快捷键为：“数字 0 键”
    -->

    <a accesskey="w" href="http://webabcd.cnblogs.com/">webabcd blog</a>

    <a accesskey="q 0" href="http://webabcd.cnblogs.com/">webabcd blog</a>

</body>
</html>

2、style - 用于定义样式
element/_globalAttributes/style.html

<!doctype html>
<html>
<head>
    <title>style</title>
</head>
<body>

    <!--
        style - 用于定义样式
    -->

    <span style="font-size:36px; color:Blue">webabcd</span>

</body>
</html>

3、class - 指定需要应用的 css 类选择器
element/_globalAttributes/class.html

<!doctype html>
<html>
<head>
    <title>class</title>

    <style>
        .myClass { font-size:36px; }
        .myClass2 { color:Blue; }
    </style>
</head>
<body>

    <!--
        class - 指定需要应用的 css 类选择器
    -->

    <span class="myClass myClass2">webabcd</span>

</body>
</html>

4、title - 用于描述元素信息，相当于 ToolTip
element/_globalAttributes/title.html

<!doctype html>
<html>
<head>
    <title>title</title>
</head>
<body>

    <!--
        title - 用于描述元素信息，相当于 ToolTip
    -->

    <a title="webabcd" href="http://webabcd.cnblogs.com/">webabcd blog</a>

    <img src="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245" alt="头像" title="webabcd" />

</body>
</html>

5、tabindex - 用于定义 TAB 键的导航顺序（整型值）
element/_globalAttributes/tabindex.html

<!doctype html>
<html>
<head>
    <title>tabindex</title>
</head>
<body>

    <!--
        tabindex - 用于定义 TAB 键的导航顺序（整型值）
          按从小到大的顺序导航（0 除外，0 会被最后导航到）
          负数则不会被导航到
    -->

    <input type="text" tabindex="-1" />
    
    <input type="text" tabindex="-2" />

    <input type="text" tabindex="0" />

    <input type="text" tabindex="3" />

    <input type="text" tabindex="1" />

    <input type="text" tabindex="4" />

    <input type="text" tabindex="2" />

</body>
</html>

6、id - 用于定义元素的唯一标识，主要给 DOM 用
element/_globalAttributes/id.html

<!doctype html>
<html>
<head>
    <title>id</title>
</head>
<body>

    <!--
        id - 用于定义元素的唯一标识，主要给 DOM 用
    -->

    <a id="myId" href="http://webabcd.cnblogs.com/">webabcd blog</a>

    <script type="text/javascript">
        alert(document.getElementById('myId').innerHTML);
    </script>

</body>
</html>

7、dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的缩写）
element/_globalAttributes/dir.html

<!doctype html>
<html>
<head>
    <title>dir</title>
</head>
<body>

    <!--
        bdo - 定义文本排列的方向（bdo 是 bi-directional override 的缩写）
          dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的缩写）
    -->
    <bdo dir="rtl">123</bdo>

</body>
</html>

8、spellcheck - 是否使用浏览器的拼写检查功能对元素内的内容做拼写检查
element/_globalAttributes/spellcheck.html

<!doctype html>
<html>
<head>
    <title>spellcheck</title>
</head>
<body>

    <!--
        spellcheck - 是否使用浏览器的拼写检查功能对元素内的内容做拼写检查（支持如下元素：textarea; 类型为 text 的 input; contenteditable 为 true 的元素）
          可能的值有："", "true", "false"
    -->

    <textarea rows="10" cols="20" spellcheck="true">
i am jack, i am webabcd, haha, good, hehe
    </textarea>

</body>
</html>

9、hidden - 用于隐藏元素（不占位）
element/_globalAttributes/hidden.html

<!doctype html>
<html>
<head>
    <title>hidden</title>
</head>
<body>

    <!--
        hidden - 用于隐藏元素（不占位）
    -->

    <input type="text" hidden />
    
    <input type="text" />

    <input type="text" hidden />

</body>
</html>

10、contenteditable - 用于定义内容是否可编辑
element/_globalAttributes/contenteditable.html

<!doctype html>
<html>
<head>
    <title>contenteditable</title>
</head>
<body>

    <!--
        contenteditable - 用于定义内容是否可编辑
          可能的值有："", "true", "false"
    -->

    <p contenteditable>我是可以编辑的，试试看</p>

</body>
</html>

11、contextmenu - 指定上下文菜单的数据源
element/_globalAttributes/contextmenu.html

<!doctype html>
<html>
<head>
    <title>contextmenu</title>
</head>
<body>

    <!--
        contextmenu - 指定上下文菜单的数据源

        menu - 定义菜单（目前仅有 FireFox 实现了 context 菜单）
          type - 菜单的类型，有两种类型：context（右键菜单） 和 toolbar（工具栏菜单）
          label - 菜单的名称，显示用
          menuitem - 定义菜单项（菜单的子集）
            label - 菜单项的名称，显示用
            icon - 菜单项的图标
    -->

    <section contextmenu="myContextMenu">
        <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="" />
        <menu type="context" id="myContextMenu">
            <menuitem label="menuitem1" onclick="alert('menuitem1')" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245"></menuitem>
            <menuitem label="menuitem2" onclick="alert('menuitem2')"></menuitem>
            <menu label="menuitem3" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245">
                <menuitem label="menuitem31" onclick="alert('menuitem31')" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245"></menuitem>
                <menuitem label="menuitem32" onclick="alert('menuitem32')" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245"></menuitem>
            </menu>
        </menu>
    </section>

    <!-- 工具栏式的菜单，目前还没有浏览器实现此标准 -->
    <section contextmenu="myToolbarMenu">
        <menu type="toolbar">
            <li>
                <menu label="File">
                    <button type="button" onclick="fnew()">
                        New...</button>
                    <button type="button" onclick="fopen()">
                        Open...</button>
                    <button type="button" onclick="fsave()">
                        Save</button>
                    <button type="button" onclick="fsaveas()">
                        Save as...</button>
                </menu>
            </li>
            <li>
                <menu label="Edit">
                    <button type="button" onclick="ecopy()">
                        Copy</button>
                    <button type="button" onclick="ecut()">
                        Cut</button>
                    <button type="button" onclick="epaste()">
                        Paste</button>
                </menu>
            </li>
            <li>
                <menu label="Help">
                    <li><a href="#">Help</a></li>
                    <li><a href="#">About</a></li>
                </menu>
            </li>
        </menu>
    </section>

</body>
</html>

12、draggable - 元素是否可拖拽；dropzone - 拖放的目标元素（可承载被拖拽元素的元素）
element/_globalAttributes/draggable_dropzone.html

<!doctype html>
<html>
<head>
    <title>draggable dropzone</title>
</head>
<body>

    <span>关于 draggable 和 dropzone 的详细说明，参见 /other/drag_drop</span>

</body>
</html>

OK
[源码下载]

本文链接

千呼万唤 HTML 5 (4) - 文本语义元素

2011-09-26T01:09:00Z

[源码下载]

千呼万唤 HTML 5 (4) - 文本语义元素

作者：webabcd

介绍
HTML 5: 文本语义元素

文本语义元素 - a, em, strong, small, s, cite, q, abbr, time, code, var, dfn, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr

示例
1、a - 用于定义超链接（a 是 anchor 的缩写）
element/text/a.html

<!doctype html>
<html>
<head>
    <title>a</title>
</head>
<body>

    <!--
        a - 用于定义超链接（a 是 anchor 的缩写）
          href - 链接的目标 url
          target - 链接的打开方式，_blank, _parent, _self, _top 等
          rel - 当前文档与目标文档之前的关系，其具体的属性值的说明详见文档
            alternate, author, bookmark, external, help, icon, license, next, nofollow, noreferrer, pingback, prefetch, prev, search, sidebar, stylesheet, tag
          hreflang - 目标文档的语言
          media - 目标文档的媒介类型，默认值是 all，其他属性值的说明详见文档
          type - 目标文档的 MIME 类型
    -->

    <a href="http://www.cnblogs.com/index.html" target="_blank" rel="Index" hreflang="zh-cn" media="all" type="text/html">千呼万唤 HTML 5</a>

    <br />

    <!--演示锚点的实现-->
    <a href="#webabcd">锚点的演示</a>
    <p style="height: 2000px">&nbsp;</p>
    <span id="webabcd">i am webabcd</span>
</body>
</html>

2、em - 定义被强调的文本（一般浏览器会渲染斜体）（em 是 emphasis 的缩写）
element/text/em.html

<!doctype html>
<html>
<head>
    <title>em</title>
</head>
<body>
    <!--
        em - 定义被强调的文本（一般浏览器会渲染斜体）（em 是 emphasis 的缩写）
    -->
    <em>被强调的文本（一般浏览器会渲染斜体）</em>
</body>
</html>

3、strong - 定义重要的文本（一般浏览器会渲染为粗体）
element/text/strong.html

<!doctype html>
<html>
<head>
    <title>strong</title>
</head>
<body>
    <!--
        strong - 定义重要的文本（一般浏览器会渲染为粗体）
    -->
    <strong>重要的文本（一般浏览器会渲染为粗体）</strong>
</body>
</html>

4、small - 定义小号文本
element/text/small.html

<!doctype html>
<html>
<head>
    <title>small</title>
</head>
<body>
    <!--
        small - 定义小号文本
    -->
    <small>小号文本</small>
</body>
</html>

5、s - 定义不再精确或不再相关的文本（s 是 strike 的缩写）
element/text/s.html

<!doctype html>
<html>
<head>
    <title>s</title>
</head>
<body>
    <p>windows 8 平板电脑</p>
    <p>
        <!--
            s - 定义不再精确或不再相关的文本（s 是 strike 的缩写）
        -->
        <s>原价：5000元</s>
    </p>
    <p>
        <strong>促销价：5元</strong>
    </p>
</body>
</html>

6、cite - 用于定义引用内容（书籍或杂志等）的标题
element/text/cite.html

<!doctype html>
<html>
<head>
    <title>cite</title>
</head>
<body>
    <p>
        <!--
            cite - 用于定义引用内容（书籍或杂志等）的标题
        -->
        我最喜欢看高尔基的<cite>海燕</cite>，不过忘了讲的是什么了
    </p>

    <!--
        区别：
        cite 标签用于定义引用内容的标题；blockquote 标签用来定义较长的引用；q 标签用来定义较短的内容
    -->
</body>
</html>

7、q - 用于定义一段引用的内容（短内容）（q 是 quote 的缩写）
element/text/q.html

<!doctype html>
<html>
<head>
    <title>q</title>
</head>
<body>
    <!--
        q - 用于定义一段引用的内容（短内容）（q 是 quote 的缩写）
          cite - 引用的内容的来源 url
    -->
    <q cite="http://webabcd.cnblogs.com/">从 http://webabcd.cnblogs.com 里引用的一段短内容</q>

    <!--
        区别：
        cite 标签用于定义引用内容的标题；blockquote 标签用来定义较长的引用；q 标签用来定义较短的内容
    -->
</body>
</html>

8、abbr - 定义一个缩写文本，建议在 abbr 的 title 属性中描述缩写的全称（abbr 是 abbreviation 的缩写）
element/text/abbr.html

<!doctype html>
<html>
<head>
    <title>abbr</title>
</head>
<body>
    <!--
        abbr - 定义一个缩写文本，建议在 abbr 的 title 属性中描述缩写的全称（abbr 是 abbreviation 的缩写）
    -->
    <abbr title="World Trade Organization">WTO</abbr>
</body>
</html>

9、dfn - 用于定义一个术语（dfn 是 defining instance 的缩写）
element/text/dfn.html

<!doctype html>
<html>
<head>
    <title>dfn</title>
</head>
<body>
    <!--
        dfn - 用于定义一个术语（dfn 是 defining instance 的缩写）
    -->
    <dfn>
        <abbr title="World Trade Organization">WTO</abbr>
    </dfn>
</body>
</html>

10、time - 定义日期、时间文本
element/text/time.html

<!doctype html>
<html>
<head>
    <title>time</title>
</head>
<body>
    
    <!--
        time - 定义日期、时间文本
          datetime - 定义元素的日期时间，如果不设置此属性则必须在 time 元素的内容中设置日期时间
          pubdate - bool 类型，标识 time 是否是发布日期。在 article 中则代表当前 article 的发布日期，否则代表整个 html 的发布日期
          valueAsDate - 只读属性，将 time 中的日期时间转换为 Date 对象，目前无浏览器支持
    -->

    <!--
        datetime 格式：YYYY-MM-DDThh:mm:ssTZD，示例：2008-02-16T13:50Z, 2008-02-16T13:50+08:00
          T - 代表时间，其前半部分为日期，后半部分为时间
          TZD - Z 或 +hh:mm 或 -hh:mm 用于标识时区，其中 Z 代表 0 时区
    -->

    <p>
        我的生日和 <time datetime="1980-02-14">情人节</time> 是同一天
    </p>
    <p>
        我每天 <time>9:00</time> 上班
    </p>
    
    <article>
        <p>我是 article 的内容</p>
        <footer>
            本 article 的发布日期是 <time datetime="2011-09-14" pubdate>昨天</time>
         </footer>
    </article>

    <p>
        <!--datetime 值中的“T”代表时间（“T”前面是日期，后面是时间）-->
        本 html 的发布日期是 <time datetime="2011-09-15T12:46:46" pubdate>今天</time>
    </p>

    <script type="text/javascript">
        // 目前无浏览器支持 valueAsDate
        alert(document.getElementsByTagName("time")[0].valueAsDate);
    </script>
</body>
</html>

11、code - 定义计算机代码片段（如果需要保留空格、换行等可以在 code 外面包一层 pre）
element/text/code.html

<!doctype html>
<html>
<head>
    <title>code</title>
</head>
<body>
    <!--
        code - 定义计算机代码片段（如果需要保留空格、换行等可以在 code 外面包一层 pre）
    -->
    <code>
        var x = 1;
    </code>
</body>
</html>

12、var - 定义计算机代码中的变量，pre code var 可以结合使用
element/text/var.html

<!doctype html>
<html>
<head>
    <title>var</title>
</head>
<body>
    <figure>
        <pre>
            <code>
if (b)
    write("true");
            </code>
        </pre>
        <p>
            <!--
                var - 定义计算机代码中的变量，pre code var 可以结合使用
            -->
            如果变量 <var>b</var> 是 true，则写入“true”
        </p>
    </figure>
</body>
</html>

13、samp - 由程序输出的示例文本（samp 是 sample 的缩写）
element/text/samp.html

<!doctype html>
<html>
<head>
    <title>samp</title>
</head>
<body>
    <!--
        samp - 由程序输出的示例文本（samp 是 sample 的缩写）
    -->
    <p>
        执行代码后，程序会输出 <samp>我是由程序输出的信息</samp>
    </p>
</body>
</html>

14、kbd - 定义由键盘输入的文本（kbd 是 keyboard 的缩写）
element/text/kbd.html

<!doctype html>
<html>
<head>
    <title>kbd</title>
</head>
<body>
    <!--
        kbd - 定义由键盘输入的文本（kbd 是 keyboard 的缩写）
    -->
    <p>
        关机请按 
        <kbd>
            <kbd>alt</kbd>
            +
            <kbd>F4</kbd>
        </kbd>
    </p>
</body>
</html>

15、sub - 定义下标文本（sub 是 subscript 的缩写），sup - 定义上标文本（sup 是 superscript 的缩写）
element/text/sub_sup.html

<!doctype html>
<html>
<head>
    <title>sub sup</title>
</head>
<body>

    <!--
        sub - 定义下标文本（sub 是 subscript 的缩写）
        sup - 定义上标文本（sup 是 superscript 的缩写）
    -->

    <p>告诉你，我是 <sub>下标</sub></p>
    <p>告诉你，我是 <sup>上标</sup></p>
</body>
</html>

16、i - 定义斜体文本（i 是 italic 的缩写）
element/text/i.html

<!doctype html>
<html>
<head>
    <title>i</title>
</head>
<body>
    <!--
        i - 定义斜体文本（i 是 italic 的缩写）
    -->
    <i>我是斜体文本</i>
</body>
</html>

17、b - 定义粗体文本（b 是 bold 的缩写）
element/text/b.html

<!doctype html>
<html>
<head>
    <title>b</title>
</head>
<body>
    <!--
        b - 定义粗体文本（b 是 bold 的缩写）
    -->
    <b>我是粗体文本</b>
</body>
</html>

18、u - 定义下划线文本（u 是 underline 的缩写）
element/text/u.html

<!doctype html>
<html>
<head>
    <title>u</title>
</head>
<body>
    <!--
        u - 定义下划线文本（u 是 underline 的缩写）
    -->
    <u>我是下划线文本</u>
</body>
</html>

19、mark - 定义一个标记文本，用于醒目显示
element/text/mark.html

<!doctype html>
<html>
<head>
    <title>mark</title>
</head>
<body>
    <p>
        <!--
            mark - 定义一个标记文本，用于醒目显示
        -->
        我觉得咖啡的味道像 <mark>感冒冲剂</mark> 
    </p>
</body>
</html>

20、ruby - 定义东亚文字，rt - 在 ruby 内用于为 ruby 所定义的文字注音或解释，rp - 在 ruby 内用于当浏览器不支持 ruby 时显示指定的内容
element/text/ruby_rt_rp.html

<!doctype html>
<html>
<head>
    <title>ruby rt rp</title>
</head>
<body>
    
    <!--
        ruby - 定义东亚文字
        rt - 在 ruby 内用于为 ruby 所定义的文字注音或解释
        rp - 在 ruby 内用于当浏览器不支持 ruby 时显示指定的内容（不支持的话就顺序显示文本，FireFox 不支持，可以看效果）
    -->

    <ruby>
        王睿轩
        <rp>(</rp>
        <rt>wangruixuan</rt>
        <rp>)</rp>
   </ruby>
</body>
</html>

21、bdi - 从周围独立出一段文本，用于双向文本格式（bdi 是 bi-directional isolate 的缩写）
element/text/bdi .html

<!doctype html>
<html>
<head>
    <title>bdi</title>
</head>
<body>
    <!--
        bdi - 从周围独立出一段文本，用于双向文本格式（bdi 是 bi-directional isolate 的缩写）
    -->
    
    <!--bdi 的解释是纯翻译，不知道具体干嘛用，目前也没浏览器支持-->
    <bdi />
</body>
</html>

22、bdo - 定义文本排列的方向（bdo 是 bi-directional override 的缩写）
element/text/bdo.html

<!doctype html>
<html>
<head>
    <title>bdo</title>
</head>
<body>
    <!--
        bdo - 定义文本排列的方向（bdo 是 bi-directional override 的缩写）
          dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的缩写）
    -->
    <bdo dir="rtl">123</bdo>
</body>
</html>

23、span - 没有任何语义
element/text/span.html

<!doctype html>
<html>
<head>
    <title>span</title>
</head>
<body>
    <!--
        span - 没有任何语义
          div 与 span 的区别：div 是块级（block-level）元素，span 是内联（inline）元素
    -->
    <span>
        我没有任何语义
    </span>
</body>
</html>

24、br - 定义一个换行符（br 是 blank row 的缩写）
element/text/br.html

<!doctype html>
<html>
<head>
    <title>br</title>
</head>
<body>
    <!--
        br - 定义一个换行符（br 是 blank row 的缩写）
    -->
    a
    <br />
    b
    <br />
    c
</body>
</html>

25、wbr - 定义换行的时机（wbr 是 word break 的缩写）
element/text/wbr.html

<!doctype html>
<html>
<head>
    <title>wbr</title>
</head>
<body>
    <!--
        wbr - 定义换行的时机（wbr 是 word break 的缩写）。IE 10 预览版不支持
          处理字符型语言时，显示一段没有空格的字符串时，无论其多长都不会换行，此时如果有 wbr 标签，则字符串会在浏览器宽度不够时主动换行
    -->
    <p>
        webabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcdwebabcd
    </p>
    <p>
        <wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr><wbr>webabcd</wbr>
    </p>
</body>
</html>

OK
[源码下载]

本文链接

千呼万唤 HTML 5 (3) - 内容分组元素

2011-09-22T01:03:00Z

[源码下载]

千呼万唤 HTML 5 (3) - 内容分组元素

作者：webabcd

介绍
HTML 5: 内容分组元素

内容分组元素 - p, hr, pre, blockquote, ul, ol, li, dl, dt, dd, figure, figcaption, div

示例
1、p - 用于定义段落（p 是 paragraph 的缩写）
element/group/p.html

<!doctype html>
<html>
<head>
    <title>p</title>
</head>
<body>
    <!--
        p - 用于定义段落（p 是 paragraph 的缩写）
    -->
    <p>
        段落1
    </p>
    <p>
        段落2
    </p>
    <p>
        段落3
    </p>
</body>
</html>

2、hr - 水平线，用于分隔文档的不同部分
element/group/hr.html

<!doctype html>
<html>
<head>
    <title>hr</title>
</head>
<body>
    <article>
        我是一段完整且独立的内容1
    </article>

    <!--
        hr - 水平线，用于分隔文档的不同部分
    -->
    <hr />

    <article>
        我是一段完整且独立的内容2
    </article>
</body>
</html>

3、pre - 用于定义预定义格式文本（空格和换行都会被保留）
element/group/pre.html

<!doctype html>
<html>
<head>
    <title>pre</title>
</head>
<body>
    <!--
        pre - 用于定义预定义格式文本（空格和换行都会被保留）
    -->
    <pre>
我是一段预定义格式文本
我的换行和                   空格都会被保留

if (true)
    write("true");
    </pre>
</body>
</html>

4、blockquote - 用于定义一段引用的内容（长内容）
element/group/blockquote.html

<!doctype html>
<html>
<head>
    <title>blockquote</title>
</head>
<body>
    <!--
        blockquote - 用于定义一段引用的内容（长内容）
          cite - 引用的内容的来源 url
    -->
    <blockquote cite="http://webabcd.cnblogs.com/">从 http://webabcd.cnblogs.com 里引用的一段长内容</blockquote>

    <!--
        区别：
        cite 标签用于定义引用内容的标题；blockquote 标签用来定义较长的引用；q 标签用来定义较短的内容
    -->
</body>
</html>

5、ul - 用于定义无序列表（ul 是 unorder list 的缩写），li - 用于定义列表项（可在 ul 或 ol 或 menu 内）（li 是 list item 的缩写）
element/group/ul_li.html

<!doctype html>
<html>
<head>
    <title>ul li</title>
</head>
<body>
    <!--
        ul - 用于定义无序列表（ul 是 unorder list 的缩写）
        li - 用于定义列表项（可在 ul 或 ol 或 menu 内）（li 是 list item 的缩写）
    -->
    <ul>
        <li>item01</li>
        <li>item02</li>
        <li>item03</li>
    </ul>
</body>
</html>

6、ol - 用于定义有序列表（ol 是 order list 的缩写），li - 用于定义列表项（可在 ul 或 ol 或 menu 内）（li 是 list item 的缩写）
element/group/ol_li.html

<!doctype html>
<html>
<head>
    <title>ol li</title>
</head>
<body>
    <!--
        ol - 用于定义有序列表（ol 是 order list 的缩写）
          start - 设置起始数字
          reversed - bool 类型。如果为 true，则列表倒序排列，目前还没看到哪款浏览器支持这个属性
          type - 设置列表样式类型，比如用想用 “A, B, C, ...” 做排序标识的话则设置 typ="A"。如果用样式表则设置：list-style-type: upper-alpha
        li - 用于定义列表项（可在 ul 或 ol 或 menu 内）（li 是 list item 的缩写）
    -->
    <ol>
        <li>item01</li>
        <li>item02</li>
        <li>item03</li>
    </ol>

    <ol start="10">
        <li>item01</li>
        <li>item02</li>
        <li>item03</li>
    </ol>

    <ol reversed>
        <li>item01</li>
        <li>item02</li>
        <li>item03</li>
    </ol>

    <ol type="A">
        <li>item01</li>
        <li>item02</li>
        <li>item03</li>
    </ol>

    <ol style="list-style-type: upper-alpha">
        <li>item01</li>
        <li>item02</li>
        <li>item03</li>
    </ol>
</body>
</html>

7、dl - 定义列表（definition list），dt - 定义列表中的标题（definition title），dd - 对定义列表中的标题的描述（definition description）
element/group/dl_dt_dd.html

<!doctype html>
<html>
<head>
    <title>dl dt dd</title>
</head>
<body>
    <!--
        dl - 定义列表（definition list）
        dt - 定义列表中的标题（definition title）
        dd - 对定义列表中的标题的描述（definition description）
    -->
    <dl>
        <dt>饮料</dt>
        <dd>很甜，很甜，喝了会发胖</dd>
        <dt>牛奶</dt>
        <dd>好喝，好喝，但是太贵了</dd>
        <dt>咖啡</dt>
        <dd>太苦，太苦，像感冒冲剂</dd>
    </dl>
</body>
</html>

8、figure - 整合相关元素
element/group/figure.html

<!doctype html>
<html>
<head>
    <title>figure</title>
</head>
<body>
    <!--
        figure - 整合相关元素
    -->
    <figure>
        <p>学 html 5 有用吗？</p>
        <p>我正在学习 html 5，对它的未来充满信心</p>
    </figure>
</body>
</html>

9、figcaption - figure 元素的标题，它应该是 figure 的第一个子元素或最后一个子元素
element/group/figcaption.html

<!doctype html>
<html>
<head>
    <title>figcaption</title>
</head>
<body>
    <!--
        figcaption - figure 元素的标题，它应该是 figure 的第一个子元素或最后一个子元素
    -->
    <figure>
        <figcaption>html 5</figcaption>
        <p>学 html 5 有用吗？</p>
        <p>我正在学习 html 5，对它的未来充满信心</p>
    </figure>
</body>
</html>

10、div - 没有任何语义（div 是 division 的缩写）
element/group/div.html

<!doctype html>
<html>
<head>
    <title>div</title>
</head>
<body>
    <!--
        div - 没有任何语义（div 是 division 的缩写）
          div 与 span 的区别：div 是块级（block-level）元素，span 是内联（inline）元素
    -->
    <div>
        我没有任何语义
    </div>
</body>
</html>

OK
[源码下载]

本文链接

千呼万唤 HTML 5 (2) - 区块元素

2011-09-19T02:10:00Z

[源码下载]

千呼万唤 HTML 5 (2) - 区块元素

作者：webabcd

介绍
HTML 5: 区块元素

区块元素 - body, article, section, header, footer, h1, h2, h3, h4, h5, h6, hgroup, aside, nav, address

示例
1、body - 用于定义文档的主体
element/section/body.html

<!doctype html>
<html>
<head>
    <title>body</title>
</head>

<!--
    body - 用于定义文档的主体。其相关事件处理属性如下
-->
<body>
    <script type="text/javascript" defer>
        var body = document.body;

        body.onafterprint = function () { alert("onafterprint"); };
        body.onbeforeprint = function () { alert("onbeforeprint"); };
        body.onbeforeunload = function () { alert("onbeforeunload"); };
        body.onblur = function () { alert("onblur"); };
        body.onerror = function () { alert("onerror"); };
        body.onfocus = function () { alert("onfocus"); };
        body.onhashchange = function () { alert("onhashchange"); };
        body.onload = function () { alert("onload"); };
        body.onmessage = function () { alert("onmessage"); };
        body.onoffline = function () { alert("onoffline"); };
        body.ononline = function () { alert("ononline"); };
        body.onpagehide = function () { alert("onpagehide"); };
        body.onpageshow = function () { alert("onpageshow"); };
        body.onpopstate = function () { alert("onpopstate"); };
        body.onresize = function () { alert("onresize"); };
        body.onscroll = function () { alert("onscroll"); };
        body.onstorage = function () { alert("onstorage"); };
        body.onunload = function () { alert("onunload"); };
    </script>
</body>
</html>

2、article - 用于定义一段完整且独立的内容
element/section/article.html

<!doctype html>
<html>
<head>
    <title>article</title>
</head>
<body>
    <!--
        article - 用于定义一段完整且独立的内容
    -->
    <article>
        我是一段完整且独立的内容
    </article>
</body>
</html>

3、section - 用于定义文档内容中的某一部分
element/section/section.html

<!doctype html>
<html>
<head>
    <title>section</title>
</head>
<body>
    <article>
        <!--
            section - 用于定义文档内容中的某一部分
        -->
        <section>我要学习 html5</section>
        <section>我要学习 flash</section>
        <section>我要学习 silverlight</section>
    </article>
</body>
</html>

4、header - 定义文档的页眉
element/section/header.html

<!doctype html>
<html>
<head>
    <title>header</title>
</head>
<body>
    <article>
        <!--
            header - 定义文档的页眉
        -->
        <header>学什么呢？</header>
        <section>我要学习 html5</section>
        <section>我要学习 flash</section>
        <section>我要学习 silverlight</section>
    </article>
</body>
</html>

5、footer - 定义文档的页脚
element/section/footer.html

<!doctype html>
<html>
<head>
    <title>footer</title>
</head>
<body>
    <article>
        <header>学什么呢？</header>
        <section>我要学习 html5</section>
        <section>我要学习 flash</section>
        <section>我要学习 silverlight</section>
        <!--
            footer - 定义文档的页脚
        -->
        <footer>作者：webabcd</footer>
    </article>
</body>
</html>

6、h1 h2 h3 h4 h5 h6 - 用于定义 6 种不同级别的标题，h1 为最大标题，h6 为最小标题
element/section/h1_h2_h3_h4_h5_h6.html

<!doctype html>
<html>
<head>
    <title>h1 h2 h3 h4 h5 h6</title>
</head>
<body>
    <article>
        <header>
            <!--
                h1 h2 h3 h4 h5 h6 - 用于定义 6 种不同级别的标题，h1 为最大标题，h6 为最小标题
            -->
            <h6>学什么呢？</h6>
        </header>
        <section>我要学习 html5</section>
        <section>我要学习 flash</section>
        <section>我要学习 silverlight</section>
        <footer>作者：webabcd</footer>
    </article>
</body>
</html>

7、hgroup - 用于对文档某段内容的标题进行组合，使用 h1 h2 h3 h4 h5 h6 来标记标题的级别
element/section/hgroup.html

<!doctype html>
<html>
<head>
    <title>hgroup</title>
</head>
<body>
    <article>
        <header>
            <h6>
                学什么呢？
            </h6>
        </header>
        <!--
            hgroup - 用于对文档某段内容的标题进行组合，使用 h1 h2 h3 h4 h5 h6 来标记标题的级别
        -->
        <hgroup>
            <h1>webabcd 文章</h1>
            <h2>谈谈学习</h2>
        </hgroup>
        <section>我要学习 html5</section>
        <section>我要学习 flash</section>
        <section>我要学习 silverlight</section>
        <footer>作者：webabcd</footer>
    </article>
</body>
</html>

8、aside - 用于定义文档以外的，但却与文档相关的内容
element/section/aside.html

<!doctype html>
<html>
<head>
    <title>aside</title>
</head>
<body>
    <article>
        <header>
            <h6>
                学什么呢？
            </h6>
        </header>
        <hgroup>
            <h1>webabcd 文章</h1>
            <h2>谈谈学习</h2>
        </hgroup>
        <section>我要学习 html5</section>
        <section>我要学习 flash</section>
        <section>我要学习 silverlight</section>
        <footer>作者：webabcd</footer>
        <!--
            aside - 用于定义文档以外的，但却与文档相关的内容
        -->
        <aside>
            我还写了好多其他文章
        </aside>
    </article>
</body>
</html>

9、nav - 用于定义导航链接（nav 是 navigation 的缩写）
element/section/nav.html

<!doctype html>
<html>
<head>
    <title>nav</title>
</head>
<body>
    <article>
        <header>
            <h6>
                学什么呢？
            </h6>
        </header>
        <hgroup>
            <h1>webabcd 文章</h1>
            <h2>谈谈学习</h2>
        </hgroup>
        <section>我要学习 html5</section>
        <section>我要学习 flash</section>
        <section>我要学习 silverlight</section>
        <footer>作者：webabcd</footer>
        <aside>
            <!--
                nav - 用于定义导航链接（nav 是 navigation 的缩写）
            -->
            <nav><a href="http://webabcd.cnblogs.com/" target="_blank">我还写了好多其他文章,单击这里查看</a></nav>
        </aside>
    </article>
</body>
</html>

10、address - 定义文档作者的联系信息
element/section/address.html

<!doctype html>
<html>
<head>
    <title>address</title>
</head>
<body>
    <article>
        <header>
            <h6>
                学什么呢？
            </h6>
        </header>
        <hgroup>
            <h1>webabcd 文章</h1>
            <h2>谈谈学习</h2>
        </hgroup>
        <section>我要学习 html5</section>
        <section>我要学习 flash</section>
        <section>我要学习 silverlight</section>
        <footer>
            <!--
                address - 定义文档作者的联系信息
            -->
            <address>
                作者：webabcd，我的电话：911
            </address>
        </footer>
        <aside>
            <nav><a href="http://webabcd.cnblogs.com/" target="_blank">我还写了好多其他文章,单击这里查看</a></nav>
        </aside>
    </article>
</body>
</html>

OK
[源码下载]

本文链接

千呼万唤 HTML 5 (1) - 根元素, 元数据元素, 脚本元素

2011-09-15T01:42:00Z

[源码下载]

千呼万唤 HTML 5 (1) - 根元素, 元数据元素, 脚本元素

作者：webabcd

介绍
HTML 5: 根元素, 元数据元素, 脚本元素

根元素 - doctype, html
元数据元素 - head, title, base, link, meta, style
脚本元素 - script, noscript

示例
1、doctype - 文档类型
element/root/doctype.html

<!--
    <!doctype html> - 声明文档类型为 HTML5 文档
-->
<!doctype html>
<html>
<head>
    <title>doctype</title>
</head>
<body>
</body>
</html>

2、html - 文档的根元素
element/root/html.html

<!doctype html>

<!--
    html - 文档的根元素，如需指定语言，则设置“lang”属性即可
-->
<html lang="zh-CN">

<head>
    <title>html</title>
</head>
<body>
</body>
</html>

3、head - 头容器
element/metadata/head.html

<!doctype html>
<html>

<!--
    head - 头容器，可包含如下标签: title, base, link, meta, style, script。其中必须要有 title 标签
-->
<head>
    <title>head</title>
    <base />
    <link />
    <meta />
    <style></style>
    <script type="text/javascript"></script>
</head>
<body>
</body>
</html>

4、title - 文档标题
element/metadata/title.html

<!doctype html>
<html>
<head>
    <!--
        title - 文档标题
    -->
    <title>我是标题</title>
</head>
<body>

    <script type="text/javascript">

        var title = document.getElementsByTagName("title")[0];
        alert(title.text);
    
    </script>

</body>
</html>

5、base - 设置文档的默认地址和链接的默认打开方式
element/metadata/base.html

<!doctype html>
<html>
<head>
    <title>base</title>
    <!--
        base - 设置一些默认值
          href - 指定当前文档的默认地址，不指定的话默认地址为当前文档的 url。文档中相对路径的解析后的绝对地址为：默认地址 + 相对路径
          target - 指定文档中链接的默认打开方式。_blank, _parent, _self, _top
    -->
    <base href="http://pic.cnblogs.com/avatar/" target="_blank" />
</head>
<body>
    <!--
        a 标签的链接打开方式为 _blank
        img 标签的图片绝对地址为 http://pic.cnblogs.com/avatar/a14540.jpg
    -->
    <a href="http://webabcd.cnblogs.com/">
        <img src="a14540.jpg" alt="baby" />
    </a>
</body>
</html>

6、link - 定义两个文档之间的关系，一般用于引入样式表
element/metadata/link.html

<!doctype html>
<html>
<head>
    <title>link</title>
    <!--
        link - 定义两个文档之间的关系，一般用于引入样式表，示例如下
          rel - 指定文档间的关系，对于样式表来说此属性的值为 stylesheet。link 标签必须要有 rel 属性
          type - link 所接入的文档的类型
          href - link 所接入的文档的地址
          title - link 所接入的文档的标题，对于样式表来说，可以在 meta 里指定默认样式表的 title，从而只使用指定 title 的样式表
          disabled, relList(只读), media, hreflang, sizes(只读)
    -->
    <link rel="stylesheet" type="text/css" href="http://www.www.www/css.css" />
</head>
<body>
</body>
</html>

7、meta - 文档相关的元数据
element/metadata/meta.html

<!doctype html>
<html>
<head>
    <title>meta</title>
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/assets/css1.css" title="css1" />
    <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/assets/css2.css" title="css2" />

    <!--
        meta - 文档相关的元数据。可用属性如下：name, http-equiv, content, charset
    -->

    <!--
        name, content 组合的示例如下（不全）
    -->
    <!--定义关键字-->
    <meta name="keywords" content="html5, flash, silverlight" />
    <!--定义文档的描述信息-->
    <meta name="description" content="介绍 html5 中的 meta 标签" />
    <!--定义文档的作者-->
    <meta name="author" content="webabcd" />
    <!--定义文档的生成工具-->
    <meta name="generator" content="EditPlus" />
    <!--如果把此 html5 文档看成一个程序，则此处用于定义程序的名称-->
    <meta name="application-name" content="meta 标签的介绍" />


    <!--
        http-equiv, content 组合的示例如下（不全）
    -->
    <!--定义文档内容的语言-->
    <meta http-equiv="content-language" content="zh-CN" /> 
    <!--定义文档内容的类型-->
    <meta http-equiv="content-type" content="text/html" /> 
    <!--定义文档所使用的样式表的 title，从而在有多个样式表的时候，只使用指定 title 的样式表。本例中会强制只使用 title 为 css1 的样式表-->
    <meta http-equiv="default-style" content="css1" /> 
    <!--文档每 100 秒刷新一次-->
    <meta http-equiv="refresh" content="100" />
    <!--设置 cookie-->
    <meta http-equiv="set-cookie" content="author=webabcd;" /> 


    <!--定义文档的编码类型-->
    <meta charset="utf-8">
</head>
<body>
    webabcd

    <script type="text/javascript">
        // 获取 meta 中设置的 cookie
        alert(document.cookie);
    </script>
</body>
</html>

css1.css

body 
{
    color: Red;
}

css2.css

body 
{
    color: Green;
    font-size: 24px;
}

8、style - 定义文档的样式信息
element/metadata/style.html

<!doctype html>
<html>
<head>
    <title>style</title>

    <!--
        style - 定义文档的样式信息。可用属性如下: disabled, media, type, scoped
          scoped - bool 类型的属性，如果为 true，则代表样式只能应用到 style 元素的父元素及其子元素（对于 scoped 为 false 的 style 只能写在 head 内）
    -->

    <style>
        div { font-size: 24px; }
    </style>
</head>
<body>
    <div>
        我和我的子都应该是红色的
        <style scoped>
            div { color:Red; }
        </style>
    </div>
    <div>
        如果我是红色的，也就是说浏览器不支持 style 的 scoped（注：目前所有浏览器都不支持 style 的 scoped）
    </div>
</body>
</html>

9、script - 用于定义客户端脚本
element/script/script.html

<!doctype html>
<html>
<head>
    <title>script</title>

    <!--
        script - 用于定义客户端脚本，可用属性如下：src, async, defer, type, charset
          type - 脚本的 MIME 类型，此属性必须要有
          src - 外部脚本的 url 地址，如果指定了 src，那么 script 标签必须是空的
          charset - 脚本的编码类型
          defer - bool 类型。如果为 true 的话，则脚本在页面解析完后执行，即在 DOMContentLoaded 事件之前执行，会按照 script 在页面的出现顺序执行，不阻塞页面解析（界面解析的过程中，并行下载脚本）
          async - bool 类型。如果为 true 的话，则在页面解析的过程中会异步下载脚本，脚本下载完马上执行（肯定会在 window 的 onload 事件之前执行），不阻塞页面解析（界面解析的过程中，并行下载脚本）
    -->

    <!--
        引用两段脚本，无 async 时或 defer 时，必然先执行完 script1 后再执行 script2
        如果被标记为 async，假设 script2 先下载完，script1 后下载完的话，那么会先执行 script2， 再执行 script1
    -->
    <script type="text/javascript" src="http://www.cnblogs.com/assets/script1.js" async></script>
    <script type="text/javascript" src="http://www.cnblogs.com/assets/script2.js" async></script>
</head>
<body>
</body>
</html>

script1.js

alert("script1 completed");

/*伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js*/
/*伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js*/
/*伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js 伪造一个大容量的 js*/
...

script2.js

alert("script2 completed");

10、noscript - 定义当浏览器不支持脚本的时候所显示的内容
element/script/noscript.html

<!doctype html>
<html>
<head>
    <title>noscript</title>
</head>
<body>
    <script type="text/javascript">
        alert("您的浏览器支持脚本");
    </script>

    <!--
        noscript - 定义当浏览器不支持脚本的时候所显示的内容
    -->
    <noscript>
        您的浏览器不支持脚本
    </noscript>
</body>
</html>

OK
[源码下载]

本文链接

梦想成真 XNA (10) - 3D 模型的碰撞检测

2011-08-25T02:14:00Z

[源码下载]

梦想成真 XNA (10) - 3D 模型的碰撞检测

作者：webabcd

介绍
XNA: 3D 模型的碰撞检测。通过包围球（Bounding Sphere）算法实现碰撞检测

示例
演示 3D 模型的碰撞检测，“上下左右”键控制 3D 模型的旋转，“LeftShift”和“LeftControl”键控制 3D 模型的前后移动（按键盘 S 键加载此 Demo）
3D/Collision/RotationDirection.cs

namespace XNA.Component._3D.Collision
{
    /// <summary>
    /// 旋转方向
    /// </summary>
    public enum RotationDirection
    {
        Up,
        Down,
        Left,
        Right
    }
}

3D/Collision/TranslationDirection.cs

namespace XNA.Component._3D.Collision
{
    /// <summary>
    /// 位移方向
    /// </summary>
    public enum TranslationDirection
    {
        Forward,
        Backward
    }
}

3D/Collision/MyCamera.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace XNA.Component._3D.Collision
{
    /// <summary>
    /// 自定义摄像机类
    /// </summary>
    public class MyCamera : Microsoft.Xna.Framework.GameComponent
    {
        // View 矩阵，用于设置摄像机的位置和方向
        public Matrix View { get; protected set; }
        // Projection 矩阵，用于将 3D 物体投影到 2D 屏幕上
        public Matrix Projection { get; protected set; }

        public MyCamera(Game game, Vector3 pos, Vector3 target, Vector3 up)
            : base(game)
        {
            /*
             * Matrix CreateLookAt(Vector3 cameraPosition, Vector3 cameraTarget, Vector3 cameraUpVector) - 实例化视图矩阵
             *     Vector3 cameraPosition - 摄像机的位置坐标
             *     Vector3 cameraTarget - 摄像机镜头的朝向向量
             *     Vector3 cameraUpVector - 摄像机机身的顶部的上方的向量
             */
            View = Matrix.CreateLookAt(pos, target, up);

            /*
             * CreatePerspectiveFieldOfView(float fieldOfView, float aspectRatio, float nearPlaneDistance, float farPlaneDistance) - 实例化投影矩阵
             *     float fieldOfView - Y 轴方向上的视角弧度，一般是四分之一个 PI
             *     float aspectRatio - 可视区的长宽比，一般就是游戏窗口的宽除以游戏窗口的高
             *     float nearPlaneDistance - 当物体离摄像机多近时无法看清
             *     float farPlaneDistance - 当物体离摄像机多远时无法看清
             */
            Projection = Matrix.CreatePerspectiveFieldOfView(
                MathHelper.PiOver4, // 四分之一个 PI（MathHelper 里有很多实用的功能）
                (float)Game.Window.ClientBounds.Width /
                (float)Game.Window.ClientBounds.Height,
                1, 
                3000
            );
        }

        public override void Initialize()
        {
            base.Initialize();
        }

        public override void Update(GameTime gameTime)
        {
            base.Update(gameTime);
        }
    }
}

3D/Collision/MyModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace XNA.Component._3D.Collision
{
    /// <summary>
    /// 自定义 3D 模型类
    /// </summary>
    public class MyModel
    {
        // Model - 代表 3D 模型。代表 2D 对象的是 Texture2D
        private Model _model;

        // 旋转矩阵
        private Matrix _rotation = Matrix.Identity;

        // 位移矩阵
        private Matrix _translation = Matrix.Identity;

        // 初始矩阵
        private Matrix _world = Matrix.Identity;

        public MyModel(Model model, Matrix world)
        {
            _model = model;
            _world = world;
        }

        /// <summary>
        /// 绘制 3D 模型
        /// </summary>
        public void Draw(MyCamera camera)
        {
            /*
             * 一个 Model 对象里有多个 ModelMesh 对象，每个 ModelMesh 对象包含了此网格的纹理、颜色等信息
             */
            foreach (ModelMesh mesh in _model.Meshes)
            {
                /*
                 * 一个 ModelMesh 对象里有多个用于绘制 ModelMesh 的 Effect
                 */
                foreach (BasicEffect effect in mesh.Effects)
                {
                    //  使用默认光源效果
                    effect.EnableDefaultLighting();

                    effect.Projection = camera.Projection;
                    effect.View = camera.View;
                    effect.World = GetWorld();
                }

                // 绘制 ModelMesh
                mesh.Draw();
            }
        }

        /// <summary>
        /// 根据方向（上下左右）计算旋转矩阵
        /// </summary>
        public void Rotate(RotationDirection direction)
        {
            switch (direction)
            {
                case RotationDirection.Up:
                    _rotation *= Matrix.CreateRotationX(-MathHelper.Pi / 180); // 绕 X 轴旋转的弧度
                    break;
                case RotationDirection.Down:
                    _rotation *= Matrix.CreateRotationX(MathHelper.Pi / 180);
                    break;
                case RotationDirection.Left:
                    _rotation *= Matrix.CreateRotationY(-MathHelper.Pi / 180); // 绕 Y 轴旋转的弧度
                    break;
                case RotationDirection.Right:
                    _rotation *= Matrix.CreateRotationY(MathHelper.Pi / 180);
                    break;
            }
        }

        /// <summary>
        /// 计算位移矩阵（前进或后退）
        /// </summary>
        public void Move(TranslationDirection direction)
        {
            switch (direction)
            {
                case TranslationDirection.Forward:
                    _translation *= Matrix.CreateTranslation(_rotation.Backward);
                    break;
                case TranslationDirection.Backward:
                    _translation *= Matrix.CreateTranslation(_rotation.Forward);
                    break;
            }
        }

        /// <summary>
        /// 获取世界矩阵，即初始矩阵乘以旋转矩阵
        /// </summary>
        public Matrix GetWorld()
        {
            return _world * _rotation * _translation;
        }
        
        /// <summary>
        /// 返回自定义 3D 模型的 Model 对象
        /// </summary>
        public Model GetModel()
        {
            return _model;
        }

        /// <summary>
        /// 检测另一个 Model 是否与本 Model 发生了碰撞
        /// </summary>
        /// <param name="model2">另一个 3D 模型的 Model</param>
        /// <param name="world2">另一个 3D 模型的世界矩阵</param>
        /// <returns></returns>
        public bool CheckCollision(Model model2, Matrix world2)
        {
            foreach (ModelMesh mesh in _model.Meshes)
            {
                foreach (ModelMesh mesh2 in model2.Meshes)
                {
                    // 每个 ModelMesh 对象都有一个 BoundingSphere 属性
                    if (mesh.BoundingSphere.Transform(GetWorld()).Intersects(mesh2.BoundingSphere.Transform(world2)))
                        return true;
                }
            }
            return false;
        }
    }
}

3D/Collision/Demo.cs

/*
 * 本例演示：3D 模型的碰撞检测，通过包围球（Bounding Sphere）算法（XNA 已经内置了这种算法）
 * “上下左右”键控制 3D 模型的旋转，“LeftShift”和“LeftControl”键控制 3D 模型的前后移动
 */

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace XNA.Component._3D.Collision
{
    public class Demo : Microsoft.Xna.Framework.DrawableGameComponent
    {
        private MyCamera _camera;

        // 计算机控制的模型
        private MyModel _modelSystem;

        // 用户控制的模型
        private MyModel _modelUser;

        // 是否发生了碰撞
        bool _collided = false;

        public Demo(Game game)
            : base(game)
        {

        }

        public override void Initialize()
        {
            // 添加摄像机组件
            _camera = new MyCamera(Game, new Vector3(0, 0, 50), Vector3.Zero, Vector3.Up);
            Game.Components.Add(_camera);

            base.Initialize();
        }

        protected override void LoadContent()
        {
            _modelSystem = new MyModel(Game.Content.Load<Model>(@"3DModel\Spaceship"), Matrix.Identity * Matrix.CreateTranslation(0, 0, -200));
            _modelUser = new MyModel(Game.Content.Load<Model>(@"3DModel\Spaceship"), Matrix.Identity * Matrix.CreateTranslation(0, -10, 0));

            base.LoadContent();
        }

        public override void Update(GameTime gameTime)
        {
            // 判断两个 3D 模型是否发生了碰撞
            _collided = _modelUser.CheckCollision(_modelSystem.GetModel(), _modelSystem.GetWorld());
            if (_collided)
                return;


            KeyboardState keyboardState = Keyboard.GetState();

            // 根据用户的按键（上下左右），旋转 3D 模型
            if (keyboardState.IsKeyDown(Keys.Up))
                _modelUser.Rotate(RotationDirection.Up);
            else if (keyboardState.IsKeyDown(Keys.Down))
                _modelUser.Rotate(RotationDirection.Down);
            else if (keyboardState.IsKeyDown(Keys.Left))
                _modelUser.Rotate(RotationDirection.Left);
            else if (keyboardState.IsKeyDown(Keys.Right))
                _modelUser.Rotate(RotationDirection.Right);

            // 根据用户的按键移动 3D 模型：LeftShift - 向前移动；LeftControl - 向后移动
            if (keyboardState.IsKeyDown(Keys.LeftShift))
                _modelUser.Move(TranslationDirection.Forward);
            else if (keyboardState.IsKeyDown(Keys.LeftControl))
                _modelUser.Move(TranslationDirection.Backward);

            base.Update(gameTime);
        }

        public override void Draw(GameTime gameTime)
        {
            if (_collided)
                Game.GraphicsDevice.Clear(Color.IndianRed);
            else
                Game.GraphicsDevice.Clear(Color.CornflowerBlue);

            // 绘制 3D 模型
            _modelSystem.Draw(_camera);
            _modelUser.Draw(_camera);

            base.Update(gameTime);
        }
    }
}

OK
[源码下载]

本文链接

梦想成真 XNA (9) - 3D 模型

2011-08-23T00:51:00Z

[源码下载]

梦想成真 XNA (9) - 3D 模型

作者：webabcd

介绍
XNA: 3D 模型。通过键盘的“上下左右”键旋转 3D 模型

示例
绘制一个 3D 模型，并通过“上下左右”键控制它的旋转（按键盘 R 键加载此 Demo）
3D/3DModel/RotationDirection.cs

namespace XNA.Component._3D._3DModel
{
    /// <summary>
    /// 旋转方向
    /// </summary>
    public enum RotationDirection
    {
        Up,
        Down,
        Left,
        Right
    }
}

3D/3DModel/MyCamera.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace XNA.Component._3D._3DModel
{
    /// <summary>
    /// 自定义摄像机类
    /// </summary>
    public class MyCamera : Microsoft.Xna.Framework.GameComponent
    {
        // View 矩阵，用于设置摄像机的位置和方向
        public Matrix View { get; protected set; }
        // Projection 矩阵，用于将 3D 物体投影到 2D 屏幕上
        public Matrix Projection { get; protected set; }

        public MyCamera(Game game, Vector3 pos, Vector3 target, Vector3 up)
            : base(game)
        {
            /*
             * Matrix CreateLookAt(Vector3 cameraPosition, Vector3 cameraTarget, Vector3 cameraUpVector) - 实例化视图矩阵
             *     Vector3 cameraPosition - 摄像机的位置坐标
             *     Vector3 cameraTarget - 摄像机镜头的朝向向量
             *     Vector3 cameraUpVector - 摄像机机身的顶部的上方的向量
             */
            View = Matrix.CreateLookAt(pos, target, up);

            /*
             * CreatePerspectiveFieldOfView(float fieldOfView, float aspectRatio, float nearPlaneDistance, float farPlaneDistance) - 实例化投影矩阵
             *     float fieldOfView - Y 轴方向上的视角弧度，一般是四分之一个 PI
             *     float aspectRatio - 可视区的长宽比，一般就是游戏窗口的宽除以游戏窗口的高
             *     float nearPlaneDistance - 当物体离摄像机多近时无法看清
             *     float farPlaneDistance - 当物体离摄像机多远时无法看清
             */
            Projection = Matrix.CreatePerspectiveFieldOfView(
                MathHelper.PiOver4, // 四分之一个 PI（MathHelper 里有很多实用的功能）
                (float)Game.Window.ClientBounds.Width /
                (float)Game.Window.ClientBounds.Height,
                1, 
                3000
            );
        }

        public override void Initialize()
        {
            base.Initialize();
        }

        public override void Update(GameTime gameTime)
        {
            base.Update(gameTime);
        }
    }
}

3D/3DModel/MyModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace XNA.Component._3D._3DModel
{
    /// <summary>
    /// 自定义 3D 模型类
    /// </summary>
    public class MyModel
    {
        // Model - 代表 3D 模型。代表 2D 对象的是 Texture2D
        private Model _model;

        // 旋转矩阵
        private Matrix _rotation = Matrix.Identity;

        // 初始矩阵
        private Matrix _world = Matrix.Identity;

        public MyModel(Model model, Matrix world)
        {
            _model = model;
            _world = world;
        }

        /// <summary>
        /// 绘制 3D 模型
        /// </summary>
        public void Draw(MyCamera camera)
        {
            /*
             * 一个 Model 对象里有多个 ModelMesh 对象，每个 ModelMesh 对象包含了此网格的纹理、颜色等信息
             */
            foreach (ModelMesh mesh in _model.Meshes)
            {
                /*
                 * 一个 ModelMesh 对象里有多个用于绘制 ModelMesh 的 Effect
                 */
                foreach (BasicEffect effect in mesh.Effects)
                {
                    //  使用默认光源效果
                    effect.EnableDefaultLighting();

                    effect.Projection = camera.Projection;
                    effect.View = camera.View;
                    effect.World = GetWorld();
                }

                // 绘制 ModelMesh
                mesh.Draw();
            }
        }

        /// <summary>
        /// 根据方向（上下左右）计算旋转矩阵
        /// </summary>
        public void Rotate(RotationDirection direction)
        {
            switch (direction)
            {
                case RotationDirection.Up:
                    _rotation *= Matrix.CreateRotationX(-MathHelper.Pi / 180); // 绕 X 轴旋转的弧度
                    break;
                case RotationDirection.Down:
                    _rotation *= Matrix.CreateRotationX(MathHelper.Pi / 180);
                    break;
                case RotationDirection.Left:
                    _rotation *= Matrix.CreateRotationY(-MathHelper.Pi / 180); // 绕 Y 轴旋转的弧度
                    break;
                case RotationDirection.Right:
                    _rotation *= Matrix.CreateRotationY(MathHelper.Pi / 180);
                    break;
            }
        }

        /// <summary>
        /// 获取世界矩阵，即初始矩阵乘以旋转矩阵
        /// </summary>
        public Matrix GetWorld()
        {
            return _world * _rotation;
        }
    }
}

3D/3DModel/Demo.cs

/*
 * XNA 只支持 .x 和 .fbx 格式的 3D 模型文件 
 * 本例所用 3D 模型的位置在：XNAContent/3DModel/Spaceship.x
 * 
 * 本例演示：通过键盘的“上下左右”键旋转 3D 模型
 */

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace XNA.Component._3D._3DModel
{
    public class Demo : Microsoft.Xna.Framework.DrawableGameComponent
    {
        private MyCamera _camera;
        private List<MyModel> _models = new List<MyModel>();

        public Demo(Game game)
            : base(game)
        {

        }

        public override void Initialize()
        {
            // 添加摄像机组件
            _camera = new MyCamera(Game, new Vector3(0, 0, 50), Vector3.Zero, Vector3.Up);
            Game.Components.Add(_camera);

            base.Initialize();
        }

        protected override void LoadContent()
        {
            // 添加两个不同位置的 3D 模型
            _models.Add(new MyModel(Game.Content.Load<Model>(@"3DModel\Spaceship"), Matrix.Identity * Matrix.CreateTranslation(-10, -5, -20)));
            _models.Add(new MyModel(Game.Content.Load<Model>(@"3DModel\Spaceship"), Matrix.Identity * Matrix.CreateTranslation(10, 5, 0)));

            base.LoadContent();
        }

        public override void Update(GameTime gameTime)
        {
            // 根据用户的按键（上下左右），旋转 3D 模型
            KeyboardState keyboardState = Keyboard.GetState();

            foreach (MyModel model in _models)
            {
                if (keyboardState.IsKeyDown(Keys.Up))
                    model.Rotate(RotationDirection.Up);
                else if (keyboardState.IsKeyDown(Keys.Down))
                    model.Rotate(RotationDirection.Down);
                else if (keyboardState.IsKeyDown(Keys.Left))
                    model.Rotate(RotationDirection.Left);
                else if (keyboardState.IsKeyDown(Keys.Right))
                    model.Rotate(RotationDirection.Right);
            }

            base.Update(gameTime);
        }

        public override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // 绘制 3D 模型
            foreach (MyModel model in _models)
            {
                model.Draw(_camera);
            }

            base.Update(gameTime);
        }
    }
}

OK
[源码下载]

本文链接

梦想成真 XNA (8) - 3D 基础

2011-08-18T01:00:00Z

[源码下载]

梦想成真 XNA (8) - 3D 基础

作者：webabcd

介绍
XNA: 3D 基础

在 3D 坐标中绘制一个三角形
让一个图片纹理在 3D 世界中动起来

示例
1、在一个 3D 坐标中绘制一个三角形（按键盘 P 键加载此 Demo）
3D/Basic/Demo.cs

/*
 * XNA 的 3D 坐标采用右手坐标系
 * 区分左手坐标系还是右手坐标系的方法：伸出手，掌心向上，四指指向 X 轴正方向的同时向 Y 轴正方向卷起，大拇指所指向的方向就是 Z 轴正方向
 * 
 * 本例演示：在一个 3D 坐标中绘制一个三角形
 */

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace XNA.Component._3D.Basic
{
    public class Demo : Microsoft.Xna.Framework.DrawableGameComponent
    {
        // View 矩阵，用于设置摄像机的位置和方向
        private Matrix _view;
        // Projection 矩阵，即摄像机的视野，其由摄影角度、屏幕宽高比、近截面和远截面组成，用于将 3D 物体投影到 2D 屏幕上
        private Matrix _projection;

        // 顶点信息数组，VertexPositionColor 对象包含了顶点的位置信息和颜色信息
        private VertexPositionColor[] _vertices;
        // 顶点缓冲器，可以将顶点信息以流的方式输出到图形设备中
        private VertexBuffer _vertexBuffer;

        // 基础效果，可以通过简单的属性设置来实现包含光照、纹理、变换等效果的物体的呈现
        private BasicEffect _effect;

        public Demo(Game game)
            : base(game)
        {

        }

        public override void Initialize()
        {
            // 创建摄像机
            CreateCamera();

            base.Initialize();
        }

        protected override void LoadContent()
        {
            // 创建顶点信息
            CreateVertices();

            // 创建顶点缓冲器
            CreateVertexBuffer();

            _effect = new BasicEffect(GraphicsDevice);
        }

        public override void Update(GameTime gameTime)
        {
            base.Update(gameTime);
        }

        public override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            DrawIt();

            base.Update(gameTime);
        }

        // 创建摄像机
        // 摄像机由两部分组成，视图矩阵和投影矩阵
        private void CreateCamera()
        {
            /*
             * Matrix CreateLookAt(Vector3 cameraPosition, Vector3 cameraTarget, Vector3 cameraUpVector) - 实例化视图矩阵
             *     Vector3 cameraPosition - 摄像机的位置坐标
             *     Vector3 cameraTarget - 摄像机镜头的朝向向量
             *     Vector3 cameraUpVector - 摄像机机身的顶部的上方的向量
             */
            _view = Matrix.CreateLookAt(
                new Vector3(0, 0, 5),
                Vector3.Zero,
                Vector3.Up
            );

            /*
             * CreatePerspectiveFieldOfView(float fieldOfView, float aspectRatio, float nearPlaneDistance, float farPlaneDistance) - 实例化投影矩阵
             *     float fieldOfView - Y 轴方向上的视角弧度，一般是四分之一个 PI
             *     float aspectRatio - 可视区的长宽比，一般就是游戏窗口的宽除以游戏窗口的高
             *     float nearPlaneDistance - 当物体离摄像机多近时无法看清
             *     float farPlaneDistance - 当物体离摄像机多远时无法看清
             */
            _projection = Matrix.CreatePerspectiveFieldOfView(
                MathHelper.PiOver4, // 四分之一个 PI（MathHelper 里有很多实用的功能）
                (float)Game.Window.ClientBounds.Width / (float)Game.Window.ClientBounds.Height,
                1,
                100
            );
        }

        // 创建顶点信息
        private void CreateVertices()
        {
            // 保存三角形的三个顶点的位置和颜色信息
            _vertices = new VertexPositionColor[3];
            _vertices[0] = new VertexPositionColor(new Vector3(0, 1, 0), Color.Blue);
            _vertices[1] = new VertexPositionColor(new Vector3(1, -1, 0), Color.Red);
            _vertices[2] = new VertexPositionColor(new Vector3(-1, -1, 0), Color.Green);
        }

        // 创建顶点缓冲器
        private void CreateVertexBuffer()
        {
            // 实例化顶点缓冲器
            _vertexBuffer = new VertexBuffer(
                GraphicsDevice,                 // 图形设备对象
                typeof(VertexPositionColor),    // 顶点信息的数据类型
                _vertices.Length,               // 顶点的总数
                BufferUsage.None                // 缓冲器的使用方式：BufferUsage.None - 可读可写；BufferUsage.WriteOnly - 只可写
            );

            // VertexBuffer.SetData() - 为顶点缓冲器设置顶点信息数据
            _vertexBuffer.SetData(_vertices);
        }

        private void DrawIt()
        {
            // 绑定顶点缓冲器到图形设备中
            GraphicsDevice.SetVertexBuffer(_vertexBuffer);

            /*
             * BasicEffect - 基础效果，可以通过简单的属性设置来实现包含光照、纹理、变换等效果的物体的呈现
             *     BasicEffect.View - 视图矩阵（View 矩阵）
             *     BasicEffect.Projection - 投影矩阵（Projection 矩阵）
             *     BasicEffect.VertexColorEnabled - 是否允许在此效果中启用顶点信息中的颜色数据
             */
            _effect.View = _view;
            _effect.Projection = _projection;
            _effect.VertexColorEnabled = true;

            /*
             * EffectPass - 用于绘制一个效果，一个 BasicEffect 中可以包含多个 
             *     EffectPass.Apply() - 绘制此效果
             */
            foreach (EffectPass pass in _effect.CurrentTechnique.Passes)
            {
                pass.Apply();

                // GraphicsDevice.DrawUserPrimitives() - 绘制基元
                GraphicsDevice.DrawUserPrimitives<VertexPositionColor>(
                    PrimitiveType.TriangleStrip,    // 基元类型
                    _vertices,                      // 顶点信息集合
                    0,                              // 在顶点缓冲器中的偏移量
                    1                               // 基元的个数，因为本例是三个顶点组成一个三角形，而一个三角形就是一个基元，所以此处为 1
                );
            }
        }
    }
}

2、在一个 3D 坐标中绘制一个图片纹理，并且不断地移动它、旋转它、缩放它（按键盘 Q 键加载此 Demo）
3D/Basic/Animation.cs

/*
 * 本例演示：在一个 3D 坐标中绘制一个图片纹理，并且不断地移动它、旋转它、缩放它
 */

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;

namespace XNA.Component._3D.Basic
{
    public class Animation : Microsoft.Xna.Framework.DrawableGameComponent
    {
        private Matrix _view;
        private Matrix _projection;

        // 顶点信息数组，VertexPositionTexture 对象包含了顶点的位置信息和顶点对应到纹理的位置信息
        private VertexPositionTexture[] _vertices;
        private VertexBuffer _vertexBuffer;

        private BasicEffect _effect;

        // 位移矩阵（Matrix.Identity 代表单位矩阵，任何矩阵与单位矩阵相乘后还是其自身）
        Matrix _translation = Matrix.Identity;
        // 旋转矩阵
        Matrix _rotation = Matrix.Identity;
        // 缩放矩阵
        Matrix _scale = Matrix.Identity;

        // 纹理对象
        Texture2D _texture;

        public Animation(Game game)
            : base(game)
        {

        }

        public override void Initialize()
        {
            CreateCamera();

            base.Initialize();
        }

        protected override void LoadContent()
        {
            CreateVertices();
            CreateVertexBuffer();
            _effect = new BasicEffect(GraphicsDevice);

            _texture = Game.Content.Load<Texture2D>("Image/Son");

            // 默认情况下，每个基元(primitive)的背面(back face)是不可见的，因为 3D 物体都是由若干个基元（三角形）组成，而实际 render 的时候是不需要 render 物体内部的
            // 如果需要显示基元的背面，可以使用以下设置
            RasterizerState rs = new RasterizerState();
            rs.CullMode = CullMode.None;
            GraphicsDevice.RasterizerState = rs;
        }

        float _xPosition = -0.01f;
        float _scaleValue = 0.99f;
        public override void Update(GameTime gameTime)
        {
            if (_translation.Translation.X > 2)
                _xPosition = -0.01f;
            else if (_translation.Translation.X < -2)
                _xPosition = 0.01f;
            // 计算当前的位移矩阵
            _translation *= Matrix.CreateTranslation(_xPosition, 0, 0);

            if (_scale.Up.Length() < 0.5)
                _scaleValue = 1.01f;
            else if (_scale.Up.Length() > 2)
                _scaleValue = 0.99f;
            // 计算当前的缩放矩阵
            _scale *= Matrix.CreateScale(_scaleValue);

            // 计算当前的旋转矩阵
            _rotation *= Matrix.CreateFromYawPitchRoll(MathHelper.PiOver4 / 60, 0, 0);

            base.Update(gameTime);
        }

        public override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            DrawIt();

            base.Update(gameTime);
        }

        private void CreateCamera()
        {
            _view = Matrix.CreateLookAt(
                new Vector3(0, 0, 5),
                Vector3.Zero,
                Vector3.Up
            );

            _projection = Matrix.CreatePerspectiveFieldOfView(
                MathHelper.PiOver4,
                (float)Game.Window.ClientBounds.Width / (float)Game.Window.ClientBounds.Height,
                1,
                100
            );
        }

        private void CreateVertices()
        {
            // 顶点信息描述的是一个 2 * 2 的矩形框
            _vertices = new VertexPositionTexture[4];

            // 第二个参数 new Vector2(0, 0) 描述的是：顶点对应纹理的左上角
            // (1, 0)对应纹理的右上角，(0, 1)对应纹理的左下角，(1, 1)对应纹理的右下角
            // 注：不要把顶点的坐标系与第二个参数的坐标系相混淆，顶点坐标系是 3D 右手坐标系，而第二个参数的坐标系是以左上角为原点的 2D 坐标系
            _vertices[0] = new VertexPositionTexture(new Vector3(-1, 1, 0), new Vector2(0, 0)); 
            _vertices[1] = new VertexPositionTexture(new Vector3(1, 1, 0), new Vector2(1, 0)); 
            _vertices[2] = new VertexPositionTexture(new Vector3(-1, -1, 0), new Vector2(0, 1));
            _vertices[3] = new VertexPositionTexture(new Vector3(1, -1, 0), new Vector2(1, 1));

            /*
             * VertexPositionTexture 类的构造函数的第一个参数是顶点坐标，第二个参数是纹理坐标
             * 纹理坐标是一个 UV 坐标，本例中 UV 坐标描述了如何将纹理映射到矩形上，即所谓的贴图
             * 可以把 U 和 V 当作贴图时，被贴的纹理所需显示的百分比，值的范围是 0 - 1（可以修改一下本例中 4 个纹理坐标后看效果，以方便理解）
             */
        }

        private void CreateVertexBuffer()
        {
            _vertexBuffer = new VertexBuffer(
                GraphicsDevice,
                typeof(VertexPositionTexture),
                _vertices.Length,
                BufferUsage.None
            );
            _vertexBuffer.SetData(_vertices);
        }

        private void DrawIt()
        {
            GraphicsDevice.SetVertexBuffer(_vertexBuffer);

            /*
             * BasicEffect.World - World 矩阵，图像的旋转、缩放和平移的实质就是矩阵相乘，World 矩阵就是把矩阵相乘后的 3D 坐标系转化为世界坐标系
             * BasicEffect.Texture - 指定需要绘制的纹理
             * BasicEffect.TextureEnabled - 指定是否可以绘制纹理
             */
            _effect.World = _rotation * _translation * _scale;
            _effect.Texture = _texture;
            _effect.TextureEnabled = true;
            _effect.View = _view;
            _effect.Projection = _projection;
            
            foreach (EffectPass pass in _effect.CurrentTechnique.Passes)
            {
                pass.Apply();

                GraphicsDevice.DrawUserPrimitives<VertexPositionTexture>(
                    /*
                     * PrimitiveType - 基元类型
                     *     PrimitiveType.TriangleList - 每三个独立的顶点构成一个独立的三角形（见本目录下的图片 TriangleList.png）
                     *     PrimitiveType.TriangleStrip - 一个新的独立的顶点与已存在的三角形的两个顶点构成一个三角形（见本目录下的图片 TriangleStrip.png）
                     *     PrimitiveType.LineList - 每两个独立的顶点构成一条独立的直线（见本目录下的图片 LineList.png）
                     *     PrimitiveType.LineStrip - 一个新的独立的顶点与已存在的直线的一个顶点构成一条直线（见本目录下的图片 LineStrip.png）
                     */
                    PrimitiveType.TriangleStrip, 
                    _vertices, 
                    0,
                    2 // 本例中通过 4 个顶点构成矩形，本质是由两个三角形基元构成，其基元类型为 PrimitiveType.TriangleStrip
                );
            }
        }
    }
}

OK
[源码下载]

本文链接