html5模块
2019-09-25 本文已影响0人
快去学习不然怎么去看aimer
超文本标记语言（英语：Hyper Text Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
整体结构：
<!DOCTYPE html>
<html>
<head>
<title>这是标题</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
在vscode中，！+ table 就可打出整体框架
注意语言和注释的格式
源数据 meta
<!--设置整个页面的字符集编码-->
<meta charset="UTF-8">
<!--主要是针对移动设备而进行优化显示效果的, 后面会有更详细的解释-->
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
<!--设置用最新的 IE 引擎去渲染HTML,这是为了兼容IE浏览器-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--设置头部图标-->
<link rel="shortcut icon" href="https://img.haomeiwen.com/i11414906/1e684e513643a190.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" sizes="16x16"/>
<!--刷新,下面是定义每30秒刷新一次这个页面-->
<meta http-equiv="Refresh" Content="30"/>
<!-- 禁用浏览器缓存 -->
<meta http-equiv="pragma" content="no-cache"/>
<!--设置页面在打开几秒后跳转到目标URL-->
<!--<meta http-equiv="Refresh" Content="5; URL=http://www.qfedu.com"/>-->
<!--设置关键字，用于在搜索引擎上通过这些关键字进行搜索时，能够搜索到这个网址-->
<meta name="keywords" content="鲨鱼,千锋，云计算，python， 运维开发， Vue"/>
<!--设置网址的描述性信息-->
<meta name="description" content="网站的简单介绍信息，描述了网站的主要功能、业务范围，等信息"/>
多媒体
图片：
<img src="https://img.haomeiwen.com/i11414906/c60bbc1ca98d9924.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
alt="小姐姐跑了"
title="犀利的眼神"/>
src 图片文件的本地绝对或者相对路径，通常情况下都是一个 url 地址；
alt 假如图片不能显示，则显示这里的文字,跳转功能不受影响；
title 当鼠标放在这个图片上时，会出现的内容
音频：
<audio src="music/隔壁老樊 - 多想在平庸的生活拥抱你.flac" controls loop>无法播放，浏览器不支持</audio>
<br/>
<audio src="https://vipkshttps0.wiz.cn/ks/attachment/download/9d341970-76bb-11e9-8499-f9054e49814b/3dad2926-67e8-4cac-9131-4a0db35dda35/0a863399-01c6-4b0d-b63d-e040e7e44a10?clientType=web&clientVersion=3.0.0&apiVersion=10&lang=zh-cn"
controls
loop></audio>
src 指定文件地址或 url
controls 显示播放控件
loop 循环播放
视频：
<div>
<video src="video/我曾.mp4"
width="800" height="680"
loop
autoplay
muted
controls="controls">
对不起！ 您的浏览器不支持，请升级
</video>
</div>
autoplay 是自动播放，谷歌浏览器不支持
解决办法同时加上 muted 属性，但是默认是静音状态
超链接
a 标签，同时它是一个内联标签
可以设置跳转,就是在页面上点击它，会跳转到目标页面（称为重定向）
或者同页面的另一个标签处（称为锚）
<a href="http://www.baidu.com" target="_blank">新标签打开百度</a>
<!--锚,可以跳到同一个页面的其他标签的位置，需要指定 id-->
<a href="#p100">跳到 id 为 p100 的标签位置</a>
<!--设置点击一个图片进行跳转-->
<p>点击下方图片进行跳转</p>
<a href="http://www.qfedu.com/">
<img src="https://img.haomeiwen.com/i11414906/c60bbc1ca98d9924.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
alt="色即是空"
title="犀利的眼神"/>
</a>
href 指定跳转到地址,锚点一般用来返回顶部的操作
targe ="_blank" 是在一个新的标签页面打开跳转到目标页面, 默认是在当前页面跳转。
表单和表单中的元素
form 用于向后台服务端提交数据，比如注册时候的注册信息等。块级元素，使用频率较高，重点掌握。
<form action="http://192.168.56.128/index/"
method="POST"
enctype="multipart/form-data">
姓名： <input type="text" >
</form>
action 把 input 标签的数据提交到哪儿，通常是一个 u rl
method 把 input 标签的数据提交的方法：
GET 方法, 把提交的内容放到请求的 url 地址后面， 数据被封装在请求头中，后台接收到的数据内会是一个字典的形式
POST 方法,把提交的数据放到请求体中，后台接收到的数据也是一个字典的形式
enctype="mutipart/form-data" 是提交文件或图片专用的属性
form 标签中通常会有如下标签，用于获取用户输入的信息。
input 输入普通文本，内联元素
input 用于设置提交表单数据，用于前端用户和后台交互，这个标签也是内联标签。很重要，必须掌握。
<form action="http://www.qfedu.com" method="GET">
<input type="text" name="user_name" placeholder="输入用户名" required /><br/>
<input type="submit"/>
</form>
type 定义输入内容的类型
text 是普通的文本输入框
password 密码输入框，输入的内容在输入框中看到的是小圆点
submit 提交按钮
name 定义一个 key
value 可以定义一个默认值值
最终后台接收到的数据应该是这种形式:
{"user_name": "shark"}
input 提交文件
上传文件/图片，一定要在form标签开头出设置属性:enctype="multipart/form-data"
<div>
<input name="submit_file" type="file"/>
</div>
input 单选框
实现方式把
type属性的值设置为radio，并把name属性的值设置为相同，就可以实现互斥，这种情况下只能选一个。
image
<div>
性别：<input type="radio" name="gender" value="1"checked="checked"/>男
<input type="radio" name="gender" value="2" />女 <br data-tomark-pass> </div>
checked="checked"设定选中。value的值会被提交到后台服务器，比如上例选择了 男 , 后台收到的数据会是：{"gender": "1"}
input 实现多选框
image
<div>
<input type="checkbox" name="cls_name" value="11" checked="checked"/>千锋云计算好程序员
<input type="checkbox" name="cls_name" value="12"/>千锋云计算就业班
<input type="checkbox" name="cls_name" value="13" checked="checked"/>千锋网络安全班
</div>
-
select下拉框
image
<div>
<!--单选-->
选择你所在的城市：<br/>
<select name="city">
<option value="bj">北京</option>
<!--selected 设定默认值,不设定默认是在代码中第一个出现的-->
<option value="sh" selected="default">上海</option>
<option value="zz">郑州</option>
</select><br data-tomark-pass> <!--多选-->
城市，按住ctrl键可多选：<br/>
<select name="multi_city" multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="zz" selected="selected">郑州</option>
</select>
</div>
-
textarea提交多行文本
页面上显示一个边框，里面的有默认的内容，鼠标拉动边框的边缘，可以改变其大小
<div>
<textarea name="submit_text">默认内容</textarea>
</div>
-
input关于提交到类型
<input type="submit" value="Submit提交"/>
<input type="button" value="Button提交"/>
<input type="reset" value="重置"/>
submit点击后会把form便签中的所有以上提到的数据提交到后台。button点击后不会通过form提交到后台，通常会绑定一个javascript事件。
一些input的其他常见用法
姓名: <input type="text" name="name" id="" required="true"/> <br/><br/>
邮箱: <input type="email" name="user_email" /> <br/><br/>
网址: <input type="url" name="url" /> <br/><br/>
日期: <input type="datetime-local" name="date_local" /> <br/><br/>
时间: <input type="time" name="t" id="input-time"> <br/><br/>
数字: <input type="number" name="nub" min="2" max="10"/> <br/><br/>
搜索: <input type="search" name="s" id="input-search"> <br/><br/>
列表
ul 和 ol 用于在页面中呈现出一个列表，块级元素。
<h3>以 点 标识的菜单</h3>
<ul>
<li>菜单一</li>
<li>菜单二</li>
</ul>
<h3>有序列表 </h3>
<ol>
<li>菜单一</li>
<li>菜单二</li>
</ol>
<ol>
<li>菜单一</li>
<li>菜单二</li>
</ol>
表格
<h3>表格</h3>
<!--border="1" 表格最外边的边框线,粗细是 1 (基本是最小的了，只接受整数)-->
<table border="1">
<!-- thead table head的缩写，表头的意思-->
<thead>
<tr>
<th>序号</th>
<th>主机名</th>
<th>端口号</th>
</tr>
</thead>
<!--tbody 表的主体-->
<tbody>
<!--第一行-->
<tr>
<td>1</td>
<td>host1.com</td>
<td>80</td>
</tr>
<!--第二行-->
<tr>
<td>2</td>
<td>host2.com</td>
<td>80</td>
</tr>
</tbody>
</table>
label + input 触发获取焦点
当在页面上用鼠标点击 lanbel标签定义的内容时（这里是：用户名），输入框就会被自动选中
<label for="inputUser">用户名</label>
<input id="inputUser" type="text"/>
