JAVA前端————HTML—列表—表格—音频视频—网页结构分析—表单

最新推荐文章于 2023-09-12 09:15:00 发布

追JAVA的小菜鸟

最新推荐文章于 2023-09-12 09:15:00 发布

阅读量347

点赞数

分类专栏： Java前端文章标签：列表 html java javaee

本文链接：https://blog.csdn.net/qq_45673367/article/details/103626979

版权

Java前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

列表li

无序列表

格式：ul——li

有序列表

格式：ol——li

自定义列表

格式：dl——dt——dd

练习：练习列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表和有序列表</title>
</head>
<body>
<h5>信息工程学院</h5>
<ul>
    <li>物联网工程</li>
    <li>软件工程</li>
    <li>计算机科学与技术</li>
</ul>
<h5>课程</h5>
<ol>
    <li>JAVA</li>
    <li>数据库理论</li>
    <li>开源硬件与技术</li>
    <li>离散数学</li>
    <li>数学电子技术</li>
</ol>
<dl>
    <dt>体育课</dt>
    <dd>太极拳</dd>
    <dd>羽毛球</dd>
    <dd>篮球</dd>
    <dd>足球</dd>
    <dd>体育舞蹈</dd>
    <dd>排球</dd>
</dl>
</body>
</html>

表格table

基本结构：
表格 table
行： tr——rowspan（跨行）
列： td——colspan（跨列）

练习：表格制作课程表运用跨行垮列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZY的课程表</title>
</head>
<body>
<table border="5px">
    <!--五行tr六列td-->
    <tr>
        <td>时间</td>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
        <td>周五</td>
    </tr>
    <tr>
        <td rowspan="2">上午</td>
        <td>数据库原理</td>
        <td>开源硬件与编程</td>
        <td>Linux操作系统</td>
        <td>数学逻辑电路</td>
        <td>JAVA程序设计</td>
    </tr>
    <tr>
        <td>体育(羽毛球)</td>
        <td>JAVA程序设计</td>
        <td>大学英语</td>
        <td>数据库原理</td>
        <td>开源硬件与编程</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>大学英语</td>
        <td></td>
        <td></td>
        <td></td>
        <td>数学逻辑电路</td>
    </tr>
    <tr>
        <td>Linux操作系统</td>
        <td>毛概</td>
        <td>离散数学</td>
        <td></td>
        <td>数据库原理</td>
    </tr>
    <tr>
        <td>晚上</td>
        <td colspan="3">创新创业基础</td>
        <td colspan="2">形势与政策</td>
    </tr>

</table>
</body>
</html>

音频audio

格式：< audio src="…/statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" autoplay controls> < /audio> 里面的参数如下
src：音频路径
auyoplay：自动播放
controls：点击播放——提供播放按钮，进度条、下载按钮、音量控制

练习：制作音频网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国新说唱</title>
</head>
<body>
<h2>中国新说唱</h2>
<img src="中国新说唱.jpg" alt="中国新说唱"  title="中国新说唱" height="300" width="400">
<img src="中国新说唱选手.jpg" alt="Blow Fever 万妮达" title="Blow Fever 万妮达" height="300" width="500">
<h4>No Day Off </h4> 点击播放------->
<audio src="Blow%20Fever%20_%20万妮达%20-%20No%20Day%20Off%20(Live).mp3" controls ></audio>
</body>
</html>

视频video

格式：< video src="…/statics/video/china.mp4" controls autoplay>< /video> 里面的参数如下
src：视频路径
auyoplay：自动播放
controls：点击播放——提供播放按钮，进度条、下载按钮、全屏按钮、音量控制
loop：循环播放

网页结构分析

header——标记头部区域
footer——标记脚部区域
section——独立区域
article——文章内容
aside——相关内容侧边栏
nev——辅助内容导航栏

内联框架

作用：嵌套网页——在窗口上打开一个界面，还可以设置这个界面的大小，添加滚动等等各种属性
格式：< iframe src=“https://www.baidu.com/” width=“1000px” height=“600px”>< /iframe>

练习：练习内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架——百度</title>
</head>
<body>
<iframe src="http://www.baidu.com"  width="800" height="800"></iframe>
</body>
</html>

表单

参数
method——规定如何发送表单可以是网站也可以是一个请求处理的地址
action——规定向何处发送表单 post 和get
post：参数不可见传输大文件（常用）
get：参数可见不安全高效大小有限
type
text ：文本框
password：密码框
submit：提交按钮
reset：重置

练习：制作简单表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易表单</title>
</head>
<body>
<form action="庆余年.html" method="post">
    <p>
        登录名：<input type="text" name="username">
    </p>
    <p>
        密&nbsp;码：<input type="password" name="password">
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </p>
</form>
</body>
</html>

表单元素type

文本框text

value——文本框默认的初始值
size——文本框的长度
maxlength——文本框的最大输入长度

 <p> 
 		登录名：<input type="text" name="username"> 
 </p>

密码框password

size——密码框的长度

 <p>
 	 密&nbsp;&nbsp;码：<input type="password" name="password">
 </p>

单选按钮radio

value——表单提交的值
name——名字相同则自动分组必须要分组
checked——默认选中
disable——禁用（仅展示）

 <p>
        性&nbsp;&nbsp;别：<input type="radio" value="男" name="sex" checked>男
        <input type="radio" value="女" name="sex">女
 </p>

复选按钮checkbox

name——必填若分组则名称一致
value——表单提交的值
checked——默认选中
disable——禁用（仅展示）

<p>
        爱&nbsp;&nbsp;好： <input type="checkbox" name="hobby" value="sing">唱歌
        <input type="checkbox" name="hobby" value="dance">跳舞
        <input type="checkbox" name="hobby" value="java">学习JAVA</p>
<p>

下拉列表框select—option

select
name——组件名字必填
size——显示的数量默认为1
option
value——必填下拉框的值
selected——默认选中

 <p>
        平时追的剧：<select name="名字">
        <option value="1">庆余年</option>
        <option value="1">惊蛰</option>
        <option value="1">老九门</option>
        <option value="1">沙海</option>
        <option value="1">延禧攻略</option></select>
 </p>

按钮

submit——登录
reset——重置
button——普通按钮无意义
value——按钮上的文字

    <p>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
        <input type="image" src="按钮.jpg" height="30" width="30">
    </p>

图片按钮——type =“image” src = “图片的路径”

文本域textarea

cols——列长度
rows——行长度

 <p>
        备&nbsp;&nbsp;注：<textarea name="textarea"  cols="30" rows="10"></textarea></p>

文件域

需要支持提交复杂文件
enctype = “ multipart/form—data”

邮箱验证email

type = “email” name= “email”

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

网址验证url

type = “url” name= “url”

 <p>
        网&nbsp;&nbsp;址：<input type="url" name="url">
 </p>

数字number（上下）

min——最小值
max——最大值
step——步长

 <p>
        生活费：<input type="number" min="500" max="3000" step="200">
 </p>

滑块range（左右）

min——最小值
max——最大值
step——步长

<p>
        追剧的费用：<input type="range" name="range" min="0" step="6">
</p>

搜索框search

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

表单的应用

隐藏域

<p> 网&nbsp;&nbsp;址：<input type="url" name="url" hidden> </p>

只读和禁用

只读

 <p> 登录名：<input type="text" name="username" value="ZY" readonly> </p>

禁用

<p>
        性&nbsp;&nbsp;别：<input type="radio" value="男" name="sex" checked>男
        <input type="radio" value="女" name="sex">女
        <input type="radio" value="中性" name="sex" disabled>中性
</p>

标注——增强鼠标可用性

作用：通过 for—name链接到表单中指定的ID

<p>
        <label for="mark">点我试试</label>
        <input type="text"  id="mark">
    </p>

初级表单验证

默认提示——placeholder
必填——required

<p>
	 密&nbsp;&nbsp;码：<input type="password" name="password" placeholder="请输入大小写字母或数字" required>
</p>

正则表达式

<p>
        自定义邮箱：<input type="text" name="自定义" pattern=" ^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
</p>

练习：制作一个完整的登录网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZY的表单</title>
</head>
<body>
<form action="庆余年.html" method="post">
    <p> 登录名：<input type="text" name="username" value="ZY" readonly> </p>
    <p> 密&nbsp;&nbsp;码：<input type="password" name="password" placeholder="请输入大小写字母或数字" required></p>
    <p>
        性&nbsp;&nbsp;别：<input type="radio" value="男" name="sex" checked>男
        <input type="radio" value="女" name="sex">女
        <input type="radio" value="中性" name="sex" disabled>中性</p>
    <p>
        爱&nbsp;&nbsp;好： <input type="checkbox" name="hobby" value="sing">唱歌
        <input type="checkbox" name="hobby" value="dance">跳舞
        <input type="checkbox" name="hobby" value="java">学习JAVA</p>
    <p>
        平时追的剧：<select name="名字">
        <option value="1">庆余年</option>
        <option value="2">惊蛰</option>
        <option value="3">老九门</option>
        <option value="4">沙海</option>
        <option value="5">延禧攻略</option></select></p>
    <p>
        备&nbsp;&nbsp;注：<textarea name="textarea"  cols="30" rows="10"></textarea</p>
    <p>
        邮&nbsp;&nbsp;箱：<input type="email" name="email"></p>
    <p>
        自定义邮箱：<input type="text" name="自定义" pattern=" ^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"></p>
    <p>
        网&nbsp;&nbsp;址：<input type="url" name="url" hidden></p>
    <p>
        生活费：<input type="number" min="500" max="3000" step="200"></p>
    <p>
        追剧的费用：<input type="range" name="range" min="0" step="6"></p>
    <p>
        搜索：<input type="search" name="search"></p>
    <p>
        <label for="mark">点我试试</label></p>
    <p>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
        <input type="image" src="按钮.jpg" height="30" width="30"></p>
</form>
</body>
</html>