HTML
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
超文本:最早的互联网只能显示文本
标记: 这种标签
HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML的基本格式
<html>
<head>
</head>
<body>
</body>
</html>
头部:规定网页的辅助信息
主体:规定窗口内显示的内容
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如
HTML 标签通常是成对出现的,比如 和
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
Web 浏览器
Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。
浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:
格式规则
(1)标记一般成对出现,例如
<body> </body>
(2)空白字符一般不影响显示 可随意换行
(3)注释用<!-- xxxxxxxx -->
显示
源码与执行
源码:开发人员写的网页源码
执行:用户在浏览器打开网页,查看网页
浏览器是一个能够解释执行源码的工具
HTML 标题
HTML 标题(Heading)是通过
-
标签来定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
HTML 段落
HTML 段落是通过标签 <p>
来定义的。
<br>
是用来分行的。<br/>
和<br>
等效。
<p>这是一个段落。</p>
<br>
<p>这是另外一个段落。</p>
HTML 图像
HTML 图像是通过标签 <img>
来定义的.
<img src="/images/logo.png" width="258" height="39" />
注意: 图像的名称和尺寸是以属性的形式提供的。
注意:指定src路径的时候不能使用本地路径
HTML 超链接(链接)
HTML使用标签 <a>
来设置超文本链接。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签<a>
中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。
注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
HTML 链接语法
链接的 HTML 代码很简单。它类似这样:
<a href="url">链接文本</a>
href 属性描述了链接的目标。. 指向了目标资源的地址。
实例
<a href="https://www.runoob.com/">访问菜鸟教程</a>
上面这行代码显示为:访问菜鸟教程
点击这个超链接会把用户带到菜鸟教程的首页。
提示: “链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
HTML 链接- id 属性
id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。
实例
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id=“tips”)":
<a href="#tips">访问有用的提示部分</a>
或者,从另一个页面创建一个链接到"有用的提示部分(id=“tips”)":
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>
基本的注意事项 - 有用的提示
注释: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href=“https://www.runoob.com/html”,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href=“https://www.runoob.com/html/”。
超链接实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1> 年华 </h1>
<p>
又是一年, 盛开的花。 <br>
花边娃儿, 正在长大。<br>
昨日少女, 快有人家。<br>
乱了头发, 长了年华。 <br>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1> 江山定 </h1>
<p>
风雨遮前路, <br>
冰火伴我行。 <br>
一度波澜惊, <br>
而今江山定。 <br>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1> 目录 </h1>
<a href="p1.html" > 年华 </a> <br>
<a href="p2.html" > 江山定 </a> <br>
</body>
</html>