HTML（二）
程序员文章站
2022-06-12 12:49:12
...
音频、视频（媒体元素）
音频 audio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--音频播放-->
<audio src="../statics/audio/hehe.m4a" autoplay controls>
</audio>
</body>
</html>视频 video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频</title>
</head>
<body>
<!--video 视频标签
src：视频的路径
controls: 提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
autoplay： 自动播放
loop: 循环播放
-->
<video controls autoplay>
<source src="../statics/video/haha.mp4">
</video>
</body>
</html>一般都将音频文件放在创建的static\audio文件夹中，视频文件放在创建的static\video文件夹中
网页结构分析
- 页面的头部
- 页面的主体
- 页面的尾部
html5 标签，没有任何作用，只是让代码结构更好看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这些标签都是一些行业规范-->
<header>
我是头部
</header>
<nav>导航栏</nav>
<article>文章主题</article>
<aside>侧边栏</aside>
<section> 独立区域 </section>
<footer>
我是尾部
</footer>
</body>
</html>
以后进行前端开发就规范一点
内联框架
iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe name="oll" width="500" height="500"></iframe> <br>
<a href="http://www.baidu.com" target="oll">点击进入</a>
</body>
</html>表单（重要）
我们常见的这些登录、注册、搜索框都是用表单
1、基础表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
提交请求：
携带的参数
key: 控件的name。这个属性不要忘记
get：携带参数，参数可以在url中看到，不安全，大小有限
https://www.baidu.com/?username=kuangshen&password=123456
post：参数不可见、安全，大小没有限制 （表单提交常用方式post）
-->
<!--form 表单
action： 提交地址
method：提交的方式
-->
<form action="http://www.baidu.com" method="post">
<!--输入框
input 标签
name： 必须写上
type：
text ： 文本框
password： 密码框
submit： 提交按钮
reset： 重置
-->
<p>名字：<input type="text" name="username"> </p>
<p>密码：<input type="password" name="password"> </p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
2、表单元素
所有表单元素都要写在form表单中，必须加上name属性，否则提交的时候取不到值！
1.文本框（最重要的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<!--文本框 type="text"
value ：文本框默认的初始值
size： 文本框的长度
maxlength： 文本框的最大输入长度
-->
<p>
<input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>
</form>
</body>
</html>
2.密码框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密码框</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<!--密码框 type="password"
size="20" 密码框的长度
-->
<p>
<input type="password" name="pwd" size="20">
</p>
</form>
</body>
</html>
3.单选按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选框</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<!--单选框type="radio"
value： 表单提交的值
name： 名字相同，则自动分组，必须要分组
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="radio" 后增加单选框的属性
-->
<p>
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex">女
</p>
</form>
</body>
</html>
4.复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多选框</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<!--多选框 type="checkbox"
name： 必填项，如果是分组，则名称一致
value： 表单提交的值
checked： 默认选中
disabled： 禁用
注意事项：默认没有值，需要再input type="checkbox" 后增加多选框的属性
-->
<p>
<input type="checkbox" name="hobby" value="code">敲代码
<input type="checkbox" name="hobby" value="music" checked>听音乐
<input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>
</form>
</body>
</html>
5.下拉列表框 select-option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<!--下拉列表框
select
name： 组件名字 必填
size: 显示的数量，默认为1
option： 选项
value 必填
option标签中间写下拉框的值
selected： 默认选中
-->
<select name="科目">
<option value="1"></option>
<option value="2">数学</option>
<option value="3" selected>英语</option>
<option value="4">语文</option>
<option value="5">地理</option>
</select>
</form>
</body>
</html>
6.按钮
<!--按钮
value：按钮上的文字
-->
<p>
<!--提交-->
<input type="submit" value="登录">
<!--重置--使用-->
<input type="reset" value="清空">
<!--普通按钮：一般后来我们会和javascript结合使用，点击按钮xxx-->
<input type="button" value="点我">
<!--图片按钮
type="image"
src：图片的路径
-->
<input type="image" src="../static/imgage/bd.png">
</p>
7.文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本域</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<!--文本域 cols rows-->
<textarea name="textarea" cols="10" rows="10">
</textarea>
</form>
</body>
</html>
8.文件域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件域</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<!--
表单，需要支持提交复杂文件 enctype="multipart/form-data"
未来：文件上传会用到
-->
<input type="file" name="video">
</form>
</body>
</html>点击浏览会弹出电脑文件
9.邮箱（验证）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮箱</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<!--邮箱-->
<p>
邮箱：<input type="email" name="email">
</p>
</form>
</body>
</html>要是格式不正确它会提醒你
10.网址（基本验证）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网址</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<!--url网址-->
<p>
url：<input type="url" name="url">
</p>
</form>
</body>
</html>输入错误的网址他会报错
11.数字（上下）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<!--数字：商品数量，计数 type="number"
最小值 min="0"
最大值 max="100"
步长 step="10"
-->
<p>
数字：<input type="number" min="0" max="100" step="10">
</p>
</form>
</body>
</html>输入的不是数字他会报错
12.滑块（可调节）
<!--滑块
默认值0~100
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑块</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<!--滑块
默认值0~100
-->
<p>
<input type="range" name="range" min="0" max="1000" step="2">
</p>
</form>
</body>
</html>可以拖动的，比如进度条
13.搜索框（带关闭按钮）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<!--搜索框-->
<p>
搜索： <input type="search" name="search">
</p>
</form>
</body>
</html>
3、表单的应用
1.隐藏域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏域</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<!--隐藏域-->
<p>
<input type="hidden" name="count" value="10">
</p>
</form>
</body>
</html>隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单机发送按钮发送表单时，隐藏域的信息也一并被发送到服务器。
2.只读和禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<p>
用户名： <input type="text" name="username" readonly>
</p>
<p>
密码： <input type="password" name="pwd" disabled>
</p>
</form>
</body>
</html>你只能看里面的内容，不能输入
3.标注
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标注</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<p>
<!--通过 for="name" 来链接到 表单中的指定ID -->
<label for="name">用户名： </label>
<input type="text" name="username" id="name">
</p>
</form>
</body>
</html>这个就是你点击用户名三个字也会将光标移到输入框
4.初级表单验证（重点）
默认提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<!--placeholder="必须是url格式" 默认提示，告诉用户应该这么做-->
用户名：
<input type="url" name="username" placeholder="必须是url格式">
</form>
</body>
</html>
必填
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<p>
<!--required必须要填写这个字段-->
密码： <input type="password" name="pwd" required>
</p>
</form>
</body>
</html>
不填的话会报错
正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
</head>
<body>
<form action="http://www.baidu.com" method="get" enctype="multipart/form-data">
<p>
<!--pattern:正则表达式-->
手机号码： <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>
</form>
</body>
</html>必须按照正则输入
下面来个小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
</head>
<header>
<img src="../static/imgage/捕获.PNG" alt="丢了" title="快来点我">
</header>
<body>
<img src="../static/imgage/lew,l.PNG" alt="丢" title="快来点">
<ul>
<li>163邮箱默认开放</li>
<li>全面支持所有系统</li>
<li>客户端、手机域网页，实现发送、阅读邮件立即同步普通登陆手机号登陆</li>
<form action="http://www.baidu.com">
<p>
用户名： <input type="text" name="mingzi">
</p>
<p>
密码：<input type="password" name="mima">
</p>
<p>
版本：<select name="banben" >
<option value="1">默认</option>
<option value="2">8.3</option>
<option value="3">8.5</option>
</select>
</p>
<p>
<input type="checkbox" name="xuanze" value="zidongdenglu">自动登录
<input type="checkbox" name="xuanze" value="SSL">SSL
</p>
<p>
<input type="submit" value="登陆">
<input type="button" value="注册">
</p>
</form>
</ul>
</body>
<footer>
<img src="../static/imgage/asa.PNG" alt="wed" title="fasdf">
</footer>
</html>
看了这么多，快快写出属于自己的网页吧！
下一篇： httpd服务