快捷键集合
alt+ shift+上下,上下移动整行代码
1.什么是HTML
HyperText Markup Language的缩写(超文本标记语言)
WWWC:World Wide Web Consortium(万物网联盟)
W3C标准包括
结构化标准语言(HTML、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript)
2.创建自己的第一个HTML文件
打开IDEA信件一个HTML文件
需要注意的点:
3.网页基本信息
<!-- HTML注释方法、也是XML注释方法
DOCTYPE——告诉浏览器我们要使用什么规范DOCTYPE html,就是说使用html规范
-->
<!DOCTYPE html>
<html lang="en">
<!--
"ctrl+/"是快捷注释
-->
<!--head代表网页头部标签-->
<head>
<!--meta描述网站的一些信息,一般用来做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="我自己的网页">
<meta name="description" content="测试一下自己的第一个网站">
<title>我的第一个网页</title>
</head>
<!--head代表网页主题标签-->
<body>
Hello world!
</body>
</html>
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>
<!--段落标签(在heml文件中写的换行和空格都不会显示出来、所以需要段落标签,快捷键:p+Table)-->
<p>两只老虎 两只老虎</p>
<p>跑得快 跑得快 </p>
<!--水平线标签(可以<hr>或者<hr/>)-->
<hr>
<!--换行标签_单闭合标签(跟段落标签不一样,换行标签显示出来的会比较紧凑)-->
两只老虎 两只老虎<br/>
跑得快 跑得快<br/>
<!--字体样式标签(粗体、斜体)-->
<h1>字体样式标签<h1/>
粗体:<strong>i love you <strong/>
斜体: <em>i love you <em/>
<!--特殊符号-->
空格—— 加的多空格就多<br/>
空 格
<br/>
>大于号
<br/>
<小于号
<br/>
©版权符号
<!--特殊符号记忆方式
& ;
-->
</body>
</html>
5.图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--输入img+Table直接就快捷出来了-->
<!--image学习
src代表图片地址:(必填)
图片地址:1.相对地址 2.绝对地址
alt代表如果资源找错了就会返回的东西(必填)
title表示悬停鼠标的时候会出现的文字
width表示图片的宽度
height表示图片的高度
如果忘记代码了可以直接空格就会得到很多的选项
-->
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</body>
</html>
6.链接标签
1.跳转页面标签
2.锚标签
3.功能性标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--1.a标签
herf:必填,表示要跳转到哪个页面
也可以设置图片链接标签
target:表示窗口在哪里打开
1._blank表示在新标签页中打开
2._self表示在当前窗口打开新页面
-->
<a href="Demo01.html">点击我跳转到页面一 </a>
<br>
<br>
<br>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
<p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p><p>
<a href="https://www.baidu.com" target="_blank">百度页面
<img src="../resource/img/1.jpg" alt="随便的头像"title="这个是我设置的悬停文字"width="100"height="100">
</a>
</p>
<!--2.锚链接(定位某个位置)(#+标记名字)
步骤:
1.需要一个锚标记
2.跳转到锚标记
浏览器地址栏中后缀加入#+锚链接名称就可以直接定位到具体的位置
相应的就是添加完标记位之后,
<a href="某个文件名.html#标记位名字">跳转</a>
就可以实现跳转到某个文件的某个位置
-->
<!--3.功能性链接
邮件链接:href="mailto: "
qq推广:百度搜索qq推广获取推广链接然后复制进来
-->
<a href="mailto:110@qq.com">邮件链接</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=110&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:110:53" alt="加我有惊喜" title="加我领取小电影"/></a>
<a href="#top">回到顶部</a>
<a name="down">底部</a>
</body>
</html>
7.列表标签
无序列表
有序列表
定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C++</li>
</ol>
<hr>
<!--无序列表-->
<ul>
<li>java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C++</li>
</ul>
<hr>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>Python</dd>
<dd>运维</dd>
<dd>前端</dd>
<dd>C++</dd>
<dt>位置</dt>
<dd>长沙</dd>
<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:表格
tr:行
td:列
<table border="1px">:表格边宽1px
<td colspan="4">:独占4列
<td rowspan="2">2.1</td>:独占两行
-->
<table border="1px">
<tr>
<td colspan="4">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>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
</html>
9.媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频和视频
video:视频标签
controls:必填,视频进度控制条,音频也必须要加
autoplay:视频自动播放,音频自动播放
-->
<video src="../resource/video/视频1.mp4" controls autoplay>我的视频</video>
<audio src="../resource/audio/夜曲.mp3"controls autoplay>我的音乐 </audio>
</body>
</html>
页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
11.iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--内联框架
1.从blibli上面分享就可以得到嵌入代码
2.src:引用页面地址path
3.name:mainFrame,框架标识名,相当于网页的名字标记,用于跳转链接跳转网页的寻找标记
-->
<iframe src="https://www.bilibili.com/" name="hello" frameborder="100" width="1500" height="800">内嵌地址</iframe>
<a href="Demo01.html" target="hello">点击跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=251279794&bvid=BV1hv411u7UA&cid=429898709&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" ></iframe>-->
</body>
</html>
12.初始表单post和get提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<!--action表示表单提交的位置,可以是网站,也可以是请求处理地址
form有两种method:post、get两种提交表单的方式
get方式:提交之后直接在url地址中可以看到提交的信息————高效、不安全、只能传输小文件
post方式:比较安全,可以传输大文件,查看提交的各种信息可以在网页的Network,Headers中查看
input文本输入框的type默认为text,密码类型就是password
-->
<form action="Demo01.html" method="get">
<p>账户名:<input type="text" name="username"></p>
<p>密码框:<input type="password" name="pwd"></p>
<p> <input type="submit" name="提交"> <input type="reset" name="重置">
</p>
</form>
</body>
</html>
13.文本框和单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<!--action表示表单提交的位置,可以是网站,也可以是请求处理地址
form有两种method:post、get两种提交表单的方式:
1.get方式:提交之后直接在url地址中可以看到提交的信息————高效、不安全、只能传输小文件
2.post方式:比较安全,可以传输大文件,查看提交的各种信息可以在网页的Network,Headers中查看、
文本框类型:
1.input文本输入框的type默认为text
2.密码类型就是password
3.单选框为radio
初始化文本框:
value:默认初始文本内容
maxlength:最大输入字符长度
size:文本框大小
单选框标签::
type为radio、必须有value,必须有name分组
-->
<form action="Demo01.html" method="get">
<p>账户名:<input type="text" name="username" value="我真的好帅" maxlength="8" size="30"></p>
<p>密码框:<input type="password" name="pwd"></p>
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p> <input type="submit" name="提交"> <input type="reset" name="重置"></p>
</form>
</body>
</html>
14.按钮和多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<!--action表示表单提交的位置,可以是网站,也可以是请求处理地址
form有两种method:post、get两种提交表单的方式:
1.get方式:提交之后直接在url地址中可以看到提交的信息————高效、不安全、只能传输小文件
2.post方式:比较安全,可以传输大文件,查看提交的各种信息可以在网页的Network,Headers中查看、
文本框类型:
1.input文本输入框的type默认为text
2.密码类型就是password
3.单选框为radio:
type为radio、必须有value,必须有name分组
4.多选框为checkbox:
type为checkbox、必须有value,必须有name分组
5.按钮为button:
6.图片按钮为image:
7.提交按钮为input
8.重置按钮为reset
初始化文本框:
value:默认初始文本内容
maxlength:最大输入字符长度
size:文本框大小
-->
<form action="Demo01.html" method="get">
<!--文本框-->
<p>账户名:<input type="text" name="username" value="我真的好帅" maxlength="8" size="30"></p>
<p>密码框:<input type="password" name="pwd"></p>
<!-- 单选框-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!-- 多选框-->
<p><input type="checkbox" value="睡觉" name="爱好">睡觉</p>
<p><input type="checkbox" value="抽烟" name="爱好">抽烟</p>
<p><input type="checkbox" value="喝酒" name="爱好">喝酒</p>
<p><input type="checkbox" value="烫头" name="爱好">烫头</p>
<!-- 按钮-->
<p>按钮:<input type="button" value="点击变长" name="分组1"></p>
<p>按钮:<input type="image" src="../resource/img/1.jpg" value="点击变长" name="分组2"></p>
<!--表单提交、重置按钮-->
<p> <input type="submit" name="提交"> <input type="reset" name="重置">
</p>
</form>
</body>
</html>
15.列表框文本域和文件域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<!--action表示表单提交的位置,可以是网站,也可以是请求处理地址
form有两种method:post、get两种提交表单的方式:
1.get方式:提交之后直接在url地址中可以看到提交的信息————高效、不安全、只能传输小文件
2.post方式:比较安全,可以传输大文件,查看提交的各种信息可以在网页的Network,Headers中查看、
input 文本框类型:
1.input文本输入框的type默认为text
2.密码类型就是password
3.单选框为radio:
type为radio、必须有value,必须有name分组
4.多选框为checkbox:
type为checkbox、必须有value,必须有name分组
5.按钮为button:
6.图片按钮为image:
7.提交按钮为input
8.重置按钮为reset
下拉框select:
1.选项标签:option:option中添加selected表示默认的选项
文本域:
cols表示行,rows代表列
文件域:input
初始化文本框:
value:默认初始文本内容
maxlength:最大输入字符长度
size:文本框大小
-->
<form action="Demo01.html" method="get">
<!--文本框-->
<p>账户名:<input type="text" name="username" value="我真的好帅" maxlength="8" size="30"></p>
<p>密码框:<input type="password" name="pwd"></p>
<!-- 单选框-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!-- 多选框-->
<p><input type="checkbox" value="睡觉" name="爱好">睡觉</p>
<p><input type="checkbox" value="抽烟" name="爱好">抽烟</p>
<p><input type="checkbox" value="喝酒" name="爱好">喝酒</p>
<p><input type="checkbox" value="烫头" name="爱好">烫头</p>
<!-- 按钮-->
<p>按钮:<input type="button" value="点击变长" name="分组1"></p>
<p>按钮:<input type="image" src="../resource/img/1.jpg" value="点击变长" name="分组2"></p>
<!-- 下拉框-->
<p>国家:
<select name="表单名称" id="">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="瑞士">瑞士</option>
<option value="澳大利亚">澳大利亚</option>
</select>
</p>
<!-- 文本域-->
文本框输入内容:
<p><textarea name="文本框内容" id="1" cols="30" rows="10"></textarea></p>
<!-- 文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--表单提交、重置按钮-->
<p> <input type="submit" name="提交"> <input type="reset" name="重置">
</p>
</form>
</body>
</html>
16.搜索框滑块和简单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<!--action表示表单提交的位置,可以是网站,也可以是请求处理地址
form有两种method:post、get两种提交表单的方式:
1.get方式:提交之后直接在url地址中可以看到提交的信息————高效、不安全、只能传输小文件
2.post方式:比较安全,可以传输大文件,查看提交的各种信息可以在网页的Network,Headers中查看、
input 文本框类型:
1.input文本输入框的type默认为text
2.密码类型就是password
3.单选框为radio:
type为radio、必须有value,必须有name分组
4.多选框为checkbox:
type为checkbox、必须有value,必须有name分组
5.按钮为button:
6.图片按钮为image:
7.提交按钮为input
8.重置按钮为reset
下拉框select:
1.选项标签:option:option中添加selected表示默认的选项
文本域:textarea,cols表示行,rows代表列
文件域:input:file
邮件验证:input:email
URL验证:input:url
数字验证:input:number
step:数字步长(数字起伏范围),默认为1
滑块:input:range
搜索框:input:search
初始化文本框:
value:默认初始文本内容
maxlength:最大输入字符长度
size:文本框大小
-->
<form action="Demo01.html" method="get">
<!--文本框-->
<p>账户名:<input type="text" name="username" value="我真的好帅" maxlength="8" size="30"></p>
<p>密码框:<input type="password" name="pwd"></p>
<!-- 单选框-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!-- 多选框-->
<p><input type="checkbox" value="睡觉" name="爱好">睡觉</p>
<p><input type="checkbox" value="抽烟" name="爱好">抽烟</p>
<p><input type="checkbox" value="喝酒" name="爱好">喝酒</p>
<p><input type="checkbox" value="烫头" name="爱好">烫头</p>
<!-- 按钮-->
<p>按钮:<input type="button" value="点击变长" name="分组1"></p>
<p>按钮:<input type="image" src="../resource/img/1.jpg" value="点击变长" name="分组2"></p>
<!-- 下拉框-->
<p>国家:
<select name="表单名称" id="">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="瑞士">瑞士</option>
<option value="澳大利亚">澳大利亚</option>
</select>
</p>
<!-- 文本域-->
文本框输入内容:
<p><textarea name="文本框内容" id="1" cols="30" rows="10"></textarea></p>
<!-- 文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮件验证-->
<p>邮箱:<input type="email"name="email"></p>
<!-- URL验证-->
<p>URL:<input type="url"name="url"></p>
<!-- 数字验证-->
<p>数字:<input type="number"name="number" max="100" min="0" step="10"></p>
<!-- 滑块-->
<p><input type="range" name="voice" max="100" min="0" step="10"></p>
<!-- 搜索框-->
<p><input type="search" name="search" max="100" min="0" step="10"></p>
<!--表单提交、重置按钮-->
<p> <input type="submit" name="提交"> <input type="reset" name="重置"></p>
</form>
</body>
</html>
17.表单的应用
只读
readonly
<form action="Demo01.html" method="get">
<!--文本框-->
<p>账户名:<input type="text" name="username" value="我真的好帅" maxlength="8" size="30" readonly></p>
</form>
禁用
disabled————选择框、提交表单的禁用
<form action="Demo01.html" method="get">
<p>
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
</form>
<form action="Demo01.html" method="get">
<p> <input type="submit" name="提交"disabled> <input type="reset" name="重置"></p>
</form>
隐藏
hidden
<form action="Demo01.html" method="get">
<p>密码框:<input type="password" name="pwd" hidden></p>
</form>
增强鼠标可用性(点文字鼠标自动点击到文本框)
label
<!-- 增强鼠标可用性-->
<form action="Demo01.html" method="get">
<p>
<label for="mark">你点我一下试试</label>
<input type="text" id="mark">
</p>
</form>
18.表单初级验证
表单验证是为了减少错误请求,减轻错误数据的麻烦,另外也是为了数据的安全性
文本框提示信息
<form action="Demo01.html" method="get">
<p>账户名:<input type="text" name="username" maxlength="8" size="30" placeholder="请输入用户名"></p>
</form>
非空判断
<form action="Demo01.html" method="get">
<p>账户名:<input type="text" name="username" maxlength="8" size="30" placeholder="请输入用户名" required></p>
</form>
正则表达式
百度正则表达式
pattern
<!-- 自定义邮箱-->
<form action="Demo01.html" method="get">
<p><input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></p>
<!--表单提交、重置按钮-->
<p> <input type="submit" name="提交" > <input type="reset" name="重置"></p>
</form>
19. 小知识简要版
1. const、let、var
1.let与const的区别
let声明的变量可以改变,值和类型都可以改变;
const声明的常量不可以改变,这意味着,const一旦声明,就必须立即初始化,不能以后再赋值。
2.let与var的区别
var是函数作用域,let是块作用域。
在函数中声明了var,整个函数内都是有效的,比如说在for循环内定义的一个var变量,实际上其在for循环以外也是可以访问的,而let由于是块作用域,所以如果在块作用域内定义的变量,比如说在for循环内,在其外面是不可被访问的,所以for循环推荐用let
总结:const不能动,let可以动,但是只能在块区域内动,var在整个函数都可以动