根据以下学习视频;个人整理的笔记
https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0&vd_source=7a8946d22777450e46486d5fd60d8d4d
HTML;超文本标记语言
HTML5
世界知名浏览器厂商都对HTML5提供支持市场的需求跨平台W3C:万维网联盟
http://218.206.242.148:12345/images/20_csdn.net/20220917/vojxgxc0vhy.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;> </body> </html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>链接标签</title>
</head>
<body>
<!-- 使用name作为锚标记 -->
<a href=;; name=;top;>顶部</a>
<!-- 链接标签
href;必填;表示要跳转到哪个页面
target;表示窗口在哪里打开
_blank 在新标签中打开
_self 默认的;在自己的网页中打开
-->
<a href=;图像标签.html; target=;_blank;>点击我跳转</a>
<a href=;https://www.baidu.com; target=;_self;>点击我跳转到百度</a>
<br>
<!-- 图像超链接 -->
<a href=;我的第一个网页.html;>
<img src=;Resource/image/39.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;>
</a>
<a href=;我的第一个网页.html;>
<img src=;Resource/image/39.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;>
</a>
<a href=;我的第一个网页.html;>
<img src=;Resource/image/39.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;>
</a>
<a href=;我的第一个网页.html;>
<img src=;Resource/image/39.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;>
</a>
<a href=;我的第一个网页.html;>
<img src=;Resource/image/39.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;>
</a>
<a href=;我的第一个网页.html;>
<img src=;Resource/image/39.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;>
</a>
<a href=;我的第一个网页.html;>
<img src=;Resource/image/39.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;>
</a>
<a href=;我的第一个网页.html;>
<img src=;Resource/image/39.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;>
</a>
<a href=;我的第一个网页.html;>
<img src=;Resource/image/39.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;>
</a>
<a href=;我的第一个网页.html;>
<img src=;Resource/image/39.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;>
</a>
<!-- 锚链接
1.需要一个锚标记
2.可以跳转到锚标记;不同页面也可以实现;href需要先填写要跳转的页面;再添加#标记;
#
-->
<a href=;#top;>回到顶部</a>
<!-- 功能性链接
邮件链接;mailto
QQ链接;
-->
<a href=;mailto:qq398156587;163.com;>点击联系我</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::53; alt=;你好加我领取小电影; title=;你好加我领取小电影;/></a>
</body>
</html>
块级元素
无论内容多少;该元素独占一行;div、p、h1~h6。。。;行内元素
内容撑开宽度;左右都是行内元素的可以排在一行;span、img、a、strong、em。。。;行内元素可以被包含在块级元素中;反之;则不可以~
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>列表标签</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C;;</li>
</ol>
<hr >
<!-- 无序列表 -->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C;;</li>
</ul>
<!-- 自定义列表
dl;标签
dt;列表名称
dd;列表内容
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>运维</dd>
<dd>C/C;;</dd>
<dd>前端</dd>
<dt>位置</dt>
<dd>北京</dd>
<dd>深圳</dd>
<dd>上海</dd>
<dd>珠海</dd>
<dd>杭州</dd>
</dl>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<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=;2;>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>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>媒体元素</title>
</head>
<body>
<!-- 音频和视频
src 资源路径
controls控制条
autoplay 自动播放
-->
<video src=;./Resource/video/c336626706ed2eb760c69de02bda6b4a.mp4; controls=;; autoplay=;;></video>
<audio src=;./Resource/audio/天門%20-%20桜花抄%20(樱花抄).mp3; controls=;; autoplay=;;></audio>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>内联框架</title>
</head>
<body>
<!-- iframe内联框架
src 地址
width 宽
height 高
name 框架标识名
-->
<iframe src=;https://www.qqmusic.com; width=;1000px; height=;1000px;></iframe>
<iframe src=;; name=;hello; width=;1000px; height=;1000px;></iframe>
<a href=;图像标签.html; target=;hello;>点击跳转</a>
<iframe src=;//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11; scrolling=;no; border=;0; frameborder=;no; framespacing=;0; allowfullscreen=;true;> </iframe>
</body>
</html>
表单form提交方式
get提交方式;我们可以在url中看到我们提交的信息;不安全;但高效post提交方式;比较安全;可以传输大文件例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>表单提交</title>
</head>
<body>
<h1>注册</h1>
<!--
method 表单数据提交方式
action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
-->
<form action=;我的第一个网页.html; method=;post;>
<!-- input type=;text; 文本输入框 -->
<p>名字;<input type=;text; name=;username; id=;; value=;; /></p>
<!-- input type=;password; 密码框 -->
<p>密码;<input type=;password; name=;pwd; id=;; value=;; /></p>
<input type=;submit; />
<input type=;reset; />
</form>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>表单提交</title>
</head>
<body>
<h1>注册</h1>
<!--
method 表单数据提交方式
action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
-->
<form action=;我的第一个网页.html; method=;get;>
<!-- input type=;text; 文本输入框
value 初始值
maxlength 最大字符长度
size 文本框长度
-->
<p>名字;<input type=;text; name=;username; id=;; value=;狂神好帅; maxlength=;8; size=;30;/></p>
<!-- input type=;password; 密码框 -->
<p>密码;<input type=;password; name=;pwd; id=;; value=;; /></p>
<!-- 单选框 radio
name 一样代表同一个组
value 单选框的值
-->
<p>性别;
<input type=;radio; name=;sex; id=;; value=;boy; />男
<input type=;radio; name=;sex; id=;; value=;girl; />女
</p>
<p>
<input type=;submit; />
<input type=;reset; />
</p>
</form>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>表单提交</title>
</head>
<body>
<h1>注册</h1>
<!--
method 表单数据提交方式
action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
-->
<form action=;我的第一个网页.html; method=;get;>
<!-- input type=;text; 文本输入框
value 初始值
maxlength 最大字符长度
size 文本框长度
-->
<p>名字;<input type=;text; name=;username; id=;; value=;狂神好帅; maxlength=;8; size=;30;/></p>
<!-- input type=;password; 密码框 -->
<p>密码;<input type=;password; name=;pwd; id=;; value=;; /></p>
<!-- 单选框 radio
name name一样代表同一个组
value 单选框的值
-->
<p>性别;
<input type=;radio; name=;sex; id=;; value=;boy; />男
<input type=;radio; name=;sex; id=;; value=;girl; />女
</p>
<!-- 多选框 checkbox
name name一样代表同一个组
-->
<p>爱好;
<input type=;checkbox; name=;hobby; id=;; value=;sleep; />睡觉
<input type=;checkbox; name=;hobby; id=;; value=;code; />敲代码
<input type=;checkbox; name=;hobby; id=;; value=;chat; />聊天
<input type=;checkbox; name=;hobby; id=;; value=;game; />打游戏
</p>
<!-- 按钮
type=;button; 普通按钮
type=;image; 图片按钮
type=;submit; 提交按钮
type=;reset; 重置按钮
-->
<p>按钮;
<input type=;button; name=;btn1; id=;; value=;点击变长; />
<!-- 图片按钮 -->
<input type=;image; src=;./Resource/image/39.jpg; />
</p>
<p>
<input type=;submit; />
<input type=;reset; />
</p>
</form>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>表单提交</title>
</head>
<body>
<h1>注册</h1>
<!--
method 表单数据提交方式
action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
-->
<form action=;我的第一个网页.html; method=;get;>
<!-- input type=;text; 文本输入框
value 初始值
maxlength 最大字符长度
size 文本框长度
-->
<p>名字;<input type=;text; name=;username; id=;; value=;狂神好帅; maxlength=;8; size=;30;/></p>
<!-- input type=;password; 密码框 -->
<p>密码;<input type=;password; name=;pwd; id=;; value=;; /></p>
<!-- 单选框 radio
name name一样代表同一个组
value 单选框的值
-->
<p>性别;
<input type=;radio; name=;sex; id=;; value=;boy; checked=;;/>男
<input type=;radio; name=;sex; id=;; value=;girl; />女
</p>
<!-- 多选框 checkbox
name name一样代表同一个组
-->
<p>爱好;
<input type=;checkbox; name=;hobby; id=;; value=;sleep; />睡觉
<input type=;checkbox; name=;hobby; id=;; value=;code; checked=;;/>敲代码
<input type=;checkbox; name=;hobby; id=;; value=;chat; />聊天
<input type=;checkbox; name=;hobby; id=;; value=;game; />打游戏
</p>
<!-- 按钮
type=;button; 普通按钮
type=;image; 图片按钮
type=;submit; 提交按钮
type=;reset; 重置按钮
-->
<p>按钮;
<input type=;button; name=;btn1; id=;; value=;点击变长; />
<!-- 图片按钮 -->
<input type=;image; src=;./Resource/image/39.jpg; />
</p>
<!-- 下拉框;列表框
-->
<p>国家;
<select name=;列表名称;>
<option value =;china;>中国</option>
<option value =;us;>美国</option>
<option value =;ruishi; selected=;;>瑞士</option>
<option value =;yindu;>印度</option>
</select>
</p>
<!-- 文本域
-->
<p>反馈;
<textarea name=;textarea; rows=;10; cols=;50;>文本内容</textarea>
</p>
<!-- 文件域 -->
<p>
<input type=;file; name=;files; id=;; value=;; />
<input type=;button; name=;upload; value=;上传;/>
</p>
<p>
<input type=;submit; />
<input type=;reset; />
</p>
</form>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>表单提交</title>
</head>
<body>
<h1>注册</h1>
<!--
method 表单数据提交方式
action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
-->
<form action=;我的第一个网页.html; method=;get;>
<!-- input type=;text; 文本输入框
value 初始值
maxlength 最大字符长度
size 文本框长度
-->
<p>名字;<input type=;text; name=;username; id=;; value=;狂神好帅; maxlength=;8; size=;30;/></p>
<!-- input type=;password; 密码框 -->
<p>密码;<input type=;password; name=;pwd; id=;; value=;; /></p>
<!-- 单选框 radio
name name一样代表同一个组
value 单选框的值
-->
<p>性别;
<input type=;radio; name=;sex; id=;; value=;boy; checked=;;/>男
<input type=;radio; name=;sex; id=;; value=;girl; />女
</p>
<!-- 多选框 checkbox
name name一样代表同一个组
-->
<p>爱好;
<input type=;checkbox; name=;hobby; id=;; value=;sleep; />睡觉
<input type=;checkbox; name=;hobby; id=;; value=;code; checked=;;/>敲代码
<input type=;checkbox; name=;hobby; id=;; value=;chat; />聊天
<input type=;checkbox; name=;hobby; id=;; value=;game; />打游戏
</p>
<!-- 按钮
type=;button; 普通按钮
type=;image; 图片按钮
type=;submit; 提交按钮
type=;reset; 重置按钮
-->
<p>按钮;
<input type=;button; name=;btn1; id=;; value=;点击变长; />
<!-- 图片按钮 -->
<input type=;image; src=;./Resource/image/39.jpg; />
</p>
<!-- 下拉框;列表框
-->
<p>国家;
<select name=;列表名称;>
<option value =;china;>中国</option>
<option value =;us;>美国</option>
<option value =;ruishi; selected=;;>瑞士</option>
<option value =;yindu;>印度</option>
</select>
</p>
<!-- 文本域
-->
<p>反馈;
<textarea name=;textarea; rows=;10; cols=;50;>文本内容</textarea>
</p>
<!-- 文件域 -->
<p>
<input type=;file; name=;files; id=;; value=;; />
<input type=;button; name=;upload; value=;上传;/>
</p>
<!-- 邮件验证 -->
<p>邮箱;
<input type=;email; name=;email; id=;; value=;; />
</p>
<!-- URL验证 -->
<p>URL;
<input type=;url; name=;url; id=;; value=;; />
</p>
<!-- 数字验证 -->
<p>数字;
<input type=;number; name=;num; max=;100; min=;0; step=;10; id=;; value=;; />
</p>
<!-- 滑块 -->
<p>滑块;
<input type=;range; name=;voice; max=;100; min=;0; step=;10; id=;; value=;; />
</p>
<!-- 搜索框 -->
<p>搜索;
<input type=;search; name=;search; id=;; value=;; />
</p>
<p>
<input type=;submit; />
<input type=;reset; />
</p>
</form>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>表单提交</title>
</head>
<body>
<h1>注册</h1>
<!--
method 表单数据提交方式
action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
-->
<form action=;我的第一个网页.html; method=;get;>
<!-- input type=;text; 文本输入框
value 初始值
maxlength 最大字符长度
size 文本框长度
readonly 只读
-->
<p>名字;<input type=;text; name=;username; id=;; value=;狂神好帅; readonly=;; maxlength=;8; size=;30;/></p>
<!-- input type=;password; 密码框
hidden 隐藏域
-->
<p>密码;<input type=;password; name=;pwd; id=;; value=;; hidden=;;/></p>
<!-- 单选框 radio
name name一样代表同一个组
value 单选框的值
disabled 禁用
-->
<p>性别;
<input type=;radio; name=;sex; id=;; value=;boy; checked=;; disabled=;;/>男
<input type=;radio; name=;sex; id=;; value=;girl; />女
</p>
<!-- 多选框 checkbox
name name一样代表同一个组
-->
<p>爱好;
<input type=;checkbox; name=;hobby; id=;; value=;sleep; />睡觉
<input type=;checkbox; name=;hobby; id=;; value=;code; checked=;;/>敲代码
<input type=;checkbox; name=;hobby; id=;; value=;chat; />聊天
<input type=;checkbox; name=;hobby; id=;; value=;game; />打游戏
</p>
<!-- 按钮
type=;button; 普通按钮
type=;image; 图片按钮
type=;submit; 提交按钮
type=;reset; 重置按钮
-->
<p>按钮;
<input type=;button; name=;btn1; id=;; value=;点击变长; />
<!-- 图片按钮 -->
<input type=;image; src=;./Resource/image/39.jpg; />
</p>
<!-- 下拉框;列表框
-->
<p>国家;
<select name=;列表名称;>
<option value =;china;>中国</option>
<option value =;us;>美国</option>
<option value =;ruishi; selected=;;>瑞士</option>
<option value =;yindu;>印度</option>
</select>
</p>
<!-- 文本域
-->
<p>反馈;
<textarea name=;textarea; rows=;10; cols=;50;>文本内容</textarea>
</p>
<!-- 文件域 -->
<p>
<input type=;file; name=;files; id=;; value=;; />
<input type=;button; name=;upload; value=;上传;/>
</p>
<!-- 邮件验证 -->
<p>邮箱;
<input type=;email; name=;email; id=;; value=;; />
</p>
<!-- URL验证 -->
<p>URL;
<input type=;url; name=;url; id=;; value=;; />
</p>
<!-- 数字验证 -->
<p>数字;
<input type=;number; name=;num; max=;100; min=;0; step=;10; id=;; value=;; />
</p>
<!-- 滑块 -->
<p>滑块;
<input type=;range; name=;voice; max=;100; min=;0; step=;10; id=;; value=;; />
</p>
<!-- 搜索框 -->
<p>搜索;
<input type=;search; name=;search; id=;; value=;; />
</p>
<p>
<!-- 增强鼠标可用性 -->
<label for=;mark;>你点我试试</label>
<input type=;text; name=;; id=;mark; value=;; />
</p>
<p>
<input type=;submit; disabled=;;/>
<input type=;reset; />
</p>
</form>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset=;utf-8;>
<title>表单提交</title>
</head>
<body>
<h1>注册</h1>
<!--
method 表单数据提交方式
action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
-->
<form action=;我的第一个网页.html; method=;get;>
<!-- input type=;text; 文本输入框
value 初始值
maxlength 最大字符长度
size 文本框长度
readonly 只读
placeholder 提示消息
required 非空判断
-->
<p>名字;<input type=;text; name=;username; placeholder=;请输入用户名; required=;;/></p>
<!-- input type=;password; 密码框
hidden 隐藏域
-->
<p>密码;<input type=;password; name=;pwd; id=;; value=;; hidden=;;/></p>
<!-- 单选框 radio
name name一样代表同一个组
value 单选框的值
disabled 禁用
-->
<p>性别;
<input type=;radio; name=;sex; id=;; value=;boy; checked=;; disabled=;;/>男
<input type=;radio; name=;sex; id=;; value=;girl; />女
</p>
<!-- 多选框 checkbox
name name一样代表同一个组
-->
<p>爱好;
<input type=;checkbox; name=;hobby; id=;; value=;sleep; />睡觉
<input type=;checkbox; name=;hobby; id=;; value=;code; checked=;;/>敲代码
<input type=;checkbox; name=;hobby; id=;; value=;chat; />聊天
<input type=;checkbox; name=;hobby; id=;; value=;game; />打游戏
</p>
<!-- 按钮
type=;button; 普通按钮
type=;image; 图片按钮
type=;submit; 提交按钮
type=;reset; 重置按钮
-->
<p>按钮;
<input type=;button; name=;btn1; id=;; value=;点击变长; />
<!-- 图片按钮 -->
<input type=;image; src=;./Resource/image/39.jpg; />
</p>
<!-- 下拉框;列表框
-->
<p>国家;
<select name=;列表名称;>
<option value =;china;>中国</option>
<option value =;us;>美国</option>
<option value =;ruishi; selected=;;>瑞士</option>
<option value =;yindu;>印度</option>
</select>
</p>
<!-- 文本域
-->
<p>反馈;
<textarea name=;textarea; rows=;10; cols=;50;>文本内容</textarea>
</p>
<!-- 文件域 -->
<p>
<input type=;file; name=;files; id=;; value=;; />
<input type=;button; name=;upload; value=;上传;/>
</p>
<!-- 邮件验证 -->
<p>邮箱;
<input type=;email; name=;email; id=;; value=;; />
</p>
<!-- URL验证 -->
<p>URL;
<input type=;url; name=;url; id=;; value=;; />
</p>
<!-- 数字验证 -->
<p>数字;
<input type=;number; name=;num; max=;100; min=;0; step=;10; id=;; value=;; />
</p>
<!-- 滑块 -->
<p>滑块;
<input type=;range; name=;voice; max=;100; min=;0; step=;10; id=;; value=;; />
</p>
<!-- 搜索框 -->
<p>搜索;
<input type=;search; name=;search; id=;; value=;; />
</p>
<p>
<!-- 增强鼠标可用性 -->
<label for=;mark;>你点我试试</label>
<input type=;text; name=;; id=;mark; value=;; />
</p>
<p>自定义邮箱;
<input type=;text; name=;diymail; pattern=;^w;([-;.]w;)*;w;([-.]w;)*.w;([-.]w;)*$; id=;; value=;; />
</p>
<p>
<input type=;submit; disabled=;;/>
<input type=;reset; />
</p>
</form>
</body>
</html>