前端HTML篇-02HTML基本结构

标

HTML基本结构是怎么样？
HTML基本结构有哪两层标签组成？
Head标签的作用和body标签的作用?

HTML基本结构

html基本结构

哪两层(标签)组成的？

Head标签

Body标签

作用是什么？

Head标签

是作用于网页的头部，他描述了html文件的各种属性和信息，包括网页的标题，网页的字符编码，是否启用缓存等等。它的内容不会在正文中显示出来。

定义网页的标题

Head标签还可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。（拓展）

body 标签

定义文档的主体，包含网页的所有内容（比如文本、超链接、图像、表格和列表等等），即是在网页上显示的内容都写在这里。

TML主体标记

代码分为三部分编写

<html>              是网页文件的最外层标记
	<head>          之间的文本是头信息
		不会显示在浏览器中，包括基本的描述，整个网页的公共属性
	</head>
	<body>      是网页文件的主体部分
		正文 ：文字、图片、链接、表单等
	</body>	
</html>

HTML文档头部标记

<title> </title> 只能有一个

<base /> 只能有一个

<meat> 可以有多个

title

定义网页标题，显示在浏览器的标题栏中
公司名称+公司产品
有利于搜索引擎（也是在搜索引擎中显示的标题）

base

基底网址标记
用于设定浏览器中文件的绝对路径
网页中的文件只需要写下文件的相路径即可，这个路径就是base中指定下的路径

link

设置外部文件的链接标记
用于确定本页面和其它文档之间的关系

meta两种用法

Name 用于在网页中加入一些关于网页的描述信息，网页的关键字，网页描述信息

http-equiv:属性用于在HTML文档中模拟HTTP协议的响应消息头，例如，告诉浏览器是滞缓存页面，使用什么样的字符集显示网页内容

Meta标签的name属性

不是自己定义的值：

Keywords : 网页的关键字

Description：网页的描述

Robots ： index noindex follow nofollow all none

Author

copright

Meta标签的http-equiv属性设置

Content-Type

Refresh

Expires

Windows-Target

Pragma

Page-Enter和Page-Exit

主本标记<body>

在它中放置网页中所有内容

Text
Bgcolor
Background
Link
Alink
Vlink
Topmargin
Leftmargin

只要是可以用样式控制的就不用HTML本身属性

Id name class style 通用属性，所有的元素都可以使用

DTD

文档类型定义

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Html
Public
Version
URL

上一节说到，我们可以快速的生成HTML的结构，如下图所示：

虽然能快捷生成，但是我们必须了解HTML的结构组成：

<!DOCTYPE html>

这是第一行代码，[DOC意思是document]，TYPE为类型，html为文件，这个是和浏览器说明，这是一个html的一个文件类型。

<!DOCTYPE html>
<html></html>

接下来我们将创建HTML标签，HTML所有的标签都应在此标签之中。

<!DOCTYPE html>
<html>
<head></head>
</html>

接着就像描述一个人一样，先把头给描述出来，头部元素在浏览器窗口是不可见的，所以这里会有一些标题，一些页面信息，以及链接CSS等其他东西

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

头出来了，就来创造我们的身体，身体元素是在浏览器页面上可见的，所以我们在页面的上能看见的元素都应该添加至身体元素里面。
刚刚说了，我们的HTML的标题需要包含在头部元素，这时候我们来为页面添加一个标题

<!DOCTYPE html>
<html>
<head>
    <title>HTML是最基本的网页语言</title>       
</head>
<body></body>
</html>

现在我们在身体元素里面添加一些浏览器页面可见的元素，例如一级标题

<!DOCTYPE html>
<html>
<head>
    <title>HTML是最基本的网页语言</title>       
</head>
<body>
    <h1>HTML是最基本的网页语言</h1>
</body>
</html>

现在我们保存代码，然后双击该html文件即可在浏览器打开查看效果。

在线咨询

上一篇：如何在浏览器中启用 WebGL 以使用 HTML5 3D 查看器
下一篇：Web前端：HTML的10大重要用途

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商