010_HTML5
初识HTML
什么是HTML
- Hyper Text Markup Language
- 超文本标记语言
- 超文本包括：文字、图片、音频、视频、动画等
HTML发展史
HTML5的优势
W3C标准
常见IDE
IDEA开发HTML
IDEA创建HTML文件，并用浏览器打开
配置浏览器
HTML基础
HTML基本结构
HTML注释
<!-- HTML注释 -->
网页基本信息
- DOCTYPE声明
- 标签
</li>
<li>
<meta>标签
</li>
</ol>
<pre><code class="language-html"><!-- DOCTYPE：告诉浏览器，要使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!-- meta描述性标签，用来描述网站的一些信息 -->
<!-- meta一般用来做SEO（搜索引擎优化） -->
<meta charset="UTF-8">
<meta name="keywords" content="网站关键词描述">
<meta name="description" content="网站描述"><!-- title网页标题 -->
<title>我的第一个页面</title>
</head>
<!-- body标签代表网页主体 -->
<body>
Hello World!
</body>
</html>
</code></pre>
<p><a name="hPOMI"></a></p>
<h2 id="网页基本标签">网页基本标签</h2>
<ol>
<li>标题标签</li>
<li>段落标签</li>
<li>换行标签</li>
<li>水平线标签</li>
<li>字体样式标签</li>
<li>注释和特殊符号</li>
</ol>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body><!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6><!-- 段落标签 -->
<h1>沁园春·雪</h1>
<p>北国风光，千里冰封，万里雪飘。</p>
<p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p>
<p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
<p>须晴日，看红装素裹，分外妖娆。</p>
<p>江山如此多娇，引无数英雄竞折腰。</p>
<p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
<p>一代天骄，成吉思汗，只识弯弓射大雕。</p>
<p>俱往矣，数风流人物，还看今朝。</p><!-- 水平线标签 -->
<hr/><!-- 换行标签 -->
<h1>沁园春·长沙</h1>
独立寒秋，湘江北去，橘子洲头。<br/>
看万山红遍，层林尽染；漫江碧透，百舸争流。<br/>
鹰击长空，鱼翔浅底，万类霜天竞自由。<br/>
怅寥廓，问苍茫大地，谁主沉浮？<br/>
携来百侣曾游。忆往昔峥嵘岁月稠。<br/>
恰同学少年，风华正茂；书生意气，挥斥方遒。<br/>
指点江山，激扬文字，粪土当年万户侯。<br/>
曾记否，到中流击水，浪遏飞舟？<br/><!-- 字体样式标签 -->
<p>粗体 <strong>样本 hello</strong></p>
<p>斜体 <em>样本 hello</em></p><!-- 特殊符号 -->
空 格<br/>
空 格<br/>
大于<br/>
><br/>
小于<br/>
<<br/>
版权符号<br/>
©版权所有<br/>
</body>
</html>
</code></pre>
<p><a name="7uLBq"></a></p>
<h2 id="图像标签">图像标签</h2>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610725493669-1718ef30-35bc-41b8-b095-6d964a88ad08.png#align=left&display=inline&height=396&margin=%5Bobject%20Object%5D&name=image.png&originHeight=396&originWidth=1097&size=181399&status=done&style=none&width=1097" alt="image.png" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--
src：图像地址（必填）
相对地址（推荐使用），绝对地址
../ 上一级目录
alt：图像名称（必填）
-->
<img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
<img src="../resources/image/2.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
</body>
</html>
</code></pre>
<p><a name="cpNNK"></a></p>
<h2 id="链接标签">链接标签</h2>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610726675846-f89199d5-3729-49ed-94cc-de2b976853a2.png#align=left&display=inline&height=157&margin=%5Bobject%20Object%5D&name=image.png&originHeight=157&originWidth=871&size=102853&status=done&style=none&width=871" alt="image.png" loading="lazy"></p>
<ol>
<li>文本超链接</li>
<li>图像超链接</li>
<li>页面间链接：从一个页面链接到另一个页面</li>
<li>锚链接</li>
<li>页面间链接+锚链接：从一个页面链接到另一个页面的锚点</li>
<li>功能性链接
<ol>
<li>邮件链接</li>
<li>QQ链接：使用QQ推广网站的推广工具</li>
</ol>
</li>
</ol>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610809069911-a5526e42-a633-49b5-be08-bd4b2f1b7634.png#align=left&display=inline&height=864&margin=%5Bobject%20Object%5D&name=image.png&originHeight=864&originWidth=847&size=102103&status=done&style=none&width=847" alt="image.png" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<p><a name="top" href="#bottom">直达底部</a></p><!--
a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
_blank 在新标签打开
_self 默认，在本页打开
-->
<a href="1.我的第一个网页.html" target="">默认跳转</a><br>
<a href="1.我的第一个网页.html" target="_self">本页跳转</a><br>
<a href="https://www.baidu.com" target="_blank">新标签跳转</a><br><a href="1.我的第一个网页.html">
<img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
</a>
<p><a>
<img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
</a></p>
<p><a>
<img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
</a></p>
<p><a>
<img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
</a></p><!--
锚链接：
1.需要一个锚标记，使用name
2.跳转到标记
-->
<p><a name="bottom" href="#top">回到顶部</a></p>
<!-- 页面间链接+锚链接：从一个页面链接到另一个页面的锚点 -->
<p><a href="2.基本标签.html/#bottom" target="_blank">跳转到基本标签页面底部</a></p><!--
功能性链接：
邮件链接：mailto
QQ链接
-->
<p><a href="mailto:wl3pb@163.com">点击给我发邮件</a></p>
<p>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=962307062&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:962307062:53" alt="在线咨询" title="在线咨询"/></a>
</p>
</body>
</html>
</code></pre>
<p><a name="V7PFi"></a></p>
<h2 id="块元素和行内元素">块元素和行内元素</h2>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610809208419-aa2a63e7-2133-4798-b3af-0dc9dadcd7d9.png#align=left&display=inline&height=489&margin=%5Bobject%20Object%5D&name=image.png&originHeight=489&originWidth=1163&size=116043&status=done&style=none&width=1163" alt="image.png" loading="lazy"><br>
<a name="cp4Eh"></a></p>
<h2 id="列表标签">列表标签</h2>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610809416138-a9e03834-100b-4d46-95cc-c29f0f73ca31.png#align=left&display=inline&height=337&margin=%5Bobject%20Object%5D&name=image.png&originHeight=337&originWidth=977&size=201109&status=done&style=none&width=977" alt="image.png" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>python</li>
<li>javascript</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>java</li>
<li>python</li>
<li>javascript</li>
</ul>
<hr/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
<dt>编程语言</dt>
<dd>java</dd>
<dd>python</dd>
<dd>javascript</dd><dt>武功秘籍</dt>
<dd>九阳神功</dd>
<dd>九阴真经</dd>
<dd>降龙十八掌</dd>
</dl>
</body>
</html>
</code></pre>
<p><a name="On93g"></a></p>
<h2 id="表格标签">表格标签</h2>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610810166567-24db16b4-861f-45cd-8905-74f4ee07e81d.png#align=left&display=inline&height=528&margin=%5Bobject%20Object%5D&name=image.png&originHeight=528&originWidth=1106&size=152761&status=done&style=none&width=1106" alt="image.png" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<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>
</code></pre>
<p><a name="TtZ8j"></a></p>
<h2 id="媒体元素：音频和视频">媒体元素：音频和视频</h2>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610810876173-1b9f100f-ea68-4c00-a2ac-aa6f3201eb1a.png#align=left&display=inline&height=214&margin=%5Bobject%20Object%5D&name=image.png&originHeight=214&originWidth=360&size=43328&status=done&style=none&width=360" alt="image.png" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--视频和音频
src 资源路径
controls 控制条
autoplay 自动播放
-->
<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/audio/1.mp3" controls autoplay></audio>
</body>
</html>
</code></pre>
<p><a name="ITxcA"></a></p>
<h1 id="页面结构分析">页面结构分析</h1>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610893578889-3b1b85df-9fea-48f5-9d87-26a5ac56aa4b.png#align=left&display=inline&height=565&margin=%5Bobject%20Object%5D&name=image.png&originHeight=565&originWidth=1262&size=269098&status=done&style=none&width=1262" alt="image.png" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构</title>
</head>
<body>
<header>
<h1>页面头部</h1>
</header>
<section>
<h1>页面主体</h1>
</section>
<footer>
<h1>页面脚部</h1>
</footer>
</body>
</html>
</code></pre>
<p><a name="2Y7Wr"></a></p>
<h1 id="iframe内联框架">iframe内联框架</h1>
<p><s><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610894147163-d7d34118-c2da-4944-93b2-852d17e31840.png#align=left&display=inline&height=250&margin=%5Bobject%20Object%5D&name=image.png&originHeight=250&originWidth=776&size=73012&status=done&style=none&width=776" alt="image.png" loading="lazy"></s></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--iframe内联框架
src 地址
w-h 宽度高度
name 标识名
-->
<iframe src="https://www.baidu.com" frameborder="1" width="800px" height="500px"></iframe><!--点击显示跳转页面嵌入到标识名iframe-->
<iframe src="" name="hello" frameborder="1" width="800px" height="500px"></iframe>
<a href="3.图像标签.html" target="hello">点击显示跳转页面嵌入到标识名iframe</a>
</body>
</html>
</code></pre>
<p><a name="KVMKF"></a></p>
<h1 id="表单">表单</h1>
<p><strong><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1610895462724-08ba034c-c0d2-42fd-94e3-4fc04d6925c2.png#align=left&display=inline&height=578&margin=%5Bobject%20Object%5D&name=image.png&originHeight=578&originWidth=1151&size=291928&status=done&style=none&width=1151" alt="image.png" loading="lazy"></strong></p>
<pre><code class="language-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方式提交：可以传输大文件，比较安全，但可以在Network查看，可以处理为不能查看
-->
<form action="1.我的第一个网页.html" method="post">
<p><input type="text" name="username"></p>
<p><input type="password" name="pwd"></p>
<p>
<input type="submit"></input>
<input type="reset">
</p>
</form>
</body>
</html>
</code></pre>
<p><a name="G4hiQ"></a></p>
<h2 id="表单元素">表单元素</h2>
<p><strong><img src="https://cdn.nlark.com/yuque/0/2021/png/2707044/1611066187817-29b1c261-670d-47fa-a247-5b475b29fd95.png#align=left&display=inline&height=523&margin=%5Bobject%20Object%5D&name=image.png&originHeight=523&originWidth=1084&size=408230&status=done&style=none&width=1084" alt="image.png" loading="lazy"></strong></p>
<ol>
<li>checked 单选框和多选框选中</li>
<li>selected 下拉框选中</li>
<li>readonly 只读</li>
<li>disabled 禁用</li>
<li>hidden 隐藏</li>
</ol>
<pre><code class="language-html"><!--单选框 radio
value 值
name 表示组
-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框 checkbox
value 值
name 表示组
-->
<p>
<input type="checkbox" value="1" name="number"/>一
<input type="checkbox" value="2" name="number"/>二
<input type="checkbox" value="3" name="number"/>三
</p>
<!--文本域 textarea
cols 列
rows 行
-->
<p>反馈
<textarea name="fankui" cols="20" rows="10">文本内容</textarea>
</p>
<!--文本域 textarea
cols 列
rows 行
-->
<p>文件域
<input type="file" name="files"/>
</p>
<p>数字
<input type="number" name="num" max="100" min="10" step="5"/>
</p>
<p>滑块
<input type="range" name="voice" max="100" min="0" step="2"/>
</p>
<p>搜索框，有叉号，可以删除
<input type="search" name="search"/>
</p>
<!--label标签，增强鼠标可用性，点击文件，文本框获取焦点-->
<p>
<label for="mark">你点我试试</label>
<input type="search" name="search" id="mark"/>
</p>
</code></pre>
<p><a name="rveye"></a></p>
<h2 id="表单的初级验证">表单的初级验证</h2>
<ol>
<li>placeholder 提示信息</li>
<li>required 非空</li>
<li>pattern 正则表达式<br>
<a name="uZzB7"></a></li>
</ol>
<h1 id="总结">总结</h1>
<p><img src="https://cdn.nlark.com/yuque/0/2021/jpeg/2707044/1611070587524-8527c207-f34c-4a65-82e9-a03b045a3860.jpeg" alt="" loading="lazy"></p>
010_HTML5的更多相关文章
随机推荐
- CentOS 7 使用pyenv安装python3.6
安装pyenv 1.安装git yum install -y git 2.安装pyenv curl -L https://raw.githubusercontent.com/yyuu/pyenv-in ...
- centos设系统置语言为中文
[root@host /]# vim /etc/sysconfig/i18n #i18n 是 internationalization 的缩写形式,意即在 i 和 n 之间有 18 个字母,本意是指软 ...
- multiselect多选下拉框
具体实现 <input type="hidden" id="q_dueDay" name="q_dueDay" value=" ...
- java 验证表单工具类，史上最全
package com.wiker.utils; import java.util.regex.*; /** * * @version 1.0 * @author wiker * @since JDK ...
- Cisco的互联网络操作系统IOS和安全设备管理器SDM__路由器软、硬件知识
路由器软.硬件知识 1.路由器的组件: 组件 解释 Bootstrap 存储在ROM中的微代码,bootstrap用于在初始化阶段启动路由器.它将启动路由器然后装入IOS POST(开机自检) 存储在 ...
- NodeMCU获取并解析心知天气信息
NodeMCU获取并解析心知天气信息 1 注册心知天气并获取私钥 打开心知天气网站,点击注册按钮 填写基本信息注册心知天气账号,登录注册所填写的邮箱点击链接进行账号激活,随后出现如下界面 点击登录按钮 ...
- 图片轮播展示效果-2D实现
图片的轮播展示效果如果使用2D实现,需要将3D中存在的近大远小效果使用图片的缩放呈现,因此需要存储和计算图片的位置同时还要计算存储图片的缩放信息.将所有图片的位置连线看作是一个椭圆,就可以根据图片的个 ...
- Educational DP Contest E - Knapsack 2 (01背包进阶版)
题意:有\(n\)个物品,第\(i\)个物品价值\(v_{i}\),体积为\(w_{i}\),你有容量为\(W\)的背包,求能放物品的最大价值. 题解:经典01背包,但是物品的最大体积给到了\(10^ ...
- PowerShell多任务
代码 foreach ($server in $servers) { $running = @(Get-Job | Where-Object { $_.State -eq 'Running' }) i ...
- ASP.Net Core 5.0 MVC中AOP思想的体现(五种过滤器)并结合项目案例说明过滤器的用法
执行顺序 使用方法,首先实现各自的接口,override里面的方法, 然后在startup 类的 ConfigureServices 方法,注册它们. 下面我将代码贴出来,照着模仿就可以了 IActi ...