时间戳

首页 > 技术文章 > HTML教程

HTML教程

tqtl911 2018-03-27 10:12 原文

  • 001-HTML教程

　　超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。我们可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>菜鸟教程（runoob.com）</title>
 6 </head>
 7 <body>
 8 <h1>我的第一个标题</h1>
 9 <p>我的第一个段落</p>
10 </body>
11 </html>

HTML文档的后缀名

  • html
  • htm

以上两种后缀名没有区别，都可以使用。

  • 002-HTML 简介

HTML实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>天晴天朗（tqtl.org）</title>
 6 </head>
 7 <body>
 8 <h1>我的第一个标题哦！</h1>
 9 <p>我的第一个段落哦！</p>
10 </body>
11 </html>

实例解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

什么是HTML?（HTML是用来描述网页的一种语言）

  • HTML指的是“超文本标记语言”:Hyper Text Markup Language
  • HTML不是一种编程语言，而是一种标记语言
  • 标记语言是一套“标记标签”（markup tag）
  • HTML使用标记标签来描述网页
  • HTML文档包含了HTML标签及文档内容
  • HTML文档也叫作Web界面

HTML 标签（HTML标签通常被称为HTML标签-HTML tag）

  • HTML标签是有尖括号包含的关键词，比如<html>
  • HTML标签通常是成对出现的，比如<head></head>
  • 标签对中的第一个标签是开始标签，第二个是结束标签
  • 开始和结束标签也被称为开放和闭合标签
1 <标签>内容</标签>

HTML 元素

“HTML标签”和“HTML元素”通常都是描述同样的意思，但严格来讲，一个HTML元素包含了开始和结束标签，如

1 <p>这是一个段落。</p>

Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。

HTML版本

  • HTML 1991
  • HTML + 1993
  • HTML 2.0 1995
  • HTML 3.2 1997
  • HTML 4.0.1 1999
  • XHTML 1.0
  • HTML5 2012
  • XHTML5 2013

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。doctype 声明是不区分大小写的，以下方式均可：

1 <!DOCTYPE html> 但是建议使用此方式
2  
3 <!DOCTYPE HTML> 
4 
5 <!doctype html> 
6 
7 <!Doctype Html>

通用声明

HTML5

1 <!DOCTYPE html>

HTML4.0.1 

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文编码（目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。）

 1 <!DOCTYPE html>fdsa
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>天晴天朗（tqtl.org）</title>
 6 </head>
 7 <body>
 8 <h1>我的第一个标题哦！</h1>
 9 <p>我的第一个段落哦！</p>
10 </body>
11 </html>
  •  003HTML 编辑器

HTML 编辑器推荐

 

  • 004-HTML 基础

HTML标题（HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.）

 1 <!DOCTYPE html> 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>天晴天朗（tqtl.org）</title>
 6 </head>
 7 <body>
 8 <h1>这是一个最1大的标题</h1>
 9 <h2>这是一个最2大的标题</h2>
10 <h3>这是一个最3大的标题</h3>
11 <h4>这是一个最4大的标题</h4>
12 <h5>这是一个最5大的标题</h5>
13 <h6>这是一个最6大的标题</h6>
14 </body>
15 </html>

HTML 段落

1 <p>这里是一个段落哦!</p>
2 <p>我也是一个段落!</p>

HTML 链接

1 <a href="http://www.cuixiaozhao.com">这是一个超链接</a>

HTML 图像

1 <img src="/images/logo.png" width="258" height="39" />
  •  005-HTML 元素

HTML 元素语法

  • HTML元素以开始标签起始
  • HTML元素以结束标签终止
  • 元素的内容是开始和结束标签之间的部分
  • 某些HTML元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭
  • 大多数HTML元素可拥有属性

HTML文档实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML元素</title>
</head>
<body>
<p>这里是放置段落的地方</p>
</body>
</html>

以上实例包含了4个 HTML 元素。

<p>元素

<body>元素

<head>元素

<html>元素

不要忘记结束标签

<p>这里是放置段落的地方
<p>这里是放置段落的地方

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

1、没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

2、<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

3、在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

4、在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

5、即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。（希望大家一出手，就是专业的！）

  • 006-HTML属性（属性为 HTML 元素提供附加信息。）

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。

 

属性实例

<a href="http://www.w3school.com.cn">This is a link</a>

更多 HTML 属性实例

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

<table border="1"> 拥有关于表格边框的附加信息。

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

 

推荐阅读