参考:菜鸟教程-HTML
目录
一、HTML简介
1.什么是HTML
HTML,即超文本标记语言(HyperText Markup Language),是一种用于创建网页的标准标记语言。
- HTML 是用来描述网页的一种语言。
- HTML 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML 文档也叫做 web 页面
- HTML 文件后缀可以是 .html 或者 .htm,二者没有区别,都可以使用
2.HTML标签
HTML 标记标签通常被称为 HTML 标签(HTML Tag)。HTML 标签是由尖括号包围的关键字,比如<html>;HTML 标签通常是成对出现的,标签中的第一个标签叫做开始标签(也叫开放标签),第二个标签被叫做结束标签(也叫闭合标签)。比如<b></b>
"HTML 元素"和“HTML 标签”通常描述的是同样的意思,但是严格来讲,一个 HTML 元素包含了开始标签与结束标签,如下示例:
<p>这是一个段落</p>
3.WEB浏览器
Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。
浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户。
浏览器的内核分类如下:
- Trident——IE/Edge浏览器使用
- Gecko——火狐浏览器使用
- Webkit——safari浏览器使用
- Chromium/Blink——Chrome浏览器使用
- Presto——Opera浏览器使用(新版Opera已经使用Blink内核)
4.HTML实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML实例</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
实例解析:
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
5.通用说明
HTML5
<!DOCTYPE html>
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6.中文编码
目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
7.HTML编辑器推荐
可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器:
- Notepad++:https://notepad-plus-plus.org/
- Sublime Text:http://www.sublimetext.com/
- VS Code:https://code.visualstudio.com/
- WebStorm
二、HTML属性
属性是HTML元素提供的附加信息
注意:HTML属性对大写不明感,但是一般的约定使用小写
1.HTML属性简介
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name="value"。
比如:
<a href="http://www.runoob.com">这是一个链接</a>
其中,HTML 链接有<a>标签定义,链接的地址在 href 属性中指定。
2.适用于大多数标签的属性
属性 | 描述 |
class | 为html元素定义一个或多个类名(classname)(类名从样式文件引入) |
id | 定义元素的唯一id |
style | 规定元素的行内样式(inline style) |
title | 描述了元素的额外信息 (作为工具条使用) |
3.HTML全局属性
属性 | 描述 |
---|---|
accesskey | 设置访问元素的键盘快捷键。 |
class | 规定元素的类名(classname) |
contenteditable (New) | 规定是否可编辑元素的内容。 |
contextmenu (New) | 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单 |
data-* (New) | 用于存储页面的自定义数据 |
dir | 设置元素中内容的文本方向。 |
draggable (New) | 指定某个元素是否可以拖动 |
dropzone (New) | 指定是否将数据复制,移动,或链接,或删除 |
hidden (New) | hidden 属性规定对元素进行隐藏。 |
id | 规定元素的唯一 id |
lang | 设置元素中内容的语言代码。 |
spellcheck (New) | 检测元素是否拼写错误 |
style | 规定元素的行内样式(inline style) |
tabindex | 设置元素的 Tab 键控制次序。 |
title | 规定元素的额外信息(可在工具提示中显示) |
translate (New) | 指定是否一个元素的值在页面载入时是否需要翻译 |
(New)标注HTML5的新属性
三、HTML样式
style属性用于改变 HTML 元素的样式
1.HTML的style属性
style属性的作用:提供了一种作用改变所有 HTML 元素的样式的通用方法
样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。
常用的style属性:
background-color 属性为元素定义了背景颜色,
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
text-align 属性规定了元素中文本的水平对齐方式
比如:
<html>
<body style="background-color:yellow">
<h1 style="text-align:center; font-family:verdana; background-color:red">heading</h1>
</body>
</html>
2.不赞成使用的标签和属性
在 HTML 4 中,有若干的标签和属性是被废弃的。被废弃(Deprecated)的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
尽量避免使用这些被废弃的标签和属性,如果需要使用到下面的这些标签或属性,请使用style属性代替。
标签 | 描述 |
---|---|
<center> | 定义居中的内容。 |
<font> 和 <basefont> | 定义 HTML 字体。 |
<s> 和 <strike> | 定义删除线文本 |
<u> | 定义下划线文本 |
属性 | 描述 |
align | 定义文本的对齐方式 |
bgcolor | 定义背景颜色 |
color | 定义文本颜色 |
四、HTML注释
注释标签 <!-- 与 --> 用于在 HTML 插入注释。
HTML注释 :
- 在开始标签中有一个感叹号,但是结束标签中没有
- 浏览器中不会显示注释,但是能够记录您的 HTML 文档
- 可以利用 HTML 注释放置通知或提示信息
- HTML注释不直接显示在浏览器上,但是通过开发者工具可以看到,所以不应该放置敏感信息
<!-- 此刻不显示图片:
<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">
-->
五、HTML头部
1.HTML头部元素
标签 | 描述 |
---|---|
<head> | 定义关于文档的信息。 |
<title> | 定义文档标题。 |
<base> | 定义页面上所有链接的默认地址或默认目标。 |
<link> | 定义文档与外部资源之间的关系。 |
<meta> | 定义关于 HTML 文档的元数据。 |
<script> | 定义客户端脚本。 |
<style> | 定义文档的样式信息。 |
2.HTML head元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。
3.HTML title元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够:
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
一个简化的 HTML 文档:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
4.HTML base元素
<base> 标签为页面上的所有链接规定默认地址或默认目标(target)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<base target="_blank" />
</head>
<body>
<p>
<a href="http://www.w3school.com.cn" target="_blank">这个连接</a> 将在新窗口中加载,因为 target 属性被设置为 "_blank"。
</p>
<p>
<a href="http://www.w3school.com.cn">这个连接</a> 也将在新窗口中加载,即使没有 target 属性。
</p>
</body>
</html>
5.HTML link元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
6.HTML style元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
7.HTML meta元素
- 元数据(metadata)是关于数据的信息。
- <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
- 典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
- <meta> 标签始终位于 head 元素中。
- 元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定义页面的关键词:
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是描述页面的内容。
8.HTML script元素
<script> 标签用于定义客户端脚本,比如 JavaScript。
(第九部分详细说明)
六、HTML字符实体
HTML中的预留字段必须被替换成字符实体
在 HTML 中,某些字符是预留的。
比如,在 HTML 中不能使用大于号(<)和大于号(>),这是因为浏览器会误认为它们是标签,必须使用<或>代替
另外,浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 字符实体。
HTML 中有用的字符实体(注意:实体名称对大小写敏感!)
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
¢ | 分(cent) | ¢ | ¢ |
£ | 镑(pound) | £ | £ |
¥ | 元(yen) | ¥ | ¥ |
€ | 欧元(euro) | € | € |
§ | 小节 | § | § |
© | 版权(copyright) | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
七、HTML颜色
颜色由红色、绿色、蓝色混合而成。
1.颜色值
颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。
每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。
这个表格给出了由三种颜色混合而成的具体效果:
2.颜色名
大多数的浏览器都支持颜色名集合。
提示:仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色,需要使用十六进制的颜色值。
八、HTML URL
1.统一资源定位符(URL)
当您点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址。
统一资源定位器(URL)用于定位万维网上的文档(或其他数据)。
网址,比如 http://www.w3school.com.cn/html/index.asp,遵守以下的语法规则:
scheme://host.domain:port/path/filename
解释:
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机(http 的默认主机是 www)
- domain - 定义因特网域名,比如 w3school.com.cn
- :port - 定义主机上的端口号(http 的默认端口号是 80)
- path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
- filename - 定义文档/资源的名称
2.主流的协议
Scheme | 访问 | 用于... |
---|---|---|
http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
file | 您计算机上的文件。 |
3.相对路径
- 图像文件和HTML文件位于同一文件夹中,只需要输入图像文件的名称即可,<img src="logo.gif"/>
- 图像文件位于Html文件的下一级文件夹,输入文件夹名和文件名,二者之间用“/” 隔开,<img src="image/logo.gif"/>
- 图像文件位于HTML文件的上一级,在文件名之前加 " ../ ", 上两级则使用 " ../../ ",依次类推。<img src="../image/logo.gif"/>
4.绝对路径
- 本地绝对路径: D:\web\img\logo.gif
- 网络绝对路径:https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700
九、HTML脚本
1.HTML script元素
- <script> 标签用于定义客户端脚本,比如 JavaScript。
- script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
- 必需的 type 属性规定脚本的 MIME 类型。
- JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”:
<script type="text/javascript">
document.write("Hello World!")
</script>
2.noscript标签
<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容:
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>