html总结2 | 怪默

html

web

发布日期: 2020-07-21

作者: 怪默

文章字数: 1.6k

阅读时长: 6 分

阅读次数:

属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

class

规定元素的类名

class 属性大多数时候用于指向样式表中的类（class）。
不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。
类名不能以数字开头！
class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。

元素赋予多个 class，例如：<span class="left_menu important">。
在css中以.classname来引用全部，也可以具体引用，如 p.classname h1.classname。
classname不能以数字开头，只能以字母或下划线开头。区分大小写·。

id

规定元素唯一的id(类似与身份证号)

命名：
必须以字母 A-Z 或 a-z 开头
其后的字符：字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号(":") 以及点号(".")
区分大小写。
通过 #.idname 在CSS中引用

id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式

- 语法：`<a name="label">锚(显示在页面上的文本)</a>`

  name 属性规定锚（anchor）的名称。
  锚也可以是图片等。
  当使用锚时，我们可以创建直接跳至该锚(比如页面中某个小节)的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
  可以使用 id 属性来替代 name 属性，命名锚同样有效。

- 实例：创建一个锚`< a name="anwser">这是答案<a>`

    - 同一个文档中创建指向该锚的链接：`<a href="#this">隐藏在本文的答案</a>`
    - 其它文档中创建指向该锚的链接：`<a href="https://www.seaantwh.top/#this> 前往其它文档寻找答案<a>`

title

规定元素的额外信息（可在工具提示中显示）

这些额外信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

style

- 规定元素行内样式

   style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。
  `<element style="style_definitions">`，多个CSS属性和值用分号隔开。

其它

链接 `<a></a>`

创建链接

href属性
- 语法：<a href="url">Link text</a>
  
  url 可以为相对路径或绝对路径
- Link text 可以为文本，图片，其它HTML元素等
name属性

target属性

规定在何处打开链接文档。
如果在一个<a>标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

打开新窗口
- <a href="url" target="目标名">内容<a>
  
  若没有以此目标为名的窗口将打开新窗口，并将这个窗口标记为这个名字。
在框架中打开窗口

在一个 <frameset> 显示中将超链接内容定向到一个或者多个框架中。
将这个内容列表放入一个带有两个框架的文档的其中一个框架中
并用相邻的框架来显示选定的文档
- 在一个 <frameset>显示中将超链接内容定向到一个或者多个框架中。
- ```
<h3>Table of Contents</h3>
<ul>  
    <li><a href="pref.html" target="view_frame">Preface</a></li>  
    <li><a href="chap1.html" target="view_frame">Chapter 1</a></li>  
    <li><a href="chap2.html" target="view_frame">Chapter 2</a></li>  
    <li><a href="chap3.html" target="view_frame">Chapter 3</a></li>
</ul>
```
- 将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用相邻的框架来显示选定的文档

    <frameset cols="20%  80%">
      <frame src="toc.html">
      <frame src="pref.html" name="view_frame">
    </frameset>

保留的目标名

这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
- _blank
  - 浏览器总在一个新打开、未命名的窗口中载入目标文档。
- _self
  - 对没有指定目标的为默认
  - 在原来框架或窗口打开文档
- _parent
  - 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。
  - 如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
- _top
  - 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
- 当网页没有框架时，target="_self"和target="_parent"以及target="_top"三种方式的显示方式几乎相同。