html快速入门教程(html零基础入门知识)

“从零开始学前端 – 1. HTML基础知识”

01

HTML 发展历史

互联网及HTML的发展历史,在闲暇之余当成历史故事读一读就好,没必要强迫自己背下来,但一些关键内容还是需要记住,不然将来与别人谈起,怎么好意思说自己是从事互联网相关工作的。

02

HTML 基本骨架如图所示,我们可以发现:一个HTML页面主要是由四个部分组成的。

html快速入门教程(html零基础入门知识)

1. 文档声明

<!DOCTYPE html>是一个文档声明,它并不是 HTML标签。它为浏览器提供一个声明,告知浏览器这是一个 HTML 页面以及 HTML 的版本,避免每个浏览器以各自不同的标准来解析。假设一个页面并未设置该声明,那么浏览器将按照 “怪异模式” 进行解析,只有设置了该声明之后,浏览器才会按照 “标准模式” 解析网页。

注:a)怪异模式:BackCompat ,浏览器按照自己的标准来解析渲染页面。b)标准模式:CSS1Compat,浏览器按照W3C的标准来解析渲染页面。

2. html 标签

<html></html>标签限定了文档的开始点()和结束点(),在它们之间是文档的头部和主体。在实际开发中,我们会常常看到以下几行代码:

<htmllang=”en”>

这行代码向浏览器表示该页面是 HTML ,并且语言为英文的网站,其“lang” 是 “language”的缩写,语言的意思。“en” 表示 english ,如果你的页面如果是中文页面,可将其改为<html lang=”zh”>,zh 即表示中文。

<html xmlns=”http://www.w3.org/1999/xhtml”>xmlns 属性在 XHTML 中是必需的,但在 HTML 中不是。它的作用是告诉浏览器,当前页面按照 W3C 的 XHTML 标准。3. head 标签

head 标签是网页的头部,以<head>开始,以</head>结束。它是所有头部元素的容器,通过其中元素来描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。一般来说,只有六个标签能放在 head 标签内:

3.1 title 标签

title 标签的作用就是定义页面的标题。

3.2 meta 标签

meta 标签一般用于定义页面的特殊信息,并不提供给用户观看。例如说页面的编码格式,目的是为了告诉浏览器解析时应该使用的编码格式,页面的关键字和描述信息,其目的是为了便于搜索引擎抓取相关信息;

meta 标签拥有很多的属性,但在实际开发PC端网页时,我们最常用到如下所示,也就是说,我们目前只需要记住以下几个属性即可,其他的属性暂时不用费心。

<meta charset=”UTF-8″> <!– 定义页面的编码格式为 UTF-8 –> <meta name=”keywords” content=”该页面的关键字”> <!– 定义页面的关键字 –> <meta name=”description” content=”该页面的描述信息”><!–定义页面的描述信息–>注:UTF-8 包含全世界所有国家需要用到的字符,GBK和GB2312主要用于汉字的编码。一般如果我们制作的网页的时候都会采用 UTF-8 的编码格式,如果打开网页出现乱码情况,基本都是因为未设定或者编码格式设置错误的问题。3.3 style 标签

style 标签用于定义 HTML 元素的 CSS 样式,在实际工作中,我们经常使用 link 标签引入外部的 CSS 文件,所以对该标签不需要深入研究。

3.4 link 标签

link 标签用于引入外部 CSS 文件。

3.5 script 标签

script 标签内填写的是 JavaScript 代码,既可以在标签内直接填写,也可以引入外部的 JavaScript 文件。

3.6 title 标签

base 标签为页面上的所有的相对链接规定默认 URL 或默认目标。通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括<a> <img> <link> <form>等标签中的 URL。在一个页面内,最多使用一个该标签。

4. body 标签

在一个页面中,head 标签表示的是页面的“头部”,其中的内容大部分是不可见的。而body 标签表示的是页面的身体,其中的内容则是用户可以直接看到的内容。接下来我们要学习的其他标签,都是位于 body 标签内部的。例如我们创建一个 html 文档,输入以下代码:

<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>少年中国说</title></head><body> <h1>少年中国说</h1> <p>红日初升,其道大光。河出伏流,一泻汪洋。</p> <p>潜龙腾渊,鳞爪飞扬。乳虎啸谷,百兽震惶。</p> <p>鹰隼试翼,风尘翕张。奇花初胎,矞矞皇皇。</p> <p>干将发硎,有作其芒。天戴其苍,地履其黄。</p> <p>纵有千古,横有八荒。前途似海,来日方长。</p> <p>美哉我少年中国,与天不老!</p> <p>壮哉我中国少年,与国无疆!</p></body></html> 浏览器预览效果如下所示:

03

HTML 注释<!—->被称为 HTML 注释,以 ” <!– ” 开始,以 ” – -> ” 结束,在其中的内容并不会被浏览器显示到页面上。注释信息并不是给浏览器或者用户看的,而是面向开发人员。在实际开发中,一个页面的代码往往都是几百上千行的,而一个项目中,又拥有多个页面。这个时候,我们就需要用到注释来对关键的部分进行相应的解释或者标注。注释的好处多多,比如说方便查找,也可以让同一个项目组的同事快速理解你的代码。如果没有注释,时间长了,自己都有可能看不懂自己过去写过的代码,特别是在团队开发中,如果同事来维护自己的项目时,由于没有注释的原因,往往会花大量的时间来理解代码。所以说:使用对代码注释是一个良好的习惯。

04

HTML 基本语法1.空格、换行、缩进。

HTML 只在乎标签的嵌套结构和关系。谁嵌套了谁,谁被谁嵌套了。浏览器解析 HTML 文件时,会忽略掉换换行和缩进,并不影响页面的结构。也就是说,HTML 不是依靠缩进来表示嵌套的,而是看标签的包裹关系。但是,我们发现如果有良好的缩进,代码的可读性会更强,所以要求大家在开发时要有良好的书写习惯,正确缩进代码。但在项目上线,发布到服务器时,考虑节约服务器的存储空间和带宽,一般都会使用代码打包工具对完成的代码进行打包,对浏览器而言标签的层次依然清晰,只不过程序员不可读了。例如说百度首页的代码:

2. 标签闭合原则

所有标签都是放在 <> 尖括号里的,成对出现,且必须闭(开始&结束标签)。例:<html></html>

3. 单标签

有些特殊标签没有相对应的标签,我们一般称为单标签、自闭合标签等。例:<br/>

4. 属性

所有标签本身都具有一个或多个属性,写法:属性名=”属性值” 多个属性用空格隔开。例:<meta charset=”UTF-8″>charset 是属性名,UTF-8 是属性值。

5. 标签嵌套原则

在 HTML 中所有的标签都可以相互嵌套的,但嵌套要合理,且闭合时要严格按照嵌套顺序进行闭合。

6. 注释标签不可相互嵌套。7. 书写规范

写标签时应该小写、属性值双引号、嵌套缩进。遵循代码清晰的原则,便于维护。

8.语义化原则

语义化,顾名思义,就是用相对应的、有一定语义的标签来表示 HTML 的结构,且 HTML本身就是标记语言。注:语义化的优点: a) 增强可读性,对开发者更友好,在没有 CSS 的情况下也能较好地呈现网页的内容结构与代码结构,便于团队的开发和维护。 b) 有利于 SEO ,可以让搜索引擎爬虫更好地获取到更多有效信息,搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重,有效提升网页的搜索量。 c) 支持读屏软件,方便其他设备的解析(如屏幕阅读器、盲人阅读器等),利于无障碍阅读,提高可访问性。

05

常见浏览器及内核

04

开发工具1. Visual Studio Code

2. Sublime Text

3. HBuilder

4. WebStorm

5. Notepad

种一棵树,最好的时间是十年前,其次是现在。人的一生,总的来时就是不断学习的一生。 蚕吐丝,蜂酿蜜。人不学,不如物。纠结学不学,学了有没有用,不如学了再说。 等你学会了之后,你才拥有资格说“啊,这个东西学了没用。”

发表评论

登录后才能评论