什么是HTML

HTML (Hyper Text Markup Language，超文本标记语言)

HTML5的优势

世界知名浏览器厂商对HTML5的支持
- 微软
- Google
- 苹果
- Opera
- Mozilla
市场的需求
跨平台

W3C标准

W3C
- World Wide Web Consortium（万维网联盟）
- 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
- https://www.w3.org
- https://www.chinaw3c.org
W3C标准包括
- 结构化标准语言（HTM、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）

网页基本标签

标题标签 h1-h6
段落标签 p
换行标签 br
水平线标签 hr
字体样式标签粗体：strong 斜体：em

注释和特殊符号

注释：<!-- -->   空格：&nbsp;
大于号：&gt;     小于号：&lt;
版权符号：&copy;

图像标签

常见的图像格式
- jpg
- gif
- png
- bmp
- …

<img src="图像地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="100" height="100"/>

链接标签

<a href="链接路径" target="目标窗口位置,常用值：_self,_blank">
    链接文本或图像
</a>
<!--
href : 必填，表示要跳转到哪个页面
target ： 表示窗口在哪里打开
    _blank 在新标签中打开
    _self 在当前网页打开
-->

锚链接
- 需要一个标记
- 跳转到标记位置
```
<a name="top"></a>
<a href="#top"></a>
```
功能性链接
- 邮件链接：mailto:
```
<a href="mailto:1234567890@qq.com"></a>
```
- qq链接

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- p、h1-h6
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- a、strong、em…

列表

什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

列表的分类

无序列表

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

有序列表

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

自定义列表

<!--
dl : 标签
dt : 列表名称
dd : 列表内容
-->
<dl>
    <dt></dt>

    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>

表格

为什么使用表格
- 简单通用
- 结构稳定

基本结构

单元格
行
列
跨行

跨列

<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="2"></td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

视频和音频

视频元素

video

<!--
src : 资源路径
controls : 控制条
autoplay : 自动播放
-->
<video src="" controls autoplay></video>

音频元素

audio

<audio src="" controls autoplay></audio>

页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面中的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类复制内容

iframe内联框架

<!--
src : 地址
w-h : 宽度高度

-->

<iframe src="" name="test" frameborder="0" width="1440px" height="900px">

</iframe>
<a href="https://baidu.com" target="test"></a>

表单

<!--
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post和get
    get: 可以在url中看到我们提交的信息，不安全，高效
    post: 比较安全，传输大文件
-->

<form method="post" action="index.html">
    <p><input type="text" name="usrname"></p>
    <p><input type="password" name="password"></p>
    <p>单选框：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>
    <p>多选框：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    <p>按钮：
        <input type="button" name="btn" value="点击">
        <input type="image" src="">
    </p>
    <p>下拉框：
        <select name="列表名称">
            <option value="选项的值">1</option>
            <option value="选项的值">2</option>
            <option value="选项的值" selected>3</option>
        </select>
    </p>
    <p>文本域：
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>
    <p>文件域：
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <p>URL：
        <input type="url" name="url">
    </p>
    <p>数字：
        <input type="number" name="number" max="100" min="0" step="1">
    </p>
    <p>滑块：
        <input type="range" name="range" min="0" max="100" step="1">
    </p>
    <p>搜索框：
        <input type="search" name="search">
    </p>
    <p>
       <!--增强鼠标可用性-->
        <label for="mark">你点我试试</label>
        <input type="text" id="mark">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须啊指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中