整合营销服务商

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

免费咨询热线:

HTML常用标签

TML常用标签有:a标签、table标签、img标签、form标签和input标签。

a标签

作用

  1. 跳转到外部网页
  2. 跳转到内部锚点
  3. 跳转到邮箱或电话等

属性

(一)href

href是hyper reference的缩写,超链接的意思。

用于指定链接目标的ur地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能;
href=“#”表示这是一个空链接;
如果href里面地址是—个文件或者压缩包,会下载这个文件。

<a href="https://google.com">超链接到google网站的主页</a>
 <a href="https://google.com">超链接到google的主页</a>
 <a href="//google.com">超链接到google的主页</a>

展现形式:

点击此链接,即可到达google的主页

a标签href的取值:

1、上述代码中的网址的取值(推荐使用第三行的代码)

<a href="//google.com">超链接到google的主页</a>

由于此方式能够自动补齐相关的网络地址,前面两种写错就会报错,所以推荐使用。

2、路径

  • /a/b/c 或者是a/b/c

当前路径下的a里面的b,b里面的c

  • index.html 以及./index.html

在当前目录下寻找index.html文件

3、伪协议

  • javascript:代码;(冒号与分号一定要写)
<a href="javascript:;">点击后无任何点击或刷新等动作的反应</a>
  • 锚点链接
<a href="#要跳转的元素的id"></a>

点击链接的时候,会跳转到指定元素所在的位置。

  • mailto:邮箱
<a href="mailto:abcdefg@163.com ">发邮件给我</a>
  • tel:手机号
<a href="tel:12345678901">打电话给我</a>

(二)targe

用于指定链接页面的打开方式

a的target取值

1、内置名字

_blank 在空白页打开

_self 在当前页面打开

_parent 在父级窗口打开

_top 在最顶级的窗口打开

<a href="//google.com" target="_blank">超链接到google网站的主页在空白页打开</a>

2、程序员的命名

window:name(在xxx页面打开)

iframe的name(iframe现在已经很少使用了,是指内嵌窗口)


(三)download

下载页面,但目前很少用,有的浏览器不支持,尤其是手机浏览器可能不支持。

table标签

1、table标签的语法:

thead:表头

tbody:表的内容,用于定义

tfoot:表的脚部

tr:table row,表格里的行

th:表格的表头部分,其中的文本内容字体加粗居中显示

td:table data,表格数据,用于定义表格中的单元格

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>小红</th>
          <th>小黄</th>
          <th>小蓝</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>数学</th>
          <td>90</td>
          <td>60</td>
          <td>80</td>
        </tr>
        <tr>
          <th>语文</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
        <tr>
          <th>英语</th>
          <td>88</td>
          <td>95</td>
          <td>97</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总分</th>
          <td>266</td>
          <td>250</td>
          <td>274</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>



第一行的th标签为空

2、table的样式

table-layout:auto;自动计算每一行的宽高

table-layout:fixed;通过列表的宽度来决定平均宽度

border-collapse:collapse; 合并边框(默认边框与边框之间不合并)

border-spacing:0;边框为0.(边框与边框之间的距离)。

img标签(图片)

作用:发出get请求,展示一张图片。

<img src="1.JPG" alt="头像" width="400" />

当前路径下的1.jpg,确定宽度为400,只写宽度高度会自适应

属性

alt:alternate的缩写,替换的意思。替换文本,图像不能显示的文字。

路径错误显示alt内容

title:提示文本。鼠标放到图像上,显示的文字。

响应

max-width:100% 所有的图片在手机上都自适应宽度,宽度最大为100%。

事件

onload/onerror 监听图片是否加载成功,加载成功时用onload,不成功是用onerror事件。确保在onerror事件能够补救。

<body>
 <img id="xxx" src="dog.jpg" alt="一只小狗">
<script>
xxx.onload = function () {
console.log("图片加载成功");
 };
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/404.jpg";
 };
</script>
</body>

监听成功时,打印出成功

监听失败时,先打印出监听失败并且开始执行加载失败是的挽救图片。404.jpg文件执行

感想:

  • a标签的默认样式可以设置清除,href属性可以有好多种取值,a标签的意义也不仅仅是跳转到一个网址,还可以发邮件打电话。
  • 给img标签设置宽度和高度时,不能让图片变形
  • table标签必须按照thead,tbody,tfoot的结构去写,先划分好结构,再往里填充内容,即使tfoot写在前面,也会显示在页面的尾部

本文为作者本人的原创文章,著作权归作者本人和饥人谷所有,转载务必注明来源。

TML <base> 元素

指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

包含属性href 和

target 可以指定a 标签的默认窗口打开行为

<base href="https://www.baidu.com/img/123" target="_banlk"></base> 默认就打开新的窗口 <a href="aaa">123</a>

使用

<base href="https://www.baidu.com/img/"></base> <img src="bd_logo1.png?where=super"></img>

虽然在codepen 的代码上编写的但是能够正确的通过base url + img 的src 定位显示出图片

content 标签

HTML <aside> 元素

表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。

HTML <blockquote> 元素

(或者 HTML 块级引用元素),代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进(注 中说明了如何更改)。若引文来源于网络,则可以将原内容的出处 URL 地址设置到 cite 特性上,若要以文本的形式告知读者引文的出处时,可以通过 <cite> 元素。

HTML <figure> 元素

代表一段独立的内容, 经常与说明(caption) <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流(main flow)时,它的位置独立于主体。这个标签经常是在主文中引用的图片,插图,表格,代码段等等,当这部分转移到附录中或者其他页面时不会影响到主体。

Inline text semantics

HTML 缩写元素<abbr>

用于展示缩写,并且可以通过可选的 title 属性提供完整的描述。

ps: 完整描述样式貌似不能自定义

HTML键盘输入元素(<kbd>)

用于表示用户输入,它将产生一个行内元素,以浏览器的默认monospace字体显示。

HTML标记文本元素(< Mark >)

表示为引用或符号目的而标记或突出显示的文本,这是由于标记的段落在封闭上下文中的相关性或重要性造成的。

ps:项目中大量使用span 标记的做法不符合html5 的语义化

HTML Ruby Base(<rb>)

元素用于分隔<ruby>注释的基本文本组件(即正在注释的文本)。一个<rb>元素应该包装基本文本的每个单独的原子段。

ps: 拼音注解

<samp> 元素

用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体(例如 Lucida Console)。

HTML 中的<small>

元素將使文本的字体变小一号。(例如从大变成中等,从中等变成小,从小变成超小)。在HTML5中,除了它的样式含义,这个元素被重新定义为表示边注释和附属细则,包括版权和法律文本。

HTML <sub> 元素定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更低并且更小。

ps: 下脚标

HTML <sup> 元素定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更高并且更小。

ps: 上脚标

HTML <u> 元素

使文本在其内容的基线下的一行呈现下划线。在HTML5中, 此元素表示具有未标注的文本跨度,显示渲染,非文本注释,例如将文本标记为中文文本中的专有名称(一个正确的中文标记), 或 将文本标记为拼写错误

HTML <map>

与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).

HTML <track> 元素

被当作媒体元素—<audio> 和 <video>的子元素来使用。它允许指定计时字幕(或者基于时间的数据),例如自动处理字幕。

HTML <object> 元素

(或者称作 HTML 嵌入对象元素)表示引入一个外部资源,这个资源可能是一张图片,一个嵌入的浏览上下文,亦或是一个插件所使用的资源

ps: 支持引入的资源类型

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types

关于支持资源类型的测试

http://joliclic.free.fr/html/object-tag/en/index.php

TML文本是由 HTML命令组成的描述性文本,HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。下面是什么是html内容,希望对您有所帮助。

HTML(Hyper Text Mark-up Language )即超文本标记语言,是 WWW 的描述语言,由 Tim Berners-lee提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。这样,你只要使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。

HTML文本是由 HTML命令组成的描述性文本,HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息,主体包含所要说明的具体内容。

html是什么文件

HTML就是超文件标示语言(HyperText Markup Language)。主要是在浏览器中显示一份文件的内容。它本身并非程式设计,只不过是标示(Mark-up),用来强调及组织一般性的文字。HTML是由一些标记(tags)所构成,每个标记对浏览器下一个特定的指令,这些指令会告诉浏览器如何显示文件的内容。

编辑HTML不需要多么高级的软体配备,你只要有『记事本』这项软体就可以了。但记得,HTML文件的副档名有些奇怪,你必须设定为 .htm 或是.html 才行。

例如: index.htm是一个合法的HTML档名,但index.txt就不是了。你可能听过一些HTML的编辑程式如:HotDog 、CutrHTML ....等。对初学者而言,使用这些工具并不太好。虽然它们的设计目的是帮助你更容易使用HTML来工作。但不幸的是,其中有许多会将HTML的代码隐览起来,造成学习上的困难。

HTML由来

万维网上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。

在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。超级文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。

HTML特点

HTML(Hyper Text Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。

HTML文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入,这也是WWW盛行的原因之一,其主要特点如下:

1、 简易性,HTML版本升级采用超集方式,从而更加灵活方便。

2、可扩展性,HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证。

3、 平台无关性。虽然PC机大行其道,但使用MAC等其他机器的大有人在,HTML可以使用在广泛的平台上.