一,浏览器
1.浏览器
***浏览器最重要的部分是浏览器的内核。***浏览器内核是浏览器的核心,也称“渲染引擎”,用来解释网页语法 并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内 核对网页的语法解释也不同,因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。
1.1,五大主流浏览器及内核
- IE浏览器内核:Trident内核,也是俗称的IE内核;
- Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内 核; Firefox浏览器内核:Gecko内核,俗称Firefox内核;
- Safari浏览器内核:Webkit内核;
- Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
1.2,计算机的组成
软件:
硬件:
- 三大件:CPU、内存、硬盘 – 主板
- 输入设备:鼠标、键盘、手写板、摄像头等
- 输出设备:显示器、打印机、投影仪等
二,HTML概述
HTML5它致力于解决跨浏览器问题,可以部分取 代JavaScript(标签封装了某些行为),也致力于把浏览器变成一个前端执行开发环境,而不是简单的视图 呈现工具。
2.1HTML是什么
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准 标记语言。“超文本”就是指页面内可以包含图片、链接,甚至音乐、视频等非文字元素。
- HTML 不是一种编程语言,而是一种标记语言。
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面,使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器 来解析
三,web基础概述
3.1网站的构成
网站由三个主要部分组成:
- 网站域名:访问网站所用的网址,如metinfo.cn;
- 网站程序:包括用户浏览网站所看到的页面和网站后台管理程序,现在一般都是用成熟的网站管理 系统。
- 网站空间:可以是虚拟主机或服务器,用于存储网站程序及资料,并提供网站程序运行所需要的环境。
3.2页面的构成
页面的构成被分为三个主要部分:结构(Structure)、表现(Presentation)和行为(Behavior)。
1.结构:HTML
2.表现:css
3.行为:JavaScript
3.3,B/S和C/S
B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器 是客户端最主要的应用软件。这种模式统一了客户端,将系统功能实现的核心部分集中到服务器上,简 化了系统的开发、维护和使用。客户机上只要安装一个浏览器,服务器安装SQL Server、Oracle、 MySql等数据库。浏览器通过Web Server 同数据库进行数据交互。 B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件,只要有一台能上网的电脑就能 使用,客户端零安装、零维护。系统的扩展非常容易。
C/S是Client/Server的缩写。客户端/服务器开发模式,服务器通常采用高性能的PC、工作站或小型机, 并采用大型数据库系统,如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软 件。C/S面向特定的用户,维护成本较高,常用于局域网。
3.4开拓眼界–>>常见互联网名词
HTTP:
超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。 所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的 方法。
URL:
它从左到右由下述部分组成:
- 协议:http通信协议。
- 服务器地址(host):指出WWW页所在的服务器域名。
- 端口(port):有时(并非总是这样),对某些资源的访问来说,需给出相应的服务器提供端口 号。
- 路径(path):指明服务器上某资源的位置(其格式与DOS系统中的格式一样,通常有目录/子目 录/文件名这样结构组成)。与端口一样,路径并非总是需要的。
四、HTML文档结构
4.1,HTML的结构
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
4.1.1,HTML文档声明
HTML5 文档声明
<!DOCTYPE html>
DOCTYPE 英文意思是文档类型,也就是HTML的版本类型声明。
4.1.2,HTML文档根标签
**元素是 HTML 页面的根元素**:此元素可告知浏览器其自身是一个 HTML 文档。
与 标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。4.1.3,HTML 头部
<head></head>
标签包含了文档的元(meta)数据,用于定义文档的头部,它是所有头部元素的容 器。
下面这些标签可用在 head 部分:<base>,<link>,<script>,<style>,<title>,<meta>
-
<base>
:描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链 接:base会对Html文档中所有URL产生作用,慎用! -
<link>:
定义文档与外部资源的关系,通常用于链接到样式表。link标签的另外一个重要作用:定义浏览器窗口tab页的logo图标;
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
-
<script>:
用来引入外部js或定义内部js代码。 -
<style>
:定义了HTML文档的样式文件引用地址,在<style>
元素中你也可以直接添加样式来渲 染 HTML 文档。 -
<title>:
定义文档的标题,它是 head 部分中唯一必需的元素-
title 标签定义了不同文档的标题。
-
定义了浏览器工具栏的标题
-
当网页添加到收藏夹时,显示在收藏夹中的标题
-
显示在搜索引擎结果页面的标题
-
-
<meta>
:描述了一些基本的元数据。“元”配置,就是表示基本的配置项目。<meta>
标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。- META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
- 元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web服务。
<!-- 1、指定字符集,charset就是charactor set(即“字符集”) 浏览器就是通过meta来看网页是
什么字符集的。比如你保存的时候,meta写的和声明的不匹配,那么浏览器就是乱码。 -->
<meta charset="utf-8">
<!-- 2、页面描述,name即“名字”,content即“内容”。只要设置Description页面描述,那么百度搜索结
果,就能够显示这些语。 -->
<meta name="description" content="具体描述。。。">
<!-- 3、关键字:就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。有助于搜索引擎SEC优
化,。 -->
<meta name="Keywords" content="网易,邮箱,游戏,新闻">
4.1.4,html<body>
主体
body 元素定义文档的主体。
body 元素包含了可见的页面内容(比如文本、超链接、图像、表格和列表等等。)
**重要:**在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。
4.2HTML5的语法变化
- 标签不再区分大小写
- 元素可以省略结束标签 30s刷新当前页面
- 允许省略属性值的属性(不是所有属性)
<!-- 例如: -->
<input checked type = "checkbox"/>
<!-- 严格的语法定义: -->
<input checked = "checked" type = "checkbox"/>
- 允许属性值不使用引号
<label><input type=text name=price id=price/></label>
4.3,html特点及优势
优点:
- 网络标准统一、HTML5本身是由W3C推荐出来的。
- 多设备、跨平台
- 即时更新。
- 提高可用性和改进用户的友好体验;
- 有几个新的标签,这将有助于开发人员定义重要的内容;
- 可以给站点带来更多的多媒体元素(视频和音频);
- 可以很好的替代Flash和Silverlight;
- 涉及到网站的抓取和索引的时候,对于SEO很友好;
- 被大量应用于移动应用程序和游戏。
缺点:
- 安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、 web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料。
- 完善性:许多特性各浏览器的支持程度也不一样。
- 性能:某些平台上的引擎问题导致HTML5性能低下。
- 浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没。
4.4,HTML标签分类
html标签又叫做html元素,它分为块级元素、行内块元素和行内元素(也可以叫做内联元素),都是 html规范中的概念。
4.4.1,块级标签
块级元素是指本身样式属性为display:block;的元素。因为它自身的特点,我们通常使用块级元素来进行 大布局(大结构)的搭建。
块级元素的特点:(独占一行,可以设置宽高)。
- 独占一行,每一个块级元素都会从新的一行重新开始,从上到下排布
- 可以直接控制宽度、高度以及盒子模型的相关css属性
- 在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度 在不设置高度的情况下,块级元素的高度是它本身内容的高度
常用的块级元素:
标签 | 描述 |
---|---|
div | 常用块级容器,也是css layout的主要标签 |
h1~h6 | 标题标签 |
hr | 水平分隔线 |
ol | 有序列表 |
ul | 无序列表 |
li | 列表项 |
dl | 自定义列表 |
dt | 自定义列表项 |
dd | 定义描述 |
table | 表格 |
p | 段落 |
from | 交互表单 |
4.4.2,行内元素
内联元素是指本身属性为display:inline;的元素。因为它自身的特点,我们通常使用块级元素来进行文 字、小图标(小结构)的搭建。
行内元素的特点:(有多大占多大,不可以设置宽高)
- 和其他内联元素从左到右在一行显示
- 不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的
- 内联元素的宽高是由本身内容的大小决定(文字、图片等)
- 内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)
常见的行内元素:
标签 | 描述 |
---|---|
span | 常用内联容器,定义文本内区块 |
a | 锚点,超链接 |
b | 加粗 |
srtong | 加粗强调 |
i | 斜体 |
em | 斜体强调 |
del | 文档中已被删除的文本 |
br | 强制换行 |
u | 下划线 |
textarea | 多行文本输入框 |
input | 输入框 |
select | 下拉列表 |
sub | 下标 |
sup | 上标 |
small | 小字体文本 |
4.4.3,行内块元素
行内块元素是指本身属性为display:inline-block;的元素。
行内块元素的特点:(有多大占多大,可以设置宽高)。
- 元素排列在一行
- 宽度默认由内容决定
- 元素间默认有间距
- 支持宽高、外边距、内边距的所有样式的设置
常用的行内元素:
标签 | 描述 |
---|---|
img | 图片标签 |
4.5,HTML和CSS中的长度单位
CSS中有不少属性是以长度作为值的。盒模型的属性就是一些很明显的值属性:width、height、 margin、padding、border。除此之外还有很多其他的CSS属性的值同样也是长度值,像偏移量 (offset)、box-shadow的大小或者字体的大小、间距等。
4.5.1,绝对长度单位
px
- wrap { width: 400px; }
- 在web上,像素仍然是典型的度量单位,很多其他长度单位直接映射成像素,最终,他们被按照像 素处理,javascript语言里的单位就是使用的像素。
in
- .wrap { width: 4in; }
- 英寸是一个物理度量单位,但是在CSS领域,英寸只不过被直接映射成像素罢了。
- 1in == 96px
cm
- .wrap { width: 20cm; }
- 对于世界上大多数的人来说,厘米是比较熟悉有用的物理度量单位。它也映射成像素。
- 1cm == 37.8px
mm
- wrap { width: 200mm; }
- 毫米是个小数量级的物理度量单位。
- 1mm == 0.1cm == 3.78px
4.5.2,相对字体的长度
em
- .wrap { width: 40em; }
- 在没有任何CSS规则的前提下,1em的长度是:1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm 浏览器默认字体大小16px
- 如果有任何CSS规则改变了字体大小(不管在文档的什么位置),1em的长度会变成相对于新的 font-size的大小
rem
- .wrap { width: 40rem; }
- rem和em一样也是一个相对单位,但是和em不同的是rem总是相对于根元素(如:root{}),而不像 em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单
- 值得注意的浏览器支持问题: IE8,, Safari 4或 iOS 3.2中不支持rem单位。
<body>
绝对单位,不会受视空改变而发生改变,可以理解为直接固定下来的一个长度
<div style='width:100px;height:100px;border:1px solid red;font-size:20px;'>box1</div>
em相对单位,相对于当前元素的font-size值,font-size值发生改变则em最终值也会发生改变
<div style='font-size:10px;width:10em;height:10em;border:1px solid red;'>box2</div>
rem相对单位 相对于根元素的font-size值
<div style='width:10rem;height:10rem;border:1px solid red;'>box3</div>
</body>
4.5.3,可视区百分比长度单位
vw
- vw是可视区宽度单位。1vw等于可视区宽度的百分之一。
- vw单位跟百分比很相似,不同的是vw的值对所有的元素都一样,与他们父元素或父元素的宽度无 关。有点像rem单位那样总是相对于根元素。
vh
- vh和vw(viewport widht)单位一样,不同的是vh是相对于可视区的高度。
vmin
- vmin的值是当前vw和vh中较小的值。
- 在标准尺寸类型的使用实例中,和由自己确定屏幕大小的vw、vh单位相比,vmin是一个更有用的 度量标准。
- 注:对移动端开发时对横屏竖屏切换时防止字体变化s
vmax
- vmax的值是vw和vh中的较大的值。
- 值得注意的浏览器支持问题:webkit内核的浏览器支持vmin,不支持vmax。但是Firefox支持 vmax。
vw相对于视口的百分比(宽)
<div style='width:50vw;border:1px solid blue;font-size:5vw;'>box1</div>
vh相对于视口的百分比(高)
<div style='width:50vh;border:1px solid black;font-size:10vh;'>box2</div>
vmin的值是当前vw和vh中较小的值。
<div style='width:30vmin;border:1px solid red;font-size:5vmin;'>box3</div>
vmax的值是vw和vh中的较大的值。
<div style='width:30vmax;border:1px solid green;font-size:5vmax;'>box3</div>
4.5.4,百分比长度单位
以百分比为单位的长度值是基于具有相同属性的父元素的长度值。例如,如果一个元素呈现的宽度 是450px,子元素的宽度设为50%,那么子元素呈现的宽度为225px。
4.6,HTML注释
可以将注释写入代码中可以代码的可读性,使其更容易理解(不会被运行出来)
注释写法
<!--注释-->
快捷方式:ctrl+/
4.7,HTML文档的快捷语法
<!-- 快捷语法的实现:tab一下 -->
<!-- 写上标签名,可以快速创建完整的标签标记 -->
<a href="">百度一下</a>
<!-- 标签名{内容}:创建标签及其内容 -->
<p>我是p标签的内容</p>
<!-- 标签名[属性名=值]: 创建标签及其属性及其值 -->
<p id="cp1">我的id为cp1的p标签</p>
<!-- 标签名[属性名=值]{内容} -->
<p id="cp2">标签内容</p>
<!-- 标签名*数值:一次性创建多个标签 -->
<p>我是p标签的内容</p>
<p>我是p标签的内容</p>
<!-- 标签名[属性名=值$]*数值 -->
<!-- $必须结合*来使用,表示从1开始的数值 -->
<p id="cp1">我是第 001 个p标签的内容</p>
<p id="cp2">我是第 002 个p标签的内容</p>
<!-- 父标签>子标签:创建父标签及其子标签 -->
<div id="div1">
<p>我是div1里面的p元素</p>
</div>
<!-- 标签名1+标签名2:创建兄弟标签 -->
<h1>我是h1的内容</h1>
<h1>我是h1的内容</h1>
<!-- 块级创建表格 -->
table>tr*5>td{我是单元格内容}*3
4.8,标签及属性语法
4.8.1,标签语法规则
- HTML 元素以开始标签起始以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
双标签:
<开始标签 属性=”” .....> 标签内容 </结束标签>
单标签(空标签):
<开始标签 属性=””>
4.8.2属性语法规则
属性是 HTML 元素提供的附加信息。
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name=“value”。
注:属性值始终在引号内(双引号单引号都可以)
五,html标签元素
5.1,HTML基础块标签
5.1.1,标题标签
<h1>
~<h6>
:可以定义标题。标题字体从大到小**(h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。)**
5.1.2,段落标签
标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表 中规定。
**扩展:**可以只在块(block)内指定段落,也可以把段落和其他段落、列表、表单和预定义格式的文本一 起使用。总的来讲,这意味着段落可以在任何有合适的文本流的地方出现,例如文档的主体中、列表的 元素里,等等。
从技术角度讲,段落不可以出现在头部、锚或者其他严格要求内容必须只能是文本的地方。实际上,多 数浏览器都忽略了这个限制,它们会把段落作为所含元素的内容一起格式化。
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
5.1.3,水平线标签
<hr>
标签在 HTML 页面中创建一条水平线
<body>
<h1>标题</h1>
<hr>
<p>段落1</p>
<p>段落2</p>
</body>
5.1.4,基本块级标签练习
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>唐诗三百首</h1>
<hr>
<br>
<h2>目录</h2>
<p>第一首:静夜思</p>
<p>第二首:忆江南</p>
<p>第三首:长恨歌</p>
<hr>
<h2>静夜思</h2>
<p>作者:李白</p>
<p>床前明月光,疑是地上霜。举头望明月,低头思故乡。</p>
<hr>
<h2>【李白简介】</h2>
<p>李白,字太白...</p>
</body>
</html>
5.2,HTML基础布局标签
HTML<div>
元素是块级元素,它可用于组合其他 HTML 元素的容器。
可以对同一个<div>
元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差 异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元 素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width:400px; height:300px; background:#9FF">
<p>段落标签</p>
<h3>标题标签</h3>
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<p>段落标签</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset=“utf-8”>
<title>减肥运动排行榜</title>
</head>
<body>
<h2>减肥运动排行榜</h2>
<dl>
<dt>1、壁球</dt>
<dd>每半小时消耗热量三百卡。可锻炼两腿灵活性,可增加速度能力。但心肺功能较差者不宜。</dd>
</dl>
<dl>
<dt>2、跳绳</dt>
<dd>每半小时消耗热量四百卡。可改善人的姿态。三十五岁以上的人跳绳不可过于激烈。</dd>
</dl>
<dl>
<dt>3、滑旱冰</dt>
<dd>每半小时消耗热量一百七十五卡。可增强全身灵活性和局部力量。</dd>
</dl>
<dl>
<dt>4、散步</dt>
<dd>每半小时消耗热量七十五卡。它能改善血液循环,活动关节和有助于减肥。</dd>
</dl>
<dl>
<dt>5、慢跑</dt>
<dd>每半小时消耗热量三百卡。有益于心肺和血液循环。跑的路程越长,消耗的热量越大。</dd>
</dl>
</body>
</html>
5.2,HTML基础行内标签
5.2.1,范围标签
<span>
标签被用来组合文档中的行内元素。
<p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p>
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。
5.2.2,换行标签
<br>
可插入一个简单的换行符。
<br>
标签是空标签(意味着它没有结束标签,因此这是错误的:<br>
</br>
)。
<p>
明月几时有?把酒问青天。<br>
不知天上宫阙,今夕是何年。<br>
我欲乘风归去,又恐琼楼玉宇,高处不胜寒。<br>
起舞弄清影,何似在人间。<br>
转朱阁,低绮户,照无眠。<br>
不应有恨,何事长向别时圆?<br>
人有悲欢离合,月有阴晴圆缺,此事古难全。<br>
但愿人长久,千里共婵娟。
</p>
5.2.3,超链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从 一张页面跳转到另一张页面。
标签定义超链接,用于从一张页面链接到另一张页面。元素最重要的属性是 href 属性,它指示链接的目 标。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新 的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小 手。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线。
基本语法:
<a href="链接地址" target="目标窗口位置"> 链接热点文本或图像 </a>
属性 | 值 | 描述 |
---|---|---|
href | URL | 规定链接指向的页面的 URL。 |
target | _blank, _parent, _self , _top , framename | 规定在何处打开链接文档。 1、 _blank :浏览器总在一个新打开、未命名的窗口中载入目标文 档。 2、 _parent :这个目标使得文档载入父窗口或者包含来超链接引 用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那 么它与目标 _self 等效。 3、 _self :这个目标的值对所有没有指定目标的 标签是默认 目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源 文档。 4、 _top :这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。 5、framename:在指定的框架中打开被链接文档。 |
超链接用法:
- 链接本地文档,href=“本地文档的路径”;
- 友情链接,href=“友情链接网站的网址”,必须加上http或https;
- 图片链接,超链接的标签内容是图片;
- 建立电子邮箱的链接,href=“mailto:邮箱地址”;
- 链接本页面的某个位置;
- 设置锚点
<a name="锚点名">内容</a>
- 链接指向锚点
<a href="#锚点名">跳转到某点</a>
锚点定位:
通过创建锚点链接,用户能够快速定位到目标内容。 创建锚点链接分为两步:
(1) 使用<a name="锚点名">内容</a>
创建链接文本:
<a href="#two">第2集</a>
(2) 使用相应的 id名 标注跳转目标的位置:
<h3 id="two">第2集</h3>
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- href属性表示要跳转的链接地址
如果是应该网址则前面必须加上协议(http:// https://)
如果想跳转至本项目的其它页面则直接根据路径即可 -->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.jd.com" target="_blank">京东</a>
<a href="05.html">跳转到另一个网页</a>
<a href="http://127.0.0.1:5500/%E6%93%8D%E4%BD%9C/05.html">跳转到下一个网页</a>
<!-- 链接的内容可以是一个图片 -->
<a href="https://img0.baidu.com/it/u=1956364049,2569870147&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500">图片</a>
<!-- 链接可以是一个邮箱地址
通过mailto:邮箱地址 可以调起本地的电子邮箱相关的应用 -->
<a href="mailto:2433224213@qq.com">发邮件</a>
<!-- 调起本地qq进行聊天 -->
<a href="tencent://message/?uin=1307155858">可以与本地qq链接uin=**聊天</a>
<!-- 注:在开发中不用物理链接 -->
</body>
</html>