转载: HTML 简介
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img src="/images/logo.png" width="258" height="39" />
<h1>标题1</h1>
<p>这是一个段落。</p>
<h1>标题1</h1>
<p>这是一个段落。</p>
<h2>标题1</h2>
<p>这是一个段落。</p>
<a href = "http://www.runob.com">runoob</a>
</body>
</html>
- 标题(Heading)是通过
<h1> - <h6>
标签来定义的 - 段落是通过标签
<p>
来定义的 - 链接是通过标签 来定义的.
- 图像是通过标签 来定义的
<img scr = " *.png" width = " *" height = " *" />
元素
- <起始标签(+属性)>+元素内容+</ 闭合标签>
<p>****</p>
<a href = "default.htm">***</a>
<br>
换行
属性
- 元素可以设置属性
- 属性一般属于开始标签
e.g.
<a href = "http://www.runoob.com">这是一个链接</a>
- 要求:使用小写和""双引号,不过单引号也可以。
- HTML属性列表
HTML 标签参考手册 - 主要属性:
class: 为html元素定义一个或多个类名名(classname)
id:定义元素的唯一ID
style:规定元素的行内样式
title:描述了元素的额外信息
标题(heading)
<h1>-<h6>
- 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
水平线
<hr>
注释
<! -- 这是一个注释 -->
如何查看源代码
- 单机网页右键
- 查看源文件(IE)或者查看页面源代码(firefox)
段落
<p>这是一个段落</p>
换行
<p>这个<br>段落<br>演示了分行的效果</p>
输出-使用提醒
- 多余的空格和空行,都会被显示为一个空格
<DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>runoob.com</title>
<head>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。
</p>
<p>注意,浏览器忽略了源代码中的排版(省略了多余的空格和换行)。</p>
</body>
</html>
文本格式化
- 加粗
<b></b>
- 斜体
<i></i>
- 下标*(subscript)
<sub></sub>
- 上标( superscript)
<sup></sup>
- 缩小
<small></ small>
- 插入字
<ins></ ins>
- 删除字
<del></ del>
- 电脑自动输出
<code></code>
引用,引文及标签定义 - 短引用
<q></q>
- 长引用
<blockquote></ blockquote>
- 定义项目
<dfn></dfn>
- 定义缩写
<abbr></ abbr>
<p>The <abbr title = "World Health Organization">WHO </abbr> was found in 1948.</p>
- 定义地址
<address></ address>
链接
- HTML 使用
<a>
设置超文本链接 - 链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。 - 点击链接时,链接显示为红色并带有下划线。
- 注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
<a href = "url">链接文本</ a>
- “链接文本” 不必一定是文本。还可以是图片或其他 HTML 元素。
- 使用 target 属性,你可以定义被链接的文档在何处显示:
<a href = "https://blog.csdn.net/baby_superman" target = "_blank">链接名称</ a>
- id属性
- id属性可用于创建在一个HTML文档书签标记。
提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。
<!--在HTML文档中插入ID:-->
<a id="tips">有用的提示部分</a>
<!--在HTML文档中创建一个链接到"有用的提示部分(id="tips")":-->
<a href="#tips">访问有用的提示部分</a>
<!--或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":-->
<a href="https://blog.csdn.net/baby_superman#tips">
<!--访问有用的提示部分</a>-->