1.HTML
网页基本结构
<!--DOCTYPE 告诉浏览器 我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!-- meta描述性标签 他用来描述我们网站的一些信息 -->
<!--mata一般用来SEO-->
<meta charset="UTF-8">
<!-- keywords 关键字 -->
<meta name="keywords" content="林宏程">
<!--description 描述 -->
<meta name="description" content="来自网络工程">
<!-- 网页标题-->
<title>Title</title>
</head>
<!--body代表网页主题-->
<body>
helloworld
</body>
</html>
网页基本标签
标题标签
<!--标题标签-->
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>
段落标签
<p>跑得快</p>
<p>跑得慢</p>
换行标签
跑得快 <br/>
跑得按 <br>
水平线标签
<hr>
粗体 斜体
<h1>字体一样式</h1>
粗体: <strong>i love you</strong>
斜体: <em>i love you</em> <br>
特殊符号
空 格: <br>
空 格:
<br>
>
<br>
<
<br>
©
<!--
特殊符号记忆方式
& ;
查百度
-->
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--
img学习
src 图片地址
相对地址(推荐使用) 绝对地址
../ 上一级
alt 当图片显示错误的时候说明文字
title 悬停在图片上的文字
width 宽度
height 高度
-->
<img src="../resource/image/a.jp" alt="我的头像" title="悬停文字" width="300" height="300">
</body>
</html>
链接标签
页面间链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--
a标签
href 必填写 表示要跳转到那个页面
target 表示窗口在哪里打开
_blank在新标签中打开
_self 在自己网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a> <br>
<a href="http://www.baidu.com">百度</a>
<br>
<a href="1.我的第一个网页.html">
<img src="../resource/image/a.jpg" alt="我的头像" title="悬停文字" width="300" height="300">
</a>
</body>
</html>
锚链接
4.链接标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--
锚链接
1.需要一个锚标记
2.跳转到标记
3.# 只能在a标签锚链接
#
-->
<a href="#top" name="down">回到顶部</a>
</body>
</html>
3.图像标签学习.html
也可以使用跳转到4.链接标签.html+#down 到锚链接down的位置
<a href="4.链接标签.html#down">到4.链接标签的down</a>
功能性链接
<!--
功能性链接
邮件链接:mailto:
QQ链接:去QQ推广里找
-->
<a href="mailto:1025993689@qq.com">点击联系我的qq邮箱</a>
行内元素和块元素
块元素
粗体: <strong>i love you</strong>
斜体: <em>i love you</em> <br>
这种写了2行表示出是一行的就是块元素
行内元素
<p>跑得快</p>
<p>跑得慢</p>
这种无论内容多少 都直接占一行的就是行内元素
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表 orderlist
应用范围 试卷 问答
-->
<ol>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
<li>c/c++</li>
</ol>
<!--分割线-->
<hr>
<!--无序列表 unorderlist
应用范围 导航 侧边栏
-->
<ul>
<li>java</li>
<li>python</li>
<li>运维</li>
<li>前端</li>
<li>c/c++</li>
</ul>
<!--自定义列表 definelist
dl 标签
dt 列表名称
dd 列表内容
应用范围 公司底部
-->
<dl>
<dt>学科</dt>
<dd>python</dd>
<dd>运维</dd>
<dd>前端</dd>
<dt>联系方式</dt>
<dd>手机</dd>
<dd>qq</dd>
<dd>邮箱</dd>
</dl>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table
行 tr table rows
列 td table data
-->
<table border="1px">
<tr>
<!-- colspan 跨列-->
<td colspan="3">1-1</td>
</tr>
<tr>
<!-- rowspan 跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>
</body>
</html>
媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频和视频
src 资源路径
controls 控制条
autoplay 自动播放
-->
<video src="../resource/video/a.mp4" controls autoplay></video>
<audio src="../resource/audio/a.m4a" 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>
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--iframe内联框架
src 地址
width 宽度
height 高度
name
-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px" name="hello"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
</body>
</html>
表单
<!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"> -->
<p>名字: <input type="text" name="username"></p>
<!--密码框 <input type="password" name="pwd">-->
<p>密码: <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
post提交
get提交
但是可以在header抓包看见
表单元素格式
文本框和单选框
radio必须有value是因为如果没有值 你选择的radio是空的 实际传值是value 不是后面的 男 女 那是没有意义的 和多选框必须有value是一个道理 传值传的是value 不是后面输入的字 那个只是让用户看的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
post方式提交 比较安全 可以传输大文件
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
-->
<form action="1.我的第一个网页.html" method="get">
<!--文本输入框
<input type="text">
value="用户名" 默认输入用户名
maxlength="8" 最大输入8个字符
size="30" 大小30
-->
<p>名字: <input type="text" name="username"></p>
<!--密码框 <input type="password" name="pwd">-->
<p>密码: <input type="password" name="pwd"></p>
<!-- 单选框标签
type="radio" 单选框
value="boy" 单选框的值
name="gender" 表示组 名字相同的时候为一个组 这样才是单选 不同组可以多选
checked 默认选中
-->
<p>性别:
<input type="radio" value="boy" name="gender" checked>男
<input type="radio" value="girl" name="gender">女
</p>
<p>
<!--
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
按钮和多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
post方式提交 比较安全 可以传输大文件
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
-->
<form action="1.我的第一个网页.html" method="get">
<!--多选框
checked 默认选中
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!--按钮-->
<p>按钮:
<!--
input type="button" 普通按钮
input type="image" 图片按钮
-->
<input type="button" name="btn1" value="点击变长">
<!-- 图片按钮会提交 所以会跳转(大概-->
<input type="image" src="../resource/image/a.jpg">
</p>
<p>
<!--
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
下拉框 文本域 文件域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
post方式提交 比较安全 可以传输大文件
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
-->
<form action="1.我的第一个网页.html" method="get">
<!--下拉框 列表框
-->
<p>下拉框:
<!--
selected 默认选中
-->
<select name="列表名称" id="">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="eth" selected>瑞士</option>
<option value="india">印度</option>
</select>
</p>
<!--文本域-->
<p>文本域:
<!-- cols 列数
rows 行数
-->
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>文件域:
<!--
input type="file" 文件按钮
name="files"
-->
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>
<!--
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
搜索框 滑块和简单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
post方式提交 比较安全 可以传输大文件
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
-->
<form action="1.我的第一个网页.html" method="get">
<!--邮件功能-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--地址功能-->
<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"
-->
<input type="range" name="voice" min="0" max="100">
</p>
<p>搜索:
<input type="search" name="search">
</p>
<p>
<!--
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表单的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
post方式提交 比较安全 可以传输大文件
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
-->
<form action="1.我的第一个网页.html" method="get">
<!--readonly 只读-->
<p>名字: <input type="text" name="username" value="林宏程" readonly></p>
<!--hidden 隐藏input文本框-->
<p>密码: <input type="password" name="pwd" hidden value="123456"></p>
<!--disabled 禁用-->
<input type="radio" value="girl" name="gender" disabled>女
<!--增强鼠标可用范围-->
<p>
<!--
点击到 label范围也可以输入文本
for是指向那个标签 用id作为标记
-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
</form>
</body>
</html>
表单初级验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<form action="1.我的第一个网页.html" method="get">
<!--文本域-->
<p>文本域:
<!-- cols 列数
rows 行数
placeholder 在开始输入的时候提示 请输入内容
-->
<textarea name="textarea" cols="50" rows="10" placeholder="请输入内容"></textarea>
</p>
<!--邮件功能-->
<p>邮箱:
<!--
required 非空判断
-->
<input type="email" name="email" required>
</p>
<p>自定义邮箱:
<input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
</form>
</body>
</html>
总体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置 可以退是网站 也可以是一个请求处理地址
method post get 提交方式
get方式提交 我们可以在url中看到我们提交的信息 不安全 但高效
post方式提交 比较安全 可以传输大文件
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
所有输入的东西都必须有name 不然他没法传值!!!!!!!!
-->
<form action="1.我的第一个网页.html" method="get">
<!--文本输入框
<input type="text">
value="用户名" 默认输入用户名
maxlength="8" 最大输入8个字符
size="30" 大小30
readonly 只读
-->
<p>名字: <input type="text" name="username" value="林宏程" readonly></p>
<!--
密码框 <input type="password" name="pwd">
hidden 隐藏input文本框
-->
<p>密码: <input type="password" name="pwd" hidden value="123456"></p>
<!-- 单选框标签
type="radio" 单选框
value="boy" 单选框的值
name="gender" 表示组 名字相同的时候为一个组 这样才是单选 不同组可以多选
checked 默认选中
disabled 禁用
-->
<p>性别:
<input type="radio" value="boy" name="gender" checked>男
<input type="radio" value="girl" name="gender" disabled>女
</p>
<!--多选框
checked 默认选中
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!--按钮-->
<p>按钮:
<!--
input type="button" 普通按钮
input type="image" 图片按钮
-->
<input type="button" name="btn1" value="点击变长">
<!-- 图片按钮会提交 所以会跳转(大概-->
<input type="image" src="../resource/image/a.jpg">
</p>
<!--下拉框 列表框
-->
<p>下拉框:
<!--
selected 默认选中
-->
<select name="列表名称" id="">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="eth" selected>瑞士</option>
<option value="india">印度</option>
</select>
</p>
<!--文本域-->
<p>文本域:
<!-- cols 列数
rows 行数
placeholder 在开始输入的时候提示 请输入内容
-->
<textarea name="textarea" cols="50" rows="10" placeholder="请输入内容"></textarea>
</p>
<!--文件域-->
<p>文件域:
<!--
input type="file" 文件按钮
name="files"
-->
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮件功能-->
<p>邮箱:
<!--
required 非空判断
-->
<input type="email" name="email" required>
</p>
<p>自定义邮箱:
<input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<!--地址功能-->
<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"
-->
<input type="range" name="voice" min="0" max="100">
</p>
<p>搜索:
<input type="search" name="search">
</p>
<!--增强鼠标可用范围-->
<p>
<!--
点击到 label范围也可以输入文本
for是指向那个标签 用id作为标记
-->
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>
<!--
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<input type="submit">
<input type="reset" disabled>
</p>
</form>
</body>
</html>
HTML总结
https://www.processon.com/mindmap/5f64b9dbe0b34d080d576b74