跳转至

HTML基础

1、HTML是什么

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，它是制作万维网页面的标准语言。

HTML不是一门编程语言，而是一门描述性的标记语言。HTML最基本的语法如下：

<标签符>内容</标签符>

标签符一般都是成对出现，有一个开始符号和一个结束符号，结束符号只是在开头符号的前面加一个斜杠“/”。当浏览器收到HTML文本后，就会解释里面的标签符，然后把标签符相对应的功能表达出来。

例如，用标签对来定义文字为斜体字，用来定义文字为粗体。当浏览器遇到标签对时，就会把标签中所有文字用斜体显示出来。

<em>雨果学院</em>

当浏览器遇到上面这行代码时，会得到如下斜体文字效果：

image-20200427172211862

HTML要学习什么呢？用一句很简单易懂的话来说， 学习HTML就是学习各种标签，就是学习网页的“骨架”。标签有文字标签、图像标签、音频标签、表单标签等等。因为HTML这门语言就是一门描述性语言，就是用标签来说话。举个例子，如果你要在浏览器显示一段文字，你就用到**段落标签p**，如果你要在浏览器显示一张图像，就要用到[图像标签**img**。针对对象不同，使用的标签不同。假如你想要在浏览器显示一张图片，你用段落标签p就不可能将图片显示出来。所以，学习HTML说白了就是学习各种各样的标签，然后针对你想要显示的内容来使用相应的标签，在对的地方用对标签。

此外，很多时候我们也把“标签”说成“元素”，例如“p标签”说成“p元素”，这说的是一个意思，只是叫法不同而已。而“标签”的叫法更形象地说明了HTML元素是用来“标记”的，来标记这是一段文字还是一张图片，从而让浏览器将你的代码解析出来而展示给用户看。

总结

1、学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签；

2、HTML标签即“HTML元素”；

2、网站开发工具

根据个人经历，比较好的网页开发工具有Visual Studio、Hbuilder、Dreamweaver和Subline Text。

Microsoft Visual Studio（简称VS）是微软公司的开发工具包系列产品，是目前最流行的Windows平台应用程序的集成开发环境（IDE）。所谓的集成开发环境，就是指用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面工具。这么复杂，谁看得懂呀？哎，简单来说，Visual Studio是一个很多用途的开发工具，它可以用来开发功能很强大的网站。这下懂了吗？

相对于Dreamweaver，Viusal Studio看起来是一个“庞然大物”，挺复杂的。为什么非要选择Viusal Studio作为本教程的开发工具呢？这些都是为了后续课程的需要，如果我们刚刚开始就选择Dreamweaver作为开发工具，很多同学就跑去借一本Dreamweaver的书去学了，Dreamweaver的那种传统的使用界面操作的开发方式，已经被摒弃很久了，但是不知道为毛还有那么多人出版。本人当初刚刚接触网页开发的时候，也深受其害，当时跟着一个视频在学着第一步点击那里，第二步点击那里……点点点，全部是用鼠标来点，点到我头都晕了。

大家不要觉得Dreamweaver的用鼠标操作的方式来制作网页很简单方便，学了一段时间，你会发现你学到的不是知识，而是学到了制作网页的过程中应该点哪里！还有，当你用Dreamweaver鼠标操作的方式来制作网页时，你会发现，弊端何其多呼！特别是冗余代码一堆一堆，让制作出来的网站在后期难以维护。

当然，Dreamweaver还是挺不错的一个开发工具，并非反对大家使用Dreamweaver，而是反对大家使用Dreamweaver界面操作的方式来制作网页。对于刚刚接触网页开发的新手来说，可以使用Dreamweaver作为开发工具，不过本人强烈建议你一定要用代码去写网页，别用鼠标点击的方式去制作网页。还有我可以很清楚地告诉你，现在大部分网站都不是鼠标操作去制作网页的，而是编写代码去制作网页。哪怕人家用Dreamweaver开发，都不会采用鼠标点击的方式。

如果仅仅是开发前端的话，不一定要使用Visual Studio，Dreamweaver、Hbuilder等开发工具也是非常不错的

如果你是新手建议使用nodepad++手写一周代码，这样基础会更牢靠。

总结

常用前端开发工具

  1. Visual Studio
  2. Hbuilder
  3. Subline Text
  4. webstom
  5. nodepad++
  6. Dreamweaver

3、HTML基本结构

3.1、HTML基本结构

我们下面通过一张图来说明HTML的基本结构：

image-20200507144828919

一个HTML文档由4个基本部分组成：

  • 一个文档声明：<!DOCTYPE HTML>
  • 一个html标签对：<html></html>
  • 一个head标签对：<head></head>
  • 一个body标签对：<body></body>

大家都看到了吧，所谓的HTML就是一对对的标签（也有例外）。我们简单说一下这几个基本标签的作用：

1、文档声明

声明这是一个HTML文档。 2、标签 标签的作用相当于设计者在告诉浏览器，整个网页是从这里开始的，然后到结束。

对于这个标签，我们经常看到这样一句代码：

<html xmlns="http://www.w3.org/1999/xhtml">

其实上面这句代码声明了该网页使用的是W3C组织的XHTML标准。

3、标签

head标签是页面的“头部”，只能定义一些特殊的内容。

4、标签

body标签是页面的“身体”，一般网页绝大多数的标签代码都是在这里编写。

在此说明一下：

  • （1）对于HTML的基本结构，你至少要默写出来，这些都要记忆。
  • （2）记忆标签小技巧：根据标签字母意思就很容易记忆了，比如表示“页头”，表示“页身”。

3.2、用记事本编写网页

第一步：新建“记事本”，把下面这段代码复制到记事本中去，然后保存，将记事本名字改为“我的第一个网页”。

<!DOCTYPE HTML>
<html>
    <head>
        <title>这是网页的标题</title>    
    </head>
    <body>
        <p>这是网页的内容</p>       
    </body>
</html>

第二步：将记事本后缀名“.txt”改为“.html”：

用记事本编写HTML

第三步：点击“我的第一个网页.html”这个HTML文件，就可以在浏览器打开了。

用记事本编写HTM

在这里说明一下：

<title>标签是<head>标签的内部标签，这里定义的是网页的标题内容，这个标题不是文章的标题，而是在浏览器显示的那个标题；
<p>标签是段落标签，可以定义一段文字内容，我们在后面会讲到这些标签的具体用法，在这里只需要读者了解一下即可。

4. head标签

这一节课可能比较抽象，对于初学者也缺乏实操性，因为这几个标签一般都是“前端学习中期”或者“建站时期”才用得到，一般读者在刚刚接触HTML的过程中，实际用到并不多。但是为什么要在课程初给大家讲解标签呢？这也是让大家有一个很流畅的学习思路，先把“页头”学了，然后再学“页身”。这一小节大家如果只需要记得标签的内部标签有什么，都有什么用就足够了，如果你实在记不住，至少也要有个大概印象。等到我们把整一套前端教程学完，我们再回过头来看这一节，我们会受益匪浅的。

一般来说，只有6个标签能放在标签内：

① <title>；

② <meta>；

③ <link>；

④ <style>；

⑤ <script>

⑥ <base>；

4.1、head标签内的title标签

在上一节我们知道，title标签唯一的作用就是定义网页的标题，标题的内容都是放在title标签内，如本节课页面标题是：

<title>HTML head标签_HTML入门教程</title>

大家在浏览器可以看到本页的标题效果

4.2、head标签内的meta标签

<meta>标签又叫“元信息标签”，是<head>标签内的一个辅助性标签。<meta>标签提供的信息不显示在页面中，一般用来定义页面的关键字、页面的描述等，以方便搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）来搜索到你这个页面的信息。通俗点说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。

在互联网中，我们一般很形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”。

meta标签有两个重要的属性name和http-equiv。

1、meta标签name属性

我们先看一个实例：

<head>    
    <!--网页关键字-->
    <meta  name="keywords" content="雨果学院"/>
    <!--网页描述-->
    <meta  name="description" content="一个富有活力的技术学习网站"/>
    <!--本页作者-->
    <meta  name="author" content="yuguoxy">
    <!--版权声明-->
    <meta  name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则将追究法律责任。"/>
    </head>

下面我们来总结一下meta标签name属性的主要属性值：

name属性值 说明
keywords 网页的关键字（关键字可以是多个，而不仅仅是一个）
description 网页的描述
author 网页的作者
copyright 版权信息

上面只是列举了最常用的meta标签的name属性值，而name属性值远远不止以上那几个，对于初学者，我们仅仅了解上面几个就完全足够了。

2、meta标签http-equiv属性

学习meta标签的http-equiv属性，我们只需要了解它的两个作用就行了：

一，定义页面所使用的语言

二，实现页面的自动刷新跳转

（1）定义页面所使用的语言

语法：

<head>
    <meta  http-equiv="content-type" content="text/html; charset=gb2312"/>
</head>

说明：

这段代码告诉浏览器该页面所使用的字符集是gb2312，即国际汉字码。我们不需要记住，只需要了解就行了。

（2）页面自动跳转

语法：

<head>
    <meta  http-equiv="refresh" content="6;url=http:/www.baidu.com"/>
</head>

举例：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta  http-equiv="refresh" content="6;url=http://www.baidu.com"/>
    </head>
    <body>
        <p>这个页面在6秒之后自动跳转到百度首页</p>
</body>
</html>

<meta>标签对于一般页面制作者来说，实际意义不大，在前期过程中我们几乎涉及不到，只有在整站设计开发的实战中，我们才会用到非常多的meta标签属性。读者只需要了解meta标签的基本功能就行了，哪怕代码不会写都没关系，以后不会再回过头来看就行了。

4.3、head标签内的style标签

<head>标签内的<style>标签用于定义元素的CSS样式。在“[CSS入门课程](http://www.yuguoxy.com/les_cj/css_list.aspx)”我们会详细给大家介绍，在“[HTML入门教程](http://www.yuguoxy.com/les_hj/html_list.aspx)”中我们不需要深入探究。

语法：

<head>
    <style type="text/css">
        <!--这里写CSS样式-->
    </style>
</head>

举例：

<head>
    <style type="text/css">
        div
        {
            font-size:14px;
            color:red;
            border:1px solid gray;
        }
    </style>
</head>

4.4、head标签内的script标签

<head>标签内的<script>标签用于定义页面的脚本。在“[jQuery入门教程](http://www.lvyestudy.com/les_jj/jQuery_list.aspx)”我们会详细给大家介绍，在“HTML入门教程”中我们不需要深入探究。

语法：

<head>
    <script type="text/javascript">
        alert("HTML入门教程！");
    </script>
</head>

<head>标签内的<link>标签用于外部文件的链接，一般用于链接外部CSS样式表文件和JS文件。<link>标签是属于“CSS入门课程”的内容，在“HTML入门教程”中我们不需要深入探究。

语法：

<head>
    <link  rel="stylesheet"  type="text/css"  title="temp"  href="/temp.css/">
</head>

4.6、head标签内的base标签

<head>标签内的<base>标签为整个页面定义所有链接的基础定位，其主要的作用是为了确保文档中所有的相对URL，都可以被分解成正确的文档地址，使在文档本身被移动或重命名的情况下也可以正确解析。

语法：

<head>
    <base  href="http://yuguoxy.com"/>
</head>

标签经常使用在创建文档集合中，为了不破坏文档中任何链接，使用者通过在每个文档中放置正确的标签，便可以再目录甚至服务器之间移动整个文档集合。

<base>标签用得非常少，可以几乎忽略。

总结

1、head标签内部标签

head内部标签 说明
title 定义网页的标题
meta 定义网页的基本信息（供搜索引擎）
style 定义CSS样式
link 链接外部CSS文件或脚本文件
script 定义脚本语言
base 定义页面所有链接的基础定位

这些标签不记住没关系，感性认知即可。以后在碰到的时候至少要有一个印象。

5.其它标签

5.1html常用标签

标签名 标签元素 说明
标题 h1- h6
段落 p
换行 br
水平线 hr
图片 img
超链接 a
列表 ul ol dt
表格 table
行元素 span
块元素 div
表单 form 单选 多选 文本框 ...

5.2 HTML 5 简介

HTML5 是下一代的 HTML

HTML5 中的新特性：

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素：article、footer、header、nav、section
  • 新的表单控件：calendar、date、time、email、url、search

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 支持某些 HTML5 特性

新增标签

h5结构标签
header
section
article
nav
aside
footer
canvas
svg
vedio
audio