HTML5 02

 列表标签

有序列表

<ol>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
    <li>c#</li>
    <li>web</li>
    <li>javascripe</li>
</ol>

无序列表

<ul>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
    <li>c#</li>
    <li>web</li>
    <li>javascripe</li>
​
</ul>

自定义列表（网页底部应用）

<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>c</dd>
    <dd>c++</dd>
​
    <dt>位置</dt>
    <dd>江西</dd>
    <dd>贵州</dd>
    <dd>赣州</dd>
</dl>

表格标签

<table border="1px">
        <tr>
            <td colspan="3" align="center">学生成绩</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2">clm</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>
        <tr>
            <td rowspan="2">zm</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>100</td>
        </tr>
    </table>

colspan：合并列

rowspan：合并行

视频、音频

视频：

​

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088079

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088087

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088347

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088366

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088450

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088521

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088620

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088649

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088746

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088881

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634088972

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634089007

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634089020

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634089128

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634089159

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634089175

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634089316

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634090306

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634090929

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634090953

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634090982

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634090994

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634091009

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634091018

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634091027

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634091224

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634091312

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634091392

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634091442

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634091456

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634091517

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634091573

file:///C:/Users/86183/Desktop/resources/video/%E7%89%87%E5%A4%B4.mp4?lastModify=1634094792

​

src：资源路径

controls：控制条,点击播放

autoplay：自动播放

音频：

​

​

src：资源路径

controls：控制条,点击播放

autoplay：自动播放

iframe内联框架

​

file:///C:/Users/86183/Desktop/markdown/path

​

在一个网页中打开另一个网页

表单语法

表单form：

action：表单提交的位置，可以是网站，也可以是一个请求处理地址

method：post，get提交方式

get：我们可以在url中看到我们提交的信息，不安全

post：比较安全，传输大文件

<form action="我的第一个网页.html" method="post">
<p>名字：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>

---

文本输入框：input type = “text”

value=“请输入密码” 默认初始值

maxlength=“8” 最长能写几个字符

size=“30” 文本框的长度

---

radio：单选框，一般用来选男、女性别 input type = “radio”

value：单选框的值

name：表示组，必须保持一致

checked默认选中

<p>性别：<input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
</p>

---

checkbox：多选框 input type = “checkbox” checked默认选中

<p>爱好：
    <input type="checkbox" value="sleep" name="hobby" checked>睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="study" name="hobby">学习
</p>

---

按钮：

1.input type=“button” 普通按钮

2.input type=“image” 图像按钮

3.input type=“submit” 提交按钮

4.input type=“reset” 重置按钮

<p>按钮：
    <input type="button" name="btn1" value="点击">
    <input type="image" src="../image.1.jpg">
    <input type="submit">
    <input type="reset" value="清空表单">
</p>

---

下拉框：

​

国家          中国         美国         瑞士         印度     

​

select：默认选中

---

文本域：

​

反馈: 

​

---

文件域：

​

​

---

邮箱验证：

<p>邮箱：
    <input type="email" name="email">
</p>

URL验证：

<p>URL：
    <input type="url" name="url">
</p>

数字验证：

<p>商品数量：
    <input type="number" name="num" mxa="100" min="0" step="1">
</p>

滑块：

<p>音量：
    <input type="range" name="voice" mxa="100" min="0" step="2">
</p>

搜索框：

<p>搜索：
    <input type="search" name="search">
</p>

---

隐藏域：hidden

只读：readonly

禁用：disabled

表单验证

placeholder：提示信息

<p>名字：<input type="text" name="username" placeholder="请输入用户名"></p>

required：非空判断，不能为空

pattern：正则表达式