html学习笔记（一）

Posted on | In |

html 决定页面放什么东西

HTML 图像

使用 标签定义 HTML 页面中的图像。 标签有两个必需的属性：src 和 alt。

src属性

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

1
2
<img src="url" alt="some_text">
URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3cschool.cn 的 images 目录中，那么其 URL 为 //www.w3cschool.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

alt属性

alt 属性， 是当图片无法显示时的替代文本。alt 属性对于盲人或视觉障碍的用户理解图片中的内容非常重要，搜索引擎也会搜索alt 属性来了解图片的内容。

总而言之，alt 属性是一个必需的属性，为页面上的图片都加上 alt 属性是好习惯。

HTML 链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
<a href="#">链接文字</a>
<a href="http://www.w3cschool.cn/" target="">访问W3Cschool教程!</a>

<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>

</body>
</html>

HTML 空链接

HTML 空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。

临时加的空链接，主要为了能更好的看到最终的效果。

基本语法：

链接文字
其中“ # ”表示空链接。

实例

W3CSchool

HTML 链接语法

链接的 HTML 代码很简单。它类似这样：:

Link text
href 属性描述了链接的目标。.

Example
Visit W3CSchool
上面这行代码显示为：: Visit W3CSchool

点击这个超链接会把用户带到 W3CSchool 的首页。

提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

1
<img src="www.your-image-source.com/your-image.jpg" alt="your alt text">

HTML 使用#符合设置固定链接
有时你想要在你的网站上添加一个 a 元素，但你还不知道将它链接到哪里，这时你可以使用固定连接。

当你使用 jQuery 更改链接的行为时，这也很方便，我们稍后将会了解。

把 a 元素的 href 属性的值替换为一个 # （# 也称为哈希符号），将其转换为一个固定链接。

HTML 链接 - target 属性

默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 “_blank” 则文档就会在新窗口打开。

1
<a href="//www.w3cschool.cn/" target="_blank">访问W3CSchool教程!</a>

HTML 链接 - id 属性