HTML自学手册

HTML自学手册

HTML 教程- (HTML5 标准)

  • 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言;
  • 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析!
  • HTML 很容易学习!相信您能很快学会它!

本教程包含了数百个 HTML 实例。

使用本站的编辑器,您可以轻松实现在线修改 HTML,并查看实例运行结果。

注意:对于中文网页需要使用 <meta charset=”utf-8″> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset=”gbk”>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元宇宙-HTML自学</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p>
</body>
</html>
还不会复制代码?点区域有教程!复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查看实例!

HTML文档的后缀名

  • .html
  • .htm

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


HTML 实例

在 HTML 手册中包含了数百个在线实例,您可以在线编辑并查看运行结果。


HTML 参考手册

在菜鸟教程中,我们提供了完整的 HTML 参考手册,其中包括标签、属性、颜色、实体等等。


元宇宙 HTML/CSS/JS 在线运行测试工具

HTML/CSS/JS 在线工具可以在线编辑 HTML、CSS、JS 代码,并实时查看效果,你也可以将优质代码保存分享:

https://html.liboven.cn/


推荐使用长后缀名 html 。

命名应该遵从含义清晰、简洁、一致性原则。含义清晰指见名知义,比如这里的 htm(hypertext markup) 和 html (hypertext markup language) 均采用的是英文单词首字母缩写,含义清晰。简洁要求变量命名尽量简短,比如此处后缀名使用首字母缩写而不使用全单词。一致性原则要求同环境下的大量变量命名符合同样的规则,比如有的朋友习惯于Linux文件夹命名规则后,使用win系统时新建文件夹命名仍拒绝使用空格,这便造成了新文件夹名与旧文件夹名命名规则不一致。

一致性原则往往更为重要。比如合作开发时,不能各守其是,人为提高开发难度。

从一路风尘的笔记中,我们了解到 htm 是历史遗留的8.3字符限制命名方式,而现在我们在命名时并未遵守8.3规则。因此,从 htm 和 html 中选择时,也应该选择无限制长度命名方式的 html 。

前者是超文本标记(Hypertext Markup)

后者是超文本标记语言(Hypertext Markup Language)

可以说 htm = html

同时,这两种都是静态网页文件的扩展名,扩展名可以互相更换而不会引起错误(这是指打开而言,但是对于一个链接来说,如果它指向的是一个htm文件,而那个htm文件被更改为html文件,那么是找不到这个链接的)

那为什么出现两种文件格式呢?

htm 是来源于老的 8.3 文件格式,DOS 操作系统只能支持长度为三位的后缀名,所以是 htm,但在 windows 下无所谓 HTM 与 HTML,html 是为长文件名的格式命名的。所以 htm 是为了兼容过去的DOS命名格式存在的,在效果上没有区别的。以前 htm 和 html 作为不同的服务器上的超文本文件,但现在通用。

什么是8.3文件格式? 这是一种在老的16位Win95或Win98文件系统的短文件名文件格式,扩展名只限于3位,文件名只限于8位。 如果要与16位系统交互,比如说,要把一个路径传给一个16位的程序,你就不能用长文件名,而必须对它进行转换。例如把“C : /MyLongestPath/MyLongerPath/MyFilename.txt”转换成“C : /Mylong~1/MyLong~2/Myfile~1.txt”

了解这个有什么用? 在FAT磁盘格式下的DOS中只支持8.3文件格式,如果你要在这个环境下做应用,应该要注意这个文件格式问题。在NTFS下,默认可以兼容这种文件格式,同时也支持长文件名,你也可以通过调整注册表来取消对8.3文件格式也支持。

在使用中常常遇到 utf-8 和 utf8,现在终于弄明白他们的使用不同之处了,现在来和大家分享一下,下面我们看一下 utf-8 和 utf8 有什么区别。

“UTF-8” 是标准写法,php 在 Windows 下边英文不区分大小写,所以也可以写成 “utf-8″。”UTF-8″ 也可以把中间的”-“省略,写成 “UTF8″。一般程序都能识别,但也有例外(如下文),为了严格一点,最好用标准的大写”UTF-8″。

在数据库中只能使用”utf8″(MySQL) 在MySQL的命令模式中只能使用”utf8″,不能使用”utf-8″,也就是说在PHP程序中只能使用 “set names utf8(不加小横杠)”,如果你加了”-“此行命令将不会生效,但是在 PHP 中 header 时却要加上”-“,因为 IE 不认识没杠的”utf8″,原因见下文。

PHP 中的 header:

<?php header('Content-Type: text/html; charset=UTF-8'); ?> //奇怪了:Content-Type 用冒号,Chatset却是等号。

静态文件使用:

总结:【只有在MySQL中可以使用”utf-8″的别名”utf8″,但是在其他地方一律使用大写”UTF-8″。】

具体为:

除了在命令 “mysql_query(set names utf8)” 外一律用大写”UTF-8″。

注意:HTML中不支持 空格、回车、制表符,它们都会被解析成一个空白字符


HTML简介

HTML 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元宇宙-HTML自学</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落</p>
 
</body>
</html>

HTML自学手册 插图2
  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元(meta)数据,如 <meta charset=”utf-8″> 定义网页编码格式为 utf-8
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。


HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签文本内容
  • HTML文档也叫做 web 页面

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

<标签>内容</标签>


“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

HTML 元素:

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


Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)是用于读取HTML文件,并将其作为网页显示。

浏览器并不是直接显示的HTML标签,但可以使用标签来决定如何展现HTML页面的内容给用户:

HTML自学手册 插图3

下面是一个可视化的HTML页面结构:

<html>
<head>
<title>页面标题</title>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

</body>
</html>


从初期的网络诞生后,已经出现了许多HTML版本:

版本发布时间
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

HTML5

<!DOCTYPE html>

HTML 4.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">

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

1. doctype 声明是不区分大小写的,用来告知 Web 浏览器页面使用了哪种 HTML 版本。

在HTML 4.01 中,<!DOCTYPE> 声明需引用 DTD (文档类型声明),因为 HTML 4.01 是基于 SGML(Standard Generalized Markup Language 标准通用标记语言)。

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset。

HTML5 不是基于 SGML,因此不要求引用 DTD。

2. 对于中文网页需要使用 <meta charset=”utf-8″> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset=”gbk”>。

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

对于设置 <meta charset=”utf-8″ /> 后出现网页乱码问题,其实归根到底就是:你通过 meta 标签设置的编码网页文件在保存时所使用的文档编码不相同造成的!

至于有的人说什么 360 浏览器默认 GBK 会造成乱码,我只想说的是,

只要你在 html 文件里写了 <!doctype hmtl>和 <meta charset=”utf-8″ />,浏览器就绝对会按照 utf-8 编码解析网页,没有第二种可能!再次重点说明:保存 html 文件时,文档编码和 meta 设置的编码,一定要相同,只要不相同,就一定会出现乱码!

之所以一定要写上 <!doctype html>,就是为了防止浏览器的怪异模式,强制浏览器按照标准模式渲染网页!


HTML 编辑器

HTML 编辑器主要用于方便html代码编辑,元宇宙之家 给大家推荐几款常用的,专业的编辑器

可以使用专业的 HTML 编辑器来编辑 HTML,php中文网为大家推荐几款常用的编辑器:

你可以从以上软件的官网中下载对应的软件,按步骤安装即可。

接下来我们将为大家演示如何使用 HTML编辑 工具来创建 HTML 文件,其他两个工具操作步骤类似。


Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。

在 Notepad++ 安装完成后,选择” 文件(F)->新建(N) “,在新建的文件中输入以下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学元宇宙 (liboven.cn)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML自学手册 插图4

然后选择” 文件(F)->另存为(A) “,文件名为 index.html

当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名,两者没有区别,完全根据自己的喜好保存;

HTML自学手册 插图5

HTML自学手册 插图6

启动您的浏览器,然后选择”文件”菜单的”打开文件”命令,或者直接在文件夹中双击您的 HTML 文件,

运行显示结果类似如下:

HTML自学手册 插图6


 Windows 用户可以使用记事本;
 Linux 用户可以选择几种不同的文本编辑器,如 vi、vim 或者 emacs ;
 Mac 用户可以使用 OS X 预装的 TextEdit。


温馨提示:本文最后更新于2022-12-27 10:01:27,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞174赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容