属性 | 描述 |
---|---|
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |
id |
id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。
属性值
值 | 描述 |
---|---|
id | 规定元素的唯一 id。 命名规则:
|
HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容,使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。
实例
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
HTML 文本格式化标签
标签 | 描述 |
---|---|
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
HTML <pre> 标签
<pre> 标签可以保留您需要的文本格式,比如不会取消换行和空格,并且所示文本是等宽的
标签定义及使用说明
<pre> 标签可定义预格式化的文本。
被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
注意:<pre> 元素是块级元素,但是只能包含文本或行内元素,任何块级元素(常见为可以导致段落断开的标签:例如<title>、<p> 和<address> 标签)都不能位于 <pre> 元素中。
HTML 超链接(链接)
HTML使用标签 <a>来设置超文本链接,是可以从一个页面指向另一个目的端的链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带上下划线
- 点击链接时,链接显示为红色并带上下划线
注意:如果为这些超链接设置了CSS样式,展示样式会根据CSS的设定来显示
注意:如果为这些超链接设置了CSS样式,展示样式会根据CSS的设定来显示
HTML 空链接
HTML 空链接:指指向链接后,鼠标变成手形,但单击后仍停留在当前页面。
临时加的空链接,主要为了能更好的看到最终的效果。
基本语法:
<a href="#">链接文字</a>
其中“ # ”表示空链接。
实例
<a href="#">W3CSchool</a>
HTML 链接语法
链接的 HTML 代码很简单。它类似这样::
<a href="url">Link text</a>
href 属性描述了链接的目标。.
Example
<a href="//www.w3cschool.cn/">Visit W3CSchool</a>
上面这行代码显示为:: Visit W3CSchool
HTML 链接 - target 属性
使用 Target 属性,你可以定义被链接的文档在何处显示(在新的窗口打开,还是在原有的窗口中打开)。
下面的这行会在新窗口打开文档:
使用 <base> 定义页面中所有链接默认的链接目标地址。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head>
<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.w3cschool.cn/statics/images/w3c/logo.png"
<br><br>
<a href="http://www.w3cschool.cn">W3Cschool教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
最好的方式是通过外部引用CSS文件.
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>