HTML5

HTML

Hyper Text Markup Language——超文本标记语言

超文本包括：文字、图片、音频、视频、动画

网页基本标签

• 标题标签:<h1></h1>
• 段落标签：<p></p>
• 换行：<br>或<br/>
• 水平线：<hr>或<hr/>
• 粗体：<strong></strong>
• 斜体：<em></em>
• 特殊符号：
  • 空格： 
  • 大于，大于等于： >，≥
  • 小于，小于等于：<，≤
  • 版权：©

图像标签

<!--
src：图像地址 （必填）
alt：图片名字 （必填）
-->
<img src="../resources/image/1.jpg" alt="个人头像" title="悬停提示" width="100" height="100">

超链接标签

<!--
href:表示要跳转到哪个页面
target:表示在哪个页面打开
    _blank 在一个空页面打开
    _self 在当前页面打开（默认)
-->
<a href="http://www.baidu.com" target="_blank">跳转到百度</a>
<br/>
<a href="http://www.baidu.com" target="_self">
    <img src="../resources/image/1.jpg" alt="个人头像">
</a>

锚链接：跳转到指定的锚

<a name="top">顶部</a>
<a href="#top">回到顶部</a>

功能性链接：跳转到邮箱、QQ等

块元素和行内元素：

• 块元素：无论内容多少，高元素独占一行，如p标签，标题标签

• 行内元素：行内元素可共存在一行中，如a标签，strong标签，em标签等

列表

• 无序列表：<ul></ul>
• 有序列表： <ol></ol>
• 自定义列表：<dl></dl>

<!--有序列表-->
<ol>
    <li>Python</li>
    <li>Java</li>
    <li>C</li>
    <li>PHP</li>
    <li>C++</li>
</ol>

<!--无序列表-->
<ul>
    <li>Python</li>
    <li>Java</li>
    <li>C</li>
    <li>PHP</li>
    <li>C++</li>
</ul>

<!--自定义列表-->
<dl>
    <dt>标题:编程语言</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>PHP</dd>
    <dd>C</dd>
</dl>

表格

<table></table>:表格标签

• <tr></tr>: 一行
• <td></td>:一列

<table border="1">
    <tr>
        <!--colspan:跨列-->
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <!--rowspan:跨行-->
        <td rowspan="2">sen</td>
        <td>语文</td>
        <td>99</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">chen</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>98</td>
    </tr>
</table>

媒体元素

<video src=""></video>：视频标签

• src：视频路径
• controls：控制条
• autoplay：打开网页自动播放

<video src="../resources/video/1.mp4" controls autoplay></video>

<audio src=""></audio>：音频标签

• src：音频路径
• controls：控制条
• autoplay：打开网页自动播放

页面结构

表单

<form action="" method=""></form>：表单标签

• action表示向何处发送表单数据
• method只有两种方法，get和post
  • get提交的信息会显示在url上，不安全，但高效
  • post提交的信息不显示在url上，可提交大文件

<input type="" name="">：表单中的输入标签

• type：指定元素的类型。text password checkbox radio submit reset file image button hidden。除此之外，还有email url number range search
• name：指定表单元素的名称
• value：元素的初始值。type为radio必须指定一个值
• size：指定表单元素的初始宽度。type为text``password时，以字符为单位，其他类型以像素为单位
• maxlength：type为text``password时输入的最大字符数
• checked：type为 radio``checkbox，指定按钮是否被选中

<select name=""></select>：表单中的下拉框标签

• <option value="" selected></option>：添加选项，value选项的值，selected默认被选中。

<textarea name="" cols="" rows="" value=""></textarea>：表单中的文本域标签

• cols：文本域占多少列
• rows：文本域占多少行

表单应用

readonly只读

disable禁用

hidden隐藏

id与label标签配合使用

表单初级验证

placeholder=""输入框提示信息

required要求非空

pattern正则表达式