【HTML__02】

最新推荐文章于 2024-05-07 10:56:06 发布

modest5

最新推荐文章于 2024-05-07 10:56:06 发布

阅读量64

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/modest5/article/details/125814856

版权

1. 列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--有序列表-->
<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>
</dl>

</body>
</html>

2. 表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格：table
tr：行
td：列
-->
<table border="1px" bgcolor="aqua">
  <tr>
    <td colspan="3">学生成绩</td>
  </tr>
  <tr>
    <td rowspan="2">kim</td>
    <td>语文</td>
    <td>99</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>
  <tr>
    <td rowspan="2">anna</td>
    <td>语文</td>
    <td>95</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>
</table>
</body>
</html>

3. 媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--音频和视频
src：资源路径
controls：控制条，不设置的话在网页看不到
autoplay：自动播放
-->
<video src="../resources/video.mp4" controls autoplay></video>
<audio src="../resources/audio.mp3" controls autoplay></audio>
</body>
</html>

4. iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>
<!--1.使用iframe在网页里边嵌入其他网页:
src:跳转地址
name:框架表示名
-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>

<!--2.还可以使用其他方式嵌入-->
<iframe src="" frameborder="0" name="kim" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="kim">点击跳转</a>
</body>
</html>

5. 表单post和get提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求地址
method：post 比较安全 可以传输的大文件
        get  可以在url中看见提交的信息，不安全，高效
-->
<form action="FristHtml.html" method="post"></form>
  <!--文本输入框：input type="text"-->
  <p>名字：<input type="text" name="username"></p>

  <!--密码框:input type="password"-->
  <p>密码:  <input type="password" name="pwd"></p>
  <p>
    <input type="submit">
    <input type="reset">
  </p>
</body>
</html>