HTML：超文本标记语言（HyperText Mark-up Language）

1.第一个页面

<!DOCTYPE html> 

<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    您好，HTML5！
</body>
</html>

我的第一个网页您好，HTML5！

<DOCTYPE html> 文档类型声明

<head> 网页头部

<body> 主体部分

2.注释应用实例

  <!-- 我是被注释形式
    而且在涉猎器中不会展现 -->

3.标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签应用</title>
</head>
<body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
</body>
</html>

标题标签应用

这是标题 1

这是标题 2

这是标题 3

这是标题 4

这是标题 5

这是标题 6

4.标题标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签属性应用</title>
</head>
<body>
    <h1 align="center">大前端时代</h1>
    <h2 align="left">大前端时代</h2>
    <h3 align="right">大前端时代</h3>
</body>
</html>

标题标签属性应用

大前端时代

align 对齐方式

5.段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签应用</title>
</head>
<body>
    <h1>北京欢迎你</h1>
    <p>北京欢迎你，有梦想谁都了不起！</p>
    <p>有勇气就会有奇迹。</p>
    <p align="right">北京欢迎你，为你开天辟地</p><br>
</body>
</html>

6.换行标签应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换行标签应用</title>
</head>
<body>
    <h1>北京欢迎你</h1>
    <p>
        北京欢迎你，有梦想谁都了不起！<br>
        有勇气就会有奇迹。<br>
        北京欢迎你，为你开天辟地<br/>
         流动中的魅力充满朝气。<br><br>
        北京欢迎你，在太阳下分享呼吸<br>
        在黄土地刷新成绩。<br>
        北京欢迎你，像音乐感动你<br>
        让我们都加油去超越自己。<br>
    </p>
</body>
</html>

换行标签应用

北京欢迎你

北京欢迎你，有梦想谁都了不起！
有勇气就会有奇迹。
北京欢迎你，为你开天辟地
流动中的魅力充满朝气。

北京欢迎你，在太阳下分享呼吸
在黄土地刷新成绩。
北京欢迎你，像音乐感动你
让我们都加油去超越自己。

7.水平线标签应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <title>水平线标签应用</title>
</head>
<body>
    <h3>清平乐</h3>
    <!-- 在hr标签中color的属性值有三种 如：
    color="#330099"属性值为十六进制数  （百度下载：屏幕颜色拾取工具--取值）
    color="red" 属性值为英文单词
     color="rgb(189,45,55)" 属性值为rgb函数
    -->
    <hr size="3" width="60%" color="#330099">
    一枝秾艳露凝香，云雨巫山枉断肠。<br>
    借问汉宫谁得似，可怜飞燕倚新妆。
    <hr size="5" width="300px"  color="rgb(189,45,55)" align="right">
</body>
</html>

水平线标签应用

清平乐

一枝秾艳露凝香，云雨巫山枉断肠。
借问汉宫谁得似，可怜飞燕倚新妆。

8.字体样式的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式的应用</title>
</head>
<body>
　　<p>这是一段测试文字<br/><br/>
    　　<font face="楷体">使用楷体来显示文字</font><br/><br/>
    　　<font color="red">改变字体文字的颜色</font><br/><br/>
    　　<font size="5">改变字体文字的大小</font>
</body>
</html>

字体样式的应用　　

这是一段测试文字

　　使用楷体来显示文字

　　改变字体文字的颜色

　　改变字体文字的大小

9 预格式标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预格式化标签应用</title>
</head>
<body>
    <pre>
        春眠不觉晓，
          处处闻啼鸟。
            夜来风雨声，
              花落知多少。
        </pre>
</body>
</html>

预格式化标签应用

        春眠不觉晓，
          处处闻啼鸟。
            夜来风雨声，
              花落知多少。

10 文本格式化标签应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本格式化标签应用</title>
</head>
<body>
    <h3>文本格式标签</h3>
    <b>加粗</b>
    <u>下划线</u>
    <i>斜体</i>
    <strong>加重语气字</strong><br>
    <em>着重字</em>
    <del>删除字</del>
    <small>小号字体</small><br>
    <sup>上标签</sup>      3<sup>5</sup>
    <sub>下标签</sub>      H<sub>2</sub>O
    <ins>插入字</ins>
</body>
</html>

文本格式化标签应用

文本格式标签

加粗下划线斜体 加重语气字
着重字 ~~删除字~~ 小号字体
^上标签 3⁵ _下标签 H₂O 插入字

11 特殊符号应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊符号应用</title>
</head>
<body>
    <h3>特殊符号应用</h3>
    <hr/>
    &nbsp; &nbsp; &nbsp;静夜思<br/>
    &nbsp;举头望明月，<br/>
    &nbsp; 低头思故乡。
    如果"时间">早上7点 <br>
    <!--在 HTML 中不能使用小于号（<）和大于号（>），
    这是因为浏览器会误认为它们是标签。-->
    A. &lt;p&gt;<br/>
    HTML属性值必须用成对的&quot;<br/>
    &copy;2003-2088贝西奇谈
</body>
</html>

特殊符号应用

静夜思
举头望明月，
低头思故乡。如果"时间">早上7点
A. <p>
HTML属性值必须用成对的"
©2003-2088贝西奇谈

12 图像标签应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 图像标签应用</title>
</head>
<body>
    1.
    <!--基本图像插入方式
    URL使用相对路径-->
    <img src="images/zly.png"/>
    2.
    <!--带有title的图像
    title定义了鼠标经过图片时显示的内容-->
    <img src="images/zly.png"  title="赵丽颖"/>
    3.
    <!--设置图像的宽高-->
    <img src="images/zly.png"  width="200px" border="5px"  height="300px"  title="明星系列"/><br>
    4.
    <!--替代文本
    alt当图片未能正常显示时，用于给用户的提示信息-->
    <img src="images/zly2.png" alt="加载失败"/>
</body>
</html>

13，超链接应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接应用</title>
</head>
<body>
    <h3>1.外部链接</h3>
    <a href="http://www.sina.com.cn">新浪</a>
    <h3>2.内部链接</h3>
    <!--target="_self 在当前窗口打开-->
    <a href="2-12 图像标签应用.html" target="_self">跳转到本地</a>
    <h3>3.target属性</h3>
    <!--target="_blank"在新窗口中打开-->
    <a href="http://www.baidu.com" title="提示文字" target="_blank">百度</a>
    <h3>4.地址暂定</h3>
    <a href="#">我的作品地址</a>
    <h3>5.图像作为超链接</h3>
    <a href="http://www.baidu.com" title="这是百度"  target="_self">
        <img src="images/touxiang.jpg" width="50px"/></a>
</body>
</html>

14 超链接的锚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超级链接的设置</title>
</head>
<body>
<font size="5">
    <a name="top">这里是顶部的锚</a><br />
    <a href="#1">第1任</a><br />
    <a href="#2">第2任</a><br />
    <a href="#3">第3任</a><br />
    <a href="#4">第4任</a><br />
    <a href="#5">第5任</a><br />
    <a href="#6">第6任</a><br />
    <h2>美国历任总统</h2>
    ●第1任(1789-1797)<a name="1">这里是第1任的锚</a><br />
    姓名：乔治·华盛顿<br />
    George Washington<br />
    生卒：1732-1799<br />
    政党：：联邦<br />
    ●第2任(1797-1801)<a name="2">这里是第2任的锚</a><br />
    姓名：约翰·亚当斯<br />
    John Adams<br />
    生卒：1735-1826<br />
    政党：：联邦<br />
    ●第3任(1801-1809)<a name="3">这里是第3任的锚</a><br />
    姓名：托马斯·杰斐逊<br />
    Thomas Jefferson<br />
    生卒：1743-1826<br />
    政党：：民共<br />
    ●第4任(1809-1817)<a name="4">这里是第4任的锚</a><br />
    姓名：詹姆斯·麦迪逊<br />
    James Madison<br />
    生卒：1751-1836<br />
    政党：民共<br />
    ●第5任(1817-1825)<a name="5">这里是第5任的锚</a><br />
    姓名：詹姆斯·门罗<br />
    James Monroe<br />
    生卒：1758-1831<br />
    政党：民共<br />
</font>
</body>
</html>

15 浮动框架标签应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动框架标签应用</title>
</head>
<body>
    <h3 align="center">浮动框架应用</h3>
    <iframe src="https://www.hao123.com/" name="left"
        width="300" height="300" frameborder="0"></iframe>&nbsp;&nbsp;
    <iframe src="http://www.sina.com.cn" name="right"
            width="300" height="300" frameborder="0" marginwidth="10px"></iframe>
    <p>
        <a href="https://www.gov.cn" target="left">
            左边浮动框架内显示中华人民政府网站
        </a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.moe.gov.cn" target="right">
            右边浮动框架内显示教育部网站
        </a>
    </p>
</body>
</html>

16 容器标签应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>容器标签应用</title>
</head>
<body>
    <p>span标记同行显示</p>
    <span><img src="images/hua.jpg" width="100px" /></span>
    <span><img src="images/hua.jpg" width="100px" /></span>
    <p>div标记独占一行</p>
    <div><img src="images/hua.jpg" width="100px"/></div>
    <div><img src="images/hua.jpg" width="100px"/></div>
</body>
</html>

17 无序列表的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表的应用</title>
</head>
<body>
    <h5>中国四大美女</h5>
    <ul type="circle">
        <li>西施</li>
        <li>王昭君</li>
        <li>貂蝉</li>
        <li>杨玉环 </li>
    </ul>
    <h5>中国四大名著</h5>
    <ul type="square">
        <li>水浒传</li>
        <li type="circle">西游记</li>
        <li>三国演义</li>
        <li>红楼梦 </li>
    </ul>
</body>
</html>

无序列表的应用

中国四大美女

西施
王昭君
貂蝉
杨玉环

中国四大名著

水浒传
西游记
三国演义
红楼梦

18 无序列表的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表应用</title>
</head>
<body>
    <h5>奥运会的奖牌榜</h5>
    <ol type="1">
        <li>中国</li>
        <li>美国</li>
        <li>俄罗斯</li>
        <li>澳大利亚</li>
    </ol>
    <h5>乡间小诗</h5>
    <ol type="A">
        <li><font color="#0000ff">树上的鸟儿是喧闹的</font></li>
        <li><font color="#0000ff" >水里的鱼儿是沉默的</font></li>
        <li><font color="#0000ff" >天上的云儿是漂泊的</font></li>
        <li type="i"><font color="#0000ff" >地上的人儿是孤独的</font></li>
    </ol>
</body>
</html>

无序列表应用

奥运会的奖牌榜

中国
美国
俄罗斯
澳大利亚

乡间小诗

树上的鸟儿是喧闹的
水里的鱼儿是沉默的
天上的云儿是漂泊的
地上的人儿是孤独的

19 定义列表的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义列表的应用</title>
</head>
<body>
    <h3>计算机网络的分类</h3>
    <dl>
        <dt>局域网</dt>
        <dd>LAN(LOcal Area Network)</dd>
        <dd>小区域内使用，成本低易管理</dd>
    </dl>
    <dl>
        <dt>广域网</dt>
        <dd>WAN(Wide Arae Network)</dd>
        <dd>Internet就是典型的广域网</dd>
    </dl>
    <dl>
        <dt>城域网</dt>
        <dd>MAN(Metropolitan Area Network)</dd>
        <dd>覆盖地理范围介于局域网和广域网之间</dd>
    </dl>
</body>
</html>

定义列表的应用

计算机网络的分类

局域网: LAN(LOcal Area Network); 小区域内使用，成本低易管理

广域网: WAN(Wide Arae Network); Internet就是典型的广域网

城域网: MAN(Metropolitan Area Network); 覆盖地理范围介于局域网和广域网之间

20 列表综合应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟试卷</title>
</head>
<body>
<h1>HTML在线考试试题</h1>
<ol>
    <li>HTML中，换行使用的标签是（）。
        <ol type="A">
            <li>&lt;br /&gt;</li>
            <li>&lt;p&gt;</li>
            <li>&lt;hr /&gt;</li>
            <li>&lt;img /&gt;</li>
        </ol>
    </li>
    <li>&lt;img /&gt;标签的（）属性用于指定图像的地址。
        <ol type="A">
            <li>alt</li>
            <li>href</li>
            <li>src</li>
            <li>addr</li>
        </ol>
    </li>
    <li>创建一个超级链接使用的是（）标签。
        <ol type="A">
            <li>&lt;a&gt;</li>
            <li>&lt;ol&gt;</li>
            <li>&lt;img /&gt;</li>
            <li>&lt;hr /&gt;</li>
        </ol>
    </li>
    <li>&lt;img /&gt;标签的（）属性用来设置图片与旁边内容的水平距离。
        <ol type="A">
            <li>hspace</li>
            <li>vspace</li>
            <li>border</li>
            <li>alt</li>
        </ol>
    </li>
    <li>下面HTML结构中，不属于列表结构的是（）。
        <ol type="A">
            <li>ul-li</li>
            <li>ol-li</li>
            <li>dl-dt-dd</li>
            <li>p-br</li>
        </ol>
    </li>
</ol>
</body>
</html>

模拟试卷

HTML在线考试试题

HTML中，换行使用的标签是（）。
1. <br />
2. <p>
3. <hr />
4. <img />
<img />标签的（）属性用于指定图像的地址。
1. alt
2. href
3. src
4. addr
创建一个超级链接使用的是（）标签。
1. <a>
2. <ol>
3. <img />
4. <hr />
<img />标签的（）属性用来设置图片与旁边内容的水平距离。
1. hspace
2. vspace
3. border
4. alt
下面HTML结构中，不属于列表结构的是（）。
1. ul-li
2. ol-li
3. dl-dt-dd
4. p-br

21 表格展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格展示</title>
</head>
<body>
    <table border="1"><!-- border 属性来设置表格的边框宽，默认情况下，表格是没有边框的-->
        <tr>
            <th>名称</th>
            <th>官网</th>
            <th>性质</th>
        </tr>
        <tr>
            <td>C语言中文网</td>
            <td>http://c.biancheng.net/</td>
            <td>教育</td>
        </tr>
        <tr>
            <td>百度</td>
            <td>http://www.baidu.com/</td>
            <td>搜索</td>
        </tr>
        <tr>
            <td>当当</td>
            <td>http://www.dangdang.com/</td>
            <td>图书</td>
        </tr>
    </table>
</body>
</html>

表格展示

名称	官网	性质
C语言中文网	http://c.biancheng.net/	教育
百度	http://www.baidu.com/	搜索
当当	http://www.dangdang.com/	图书

23 表格属性设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格属性设置</title>
</head>
<body>
    <!--设置表格属性：cellpadding内容与边框的距离 cellspacing单元格之间的距离
    bordercolor背景颜色 bgcolor边框颜色 align水平对齐方式-->
    <table  border="2" cellpadding="10" cellspacing="0"
            bordercolor="red" bgcolor="aqua" width="500px"  height="20px"
            align="center">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>成绩</th>
            </tr>
            <tr>
                <td>100861</td>
                <td>张三</td>
                <td>80</td>
            </tr>
            <tr>
                <td>100862</td>
                <td>李四</td>
                <td>90</td>
            </tr>
        </table>
</body>
</html>

24 设置表格行列属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置表格行、列属性</title>
</head>
<body>
    <table border="1" width="500px"  align="center">
        <tr height="60px" bgcolor="#a9a9a9" >
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr align="center" height="60px" valign="middle">
            <td>100861</td>
            <td background="images/zly.png">张三</td>
            <td>80</td>
        </tr>
        <tr>
            <td width="30px" height="30px" >100862</td>
            <td align="center" bgcolor="aqua">李四</td>
            <td >90</td>
        </tr>
    </table>
</body>
</html>

25 合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并单元格</title>
</head>
<body>
    <table  border="1px"  width="300px"  height="300px" align="center">
        <tr>
            <td colspan="2"></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
    </table>
</body>
</html>

27 用户信息输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息输入</title>
</head>
<body>
    <form action="">
        姓名：<input type="text" name="username" size="20" maxlength="10" value=""><br>
        身份：<input type="text" name=""  maxlength="20" readonly value="学生"><br>
        密码：<input type="password" name="pwd" size="20" maxlength="15">
    </form>
</body>
</html>

28 复选框与单选按钮的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框与单选按钮的应用</title>
</head>
<body>
    <form action="">
        <!--单选框-->
        性别：<input type="radio" name="sex" checked value="男">男
        <input type="radio" name="sex" value="女">女
        <!--多选框-->
        <br><br>
        最喜欢的游戏：
        <input type="checkbox" name="fav" value="LOL" checked>英雄联盟
        <input type="checkbox" name="fav" value="shoot">喷射战士
        <input type="checkbox" name="fav" value="zelder" checked>塞尔达传说
        <input type="checkbox" name="fav" value="mario">马里奥
    </form>
</body>
</html>

29 三种按钮的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种按钮的应用</title>
</head>
<body>
<form action="http://www.baidu.com">
    姓名：<input  type="text" name="username" value=""><br>
    密码：<input type="password" name="pwd" ><br>
    <input type="submit" value="提交">
    <input type="reset" value="清空">
    <input type="image" src="images/btn.png" alt="登录" />
</form>
</body>
</html>

30 文件上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传应用</title>
</head>
<body>
    <!--上传文件时
       请求方法（method）应该设置为POST
       编码类型（enctype：encode type）应该设置为multipart/form-data-->
    <form action="#" method="POST" enctype="multipart/form-data">
        <!--accept表示期望的文件类型。格式：
        image/*
        .jpg,.png 或其他文件扩展名（后缀名）
        accept不是强制的，用户可以通过在弹出框上选择“所有文件”来选择任何文件
        添加multiple属性支持多文件上传-->
        <h5>图片格式文件：</h5>
        <input type="file" name="file01" accept=".jpg,.png" multiple>
        <h5>word格式文件：</h5>
        <input type="file" name="file02" accept=".doc,application/msword" multiple>
        <h5>所有格式文件：</h5>
        <input type="file" name="file03" ><br>
        <input type="submit" value="上传">
    </form>
</body>
</html>

隐藏域的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏域的应用</title>
</head>
<body>
    <form action="">
      用户名： <input type="text" name="username"><br>
      密码: <input type="password" name="pwd"><br>
        <!--插入隐藏域，用户看不见-->
        <input type="hidden" name="user" value="admin">
        <input type="submit" value="登录">
    </form>
</body>
</html>

文本域的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本域的应用</title>
</head>
<body>
    <form action="" method="post">
        可编辑描述：
        <textarea name="description"  rows="6" cols="40">
        这本「剑指大前端时代」书籍可以帮助读者快速提升段位，其中包含了作者大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指前端开发着者的痛点。
        </textarea><br>
        只读描述：
        <textarea name="description" readonly  rows="6" cols="40">
        这本「剑指大前端时代」书籍可以帮助读者快速提升段位，其中包含了作者大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指前端开发着者的痛点。
        </textarea><br>
        禁用描述：
        <textarea name="description" disabled rows="6" cols="40">
        这本「剑指大前端时代」书籍可以帮助读者快速提升段位，其中包含了作者大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指前端开发着者的痛点。
         </textarea>
    </form>
</body>
</html>

#列表标签的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签应用</title>
</head>
<body>
<form action="">
    <h5>普通下拉菜单（单选）</h5>
    <select name="sel"  >
        <option >请选择省份</option>
        <option selected value="山西省">山西省</option>
        <option value="山东省">山东省</option>
        <option value="陕西省">陕西省</option>
    </select>
    <select >
        <option >请选择城市</option>
        <option value="太原市" >太原市</option>
        <option value="晋中市" selected>晋中市</option>
        <option value="阳泉市">阳泉市</option>
    </select>
    <h5>普通下拉菜单（多选）</h5>
    <select name="" multiple size="3">
        <option value="apple">苹果</option>
        <option value="watermelon">西瓜</option>
        <option value="strawberry">草莓</option>
        <option value="grape">葡萄</option>
    </select>
    <hr/>
    <h5>分组列表菜单</h5>
    <select name="">
        <optgroup label="语言">
            <option value="chinese">中文</option>
            <option value="english">英语</option>
            <option value="japanese">日语</option>
        </optgroup>
        <optgroup label="开发">
            <option value="web">web</option>
            <option value="java">java</option>
            <option value="c">c</option>
        </optgroup>
    </select>
</form>
</body>
</html>

3-1 表单新增输入类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单新增输入类型</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>学生档案</legend>
            姓名： <input type="text" name="username"/><br>
            相片：  <input type="file" name="file" multiple="multiple"/><br>
            邮箱: <input type="email" name="mail"><br>
            博客:<input type="url" name="blog" ><br>
            身高:  <input type="number" max="226" min="80" step="10" value="170" /><br>
            体重: <input type="range" max="500" min="30" step="5" value="65" /><br>
            电话: <input type="tel" name="tel" pattern="^\d{3}-\d{8}|\d{4}-\d{7}$"><br>
            肤色: <input type="color" name="color"><br>
            艺名：<input type="search" name="name"><br>
            出生日期：<input type="date" name="date"><br>
            生日：<input type="time" name="time"><br>
            入学日期：<input type="datetime" name="datetime"><br>
            毕业日期: <input type="datetime-local" name="datetime-local"><br>
            毕业月份: <input type="month" name="month"><br>
            毕业星期: <input type="week" name="week" id=""><br>
            <input type="submit">
        </fieldset>
    </form>
</body>
</html>

3-2 datalist标签应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datalist标签应用</title>
</head>
<body>
<form action="">
    <input id="input"  list="input_list">
    <datalist id="input_list">
        <option value="小红">
        <option value="小明">
        <option value="小丽">
        <option value="大华">
    </datalist>
</form>
</body>
</html>

3-3 output 标签应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>output标签应用</title>
</head>
<body>
<h4>output标签演示：</h4>
<h5>加法计算器</h5>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
        <input type="number" id="a" value="0"> +
        <input type="number" id="b" value="0"> =
        <output name="x" for="a b">0</output>
        <br>
        <input type="submit">
    </form>
</body>
</html>

3-5 表单新增属性综合应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单新增属性综合应用</title>
</head>
<body>
    <form action="">
      <fieldset>
          <legend align="center">学生档案</legend>
          <!--autofocus聚焦  required必填项 placeholder提示信息-->
          用户名：<input type="text" name="username" autofocus placeholder="请输入用户名" required><br>
          住宿费：<input type="number" name="money" min="5" max="1000"><br>
          <!--autocomplete启动记忆功能-->
          手机号：<input type="tel" name="phone" required pattern="[0-9].{10}" autocomplete="on"><br>
          相片：<input type="file" name="files" multiple><br>
          <input type="submit">
      </fieldset>
    </form>
</body>
</html>

大前端 HTML5

HTML：超文本标记语言（HyperText Mark-up Language）

1.第一个页面

2.注释应用实例

3.标题标签

这是标题 1

这是标题 2

这是标题 3

这是标题 4

这是标题 5

这是标题 6

4.标题标签属性

大前端时代

大前端时代

大前端时代

5.段落标签

6.换行标签应用

北京欢迎你

7.水平线标签应用

清平乐

8.字体样式的应用

9 预格式标签

10 文本格式化标签应用

文本格式标签

11 特殊符号应用

特殊符号应用

12 图像标签应用

13， 超链接应用

14 超链接的锚

15 浮动框架标签应用

16 容器标签应用

17 无序列表的应用

中国四大美女

中国四大名著

18 无序列表的应用

奥运会的奖牌榜

乡间小诗

19 定义列表的应用

计算机网络的分类

20 列表综合应用

HTML在线考试试题

21 表格展示

23 表格属性设置

24 设置表格行列属性

25 合并单元格

27 用户信息输入

28 复选框与单选按钮的应用

29 三种按钮的应用

30 文件上传

隐藏域的使用

文本域的应用

3-1 表单新增输入类型

3-2 datalist标签应用

3-3 output 标签应用

3-5 表单新增属性综合应用

13，超链接应用