HTML5
1. 网页基本元素
<!DOCTYPE html><!--告诉浏览器使用什么规范-->
<html lang="en"><!--总标签-->
<head><!--代表网页头部-->
<meta charset="UTF-8"><!--描述网页的一些信息-->
<title>我的第一个网页</title><!--网页标题-->
</head>
<body><!--网页主体-->
hello,world
</body>
</html>
2. 基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>一级标签</h1><!--标题标签-->
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>两只老虎，两只老虎，</p><!--段落标签-->
<p>跑得快，跑得快，</p>
<hr/><!--水平线标签-->
<p> 一只没有眼睛，</p>
<p>一只没有尾巴，</p>
<br/><!--换行标签-->
<!--字体标签-->
<strong>真奇怪！真奇怪！</strong><!--加粗-->
<em>两只老虎，两只老虎，</em><!--斜体-->
</body>
</html>
3. 特殊字符
空格：
大于号：>
小于号：<
版权符号：©
4. 图像标签
常见图像格式
- JPG
- GIF
- PNG
- BMP：位图
- ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--src:图像地址 ../:上一级目录 alt:找不到图片时的替代文字 title:鼠标悬停提示文字-->
<img src="../resources/bd.jpg" alt="图片" title="标题"/>
</body>
</html>
5. 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
target:默认当前页面打开
_blank:跳转到新页面
_self:当前页面打开
<!--文字超链接-->
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<!--图片超链接-->
<a href="https://www.baidu.com" >
<img src="../resources/bd.jpg">
</a>
</body>
</html>
6. 锚链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
<!--
锚链接：
1.需要一个标记
2.跳转到标记
3.使用#
-->
<!--设置标记-->
<a id="top">我是顶部</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
<img src="../resources/bd.jpg">
</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
<img src="../resources/bd.jpg">
</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
<img src="../resources/bd.jpg">
</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
<img src="../resources/bd.jpg">
</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
<img src="../resources/bd.jpg">
</a>
<a href="https://www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="https://www.baidu.com" >
<img src="../resources/bd.jpg">
</a>
<!--2.跳转到页面-->
<a href="second.html#top">跳转至一个页面指定位置</a>
<a href="#top">跳转至顶部</a>
</body>
</html>
7. 邮件连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮件链接</title>
</head>
<body>
<a href="mailto:12345678@qq.com">点击联系我</a>
</body>
</html>
8. 列表
分类
- 有序列表
- 无需列表
- 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Java</li>
<li>python</li>
<li>C</li>
</ol>
<!--无需列表-->
<ul>
<li>Java</li>
<li>python</li>
<li>C</li>
</ul>
<!--自定义列表
dt:列表名称
dd:列表内容
-->
<dl>
<dt>课程</dt>
<dd>语文</dd>
<dd>数学</dd>
<dt>时间</dt>
<dd>上午</dd>
<dd>下午</dd>
</dl>
</body>
</html>
9. 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
border:边框
tr:行
td:列
rowspan:跨行
colspan:跨列
-->
<table border="1px">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
10. 媒体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体标签</title>
</head>
<body>
<!--媒体标签
controls:滚动条
autoplay:自动播放
-->
<video src="../resources/video/4.mp4" controls autoplay></video>
<audio src="../resources/video/4.mp3" controls autoplay></audio>
</body>
</html>
11. 页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<header>
这是头部区域
</header>
<section>
这是主体部分
</section>
<article>
这是独立文章内容
</article>
<aside>
这是侧边栏
</aside>
<footer>
这是脚部区域
</footer>
</body>
</html>
12. iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--iframe
-->
<iframe src="" name="4399_game" frameborder="0" width="300px" height="200px"></iframe>
<a href="index.html" target="4399_game" >点击跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=914235729&bvid=BV1QM4y1H7QK&cid=1216800580&page=1"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true" >
</iframe>-->
</iframe>
</body>
</html>
13. 表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-
method:如何发送数据
get:可以在url中看到提交的信息
post:比较安全，可以传输大文件
action:向何处发送表单数据，可以是一个网站或者一个请求处理地址
--->
<h1>注册</h1>
<form action="index.html" method="get" >
<!-- 文本输入框 -->
<p>姓名：<input type="text" name="name"/></p>
<!-- 密码框 -->
<p>密码：<input type="password" name="pwd"/></p>
<!-- 提交 -->
<input type="submit">
<!-- 重置 -->
<input type="reset">
</form>
</body>
</html>
表单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单应用</title>
</head>
<body>
<!--表单
readonly:只读
disabled：禁用
hidden:隐藏
-->
<h1>注册</h1>
<form action="index.html" method="post" >
<!-- 文本输入框 -->
<p>姓名：<input type="text" name="name" value="admin" readonly></p>
<!-- 密码框 -->
<p>密码：<input type="password" name="pwd" hidden></p>
<p>性别：
<radio>
<input type="radio" value="man" name="sex" checked disabled>男
<input type="radio" value="women" name="sex">女
</radio>
</p>
<p>搜索:
<input type="search" name="search">
</p>
<p>
<!-- for = id 绑定事件-->
<label for="mark">点我啊</label>
<input type="text" id="mark">
</p>
<!-- 提交 -->
<input type="submit">
<!-- 重置 -->
<input type="reset">
</form>
</body>
</html>
14. 下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框</title>
</head>
<body>
<!--下拉框
selected:默认被选中
-->
<p>城市：
<select name="area">
<option value="chengdu">成都</option>
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>
</p>
</body>
</html>
15. 单选框 && 多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选框 多选框</title>
</head>
<body>
<!--单选框
value:单选框的值
name:name相同表示是同一个组
checked:默认被选中
-->
<form method="get" action="index.html">
<radio>
<input type="radio" value="man" name="sex" checked>男
<input type="radio" value="women" name="sex">女
</radio>
<!--多选框-->
<p> 爱好：
<input type="checkbox" value="sleep" name="hobby" checked>睡觉
<input type="checkbox" value="reading" name="hobby">看书
<input type="checkbox" value="sport" name="hobby">运动
<input type="checkbox" value="swimming" name="hobby" checked>游泳
</p>
<input type="submit" value="提交">
</form>
</body>
</html>
16. 按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮</title>
</head>
<body>
<form method="get" action="index.html">
<!--普通按钮-->
<input type="button" name="btn1" value="登录">
<!--图片按钮-->
<input type="image" name="btn2" src="../resources/bd.jpg">
</form>
</body>
</html>
17. 文本域 && 文件域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本域和文件域</title>
</head>
<body>
<!--文本域-->
<p>反馈：
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<input type="file" name="files">
</body>
</html>
18. 搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框和简单验证</title>
</head>
<body>
<p>e-mail:
<input type="email" name="email">
</p>
<p>URL:
<input type="url" name="url">
<p>number:
<input type="number" name="number" max="100" min="0" step="10">
</p>
<p>音量:
<input type="range" name="voice" min="0" max="10">
</body>
<p>搜索:
<input type="search" name="search">
</html>
19. 表单简单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单简单验证</title>
</head>
<body>
<!-
placeholder:提示语
required:不能为空
pattern:正则表达式
--->
<h1>注册</h1>
<form action="index.html" method="post" >
<!-- 文本输入框 -->
<p>姓名：<input type="text" name="name" placeholder="请输入姓名：" required></p>
<!-- 密码框 -->
<p>密码：<input type="password" name="pwd" required></p>
<p>性别：
<radio>
<input type="radio" value="man" name="sex" checked disabled>男
<input type="radio" value="women" name="sex">女
</radio>
</p>
<p>邮箱:
<input type="email" name="email" required pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<!-- 提交 -->
<input type="submit">
<!-- 重置 -->
<input type="reset">
</form>
</body>
</html>