做ppt模仿网站,如何用百度上传图片做网站外链,网页生成微信小程序,网站横条广告目录
URL#xff08;统一资源定位符#xff09;
概述
网址的组成部分
协议
主机
端口
路径
查询参数
锚点
文本标签 示例#xff1a; 链接标签 示例#xff1a; 图片标签 示例#xff1a; 列表标签 示例#xff1a; URL#xff08;统一资源定位符#xff09;…目录
URL统一资源定位符
概述
网址的组成部分
协议
主机
端口
路径
查询参数
锚点
文本标签 示例 链接标签 示例 图片标签 示例 列表标签 示例 URL统一资源定位符
概述
URL 是“统一资源定位符”Uniform Resource Locator的首字母缩写中文译为“网址”表示各种资源的互联网地址。下面就是一个典型的 URL。
https://www.example.com/path/index.html
所谓资源可以简单理解成各种可以通过互联网访问的文件比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL才能在互联网上获取它们。
只要资源可以通过互联网访问它就必然有对应的 URL。一个 URL 对应一个资源但是同一个资源可能对应多个 URL。
URL 是互联网的基础。互联网之所以“互联”就是因为网页可以通过“链接”link包含其他 URL。用户只要点击就可以从一个 URL 跳转到另一个 URL前往不同的网站。
网址的组成部分
URL 由多个部分组成。下面是一个比较复杂的 URL实际的 URL 通常不会有这么多部分。
https://www.example.com:80/path/to/myfile.html?key1value1key2value2#anchor
协议 主机名 端口 路径 查询参数 锚点
我们看看这个 URL 的各个部分
协议
协议scheme是浏览器请求服务器资源的方法上例是https://的部分表示使用 HTTPS 协议。
互联网支持多种协议必须指明网址使用哪一种协议默认是 HTTP 协议。也就是说如果省略协议直接在浏览器地址栏输入www.example.com那么浏览器默认会访问http://www.example.com。HTTPS 是 HTTP 的加密版本出于安全考虑越来越多的网站使用这个协议。
HTTP 和 HTTPS 的协议名称后面紧跟着一个冒号和两个斜杠://。其他协议不一定如此邮件地址协议mailto:的协议名后面只有一个冒号比如mailto:fooexample.com。
主机
主机host是资源所在的网站名或服务器的名字又称为域名。上例的主机是www.example.com。
有些主机没有域名只有 IP 地址比如192.168.2.15。这种情况常常出现在局域网。
端口
同一个域名下面可能同时包含多个网站它们之间通过端口port区分。“端口”就是一个整数可以简单理解成访问者告诉服务器想要访问哪一个网站。HTTP 协议的默认端口是80如果省略了这个参数服务器就会返回80端口的网站。
端口紧跟在域名后面两者之间使用冒号分隔比如www.example.com:80。
常见的端口以及对应的协议 20 ftp 21 ftp 22 SSH 23 talent 25 smtp 53 DNS 67 68 DHCP 80 http 110 pop3 443 https 389 ladp 3306 mysql 1433 sqlserver 1521 oracle 3389 window远程桌面 6379 redis(nosql数据库)路径
路径path是资源在网站的位置。比如/path/index.html这个路径指向网站的/path子目录下面的网页文件index.html。
互联网的早期路径是真实存在的物理位置。现在由于服务器可以模拟这些位置所以路径只是虚拟位置。
路径可能只包含目录不包含文件名比如/foo/甚至结尾的斜杠都可以省略。这时服务器通常会默认跳转到该目录里面的index.html文件即等同于请求/foo/index.html但也可能有其他的处理比如列出目录里面的所有文件这取决于服务器的设置。一般来说访问www.example.com这个网址很可能返回的是网页文件www.example.com/index.html。
查询参数
查询参数parameter是提供给服务器的额外信息。参数的位置是在路径后面两者之间使用?分隔上例是?key1value1key2value2。
查询参数可以有一组或多组。每组参数都是键值对key-value pair的形式同时具有键名(key)和键值(value)它们之间使用等号连接。比如key1value就是一个键值对key1是键名value1是键值。
多组参数之间使用连接比如key1value1key2value2。
锚点
锚点anchor是网页内部的定位点使用#加上锚点名称放在网址的最后比如#anchor。浏览器加载页面以后会自动滚动到锚点所在的位置。
文本标签
div
div是一个通用标签表示一个区块division。它没有语义如果网页需要一个块级元素容器又没有其他合适的标签就可以使用这个标签。
它的最常见用途就是提供 CSS 的钩子用来指定各种样式。所以在早期下面层层包裹的div就很常见。
div classmaindiv classarticlediv classtitleh1文章标题/h1/div/div
/div
上面代码读起来很费力因为不带有语义。后来HTML 5 就提出了语义标签改进了上面的代码。
mainarticleheaderh1文章标题/h1/header/article
/main
div是无语义的块级元素。下面的例子使用div将图像和文字组合在一起构成一个警告区块。
divimg srcwarning.jpg alt警告p小心/p
/div
只要样式上需要多个块级元素组合在一起就可以使用div。但是这应该是最后的措施带有语义的块级标签比如article、section、aside、nav等始终应该优先使用当且仅当没有其他语义元素合适时才可以使用div。
p
p标签是一个块级元素代表文章的一个段落paragraph。不仅是文本任何想以段落显示的内容比如图片和表单项都可以放进p元素。
phello world/p
上面代码就是一个简单的段落。
span
span是一个通用目的的行内标签即不会产生换行不带有任何语义。
它通常用作 CSS 样式的钩子如果需要对某些行内内容指定样式就可以把它们放置在span。
p这是一句span重要/span的句子。/p
上面代码中句子里面需要强调的部分就可以放在span。
br
br让网页产生一个换行效果。该标签是单独使用的没有闭合标签。
hellobrworld
浏览器渲染上面代码时会分成两行hello和world各占一行。
br对于诗歌和地址的换行非常有用。
p床前明月光br疑是地上霜。br举头望明月br低头思故乡。
/p
上面的代码如果不用br会显示成一行。
注意块级元素的间隔不要使用br来产生而要使用 CSS 指定。
p第一段/p
br
br
p第二段/p
上面的代码希望段落之间有两个换行这时不应该使用br而应该使用 CSS。
wbr
wbr标签跟br很相似表示一个可选的断行。如果一行的宽度足够则不断行如果宽度不够需要断行就在wbr的位置的断行。它是为了防止浏览器在一个很长的单词中间不正确地断行或者不断行所以事先标明可以断行的位置主要用于欧洲一些单词很长的语言或者 URL 的断行。
p
Fernstraßenwbrbauwbrprivatwbrfinanzierungswbrgesetz
/p
上面代码是一个很长的德语单词为了防止不正确断行事先用wbr告诉浏览器可以选择在哪里断行。
hr
hr用来在一篇文章中分隔两个不同的主题浏览器会将其渲染为一根水平线。该标签是单独使用的没有闭合标签。
p第一个主题/p
hr
p第二个主题/p
上面代码的渲染结果是两段之间会出现一根水平线。
该标签是历史遗留下来的建议尽量避免使用。主题之间的分隔可以使用section如果想要水平线的效果可以使用 CSS。
示例 div我是div我独占一行/divp我是p标签我也独占一行/pspan我是span标签一行可以有多个我 /spanspan我也是span标签/spanbrp注意马上有一个分隔符hr出现/phr 链接标签
a
链接通过a标签表示用户点击后浏览器会跳转到指定的网址。下面就是一个典型的链接。
a hrefhttps://wikipedia.org/维基百科/a
上面代码就定义了一个超级链接。浏览器显示“维基百科”文字下面默认会有下划线表示这是一个链接。用户点击后浏览器跳转到href属性指定的网址。
a标签内部不仅可以放置文字也可以放置其他元素比如段落、图像、多媒体等等。
a hrefhttps://www.example.com/img srchttps://www.example.com/foo.jpg
/a
上面代码中a标签内部就是一个图像。用户点击图像就会跳转到指定网址。
a标签有如下属性
1href
href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。
上文已经给出了完整 URL 的例子下面是锚点的例子。
a href#demo示例/a
上面代码中href属性的值是#加上锚点名称。点击后浏览器会自动滚动停在当前页面里面demo锚点所在的位置。
2hreflang
hreflang属性给出链接指向的网址所使用的语言纯粹是提示性的没有实际功能。
ahrefhttps://www.example.comhreflangen
示例网址/a
上面代码表明href属性指向的网址的语言是英语。
该属性的值跟通用属性lang一样语言代码可以参考《属性》一章的lang属性的介绍。
3title
title属性给出链接的说明信息。鼠标悬停在链接上方时浏览器会将这个属性的值以提示块的形式显示出来。
ahrefhttps://www.example.com/titlehello
示例/a。
上面代码中用户鼠标停留在链接上面会出现文字提示hello。
4target
target属性指定如何展示打开的链接。它可以是在指定的窗口打开也可以在iframe里面打开。
pa hrefhttp://foo.com targettestfoo/a/p
pa hrefhttp://bar.com targettestbar/a/p
上面代码中两个链接都在名叫test的窗口打开。首先点击链接foo浏览器发现没有叫做test的窗口就新建一个窗口起名为test在该窗口打开foo.com。然后用户又点击链接bar由于已经存在test窗口浏览器就在该窗口打开bar.com取代里面已经打开的foo.com。
target属性的值也可以是以下四个关键字之一。 _self当前窗口打开这是默认值。 _blank新窗口打开。 _parent上层窗口打开这通常用于从父窗口打开的子窗口或者iframe里面的链接。如果当前窗口没有上层窗口这个值等同于_self。 _top顶层窗口打开。如果当前窗口就是顶层窗口这个值等同于_self。
ahrefhttps://www.example.comtarget_blank
示例链接/a
上面代码点击后浏览器会新建一个窗口在该窗口打开链接并且新窗口没有名字。
注意使用target属性的时候最好跟relnoreferrer一起使用这样可以避免安全风险。
5rel
rel属性说明链接与当前页面的关系。
a hrefhelp.html relhelp帮助/a
上面代码的rel属性说明链接是当前页面的帮助文档。
下面是一些常见的rel属性的值。 alternate当前文档的另一种形式比如翻译。 author作者链接。 bookmark用作书签的永久地址。 external当前文档的外部参考文档。 help帮助链接。 license许可证链接。 next系列文档的下一篇。 nofollow告诉搜索引擎忽略该链接主要用于用户提交的内容防止有人企图通过添加链接提高该链接的搜索排名。 noreferrer告诉浏览器打开链接时不要将当前网址作为 HTTP 头信息的Referer字段发送出去这样可以隐藏点击的来源。 noopener告诉浏览器打开链接时不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口这样就提高了安全性。 prev系列文档的上一篇。 search文档的搜索链接。 tag文档的标签链接。
6referrerpolicy
referrerpolicy属性用于精确设定点击链接时浏览器发送 HTTP 头信息的Referer字段的行为。
该属性可以取下面八个值no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。
其中no-referrer表示不发送Referer字段same-origin表示同源时才发送Referer字段origin表示只发送源信息协议域名端口。其他几项的解释请查阅 HTTP 文档。
7ping
ping属性指定一个网址用户点击的时候会向该网址发出一个 POST 请求通常用于跟踪用户的行为。
8type
type属性给出链接 URL 的 MIME 类型比如到底是网页还是图像或文件。它也是纯粹提示性的属性没有实际功能。
ahrefsmile.jpgtypeimage/jpeg
示例图片/a
上面代码中type属性提示这是一张图片。
9download
download属性表明当前链接用于下载而不是跳转到另一个 URL。
a hrefdemo.txt download下载/a
上面代码点击后会出现下载对话框。
注意download属性只在链接与网址同源时才会生效。也就是说链接应该与网址属于同一个网站。
如果download属性设置了值那么这个值就是下载的文件名。
ahreffoo.exedownloadbar.exe
点击下载/a
上面代码中下载文件的原始文件名是foo.exe。点击后下载对话框提示的文件名是bar.exe。
注意如果链接点击后服务器的 HTTP 回应的头信息设置了Content-Disposition字段并且该字段的值与download属性不一致那么该字段优先下载时将显示其设置的文件名。
download属性还有一个用途就是有些地址不是真实网址而是数据网址比如data:开头的网址。这时download属性可以为虚拟网址指定下载的文件名。
a hrefdata:,Hello%2C%20World!点击/a
上面链接点击后会打开一个虚拟网页上面显示Hello World!。
ahrefdata:,Hello%2C%20World!downloadhello.txt
点击/a
上面链接点击后下载的hello.txt文件内容就是“Hello, World!”。
示例
a hrefhttp://www.baidu.com hreflangen title这是放在链接上就会有的文字 target_blank referrerpolicyno-referertypetext/html
看这里使用a引入了百度的网站并且设置网址的语言,并且设置了链接在新页面打开,设置了不带referer访问并且设置打开链接的类型修改为text/html
/a
点击前 点击后 图片标签
img
img标签用于插入图片。它是单独使用的没有闭合标签。
img srcfoo.jpg
上面代码在网页插入一张图片foo.jpg。src属性指定图片的网址上例是相对 URL表示图片与网页在同一个目录。
img默认是一个行内元素与前后的文字处在同一行。
pHelloimg srcfoo.jpgWorld/p
上面代码的渲染结果是文字和图片在同一行显示。
图像默认以原始大小显示。如果图片很大又与文字处在同一行那么图片将把当前行的行高撑高并且图片的底边与文字的底边在同一条水平线上。
img可以放在a标签内部使得图片变成一个可以点击的链接。
a hrefexample.htmlimg srcfoo.jpg
/a
上面代码中图片可以像链接那样点击点击后会产生跳转。
1alt 属性
alt属性用来设定图片的文字说明。图片不显示时比如下载失败或用户关闭图片加载图片的位置上会显示该文本。
img srcfoo.jpg alt示例图片
上面代码中alt是图片的说明。图片下载失败时浏览器会在图片位置显示文字“示例图片”。
2width 属性height 属性
图片默认以原始大小插入网页width属性和height属性可以指定图片显示时的宽度和高度单位是像素或百分比。
img srcfoo.jpg width400 height300
上面代码中width属性指定图片显示的宽度为400像素height属性指定显示高度为300像素。
注意一旦设置了这两个属性浏览器会在网页中预先留出这个大小的空间不管图片有没有加载成功。不过由于图片的显示大小可以用 CSS 设置所以不建议使用这两个属性。
一种特殊情况是width属性和height属性只设置了一个另一个没有设置。这时浏览器会根据图片的原始大小自动设置对应比例的图片宽度或高度。举例来说图片大小是 800像素 x 800像素width属性设置成200那么浏览器会自动将height设成200。
3referrerpolicy
img导致的图片加载的 HTTP 请求默认会带有Referer的头信息。
referrerpolicy属性对这个行为进行设置。
4crossorigin
有时图片和网页属于不同的网站网页加载图片就会导致跨域请求对方服务器可能要求跨域认证。
crossorigin属性用来告诉浏览器是否采用跨域的形式下载图片默认是不采用。
简单说只要打开了这个属性HTTP 请求的头信息里面就会加入origin字段给出请求发出的域名不打开这个属性就不加。
一旦打开该属性它可以设为两个值。 anonymous跨域请求不带有用户凭证通常是 Cookie。 use-credentials跨域请求带有用户凭证。
下面是一个例子。
img srcfoo.jpg crossoriginanonymous //设置成为这样后就可以成功的加载不同域名的图片
crossorigin属性如果省略值的部分则等同于anonymous。
img srcfoo.jpg crossorigin
6loading
浏览器的默认行为是只要解析到img标签就开始加载图片。对于很长的网页这样做很浪费带宽因为用户不一定会往下滚动一直看到网页结束。用户很可能是点开网页看了一会就关掉了那些不在视口的图片加载的流量就都浪费了。
loading属性改变了这个行为可以指定图片的懒加载即图片默认不加载只有即将滚动进入视口变成用户可见时才会加载这样就节省了带宽。
loading属性可以取以下三个值。 auto浏览器默认行为等同于不使用loading属性。 lazy启用懒加载。 eager立即加载资源无论它在页面上的哪个位置。 img srcimage.png loadinglazy alt… width200 height200
由于行内图片的懒加载可能会导致页面布局重排所以使用这个属性的时候最好指定图片的高和宽。
示例 1、这是引用一张存在的照片br /img src../jpg.jpg width200 height200br /2、这是引用不存在的照片br /img src../123 alt当图片不存在时我就可以用来提示说明br /3、这时一张长宽都为300的照片:br /img src../jpg.jpg width300 height300 列表标签
列表是一系列排列好的项目主要分成两类有序列表和无序列表。
有序列表是每个列表项前面有编号呈现出顺序就像下面这样。
1. 列表项 A
2. 列表项 B
3. 列表项 C
无序列表则是列表项前面没有编号只有一个列表符号默认是一个圆点。
· 列表项 A
· 列表项 B
· 列表项 C
ol
ol标签是一个有序列表容器ordered list会在内部的列表项前面产生数字编号。列表项的顺序有意义时比如排名就会采用这个标签。
olli列表项 A/lili列表项 B/lili列表项 C/li
/ol
上面代码会在列表项 A、B、C 前面分别产生1、2、3的编号。
ol标签内部可以嵌套ol标签或ul标签形成多级列表。
olli列表项 A/lili列表项 Bolli列表项 B1/lili列表项 B2/lili列表项 B3/li/ol/lili列表项 C/li
/ol
上面代码中一个有序列表内部嵌套了另一个有序列表渲染结果如下。
1. 列表项 A
2. 列表项 B1. 列表项 B12. 列表项 B23. 列表项 B3
3. 列表项 C
该标签有以下属性。
1reversed
reversed属性产生倒序的数字列表。
ol reversedli列表项 A/lili列表项 B/lili列表项 C/li
/ol
上面代码中列表项 A、B、C 前面产生的编号是3、2、1。
2start
start属性的值是一个整数表示数字列表的起始编号。
ol start5li列表项 A/lili列表项 B/lili列表项 C/li
/ol
上面代码中列表项 A、B、C 前面产生的编号是5、6、7。
3type
ol typeali列表项 A/lili列表项 B/lili列表项 C/li
/ol
type属性指定数字编号的样式。目前浏览器支持以下样式。 a小写字母 A大写字母 i小写罗马数字 I大写罗马数字 1整数默认值
上面代码中列表项 A、B、C 前面的编号分别是英文小写字母a、b、c。
注意即使编号是字母start属性也依然使用整数。
ol typea start3li列表项 A/lili列表项 B/lili列表项 C/li
/ol
上面代码中type属性指定编号采用小写英文字母start属性等于3表示从c开始编号。
ul
ul标签是一个无序列表容器unordered list会在内部的列表项前面产生实心小圆点作为列表符号。列表项的顺序无意义时采用这个标签。
ulli列表项 A/lili列表项 B/lili列表项 C/li
/ul
上面代码的渲染结果是列表项 A、B、C 前面分别产生一个实心小圆点作为列表符号。
ul标签内部可以嵌套ul或ol形成多级列表。
li
li表示列表项用在ol或ul容器之中。
有序列表ol之中li有一个value属性定义当前列表项的编号后面列表项会从这个值开始编号。
olli列表项 A/lili value4列表项 B/lili列表项 C/li
/ol
上面代码中value属性指定第二个列表项的编号是4因此三个列表项的编号分别为1、4、5。
dldtdd
dl标签是一个块级元素表示一组术语的列表description list。术语名description term由dt标签定义术语解释description detail由dd标签定义。dl常用来定义词汇表。
dldtCPU/dtdd中央处理器/dd
dtMemory/dtdd内存/dd
dtHard Disk/dtdd硬盘/dd
/dl
dt和dd都是块级元素dd默认会在dt下方缩进显示。上面代码的默认渲染结果如下。
CPU中央处理器
Memory内存
Hard Disk硬盘
多个术语dt对应一个解释dd或者多个解释dd对应一个术语dt都是合法的。
dldtA/dtdtB/dtddC/dd
dtD/dtddE/ddddF/dd
/dl
上面代码中A和B有共同的解释C而D有两个解释E和F。
示例 olli有序列表1/lili有序列表2/lili有序列表3/li/olol reversedli有序列表1/lili有序列表2/lili有序列表3/li/olol start100li有序列表1/lili有序列表2/lili有序列表3/li/olol typeAli有序列表1/lili有序列表2/lili有序列表3/li/olulli无序列表1/lili无序列表2/lili无序列表3/li/uldl这是dldt这时dtdd这是dd/dd/dt/dl 以上只是列举了一些常见的标签
更多的文本标签可以参考HTML 标签参考手册
