1.首先再java里面创建一个project(可以创建java文件也可以直接创建HTML文件,如果创建java文件的话可以删掉src文件然后在默认的html文件里面开始编辑)
2.网页里面的注释 (浅蓝色的就是注释,这一块在csdn里面打不出来)快捷键ctrl+/
段落标签 :
可以输入p后再按tab键自动生成上面的标签
换行标签
这个是单标签,不需要两个标签
下面是段落标签和换行标签的效果
水平线标签
粗体标签
666
斜体标签
123
空格
空 格
大于号
>
小于号
<
当需要两个<>时,我们在第二个里面/在后面结束
版权符号
©
常见的图片格式
1.JPG
2.GIF
3.PNG
4.BMP
img标签 (图片)
图片加载到网页
src里面输入文件路径 路径用 …/ 开头一直到图片出来 alt 里面的类容是当文件的地址有问题的时候表现出来(一旦找不到图片文件就会直接表达alt里面的类容)
在导入图片的代码里面添加
<img src=“…/resource/image/1.jpg” alt=“龚大为"title=“悬停文字”>
title在这个里面就是悬停文字
<img src=”…/resource/image/1.jpg" alt="龚大为"title="悬停文字"width="300"height=“300”>
width和height显示图片的大小
重点还是src和alt alt里面的类容是必填的
a标签(链接)
href里面的类容就是网页的网址,里面可以是自己的网页也可以是百度网页都可以,也可以是图片的网页链接,然后 里面的就是网页可以点击的然后跳转到href里面的链接 ,这里面的东西也可以是图片,然后效果就点击图片然后再进行跳转如下:
然后《》《》中间可以输入target="_blank"意思是在新网页里面打开,不在当前的页面刷新打开
_self 是被默认的,不需要写如target中
锚链接需要在你需要跳转的终点标记
代码是回到顶部,当网页比较长的时候可以直接点击返回
回到顶部
这个代码就可以实现顶部和底部的换位子
记号的不是规定的代码 down 和top 它只是一个标记而已,
功能性链接
1.邮件链接 mailto: 1835547395@QQ.com
这个邮件链接的格式 也是 a标签里面的 如下
点击联系我
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表
应用范围:试卷,问答。。。-->
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
</ol>
<hr>
<!--无序列表-->
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
</ul>
<dl>
<dt>字母</dt>
<dd>a</dd>
<dd>b</dd>
<dd>c</dd>
<dd>d</dd>
</dl>
</body>
</html>
运行结果
有序列表 : ol
无序列表 : ul
这两个列表里面都用li进行
自定义列表 : dl
里面需要用dt表示列表名称
dd表示内容
用处:(可以用于网页里面的列表)
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格练习</title>
</head>
<body>
<!--表格table
行tr
列td
-->
<table border="1px">
<tr>
<td colspan="4">11</td>
</tr>
<tr>
<td rowspan="2">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</body>
</html>
table表示表格
tr表示行
td表示列(在行里面创建)
border表示边
colspan表示跨行
rowspan表示跨列
运行结果如下
加强练习
视频
video导入路径之后不一定能播放,需要有控制的东西
controls 可以开关视频
autoplay 自动播放 (打开网页就会自动播放)
音频
andio 和video 是一样的需要开关和自动播放等开能播放
页面结果分析(使用和p一样)
header 标题头部区域的内容 (用于页面或者页面的一块区域)
footer 标记脚步区域的内容(用于整个页面或页面的一块区域)
section Web页面的一块独立的区域
article 独立的文章类容
aside 相关内容或应用 (常用于侧边栏)
nav 导航类辅助内容
iframe
可以在网页里面加入百度等网页或者视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="地址" name="111" frameborder="0" width="1000px" height="800px"></iframe>
<a href="wangzhan" target="111">点击跳转</a>
<!--上面的代码为在这个网页里面-->
</body>
</html>
src:地址
w-h 宽度高度
a标签里面 在网站111 里面打开wangzhan
表单(登录输入的账号密码等)
action:表单提交的位子,可以是网站,也可以是一个请求处理地址
method : post ,get 提交方式
get 方式提交:我们可以在url中看到我们提交的信息,不安全,但是高效
post 提交账号密码的话网页上面不显示账号密码,比较安全,传输大文件
value : 输入框里面的默认值
maxlength:长度限制(字符)
size: 文本框的长度
input type=“button” 按钮
input type=“image” src=“…/resource/image/1.jpg” 图片按钮
input type=“submit” 提交按钮
重置按钮
value 是定义默认值的 ,基本上能表示小标签的地方都可以用value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form-->
<form action="我的第一个网页.html" method="get">
<!-- 文本输入框: input type ="text"-->
<p>名字:<input type="text" name="username" value="11111" maxlength="8" size="30"></p>
<!--密码框: input type="password"-->
<p>密码:<input type="password" name="pwd" ></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
下拉框(注释里面有讲解)
<!--我顶我顶我顶-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>下拉框:
<!--中国和美国等这些东西才被显示出来
列表名称china等会在网址上显示
selected是默认选择的是什么(checked也可以作为默认选中的,下拉框只能用selected)
-->
<select name="列表名称">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="eth" selected>日本</option>
<option value="ruis">瑞士</option>
</select>
</p>
</body>
</html>
文本域
<!--我顶我顶我顶-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
反馈:
<textarea name="textarea" cols="30" rows="10">文本类容:</textarea>
</p>
</body>
</html>
文件域
<!--我顶我顶我顶-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
</p>
</body>
</html>
所有的input标签,表达元素 都需要有name 不然表达不了
滑块 (可以调节音量)step表示一格为多少
<p>音量:
<input type="range" name="voice" min="0" max="100" step="1">
</p>