HTML5
HTML5
HTML基本信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords",content="狂神说java">
<meta name="description",content="学习java">
<title>我的第一个网页</title>
</head>
<body>
Hello，world！
</body>
</html>
图形标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--alt:图片找不到时候展示的内容
title:鼠标悬停展示内容
-->
<img src="../resources/image/鞠婧祎.jpg" alt="鞠婧祎" title="悬停鞠婧祎" width="216" height="144">
</body>
</html>
超链接标签及应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--href : 必填
target="_blank" : 在新的标签页打开
-->
<a href="hello.html" target="_blank">点击跳转hello.html</a><br>
<a href="https://www.baidu.com">点击跳转百度</a><br>
<p><a href="图像标签.html"><img src="../resources/image/鞠婧祎.jpg" alt="鞠婧祎" title="悬停鞠婧祎" width="216" height="144">
</a></p><br>
<p><a href="图像标签.html"><img src="../resources/image/鞠婧祎.jpg" alt="鞠婧祎" title="悬停鞠婧祎" width="216" height="144">
</a></p><br>
<p><a href="图像标签.html"><img src="../resources/image/鞠婧祎.jpg" alt="鞠婧祎" title="悬停鞠婧祎" width="216" height="144">
</a></p><br>
<p><a href="图像标签.html"><img src="../resources/image/鞠婧祎.jpg" alt="鞠婧祎" title="悬停鞠婧祎" width="216" height="144">
</a></p><br>
<p><a href="图像标签.html"><img src="../resources/image/鞠婧祎.jpg" alt="鞠婧祎" title="悬停鞠婧祎" width="216" height="144">
</a></p><br>
<p><a href="图像标签.html"><img src="../resources/image/鞠婧祎.jpg" alt="鞠婧祎" title="悬停鞠婧祎" width="216" height="144">
</a></p><br>
<p><a href="图像标签.html"><img src="../resources/image/鞠婧祎.jpg" alt="鞠婧祎" title="悬停鞠婧祎" width="216" height="144">
</a></p><br>
<hr>
<!--功能性链接
邮件链接 ： mailto-->
<a href="mailto:815977246@qq.com">点击联系我</a><br>
<!--QQ链接：百度qq推广->推广工具->复制代码-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="https://pub.idqqimg.com/wpa/images/counseling_style_53.png" alt="加我领取东西" title="加我领取东西"/></a>
<!--锚链接
1.需要一个锚标记，用a标签的name属性
2.跳转到标记，href="跳转html#name的值"
-->
<a href="#top">回到顶部</a>
<a name="down"></a>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>c</li>
<li>c++</li>
<li>python</li>
</ol>
<!--无序列表-->
<ul>
<li>java</li>
<li>c</li>
<li>c++</li>
<li>python</li>
</ul>
<!--定义列表-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>c</dd>
<dd>c++</dd>
<dd>python</dd>
<dt>位置</dt>
<dd>南京</dd>
<dd>重庆</dd>
<dd>无锡</dd>
<dd>上海</dd>
</dl>
</body>
</html>
表格
- colspan:跨行
- rolspan：跨列
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--controls:显示进度条、音量下载等
autoplay:进入网页自动播放
-->
<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>
</body>
</html>
网页结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>网页头部</header>
<section>网页主题</section>
<footer>网页脚部</footer>
</body>
</html>
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iFrame内联框架</title>
</head>
<body>
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="hello.html" target="hello">点击跳转</a>
</body>
</html>
表单学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<form action="hello.html" method="post">
<p>名字: <input type="text" name="name"></p>
<p>密码: <input type="password" name="psw"></p>
<p>
<input type="submit" value="点击提交">
<input type="reset" value="点击重置">
</p>
</form>
</body>
</html>
- get方式提交可以直接在地址栏看到名字密码信息，不安全
- post看不到，可以通过：右击鼠标->检查->NetWork，点击提交后出现一条请求，点击进入Headers，找到Query String Parameters，下面显示你的名字密码
- 单选框radio必须加name属性，表示在同一个组
- 表单相关控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮文本单选多选框</title>
</head>
<body>
<h1>注册</h1>
<!--maxlength:最多输入8个字符
size：文本框的长度，默认20
-->
<form action="hello.html" method="get">
<p>名字: <input type="text" name="username" value="狂神" maxlength="8" size="20"></p>
<p>密码: <input type="password" name="psw"></p>
<!--checked="checked" : 默认勾选这个-->
<p>性别：
<input type="radio" value="boy" name="sex" checked="checked">男
<input type="radio" value="girl" name="sex">女
</p>
<p>爱好：
<input type="checkbox" value="sleep" name="hobbies">睡觉
<input type="checkbox" value="code" name="hobbies" checked="checked">敲代码
<input type="checkbox" value="basketball" name="hobbies">打篮球
<input type="checkbox" value="chat" name="hobbies">聊天
</p>
<p>按钮
<!--点击没有效果，通过js创建方法-->
<input type="button" name="button" value="按钮">
<!--图片可以点击-->
<input type="image" src="../resources/image/鞠婧祎.jpg" width="150px" height="100px" name="image" value="鞠婧祎">
</p>
<p>国家：
<select name="列表名称" id="">
<option value="china">中国</option>
<option value="japanese">日本</option>
<option value="swit" selected>瑞士</option>
<option value="india">印度</option>
</select>
</p>
<!--文本域-->
<p>反馈：
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
<!--邮箱验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL-->
<p>URL:
<input type="url" name="url">
</p>
<p>数字:
<input type="number" name="num" max="100" min="0" step="2">
</p>
<!--滑块-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索框：
<input type="search" name="search">
</p>
<p>
<input type="submit" value="点击提交">
<input type="reset" value="点击重置">
</p>
</form>
</body>
</html>
表单简单应用
- hidde，disabled，readonly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="hello.html" method="get">
<p>名字: <input type="text" name="username" value="狂神" maxlength="8" size="20"></p>
<p>密码: <input type="password" name="psw" hidden></p>
<!--checked="checked" : 默认勾选这个-->
<p>性别：
<input type="radio" value="boy" name="sex" checked="checked" disabled readonly>男
<input type="radio" value="girl" name="sex">女
</p>
<!--增强鼠标可用性，点击会调到对应id的搜索框-->
<p>
<label for="mark">你点我试试</label>
<br>
搜索框：<input type="text" id="mark">
</p>
<p>
<input type="submit" value="点击提交">
<input type="reset" value="点击重置">
</p>
</form>
</body>
</html>
匹配所有邮箱的正则表达式：[\w!#$%&'+/=?^_{|}~-]+(?:\.[\w!#$%&'*+/=?^_~-]+)@(?:\w?.)+\w?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="hello.html" method="get">
<p>名字: <input type="text" name="username" value="狂神" maxlength="8" size="20" required placeholder="请输入用户名"></p>
<p>密码: <input type="password" name="psw" hidden></p>
<!--checked="checked" : 默认勾选这个-->
<p>性别：
<input type="radio" value="boy" name="sex" checked="checked">男
<input type="radio" value="girl" name="sex">女
</p>
<!--增强鼠标可用性，点击会调到对应id的搜索框-->
<p>
<label for="mark">你点我试试</label>
<br>
搜索框：<input type="text" id="mark">
</p>
<!--自定义邮箱验证pattern属性-->
<!--[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?-->
电子邮箱：<input type="text" name="diymail" pattern="[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?">
<p>
<input type="submit" value="点击提交">
<input type="reset" value="点击重置">
</p>
</form>
</body>
</html>
浙公网安备 33010602011771号