整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html基础必备-链接标记,前端小白一看就会

链接允许你通过单击链接文本从一个页面跳到另一个页面,还可以跳转到同一页面上的其他位置(称为片段)、你网站的不同部分或跳转到别的网站。

链接 - <a href="url">link text</a>

link标记有两个主要部分:用户可以点击的文本,以及点击链接时访问的网址。<a>和</a>标记之间是链接文本,通常以蓝色显示,并由浏览器加下划线。href=“url”部分是网址,可以通过多种方式设置url:

  • href="example.html" - 当前目录的其它页面
  • href="example/page.html" - 相对位置,其它目录的页面
  • href="http://www.example.com/page.html" - 其它网站的页面

链接到片段 - <a href="#fragment">link</a>

链接到同一个网页上的其他地方,如页面下方的其他部分或章节,跳转到这些部分通常是有用的,称为链接到片段,浏览器将自动尝试滚动到页面该部分。

片段首先需要在网页的某个地方定义,方法是给它们一个名称,例如<a name=“fragment_name”>,然后使用hash(#)字符创建指向该片段的链接:<a href=“#fragment_name”>链接</a>。要链接到另一个页面上的片段,只需将片段名称附加到地址,例如:href=“example.html#fragment_name".

目标窗口 - <a href="url" target="???">link</a>

你可能并不总是希望为了链接到某个页面并将其加载到当前窗口上。这就是target属性派上用场的地方。通过设置target=“_BLANK”,把页面将加载到一个新窗口(或新选项卡)。类似地,“_self”、“_parent”或“_top”将分别在当前窗口、父窗口(与框架一起使用)或顶层窗口中打开链接。

图像链接- <a href="url"><img ...></a>

通过在<a>和</a>标记之间放置一个图像标记,可以将图像转换为链接,单击该图像后将加载引用的页面。你可能会注意到,当链接文本变为下划线时,图像得到一个蓝色边框。这可以通过设置图像的border=“0”属性或使用css来解决。

邮件链接 - <a href="mailto:email"></a>

mailto符号链接是一种特殊的链接,它指示浏览器使用默认的电子邮件程序编写邮件并发送到指定的地址,注意的是该操作不会自动发送任何电子邮件。

谷歌统计,全球有700多种编程语言,是不是听上去很耸人听闻?!现今,各种框架和各种编程语言一直是你方唱罢我登场,来来往往。

而对于HTML,不管你习惯与否,它始终在那。无论选择哪种框架或后端语言,所有Web开发人员都必须躲不开使用HTML。个人认为,即使是实现相同的功能,最好还是使用HTML编写,而非JS,尽管我也承认编写HTML可能显得比较“重体力”,而且很无聊。

HTML有如此广泛的用途和“坚强的生命力”,仍有开发人员所不太知晓的标签和属性。以下是您应该了解的5个HTML标记和属性:


1 . 懒加载图片

懒加载避免加载浏览器上那些不需要去即可加载的图像,而是当向下滑动页面或接近图像时,图像才开始加载。

换句话说,当用户下滑页面时加载图像,呈现他们,否则不做加载。懒加载图像可以帮助提高网站性能和响应速度。

这可以通过HTML轻松实现,所要做的就是将loading= “lazy”属性添加到图像文件中。

添加属性后,我们的图片元素会是这样:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

通过使用Google的Lighthouse工具,你可以get到相关的一些技巧。

相关地址:https://developers.google.com/web/tools/lighthouse/


2 . 输入推荐

用户在做搜索录入时,如果能够拿到相关的输入内容推荐,应该会提升使用体验。

如今,输入补全推荐功能是相当普遍的,你可以在天猫、头条、抖音等太多平台见到。你可以通过JS添加输入补全推荐,方法是在输入字段上设置事件侦听,这样能够把搜索到的词条与预定义推荐进行匹配。

但是,通过HTML也可以使用<datalist>标签显示一组预定义的补足推荐,需要注意下,此标记的ID属性必须与输入字段列表属性相同。

<label for="country">Choose your country from the list:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
  <option value="UK">
  <option value="Germany">
  <option value="USA">
  <option value="Japan">
  <option value="India">
</datalist>


3 . 图片标签

你是否曾经遇到图像无法按预期缩放的情况?我是遇到过的,譬如当我要使用大图,同时把它显示为缩略图时,很可能会发生这种情况。

更改viewport width时,你会注意到某些图像未按预期缩放。幸运的是,HTML通过使用<picture>标记使开发人员很容易地解决这个问题,该标记允许你添加适合不同宽度的多个图像,而不必单个缩放。

如下所示:

<picture>
  <source media="(min-width:768px)" srcset="med_flag.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flag.jpg" alt="Flags" style="width:auto;">
</picture>

如你看到的,我们指定了必须显示特定图像的最小宽度。

这个标签和<audio><video>标签非常相似。


4 . base URL

在创建网站索引或站点地图的时候,这应该算是我最喜欢的标签之一。

如果我们有很多锚标签重定向到某个URL,并且所有URL都以相同的base address开头时,这个标签应该非常有用。

例如,如果我要指定zhang san和wang er的微博handles的URL,则URL的开头会相同,而其后是它们各自的ID。通常,我必须将链接与相同的域名一起粘贴两次。

不过,HTML有一个<base> tag,这使我可以设置基本URL的标记,如下所示:

<head>
  <base href="https://www.weibo.com/" target="_blank">
</head>
<body>
<img src="zhangsan" alt="Zhang San">
<a href="wanger">Wang Er</a>
</body>

上面的代码将生成一个图像重定向到“ https://www.weibo.com/zhangsan”和一个锚标记重定向到“ https://www.weibo.com/wanger”。

这个<base> tab应该要么是具有“href”或是所提供对象的属性。


5 . 文档刷新

如果要把用户重定向到另一个页面,那么是可以用纯HTML来轻松实现的。

过往你打开某些网站的时,可能注意到了这个功能:弹出“你会在5秒钟内被重定向”。

你是可以通过<meta> tab,并对它进行设置http-equiv= “refresh”从而使用它。

<meta http-equiv="refresh" content="4; URL='https://google.com' />

在此,content属性指定重定向发生的秒数。


HTML加CSS是很强大,我们其实是可以仅使用它们两就构建出像样的网站的,只要你足够沉浸于其中,不断学习。

TML是一种标记语言,描绘文档如何格式化,如使用什么字体等。使用标记语言,而不是显式的标记,可以在写浏览器时更方便:浏览器只要能理解这些标记命令就行。这种方式以所见即所得的系统相反,如WORD,它用隐含的嵌入标记保存文件,并用于以后再生。asp网站教程以下介绍HTML语言。

在HTML文件中嵌入标记命令,并使之标准化,使Web浏览器能够读并再格式化任何Web页,这点非常重要,因为页面可能在1024*768、24显示器上产生,而要在640*480、8位色下显示。在Web上无法使用所见即所得的字处理器,因为它们内部的标记语言没有标准化,而且也不能在不同尺寸的不同显示环境下再次格式化。但是,字处理器的文本通常可以保存为HTML格式。

Web页由头和体构成,以<HTML>和</HTML>标记括起来。头在<HEAD>和</HEAD>中,体在<BODY>和</BODY>中,标记中的命令叫directive。大多数标记都是这种格式:即以<SOMETHING>标记某事的开始,以</SOMETHING>标记该事的结束。标记大小写均可。

HTML忽略多余的空格和回车,因此不能用空行来分开段落,必须用显式的标记。

一些标记携带参数,如: <IMG SRC=”abc” ALT=”foobar”>

其中参数SRC等于abc,ALT等于foobar,由于参数是命名的,所以顺序无关紧要。

1、创建基本的网页

请看下面这段语句:

<!-- I am ignored by everybody -->

<HTML>

<HEAD>

<TITLE> Less Minimal </TITLE>

</HEAD>

<BODY>

Hello World!

</BODY>

</HTML>

如果在浏览器中显示这个网页,将会显示“Hello, world!”。由<TITLE>及</TITLE>标记包含的文本只出现在网络浏览器的标题栏上,而不在网页上出现。〈BODY〉标记表明了你的HTML文件的主体部分,所有需要在的浏览器上显示的文本及标记都应该被放置在这里。例如,Hello World! 被放置在此。标记<!……>被用来在文件中加入注释,这些注释并不在主页上显示出来。

基本的常用标记:

<BR> 能显示多行文本,但它不是一个容器标记,就是说,并不需要类似</BR>的符号。

被称为段落标记,因为用它来创建段落,与<BR>相比,两行之间会有较多的空格。缺省情况下,<P>使文本在屏幕上左对齐,因此你不需要在你HTML文件中使用<P ALIGN="LEFT">。

<PRE> 假如你有一些文本让它们在屏幕上精确的显示出来,或是你想让每个输 入的空格正如您所料的那样显示,可以将文本放入其中。但是当在浏览显示处于<PRE>标记中的文本时,这些文本显示出来非常难看,不易阅读。因此,尽可能不要使用它。这样使用低分辨率屏幕的用户将会减少麻烦。

<HR> 用来建立水平分隔线――用来在屏幕上分割文本的水平线。例如:<HR WIDTH=”640”>或<HR WIDTH=”100%”>。

<FONT> 用来定义字体,它具有三个属性:SIZE、COLOR和FACE。其中FACE,可以指定文本的字体,例如<FONT FACE=”Courier”>。

<H(1-6)> 加入标题。通过给标记指定不同的数字来规定他们的大小,有6种大小的标题。例如由<H1>包含的文字在在浏览器上显示是最大的,而由<H^>包含的文字显示出来最小。

使文字以黑体显示。

让文字以斜体显示。

加下划线。原则上不要去使用<U>标记,通常网页中带下划线的文字表示这是一个超连接,使用<U>会给用户带来困惑。

加删除线。

<A> 用来建立一个超文本定位器。如<A HREF=http://www.hotwired.com> HotWired </A>,浏览器上显示出的HotWired带有一道下划线,这就告诉用户这是一个超连接,如果用鼠标点击这个字符,那么HotWired网点的主页就会在你的浏览器上显示出来。也可以用图象来建立连接,如:<A HREF=”http://www.yahoo.com”><IMG SRC=”myimage.gif”></A>

2、创建表单(form)

要建立一个交互式的网点,需要使用HTML表单,它可以收集参观你网点的用户提供的信息,并对此作出反应。使用表单,可以建立类似复选框、单选按钮及文本框的控件。

掌握表单的使用对高效的Active Server Pages编程是必需的。ASP脚本的一个主要功能是对HTML表单中输入的信息进行处理,因此,表单是ASP应用程序中主要的用户接口。

要建立HTML表单,可以使用<FORM>标记,它是一个容器标记,包含其它表单元素并在它的属性中指明对于此表单中收集的信息应怎样处理。需要注意:

1)要知道表单何时输入信息完毕,需要加入一个表单元素:submit按钮。

2)必须通过<FORM>的ACTION属性来通知表单怎样处理这些信息。ACTION属性决定了窗体对输入的信息将会采取何种方式处理。通常是处理程序名。

3)<FORM>的METHOD属性指明窗体信息通过什么方式送出。通常为POST。

4)正如在文件主体中使用HTML标记一样,也可以在<FORM>标记中使用几乎所有的HTML标记。

基本的表单元素有:

1)文本框:用<INPUT>标记来建立,一般需要包含NAME属性。下面的例子包含了两个名为text1和text2的文本框:

<HTML>

<HEAD>

<TITLE> Simple Form </TITLE>

</HEAD>

<BODY >

<FORM ACTION=“somedirectory/mypage.asp” METHOD=“POST”>

<INPUT NAME=“text1” TYPE=“text”>

<INPUT NAME=“text2”>

<INPUT TYPE=SUBMIT VALUE=”Submit Me!”>

</FORM>

</BODY>

</HTML>

也可以使用<INPUT>的VALUE属性来指定在用户输入前缺省状态下文本框中显示的文字。例如,假设你有一个文本框,让用户在其中输入他的国别,你预计你的大部分用户都是美国人,你可以使用下面的语句将缺省国别设为美国:

<INPUT NAME=“country” VALUE=“USA”>

当你显示这个后的HTML文件时,出现了一个具有Submit Me!文字的按钮,用鼠标点击这个Submit Me!按钮,你就表明你已经在这个文本框中输入完信息了。这就通知浏览器它应该对输入的信息进行处理。

2)按钮。在HTML窗体中典型使用的按钮有三种:

第一种是Submit按钮,当你点击Submit按钮时,窗体由<FORM>的ACTION属性所指定的程序进行处理;Submit按钮的用法如下所示:

<INPUT TYPE=SUBMIT VALUE=“Do it!”> VALUE属性的值决定了在按钮上显示的文字。

第二种是图形按钮,与Submit按钮的效果几乎是一样的,然而这种类型的按钮显示出来是一幅图象,而不是一个难看的灰色矩形框,如

<INPUT TYPE=IMAGE SRC=“myimage.gif” BORDER=0>

应当把BORDER属性的值设为零,来隐藏在诸如Netscape Navigator这样的浏览器上显示时,会出现在图象周围的黑框。

最后一种按钮类型是reset按钮。当用户点击reset按钮后,所有的窗体内容都恢复到它们初始的值。例如,没有缺省值的文本框将被清空,而用VALUE属性指定了值的将回到初始的特定值。与Submit按钮的情况一样,通过VALUE属性指定显示在reset按钮上的文字。如:

<INPUT TYPE=RESET VALUE=“Clear Me!”>

窗体用户点击标有Clear Me!的按钮后,所有窗体值都被清除并回到初始状态的值。

3)密码框:假设想让用户在参观你的网点之前先进行注册,使用通常的文本框,你可以建立一个HTML窗体来获得用户的名字和密码,但是你不想让用户在输入他们的密码时,有人在他们的背后偷看。要保护用户的密码,就要使用密码输入框。密码框的工作原理与文本框类似,只是当信息输入时是隐藏的。如:

<FORM ACTION=“somedirectory/mypage.asp” METHOD=“POST”>

Please enter your name and password:

<BR> Name: <INPUT NAME=“username”>

<BR> Password: <INPUT NAME=“password” TYPE=PASSWORD>

<INPUT TYPE=SUBMIT VALUE=“Continue”>

</FORM>

当上例的HTML文件在网络浏览器上显示时,你可以在密码框中输入文字,就如同在一般的文本框中输入一样。然而,所有输入的文字都被隐藏了(通常是*号)。

4)复选框:可用一个名字来建立多个复选框来收集信息。例如,你想知道参观你网点的人是如何发现它的,而且你想提供用户发现你网点的各种可能途径,你可以使用下列的HTML代码:

<FORM ACTION=“somedirectory/mypage.asp” METHOD=“POST”>

<BR> How did you find out about this web site?

<BR> Magazine: <INPUT NAME=“discover” TYPE=CHECKBOX VALUE=“Magazine”>

<BR> Search Engine: <INPUT NAME=“discover”TYPE=CHECKBOX VALUE=“Search”>

<BR> Friend: <INPUT NAME=“discover” TYPE=CHECKBOX VALUE=“Friend”>

<BR> <INPUT TYPE=SUBMIT VALUE=“Submit Me!”>

</FORM>

5)单选按钮:你可以在多个值之间进行选择,然而与复选框不同,用户一次只能选择一个单选按钮。例如,假设你需要知道浏览你网页的人的性别,你就可以使用单选按钮来让用户选择他们的性别。下面的例子说明了怎样去做:

<FORM ACTION=“somedirectory/mypage.asp” METHOD=“POST”>

<BR> Please indicate your sex:

<BR> Male: <INPUT NAME=“sex” TYPE=RADIO VALUE=“male”>

<BR> Female: <INPUT NAME=“sex” TYPE=RADIO VALUE=“female”>

<BR> <INPUT TYPE=SUBMIT VALUE=“Submit Me!”>

</FORM>

6)下拉式列表框:显示一个选择菜单,可以用来代替复选框和单选按钮。使用<SELECT>和<OPTION>标识符来建立一个下拉式列表框,象下面的例子:

<FORM ACTION=“somedirectory/mypage.asp” METHOD=“POST”>

<BR> Please indicate your sex:

<BR> <SELECT NAME=“sex”>

<OPTION VALUE=“Is Male”>Male

<OPTION VALUE=“Is Female”>Female

</SELECT>

<INPUT TYPE=SUBMIT VALUE=“Submit Me!”>

</FORM>

<SELECT>的SIZE属性可以将一个下拉式列表框转变成一个滚动列表框,SIZE属性指定了一次在屏幕上可显示多少选项。

建立表格

由三个标记共同完成的<TABLE>、<TR>和<TD>。

<TABLE>的BORDER属性在表格周围显示一个边框,可以通过为BORDER属性设置不同的值来改变边界的宽度。显然,如果不使用BORDER属性,显示出来的表格就没有边界。

<TR>标记为表格添加一行。

<TD>标记用来包含实际的表格数据。可以将<TD>看作表格的列标记,表格可以根据需要设置许多列。<TD>标识符可以包含任意可在HTML文件主体中出现的标识符。例如,<TD>可以包含图象、超链接和窗体,甚至它还可以包含其它表格。

建立表格时,一般你应当先建立行,然后在行中建立列。

例如,要建立一个许多城市及其区域编码的表格,可以使用下面的方法实现:

<TABLE BORDER=1>

<TR>

<TD> Boston </TD>

<TD> 617 </TD>

</TR>

<TR>

<TD> Modesto </TD>

<TD> 209 </TD>

</TR>

<TR>

<TD> San Francisco </TD>

<TD> 415 </TD>

</TR>

</TABLE>

在此例中,<TR>用来建立三个行,每一行对应一个城市;每一行又用<TD>标识符建立了两列,用来存放城市名及其编码。

使用窗口和框架

框架可以看作是窗口中的不同区域,一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个的框架也可以分成其它多个框架,即所谓的嵌套框架。

要在浏览器窗口中建立框架,必须创建一个特殊的HTML文件称作frameset文件。frameset文件本身并不在网络浏览器中出现,它只是指明其它的网页是怎样显示在浏览器中的。下面是一个简单的frameset文件的例子:

<FRAMESET ROWS=“100%” COLS=“50%,50%”>

<FRAME SRC=“mypage1.cfm”>

<FRAME SRC=“mypage2.cfm”>

</FRAMESET>

当这个frameset文件读入浏览器中时,浏览器会显示两个HTML文件mypage1.cfm和mypage2.cfm,它们都是普通的HTML文件,frameset文件通知浏览器这两个文件应当分别显示在两个框架中。

<FRAMESET>标识符指定了框架在浏览器窗口中显示的方式,这个标识符将浏览器窗口分成多行和多列。在此例中,浏览器窗口被分成一行和两列,属性ROWS=“100%”,使框架具有整个浏览器窗口的高度;属性COLS=“50%,50%”使框架分成两列,每列都具有窗口宽度的一半。

本文是成都网站建设公司、成都网站设计制作公司、成都APP开发公司、成都响应式网站建设、成都VR全景制作-桔子科技公司为您整理!