您现在的位置是：首页 > 前端学习 > Web前端Web前端

网页的结构(第二节)(图文)

第十三双眼睛2019-10-15【Web前端】人已围观

简介HTML最初创建的目的是创建一种文本描述语言，发展至今，称为了一种标记，以十分直观的方式告诉浏览器页面种的内容，而在HTML出现以前，创建一种可以展示内容的文档，包含多媒体信息，具备丰富多彩动态效果的文件是一件难以想象的事情，这意味着如果想通过网络传递信息，只能通过Word这类软件，HTML的出现令很多不擅长使用软件的人可以一样享受网络带来的快捷性和便利性，要学会HTML5，就要先学会HTML基础
本章的知识点如下：
1通过怎样的方法来查看网页的源码
2HTML语言的使用方法
3学习HTML页面的

文件扩展名是操作系统用来标志文件格式的一种机制，扩展名一般跟在文件名的后面，由一个分隔符隔开，如.avi,扩展名起了区分文件类别的作用。
HTML的扩展名是.htm或者html一般情况下，系统默认使用网页浏览器来打开，这种情况下，使用者无法看到页面代码，实际上看到的是一个页面的最后展示效果。
一个完整的HTML文档包含两类事物，标签和页面内容，放在<>里的是HTML标签，用来编辑修饰页面内容，页面内容指开发者想放入页面的文本，图像，多媒体，这听起来很可怕，似乎编辑页面需要使用很多标签，使用HTML是一件很麻烦的事情，事实上，远远没有那么复杂。

HTML文档结构
这里用一个类比来描述HTML的文档结构，制作一个页面，可以把页面看成是一副人体的半身像，首先需要用一块画布来作画，在文档中，用<html>标签来定义网页的起始和结束，相当于画布，在画布内编写头部标签<head></head>和身体标签。这样，一个页面就建出来了。

HTML文档种的标签
页面文档的基本结构可以分为4层关系，这其中涉及5个重要的结构标签，用来构成一个页面，分别是样本代码，开始标签，头标签，标题标签和文本标签。一个完整的页面通常必须具备这5个标签。
样本代码：用来声明代码的版本
开始标签：定义页面从哪里开始到哪里结束
头标签和头标签的对象：有6个特殊的标签可以放到头标签里用。
标题标签：设置网页的标题名
问题标签：用来表现网页的主题内容

样本代码DOCTYPE
在网页代码文档种，通常最先看到的就是样本代码，样本代码看起来很复杂，似乎很难理解，实际上它只是起了一个声明作用，告诉浏览器所书写的HTML代码版本，代码种DOCTYPE即document type,即文档类型，用这段代码来告诉浏览器，浏览器根据这段代码来解析文档。

开始标签<html>
从<html>标签开始，页面就进入设计者操作的领域当中，<html>标签告诉浏览器，整个页面是从这里开始的，然后到</html>这里结束
<head>标签是页面的头部，比较特别，一般来说，只有6个标签能放在<head>标签内，除了本章前面看到的<meta>和<title>.还有<link>,<base>,<style>,<script>.

<meta>标签
<meta>是HTML文档<head>标签内的一个辅助标签，<meta>分为两个重要的属性，name和http-equiv,通常用于能够优化页面被搜索的可能，具体的写法是，在name后面键入属性，在content后面键入对于属性具体描述的词汇，如下所示：
<head>
<meta charset="UTF-8">

<meta name="keywords" content="nine,four,....">

<meta name="description" content="这是我的网站，主要用于......">

<meta name="generator" content="dreamweaver">

<meta name="author" content="13">

<meta name="robots" content="all">
<title>静态页面</title>
</head>
<meta>标签种另一个重要的属性是http-equiv,作用是反馈给浏览器一些重要的信息，帮助浏览器更精确的展示页面，如下：
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
上述代码的作用是告诉浏览器，该页面使用的字符集是utf8,如果使用者的电脑没有UTF字符集时，浏览器会提示用户"需要下载xx语言支持"
还有一些别的作用，如网页定时跳转效果，如下：
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" >
refresh是对属性的具体描述，说明是令页面自动跳转的效果
content后面是等带时间，url后面是跳转路径

<link>标签
<link>标签定义了一个外部文件的链接，经常被使用于链接外部文件，如下：
<link rel="stylesheet" type="text/css" title="temp" href="index.css">
上述代码说明引入了一个index.css的样式文件

<base>标签
<base>标签为整个页面定义了所有链接的基础定位，主要的作用是确保文档种所有的相对url都能被分解为正确的文档地址，在文档本身被移动或者重命名的情况下也能正确解析。
<base href="http://www.xxx.com">
<base>标签常用于创建文档集合时为了不会破坏文档种任意链接，使用者在每个文档中设置正确的<base>标签，这样便可以在目录甚至服务器之间移动文件。

<style>标签
<style>标签主要用来定义css样式，<style type="text/css>是标准的写法，不过省略后也能被浏览器识别。

<script>标签
<script>标签用来定义页面中的脚本，如页面中经常用到的javascript脚本，通过<script>的事件属性来放入HTML文档中，使用方法如下：

<script type="text/javascript">
......
</script>

<title>标题标签
<title>标签也是<head>标签的对象，但是如果没有标题，会默认显示untitleD document,因此，一个页面最好具备页面标题。而其他几个标签可根据情况而定
<title>是一个表现性标签，什么是表现性标签呢，一般来讲，放在这类标签中的文本，可以通过浏览器展现给浏览者，具体如下：
<title>静态页面</title>

体标签<body>
如果说<html>标签定义了网页的开始和结束，那么<body>标签定义了网页主题内容的开始和结束，网页主题内容是指在浏览器中能看到的网页内容。如下：
<body>
<p>
一天，三名工程师驾车去旅游，车子半路上坏了，机械工程师说可能是。。。
</p>
</body>

美化HTML文档
养成编写格式清晰的HTML的文档的习惯是很重要的，不仅方便给别的使用者浏览，也便于自己今后修改，好的文档能提现出设计者的思维方式，一个好的HTML页面也具备3个方面
1代码使用准确规范，不应该有错误的拼写
2代码结构清晰，使人一目了然
3没有错误或者多余不比要的代码

实战：从无到有设计一个页面
<!DOCTYPE html>
<html>
<head>
<title>静态页面</title>
</head>
<body>
<p>
床前明月光，疑是地上霜，
</p>
<p>
举头望明月，低头思故乡。
</p>
</body>
</html>