HTML学习简要版

快捷键集合

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/>


<!--特殊符号-->
空格——&nbsp加的多空格就多<br/>&nbsp;&nbsp;&nbsp;&nbsp;<br/>
&gt;大于号
<br/>
&lt;小于号
<br/>
&copy;版权符号
<!--特殊符号记忆方式
&    ;

-->

</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>&nbsp;<input type="submit" name="提交">&nbsp;<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>&nbsp;<input type="submit" name="提交">&nbsp;<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>&nbsp;<input type="submit" name="提交">&nbsp;<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>&nbsp;<input type="submit" name="提交">&nbsp;<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>&nbsp;<input type="submit" name="提交">&nbsp;<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>&nbsp;<input type="submit" name="提交"disabled>&nbsp;<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>&nbsp;<input type="submit" name="提交" >&nbsp;<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在整个函数都可以动

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值