1.什么是HTML5
学习内容：
什么是HTML
- HTML：Hyper Text Markup Language（超文本标记语言）
主流浏览器都支持：谷歌，edge，火狐
- W3C：
World Wide Web Consortium（万维网联盟）
1994年成立，
W3C标准包括：
结构化标准语言（HTML,XML）
表现标准语言（CSS）
行为标准（DOM,ECMAScript ）
<body>、</body>等成对的标签，分别叫开放标签和闭合标签单独呈现的标签(空元素），如<hr/>;意为用/来关闭空元素
学习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="keywords：作用是这个网站的关键字搜索">
<meta name="description" content="description：作用是对这个网站的介绍">
<title>我的第一个网页</title>
</head>
<!-- DOCTYPE标签:这个是告诉浏览器，我们要使用的文档规范 -->
<!-- title标签，是网页的标题 -->
<!-- meta描述性标签，来描述我们一些网站的信息 -->
<!--注释快捷键 Ctrl + / -->
<!-- body：这个网站的主体部分 -->
<body>
今天是2022年5月24日，我开始对HTML学习 Hello Woeld
</body>
</html>2.网页的基本标签
学习内容：
2.网页的基本标签
标题标签：h1，h2，h3，标签以此类推。
段落标签：<p></p>
水平线标签：<hr>
换行标签：和p标签配合使用<br>
字体样式标签：
1.<strong>xx</strong>粗体
2. <em>xx</em> 斜体
特殊符号：
1.空 格：
2.大于：> 小于：<
版权符号：©
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页的基本标签学习</title>
</head>
<body>
<!-- 标题标签
h1，h2，h3-->
<h1>一级标签</h1>
<h2>二级标签 </h2>
<h3>三级标签</h3>
<!-- 标签以此类推 -->
<!-- 段落标签 -->
<p></p>
<p>点燃星</p>
<p>亲手点燃黑暗森林的火星</p>
<p>蒙昧初醒</p>
<p>而我却轻声告别</p>
<p>这新生的黎明</p>
<!-- 水平线标签 -->
<hr>
<!-- 换行标签 -->
<p>点燃星 亲手点燃黑暗森林的火星 蒙昧初醒 而我却轻声告别 这新生的黎明 </p><br>
<p>执念的鱼 文明岸边 孤独着闯过自然的甄选 无需誓言 我的心像重启的旧母舰 </p><br>
<p>去星云巅 我曾凝望 曾是航向的日出 末路残烛 容我吹熄 藏起火种 向宇宙远渡</p><br>
<hr>
<h1>字体样式标签</h1>
<!-- 字体样式标签 -->
<strong>I love You</strong><br>
<!-- 粗体 -->
<em>I love You</em><br>
<!-- 斜体 -->
<!-- 特殊符号 -->
空 格：<br> 空 格
<br>
<h6>大于</h6>
<hr> ><br>
<h6>小于</h6>
<<br>
<h6>版权符号</h6>
©版权所有黄存钦
</body>
</html>3.图像标签学习
学习内容：
3.图像标签学习
img
src：图片地址（必填）
相对地址（推荐使用），绝对地址
../表示上一级目录
alt:图片名字（必填）
其他可选填
学习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像标签学习</title>
</head>
<body>
<!--
img
src：图片地址（必填）
相对地址（推荐使用），绝对地址
../表示上一级目录
alt:图片名字（必填）
其他可选填
-->
<img src="../resources/image/1000.png" alt="那兔" title="作用是鼠标悬停出现文字" width="300px" height="300px">
<img src="../resources/image/100.webp" alt="那兔">
<a href="file:///D:/S-HTML/HTML/%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE/%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE.html #dowm">跳转底部</a>
</body>
</html>4.链接标签
学习内容：
1.a标签:
href：这个必填表示要跳转到那个页面
target:表示窗口在哪里打开
_blank:在新标签页打开
_self:在自己的网页打开（默认的）
2.锚链接
1.需要一个锚标记
2.跳转到标记
3.作用：实现页面间的跳转
4.使用name作为标记
3.功能链接
1.邮件链接：mailto
2.QQ链接：
学习代码：
<!DOCTYPE html>
<html lang="zh-CN ">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接标签</title>
</head>
<body>
<!-- 使用name作为标记 -->
<a name="top">顶部</a>
<!-- a标签
href：这个必填表示要跳转到那个页面
target:表示窗口在哪里打开
_blank:在新标签页打开
_self:在自己的网页打开（默认的）
-->
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a><br>
<a href="1.我的第一个网页.HTML" target="_blank">我的第一个网页</a>
<hr>
<a href="1.我的第一个网页.HTML">
<img src="../HTML/resources/image/1000.png" alt="那兔" title="作用是鼠标悬停出现文字">
</a>
<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
3.作用：实现页面间的跳转
-->
<a href="#top">回到顶部</a>
<a name="down">底部</a>
<!-- 功能链接
1.邮件链接：mailto
2.QQ链接：
-->
<a href="mailto:1287054625@qq.com">点击联系我们</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1287054625&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1287054625:53" alt="加群，你想要的资源都有" title="加群，你想要的资源都有" />
</a>
</body>
</html>5.列表学习
学习内容：
什么列表：
1.有序列表： 应用于：试卷，问答
<ol>
<li>java</li>
<li>python</li>
<li>c/c++</li>
<li>接口技术</li>
</ol>
2.无序列表：应用范围：导航，侧边栏
<ul>
<li>java</li>
<li>python</li>
<li>c/c++</li>
<li>接口技术</li>
</ul>
3.自定义列表
dl：标题
dt：列表名称
dd：列表内容
4.块元素和行内元素
学习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表学习</title>
</head>
<body>
<!-- 有序列表
应用于：试卷，问答
-->
<ol>
<li>java</li>
<li>python</li>
<li>c/c++</li>
<li>接口技术</li>
</ol>
<hr>
<!-- 无序列表
应用范围：导航，侧边栏
-->
<ul>
<li>java</li>
<li>python</li>
<li>c/c++</li>
<li>接口技术</li>
</ul>
<!-- 自定义列表
dl：标题
dt：列表名称
dd：列表内容
-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>c/c++</dd>
<dd>接口技术</dd>
<dt>列表的分类</dt>
<dd>有序列表</dd>
<dd>无序列表</dd>
<dd>自定义列表</dd>
</dl>
</body>
</html>6.表格学习
学习内容：
表格table
行：tr
列：td
学习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>7音频，视频；8.页面结构
学习内容：
1.音频:video 视频:audio
src:资源路径
controls：控制条
autoplay：自动播放
2.页面结构分析
学习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频，视频</title>
</head>
<body>
<!-- 音频，视频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<!-- <video src="../resources/video/2127019112 黄存钦.mp4" controls autoplay></video> -->
<audio src="../resources/audio/双笙 - 春水积木(手游《仙剑奇侠传4》概念曲).mp3" controls autoplay></audio>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面结构</title>
</head>
<body>
<header>
<h2>页面头部</h2>
</header>
<section>
<h2>页面主体</h2>
</section>
<footer>
<h6>页面脚部</h6>
</footer>
</body>
</html>9.内联框架
学习内容：
1.内敛框架
学习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联框架</title>
</head>
<body>
<!-- <iframe src="//player.bilibili.com/player.html?aid=936982421&bvid=BV1zT4y1S7Tj&cid=541284798&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> -->
<iframe src="https://www.bilibili.com/video/BV1zT4y1S7Tj?share_source=copy_web" frameborder="0" width="1000" height="800px"></iframe>
</body>
</html>10学习表单
学习内容：
表单元素格式:
表单初级验证:
1.表单: form标签
action:表单提交的位置，可以是网站，也可以是一个请求处理的地址
method:有两个关键字 post，get 两种不同的提交方式
get:这个方式提交可以在url中看到我们提交的信息，不安全，但是高效
post：与get相比这个比较安全，可以提交大文件
placeholder：表单默认信息，用在输入框中
required:不能为空
2.文本输入框标签：<input type=" text">
3.密码框： <input type="password" >
4.单选框 <input type="radio" value="xx" name="xx
value:单选框的值
name:表示组
selected:默认选中
5.多选框：<input type="checkbox" value="xx" name="xx">xx
6.按钮：
type="button" 普通按钮
value="xxx" 按钮显示的值
type="image" 图像按钮 src不能忘
type="submit" 提交按钮
type="reset" 重置按钮
7.下拉框:
<select name="xx" >
<option value="xx" ></option>
</select>
8.文本域:<textarea name="textarea"></textarea>
9.文件域:<input type="file" name="upload">
10.邮件验证:<input type="email" name="email">
11.url:<input type="url" name="url">
12.滑块:<input type="range" >
13:搜索框:<input type="search" >
14隐藏域:hidden
只读:readonly
禁用:disabled
15.增强鼠标可用性:
<label for="mark">你点我试试</label>
<input type="text" id="mark" disabled>
16.提交：<input type="submit">，重置：<input type="reset">
学习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学习表单</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单 form
action:表单提交的位置，可以是网站，也可以是一个请求处理的地址
method:有两个关键字 post，get 两种不同的提交方式
get:这个方式提交可以在url中看到我们提交的信息，不安全，但是高效
post：与get相比这个比较安全，可以提交大文件
placeholder：表单默认信息，用在输入框中
required:不能为空
-->
<form action="1.我的第一个网页.HTML" method="get">
<p>
<!-- 文本输入框标签：<input type=" text"> -->
名字：<input type=" text" maxlength="8" placeholder="请输入用户名" required>
</p>
<p>
<!-- 密码框： <input type="password" >-->
密码：<input type="password">
</p>
<!-- 单选框 <input type="radio" value="女" name="sex">女
value:单选框的值
name:表示组
selected:默认选中
-->
<p>性别：
<input type="radio" value="男" name="sex" checked>男
<input type="radio" value="女" name="sex">女
</p>
<!-- 多选框 -->
<p>爱好:
<input type="checkbox" value="sellp" name="hobby">睡觉
<input type="checkbox" value="run" name="hobby">跑步
<input type="checkbox" value="song" name="hobby">唱歌
<input type="checkbox" value="game" name="hobby" checked>APEX
<input type="checkbox" value="read" name="hobby">阅读
</p>
<!-- 按钮
type="button" 普通按钮
value="xxx" 按钮显示的值
type="image" 图像按钮 src不能忘
type="submit" 提交按钮
type="reset" 重置按钮
-->
<p>按钮:
<input type="button" name="button" value="双击666">
<!-- <input type="image" src="../HTML/resources/image/1000.png"> -->
</p>
<!-- 下拉框
select name="xx" id=""
option value="xx" ></option>
-->
<p>国家
<select name="国家" id="">
<option value="China" selected>中国</option>
<option value="American">美国</option>
<option value="Russia">俄罗斯</option>
<option value="France">法国</option>
<option value="England">英国</option>
</select>
</p>
<!-- 文本域
textarea name="textarea" -->
<p>反馈建议:
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域
type="file"
name="upload"-->
<p>
<input type="file" name="upload">
<input type="button" name="upload" value="上传">
</p>
<!-- 邮件验证
type="email" -->
<p>邮箱：
<input type="email" name="email">
</p>
<!-- url
type="url"-->
<p>url:
<input type="url" name="url">
</p>
<!-- 数字
type="number" -->
<p>年龄：
<input type="number" name="num" max="100" min="0" step="5">
</p>
<!-- 滑块
type="range"-->
<p>音量
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<!-- 搜索框
type="search" -->
<p>搜索:
<input type="search" name="search">
</p>
<!-- 隐藏域
hidden-->
<!-- 只读
readonly-->
<!-- 禁用
disabled-->
<!-- 增强鼠标可用性 -->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark" disabled>
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
扫一扫
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
