HTML a 标签的基本用法和常用属性

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML a 标签的基本用法和常用属性相关的知识，希望对你有一定的参考价值。

a要怎么使用？

a标签一般用作建立超链接，基本写法<a href="链接到的地址">链接内容</a>，href为a标签的基本属性，定义链接的地址，还有title属性定义a标签的说明,target定义链接被打开发方式，除此之外，还有一些不常用的如：download定义下载链接目标，hreflang定义链接的语言，media定义链接的媒介等等，你可以百度a标签，会有更加详细的介绍 参考技术A

1.href属性：用于指示链接的目标，该属性对于a标签来说必不可少。

<a href="https://www.developgeek.com/">言成科技</a>

2.title属性：当用户的鼠标移入超链接时，会显示title属性的具体属性值

<a href="https://www.developgeek.com/" title="链接将跳转到言成科技">言成科技</a>

3.target属性；用于控制链接页面打开的位置。

_blank：浏览器总在一个新打开、未命名的窗口中载入目标文档

 <a href="https://www.developgeek.com/" title="链接将跳转到言成科技" target="_blank">言成科技</a>

_self：默认状态，在当前页面/目标中打开被链接文档

<a href="https://www.developgeek.com/" title="链接将跳转到言成科技" target="_self">言成科技</a>

Tips：所有属性当中，使用最为频繁的是_self和_blank，由于默认打开方式为_self，所以，通常在需要打开新页面时才会使用target=“_blank”的属性设置。对于_parent、_top、framename，当前都已经不再使用，此处便不再提及。

想了解更多，请点击：《如何实现兼容IE6的a标签鼠标移入效果（hover效果）》

HTML常用标签元素

一、基本概念

1、标签：HTML用于描述功能的符号称为“标签”，它是用来表现组成HTML文档的最基本的部件--HTML元素的。起始标签和终止标签之间的内容称为元素内容。

2、属性：在元素的起始标签中，可以设置1个或多个属性来控制标签的显示效果，格式为<标签名称 属性名 = “属性值”>

二、基本结构元素

HTML的基本结构元素主要有3个，它们是<html>、<head>和<body>元素，每个网页页面一般都包含这3个元素，而且它们只能出现一次。

1、<html>元素：Html标签：是包裹整个页面元素的根元素，它告诉浏览器整个文件是HTML格式，通常情况下document.documentElement(页面根元素)获取的就是html标签。

2、<head>元素：头部标签，用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等，主要包含meta标签、title标签、link标签（引入CSS）、script标签（引入CSS）等。

3、body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本（<text>）、段落（<p>）、标题（<h1>）、换行（<br>）、分隔线(<hr>)、超链接（<link>）、图像（<img>）、表格（<table>）和列表（<ul>）等等。）

4、其它标签：

　　4.1、<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

　　4.2、<meat>标签：提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词，<meta> 标签的属性定义了与文档相关联的名称/值对。比如<meta charset="utf-8" />，定义了文档以utf-8编码。

　　4.3、<title>标签：页面的标题，设置之后将在浏览器选项卡看到。

5、一个简单的小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我喜欢的唐诗</title>
</head>
<body>
    <h1>我喜欢的唐诗</h1>
    <div>
        <h2>早发白帝城</h2>
        <p>
            朝辞白帝彩云间，<br>
            千里江陵一日还。<br>
            两岸猿声啼不住，<br>
            轻舟已过万重山。
        </p>
    </div>
    <hr>
    <div>
        <h2>静夜思</h2>
        <p>
            床前明月光，<br>
            疑是地上霜。<br>
            举头望明月，<br>
            低头思故乡。
        </p>
    </div>
</body>
</html>

三、常用标签

1、下边列出部分常见的html4标签

常见标签列表
标签名 含义 属性值 h5中的新属性 备注（说明）
link - href（CSS地址）

属性：size

值：heightxwidth、any

描述：规定被链接资源的尺寸。仅适用于 rel="icon"

1.link 元素是空元素，它仅包含属性

2.此元素只能存在于 head 部分，不过它可出现任何次数 
script - src（JS地址）

属性：async

值：async

描述：规定异步执行脚本（仅适用于外部脚本） 

1.假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行

2.此元素的代码最好写在dom节点之后，否则可能会阻碍节点的渲染加载 
div 分割 - -  <div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符 
table 表格 - -  - 
span 范围 - -  - 
a 锚 href(跳转地址)

属性：download

值：filename

描述：规定被下载的超链接目标。

属性：media

值：media_query

描述：规定被链接文档是为何种媒介/设备优化的

属性：type

值：MIME type

描述：规定被链接文档的的 MIME 类型 

1.如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性

2.被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）

3.需用 CSS 来设置链接的样式 
p 段落 - -  - 
form 表单 action（表单提交地址）

属性：autocomplete

值：on/off

描述：规定是否启用表单的自动完成功能

属性：novalidate

值：novalidate

描述：如果使用该属性，则提交表单时不进行验证 

 form 元素是块级元素，其前后会产生折行 
h1~h6 标题 - -  - 
ul 无序列表 - -  用 CSS 来定义列表的类型 
li 列表项 -  - 用 CSS 来定义列表和列表项目的类型 
img 图片 src(显示的图片的地址) - 

1.从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间

2.有两个必需的属性：src属性 和 alt属性（alt="文本"如果无法显示图像，浏览器将显示替代文本） 
input 用于搜集用户信息 type(类型)    
iframe 内联框架 Src（显示的文档的地址)

属性：sandbox

值：“”/allow-forms/allow-same-origin/allow-scripts/allow-top-navigation

描述：启用一系列对 <iframe> 中内容的额外限制

属性：seamless

值：seamless

描述：规定 <iframe> 看上去像是包含文档的一部分

 属性：srcdoc

值：HTML_code

描述：规定在 <iframe> 中显示的页面的 HTML 内容

  可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器

备注：“-”表示没有改解释。h5中的新属性了解即可，应用还不是很频繁

2、常用的块状元素

块状元素，占行，如div，p，h1~h6，每一个块状标签都独占一行

3、常见的行内元素

行内元素（内联元素），不占行，如input，span，a，将在同一行共同显示

4、常见的列表元素

　　4.1、概念

　　<ul>（unordered）:无序列表，故元素所包含的列表项将以粗点的方式显示

　　<ol>（ordered）：有序列表，故元素所包含的列表项将以顺序数字的方式显示

　　<li>(list item):列表项，<li>元素被包含在<ul>或<ol>元素中

　　4.2、demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
        <h2>一个无序列表</h2>
        <ul>
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
        </ul>
    <hr>
        <h2>一个有序列表</h2>
        <ol>
            <li>咖啡</li>
            <li>茶</li>
            <li>牛奶</li>
        </ol>
</body>
</html>

 

5、常用的表格元素

　　5.1、概念

　　　　表格由<table>标签来定义。每个表格均有若干行（由<tr>标签来定义），每行被分割为若干单元格（由<td>标签定义）

　　5.2、demo　　

<table border="1">
           <tr>
               <th>海绵宝宝</th>
               <th>柯南</th>
           </tr>
           <tr>
               <td>good boy</td>
               <td>clever boy</td>
           </tr>
 </table>

 

以上是关于HTML a 标签的基本用法和常用属性的主要内容，如果未能解决你的问题，请参考以下文章

HTML常用标签元素

HTML常用标签和属性

html5常用标记及用法？

FE前端学习第二阶段任务

body标签的常用的属性都有哪些

UISegmentedControl的常用属性和用法