HTML—了解+入门基础知识

【前言】

再敲牛腩的时候，遇到了视频中没有遇到的错误，不知道如何下手，所以想系统的学习下HTML和CSS，然后再次学习牛腩进行调错，下面就来总结一下HTML吧！

【内容】

1.了解内容

在学习HTML之前，我们先来了解一些相关知识。见下图：

（1）什么是网页？

网页主要由文字、图像和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频及Flash等。

（2）网页是如何形成的？

编写代码，经过浏览器渲染，形成客户眼中的美丽。

（3）什么是浏览器？

通俗的讲，就是浏览网页的机器，是网页显示、运行的平台。

常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）Safari和Opera等。

（4）什么是浏览器的内核？

浏览器内核（Rendering Engine），中文翻译：排版引擎、解释引擎、渲染引擎，浏览器内核。

负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

（5）什么是Web标准？

是由W3C组织和其他标准化组织制定的一系列标准的集合。

（6）我们为什么要遵循Web标准呢？

因为编写出的代码通过不同的浏览器，显示的页面或排版会有差异。

（7）网页中Web标准三层组成是什么？

结构（html）、表现（CSS）、行为（JavaScript）

对于一个人来说：结构类似人的身体，表现类似人的着装，行为类似人的行为动作。

（8）Web标准的好处？

1）让WEB的发展前景更广阔

2）内容能被更广泛的设备访问

3）更容易被搜寻引擎搜索

4）降低网站流量费用

5）使网站更易于维护

6）提高页面浏览速度

2.HTML骨架标签

3.HTML标签分类

（1）常规标签（双标签）

<标签名>内容</标签名> 比如<body>我是内容</body>

（2）空标签（单标签）

<标签名 /> 比如：<br />

4.HTML标签关系

（1）嵌套关系（父子关系）

<head>

<title></title>

</head>

（2）并列关系（兄弟关系）

<head> </head>

<body> </body>

5.HTML模板

（1）<!DOCTYPE> 文档类型

作用：声明位于文档中的最前面的位置，此标签告诉我们浏览器文档使用哪种HTML或XHTML规范。

用法：<!DOCTYPE html>告诉浏览器按照HTML5规范解析页面。

（2）<html lang="en"> 页面语言lang

作用：指定html语言种类，最常见的两个是：en（英文）和zh-CN（中文）。

（3）字符集<meta charset="UTF-8" />

作用：让html文件是以UTF-8编码保存的，浏览器根据编码去解码对应的html内容。

6.HTML标签的语义化

根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。

优点：

（1）方便代码的阅读和维护

（2）同时让浏览器或是网络爬虫可以更好的解析，从而更好分析其中的内容

（3）使用语义化标签会具有更好地搜索引擎优化

7.HTML常用标签

（1）排版标签

主要和CSS搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标签名	含义	说明
<hx></hx>	标题标签	作为标题使用，并且依据重要性递减
<p></p>	段落标签	可以把HTML文档分割为若干段落
<hr />	水平线标签	一条水平线
<br />	换行标签	换行
<div></div>	div标签	用来布局的，一行只能放一个div
<span><span>	span标签	用来布局的，一行可以放多个span

（2）文本标签

标签	显示效果
<b></b> <strong></strong>	文字以粗体方式显示
<i></i> <em></em>	文字以斜体方式显示
<s></s> <del></del>	文字以加删除线方式显示
<u></u> <ins></ins>	文字以加下划线方式显示

说明：一般都使用后者。

（3）图像标签

使用图像标签的时候，必须要有src属性。语法如下：

<img src ="图像URL" />

图像标签还具有以下属性：

属性	属性值	说明
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标经过图片显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度

（4）链接

使用链接标签时，必须要有href属性。语法如下：

<a href = "跳转目标" target = "目标窗口的弹出方式"></a>

其中，href用于指定链接目标的url地址，当标签应用href属性时，它就具有了超链接的功能；

target用于指定链接页面的打开方式，取值有self和_blank两种，self为默认值，_blank为在新窗口中打开方式。

8.路径

（1）相对路径

是从代码所在的这个文件出发，去寻找我们的目标文件的，而我们所说的上一级、下一级、同一级就是图片位于HTML页面的位置。

相对路径有3种情况：

路径分类	符号	说明
同一级路径	无	只需要输入图像文件的名称即可
下一级路径	“/”	图像文件位于HTML文件同级文件夹下
上一级路径	“../”	图像文件位于HTML文件的上一级或上上级文件夹下

举例说明：

路径分类名称	html语言说明	例图
同一级路径	如<img src = “baidu.gif” />
下一级路径	如<img src = “images/baidu.gif” />
上一级路径	如<img src = “../baidu.gif” />