HTML5
作者：互联网
HTML5
1 HTML5概述
# 什么是html5?
超文本标记语言第五版，该版基本上被所有流行的浏览器所兼容
# 作用
搭建网页结构，是网页的基石
2 使用IDEA开发html
-
设置浏览器
-
创建第一个html文件
-
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页！</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
-
点击浏览器
-
运行结果
3 网页基本信息
<!--DOCTYPE - 告诉浏览器使用什么规范 -->
<!DOCTYPE html>
<!--html - 根标签，所有内容应放在html里面 -->
<html lang="en">
<!--head - 头标签，放一些描述信息和结构信息 -->
<head>
<!--meta - 描述标签，放一些描述信息 -->
<meta charset="UTF-8">
<meta name = "keywords" content="ytc">
<meta name = "description" content="我的网页">
<!--title - 标题标签 -->
<title>网页基本信息</title>
</head>
<!--body - 体标签，放一些内容 -->
<body>
<h1>Hello World!</h1>
</body>
</html>
<!--<label>...</label> - 开标签+闭标签 -->
<!--<label /> - 自闭和标签 -->
4 基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!--标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--水平线标签 -->
<hr/>
<!--段落标签 -->
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快</p>
<!--换行标签 -->
<hr/>
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
<!--字体样式标签 -->
<hr/>
粗体：<strong>like</strong><br/>
斜体：<em>like</em>
<!--特殊字符标签 -->
<hr/>
空 格<br/>
大于号：><br/>
小于号：<<br/>
</body>
</html>
5 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--img - 图片标签，可引入jpg png gif bmp...等资源
value:
src - 图片路径（推荐相对路径）
alt - 找不到图片时显示该内容
title - 鼠标悬停时显示该内容
width - 图片宽度
height - 图片高度
-->
<img src="../resources/image/touxiang.png" alt="ytc头像" title="悬停文字" width="300" height="300">
</body>
</html>
6 超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<!--锚链接的标点 -->
<a name=top">顶部</a>
<!--a - 超链接，可跳转页面或位置
value:
href - 跳转路径
target - 跳转方式
=_blank: 打开一个新标签用来页面跳转
=-self: 在当前标签进行页面跳转，会覆盖当前页面
-->
<a href="https://www.baidu.com" target="_blank">点击我跳转到百度</a>
<!--锚链接
value:
href - 当前页面需要加上#，其他页面则在#前面加上路径
-->
<a href="#top">回到顶部</a>
</body>
</html>
7 列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--ol - 有序列表 -->
<ol>
<li>Java</li>
<li>Python</li>
<li>C</li>
</ol>
<!--ul - 无序列表 -->
<ul>
<li>Java</li>
<li>Python</li>
<li>C</li>
</ul>
<!--dl - 自定义列表，每一列内容可带一个标题 -->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C</dd>
<dt>位置</dt>
<dd>深圳</dd>
<dd>武汉</dd>
<dd>上海</dd>
</dl>
</body>
</html>
8 表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--table - 表格标签
value:
border - 边框
-- 内置标签 --
th - 标题
tr - 行
td - 列
value:
colspan - 跨列
rowspan - 跨行
-->
<table border = "1">
<th>
<td>学科</td>
<td>成绩</td>
</th>
<tr>
<td rowspan="2">赐哥儿</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>ytc</td>
<td colspan="2">100</td>
</tr>
</table>
</body>
</html>
9 视频、音频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视频、音频标签</title>
</head>
<body>
<!--video - 视频标签
value:
src - 资源路径
controls - 进度条（有了它才能看到资源）
autoplay - 自动播放
-->
<video src="../resources/video/b.mp4" controls autoplay></video>
<!--audio - 音频标签
value:
src - 资源路径
controls - 进度条（有了它才能看到资源）
autoplay - 自动播放
-->
<audio src="../resources/audio/a.mp3" controls autoplay></audio>
</body>
</html>
10 内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--iframe - 内联框架
value:
src - 资源路径
name - 框架标识，可作为锚链接的traget属性使用
frameborder - 框架边框
w-h - 宽高
-->
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000" height="800"></iframe>
</body>
</html>
11 表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<!--1 form - 表单标签，用来上传数据
value:
action - 请求处理地址或网页地址，这里是当前页面
mehtod - 表单提交方式
get: 在请求行中，提交后会拼接在地址栏里；高效、不安全，不推荐使用
post: 在请求体中，提交后可在network的from data可看到，一般会加密处理；低效，安全，可传递大文件
-->
<form action="#" method="post">
<h2>登录</h2>
<!--2 input - 一般输入标签
value:
type - 类型（text-文本，password-密码，submit-提交，reset-重置...）
name - 名称，一般都会给予，用来表示唯一性且访问方便
value - 初始默认值
maxlength - 输入的最大字符
size - 文本框的长度
readonly - 只读
disabled - 禁用
hidden - 隐藏（常用，会经常传递隐藏参数）
placeholder - 提示信息
required - 非空判断，输入框元素不能为空
pattern - 正则表达式
-->
<!--
text - 文本框
password - 密码框
-->
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="pwd"></p>
<!--radio 单选框 -->
<p>
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女
</p>
<!--checkbox 多选框 -->
<p>爱好：
<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="sleep">睡
<input type="checkbox" name="hobby" value="game">游戏
</p>
<!--file 文件域 -->
<p>文件上传：
<input type="file" name="files">
</p>
<!--
button - 普通按钮
image - 图片按钮，点击会自动提交
submit - 表单提交
reset - 表单重置
-->
<p>
按钮：<input type="button" name="btn" value="点击变长"><br/>
图片按钮：<input type="image" src="../resources/image/touxiang.png">
</p>
<!--3 特殊输入
select->option - 下拉框
textarea - 文本域
-->
<!--select 下拉框 -->
<p>国家：
<select name="country">
<option value="china">中国</option>
<option value="usa" selected>美国</option>
<option value="india">印度</option>
</select>
</p>
<!--textarea 文本域 -->
<p>文本域：
<textarea name="msg"cols="30" rows="3">文本内容</textarea>
</p>
<!--4 特殊验证
email - 邮箱
url - 地址
number - 数字
range - 滑块
search - 搜索框
-->
<!--email 邮箱 -->
<p>邮箱：
<input type="email" name="email">
</p>
<!--url 地址 -->
<p>地址：
<input type="url" name="url">
</p>
<!--number 数字 -->
<p>商品数量：
<input type="number" name="num" max="100" min="0" step="1">
</p>
<!--range 滑块 -->
<p>音量：
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<!--search 搜索框 -->
<p>搜索框：
<input type="search" name="search">
</p>
<!--5 扩展
label - 增强鼠标可用性
-->
<p>
<label for="mark">你点我试试...</label>
<input type="text" name="test" id="mark">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
获取post参数
标签：网页,--,标签,标题,HTML5,跑得快,nbsp 来源： https://blog.csdn.net/lll919397/article/details/113775032