HTML是互联网上应用最广泛的标记语言。HTML文件就是普通文本+HTML标记,而不同的HTML标记能表示不同的效果。
HTML5并不是一种革新的的升级,而是一种向规范向习惯的妥协,因此HTML5并不会带给开发者过多的冲击,从HTML4到HTML5过渡会非常轻松。
HTML5解决了以下四点问题 :
下面在ideal中先写一个第一个网页,测试一下环境是否搭建好。
<!--DOCTYPE :告诉浏览器,我们要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签,它用来描述我们网站的一些信息-->
<meta charset="UTF-8">
<meta name="keywords" content="好好学习">
<meta name="description" content="从现在开始好好学习">
<!--title网页标题-->
<title>我的第一个网页</title>
</head>
<!--body标签代表网页主体 -->
<body>
hello,world!
</body>
</html>
image图像 src:图片地址,可以选用相对路径,也可以选用绝对路径,一般使用相对路径,便于进行修改,或者发送给他人,每个人的存储路径不同,绝对路径就要进行修改,大大不便。 src和talt是必填项 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--放入图像
src图片地址 相对路径 alt 报错误时提示信息
title 鼠标悬停时的文字-->
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300">
<a href="3、链接标签.html#down">跳转到底部</a>
</body>
</html>
在日常我们经常可以看到点击这个链接,跳转到另一个界面,其实就是使用了链接标签这个方法,a href输入跳转地址,还应用了一下锚链接,功能性链接,邮件,qq等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签
herf必填 表示要跳转到哪个网页
target表示窗口在哪里打开
_blank 在新标签中打开
_self 在自己网页打开-->
<a href="1.我的第一个网页.html" target="_blank">点我跳转到页面</a>
<br>
<a href="https://www.baidu.com" target="_self">点我跳转到百度</a>
<br>
<a href="1.我的第一个网页.html">
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300" >
</a>
<p></p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300" >
</a>
<p></p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300" >
</a><p></p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300" >
</a><p></p>
<a href="1.我的第一个网页.html">
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300" >
</a>
<!--锚链接
1、需要一个锚标记
2、跳转到标记
#-->
<a href="#top">回到顶部</a>
<a name="down">回到底部</a>
<!--功能性链接
邮件链接:mailto:-->
<a href="mailto:[email protected]">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好,有什么需要帮助的呢?" title="你好,有什么需要帮助的呢?"/></a>
</body>
</html>
列表分为有有序列表和无序列表,有序列表应用:试卷,问卷等。无序列表:导航、侧边栏等。
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--ol表示有序列表
应用:试卷,问答-->
<ol>
<li>Java</li>
<li>python</li>
<li>数据库</li>
<li>网络</li>
</ol>
<!--ul表示无序列表
应用:导航,侧边栏-->
<ul>
<li>Java</li>
<li>python</li>
<li>数据库</li>
<li>网络</li>
</ul>
<!--dl标签
dt:列表名称
dd:列表内容
应用:公司网站底部-->
<dl>
<dt>学科</dt>
<dd>python</dd>
<dd>Java</dd>
<dd>c</dd>
<dt>体育</dt>
<dd>篮球</dd>
<dd>足球</dd>
<dd>羽毛球</dd>
</dl>
</body>
</html>
代码实现:
表格就是日常生活中我们常见的一些表格,在excel中完成,这里用代码实现一下。
表格:table,也可以进行跨行,跨列操作,相当于excel中的合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td-->
<table border="1px">
<tr>
<!--colspan 跨列 -->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan跨行 -->
<td rowspan="4">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
<table></table>
</html>
就是可以播放视频或者音频,仔细想想其实就是写好路径就可,autoplay可以设置自动播放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--
src:资源路径
controls 标签控制开关
autoplay:自动播放
-->
<video src="../resources/video/抖音.mp4 " controls autoplay></video>
<audio src="../resources/audio/Kim.T - 我是一只鱼.mp3 "controls autoplay></audio>
</body>
</html>
内联框架就是在这个网页可以嵌套其他网页,这里选用百度举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!--iframe 内联框架
src:地址
w h 宽度 高度-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>
</body>
</html>
这是网页最常用的,我们通常登录某网站就是用这个。写一个注册页面。
重点:method:post,get提交方式
get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
post:比较安全,传输大文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get提交方式
get方式提交:我们可以在url中看到我们提交的信息,不安全,高效
post:比较安全,传输大文件-->
<form action="1.我的第一个网页.html" method="post">
<!-- 文本输入框:input type="text"
value 默认初始值
maxlength最长能写几个字符
size 文本框的长度-->
<p>名字:<input type="text" name="username"></p>
<!--密码框:input type="password" -->
<p>密码:<input type="password" name="pwd"></p>
那如果用post方式提交,其实也是可以捕获到输入的信息的,在页面审查元素捕获一下,就能看到输入的信息,如下图。其实如果再用了加密的方式就看不到了。
代码实现:
单选框用radio,多选框用checkbox,如果默认选中,就加checked
<!--单选框标签
input type=“radio”
value:单选框的值
name:表示组-->
<p>性别:
<input type="radio"value="boy" name="sex"/>男
<input type="radio"value="girl" name="sex"/>女
</p>
<!-- checkbox多选框
checked 默认选中-->
<p>爱好:
<input type="checkbox"value="游泳"name="1">游泳
<input type="checkbox"value="学习"name="hobby"checked>学习
<input type="checkbox"value="游戏"name="hobby">游戏
</p>
<!-- option 下拉框 列表框
selected默认选中-->
<p>国家:
<select name="列表名称" >
<option value="中国">中国</option>
<option value="法国" selected>法国</option>
<option value="美国">美国</option>
</select>
</p>
文本域常用于我们输入信息时的备注,详细等,文件域可以用来上传文件
<!--textarea文本域 行 列 -->
<p>反馈:
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!--file 文件域 -->
<p>
<input type="file"name="files">
<input type="button"value="上传"name="upload">
</p>
代码实现;
邮箱验证,地址验证,数字等,滑块验证主要用来调节声音,还有我想到的是一些问卷里面滑动选择满意度等,到这里功能越来越详细,如果哪个没有按照规则,则提交不了。
submit:提交
reset:重置
<!--邮箱验证 -->
<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="1">
</p>
<!--滑块 input type=”range“-->
<p>音量:
<input type="range"name="voice"max="100"min="0"step="1">
</p>
<p>搜索:
<input type="search"name="search">
</p>
<p>
<input type="submit">
<input type="reset">
代码实现:
还有一些功能 隐藏hidden,禁用disable,只读 readonly
placeholder 提示信息 (在文本框中输入的提示信息,方便用户可以知道这里填写什么)
required 非空判断 (是否为空)
pattern 正则表达式
文章浏览阅读385次。基于Arduino uno,获取红外寻迹传感器的原始值_怎么检测红外寻迹模块返回值
文章浏览阅读494次,点赞5次,收藏9次。单片机(Microcontroller)是一种集成了微处理器核心、存储器、输入/输出接口和定时器等功能模块的集成电路芯片,具有体积小、功耗低、性价比高等特点,被广泛应用于各个领域。单片机的发展历史可以追溯到20世纪70年代,当时的单片机功能有限,主要用于简单的控制任务。
文章浏览阅读412次。https://zhuanlan.zhihu.com/p/54096381_生成对抗网络 python代码
文章浏览阅读5.2k次,点赞7次,收藏18次。有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:想在网页上展示上述表格效果可以使用以下代码:创建表格的四个元素:table、tbody、tr、th、td1、…:整个表格以标记开始、标记结束。2、…:当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。3、…_怎样在网站中添加表格别人可以下载
文章浏览阅读770次。到目前为止,我们已经讨论了如何将对象实例公开给QML上下文。有时我们还希望在QML中可以使用注册类本身。注册允许将类当作QML中的数据类型来使用。此外,注册还可以提供其他功能,比如允许在QML中将类用作可实例化的QML对象类型,或者允许在QML中导入和使用类的单例实例。通常我们使用Q_OBJECT宏注册从QObject派生的类,也可以用Q_GADGET宏声明一个比QObject“更轻”的版本。在这些更轻的类中,我们可以访问它们的属性、枚举和可调用的方法,但不能使用信号槽系统,我们稍后会进行介绍。1. 注_qmlregisteruncreatabletype
文章浏览阅读2.1k次,点赞7次,收藏15次。头文件与命名空间的关系 Q:有些书说有些头文件不在std里是什么意思?std里包含些什么?为什么不用std就不能使用cout?头文件中声明的东西为什么在使用的时候需要先using namespace std;一下?如果我不用#include和其他头文件。只用using namespace std 的话,是不能用cout的。这说明cout是在iostream里声明_c#中命名空间和c语言中头文件之间的关系
文章浏览阅读1.2k次,点赞2次,收藏8次。注释dtype=np.int代表导入数据的格式为整数delimiter=’,'代表原始数据的存储格式为以‘,’为间隔原始文件中以‘#’开头的行代表被注释,不会被np.loadtxt读取通过[[0] * b for i in range(a)]的方式初始化一个x[a][b]的二维数组np.savetxt()函数可以用来保存数据,第一个参数为保存数据的路径,其中C是自定义的文件名,如果该文..._python 读取csv矩阵乘法
文章浏览阅读1.4k次。军团要塞2绘画渲染(a)美术概念 (b)游戏内玩家看到的角色摘要在《军团要塞2》中我们提出了一整套美术方案和新的实时渲染技术,这种技术能实现出一种独一无二的渲染风格。《军团要塞2》由美术和程序基于20世纪初时商业插画中的传统风格合作完成。在这篇论文中,我们会结合美术方向与技术选择,来讨论如何支持美术目标和玩法限制。除了实现一种有冲击力的风格外,我们也设计了边缘光照和亮度与色调变化的着色器技..._军团要塞画师
文章浏览阅读9.6k次,点赞8次,收藏65次。这里介绍:RGB图3个通道的提取、RGB图转灰度图、图片反转、图片亮度调整具体操作,需导入的库如下:原图如下:结果如下,从左到右分别是:Red,Green,Blue这里借助skimage库中的exposure函数来进行图像亮度的调整结果如下:........._jupter rgb灰度直方图提取
文章浏览阅读931次。2023年地级、省级、县级、国界、九段线的shp数据_九段线shp数据
文章浏览阅读797次,点赞16次,收藏19次。二十一世纪我们的社会进入了信息时代,信息管理系统的建立,大大提高了人们信息化水平。传统的管理方式对时间、地点的限制太多,而在线管理系统刚好能满足这些需求,在线管理系统突破了传统管理方式的局限性。于是本文针对这一需求设计并实现了一个基于django高校本科生学习成长记录系统,为了简捷并有效的解决学习各方面的问题。
文章浏览阅读7.7k次。为什么要共享session?我们使用单台Tomcat的时候不会有共享sesssion的疑虑,只要使用Tomcat的默认配置即可,session即可存储在Tomcat上。但是随着业务的扩大,增加Tomcat节点构成Tomcat集群大势所趋,分布式带来了增加更大规模并发请求的优势,但是也随之到来了一个问题,每个Tomcat只存储来访问自己的请求产生的session,如果Tomcat-A已经为客..._redis分布式session共享