北京优化网站推广网站建设经济可行性
HTML结构
一个HTML包含以下部分:
- 文档类型声明
 - html元素 
- head元素
 - body元素
 
 
例(CSDN):
 
一、文档类型声明
HTML最一方的文档称为:文档类型声明,用于声明文档类型。即:<!DOCTYPE html>
<!DOCTYPE html> 的作用:
- HTML文档声明,用于告诉浏览器是HTML5页面。
 - 让浏览器用HTML5的标准去解析。
 - 必须放在最最前面,不可以省略。否则可能有兼容性问题。
 
二、html元素
 
1、 <html>元素
 
表示一个HTML 文档的根(顶级元素),也成为根元素。
 其他元素必须是这个元素的后代。
2、一般都会加一个 lang属性
 
lang属性的作用:
- 定义当前HTML文档的语言
 - 帮助语音合成工具确定要使用的发音。
 - 帮助翻译工具确定要使用的翻译规则。
 
常用lang属性的规则:
lang="zh-CN":表示这个HTML文档的语言是中文。lang="en":表示这个HTML文档的语言是英文。
例(CSDN):
 
三、head元素
 
1、 <head>元素
 
规定文档的配置信息(也成为元数据),包括文档的标题,引用的文档样式、脚本信息等等。
- 元数据:描述数据的数据,可以理解为整个页面的配置。
 
常见的设置:
title元素
设置网页的标题。meta元素
设置网页的编码。即:<meta charset=utf-8">,一般都是utf-8编码。
⭐meta元素是用来让机器识别元数据的。
⭐有各种元素类型。例如name & content可以指定元数据的名称(这部分对 SEO 非常有用)等等。
例(CSDN):
 
四、body元素
 
body元素里面的内容是 在浏览器窗口中看到的东西,也就是网页的具体内容和结果。
五、常用元素
h元素
 
h:即heading,标题。
作用:将一些重要文字作为标题。<h1>到<h6>:六种不同级别。
<h1>级别最高,<h6>级别最低。

h元素通常和SEO优化有关。
p元素
 
p:即paragraph,段落。
作用:表示文本的一个段落的时候使用。- 多个段落之间会存在间距。

 
img元素
 
-  
作用:将图片嵌入文档。告诉浏览器显示图片。
 -  
<img>常见的两个属性:-  
src属性:
是必须的。
包含你想嵌入图片的路径。 -  
alt属性
不是强制的。有两个作用:
①如果图片加载失败(图片地址错误或者图片不存在),那么会显示这段文本。
②屏幕阅读器会都这段文字给使用者,指导这张图的含义。 -  
其他属性也都可以,例如:
width属性 
 -  
 -  
图片的路径
src- 网络图片:给一个网络的URL就行。很简单。
 - 本地图片:己电脑上的图片。
本地图片的地址分两种:
①绝对路径(几乎不用)
从电脑的本目录开始一直找到资源路径。
②相对路径
对于当前文件而言的一个路径。
.:代表当前文件夹,可省略。
..:代表上一层的文件夹,可省略。 - 注意路径分割都是
/。 
 
<img src="./../images/test.jpg" alt="">
 

img支持的图片格式

a元素
 
-  
作用:需要跳转到某个链接的时候使用
a元素。 -  
<a>元素:定义超链接,用于打开新的URL。 -  
<a>元素两个,常见的属性:href属性
指定要打开的URL。
也可以是一个本地地址。target属性
指定在何处显示链接的资源。
①_self:在当前窗口打开。
②_blank:在新的窗口打开。
③_parent:在父窗口打开。(单独使用没效果,需要和iframe元素配合使用。)
④_top:在最顶层窗口打开。(单独使用没效果,需要和iframe元素配合使用。)
 -  
a元素:设置锚点链接- 作用:跳到网页的某个位置。(例如:目录跳转)
 - 具体步骤:
①在要跳的的元素上定义一个id属性
②定义a元素,让他的href指向对应的id。

 
 -  
a元素:设置图片链接- 作用:点击某个图片,跳转到指定链接。
 - 具体步骤:
①定义a元素,它的内容放一个img元素。(也就是img元素就是a元素的内容。)
②指定href,设置想跳转的地址。

 
 
iframe元素
 
在一个HTML文档中嵌入另一个HTML文档。
 
div元素
 
div元素:就是一个容器,或者说盒子。用来包裹内容。- 作用:
①div包裹的内容在不同行显示。包裹的这部分是一个整体。
②把网页分割成多个独立的部分。 
span元素
 
span元素:就是一个容器,或者说盒子。用来包裹内容。- 作用:
①span包裹的内容在同一行显示。包裹的这部分和普通文本没区别。
②用于区分特殊文本和普通文本,主要用来显示关键字。

 
六、不常用元素
strong元素
 
- 作用:内容加粗,强调。
通常都是用css来完成。 
i元素
 
- 作用:内容倾斜。
通常都是用css来完成。 
code元素
 
- 作用:用于显示代码
 
br元素
 
- 作用:换行

 
