大家好，我是四川新华电脑学院小张，

这篇文章讲解HTML的相关知识，如果想从零开始学习php编程的小伙伴，请从淼哥的第一篇文章看！

初学者学习html用什么工具（这一篇文章就够了）(1)

上次文章讲解的是DTD，也就是我们常说的DOCTYPE。

我们继续讲解。

<!DOCTYPE html>-------------------------DOCTYPE 声明了文档类型

<html> ------------------------------------文档类型html开始标记

<head> -----------------------------------头部标记

<title>我的第一个标题</title>

</head> ----------------------------------头部结束标记

<body> ---------------------------------文件主体

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body> ----------------------------------文件主体结束

</html> ----------------------------------文档类型html结束标记

  • base标签

    • （该标签应该学习了a img link form这几个标签之后在学习，看不懂没关系，可以先了解）

    base标签，是嵌套在head标签中的一个标签。这个标签是一个可选标签，也就是可以有，也可以没有！

    <base> 标签为页面上的所有链接规定默认地址或默认目标。

    通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。比如：我有个<a href='aa.html'>标签,那么浏览器会从当前文档的url，比如当前文档的url是www.xxxx.com/aa/bb/cc.html，浏览器会把www.xxxx.com/aa/bb/路径拿出来，和aa.html组成新的url，那么这个超链接就会变成www.xxxx.com/aa/bb/aa.html。

    使用 <base> 标签可以改变这一点。

    如果我们将base设置成为其他的url。<base href="http://www.myweb.com/i/" />那么，还是<a href='aa.html'>标签，就会把http://www.myweb.com/i/这个路径拿出来和aa.html组成新的url地址。那么这个url超链接就会变成http://www.myweb.com/i/a.html这个链接了。

    浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

    base标签的用法

    <base href="http://www.myweb.com/i/" /> ------必选属性。（你有这个标签，就必须拥有这个属性）

    <base target="_blank" /> ------------------可选属性。target意思是目标，打开超链接的方式，

    当然也可以将两个属性写到一个base标签中。

    <base href="http://www.myweb.com/i/" target="_blank"/>

    初学者学习html用什么工具（这一篇文章就够了）(2)

    默认target的属性是_self，也就是点击超链接，在当前页面的框架中打开。（为什么不是当前页面呢？因为页面有可能嵌套在框架里）

    初学者学习html用什么工具（这一篇文章就够了）(3)

    <link> 标签定义文档与外部资源的关系。 也就是说定义外部css文件存放的位置。因为如果将CSS全部写在网页中，这样显的页面太乱，一般都是单独存放在一个CSS 文件中的。

    <link> 标签最常见的用途是链接样式表CSS。

    用法： <head> <link rel="stylesheet" type="text/css" href="test.css"></head>

    初学者学习html用什么工具（这一篇文章就够了）(4)

    <meta> 元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。

    <meta> 标签位于文档的头部，不包含任何内容。

    <meta> 标签的属性定义了与文档相关联的名称/值对。

    meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

    由于meta信息相对比较复杂我们将在以后HTML高级课程中讲解

    最常用meta标签是：

    <meta charset=“utf-8”/>

    设置页面编码写法。（页面编码注意，要设置的编码和文档的编码统一，否则会出乱码）

    初学者学习html用什么工具（这一篇文章就够了）(5)

    具体编码以后的文章讲解。

    <script> 标签用于定义客户端脚本，比如 JavaScript。

    script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

    必需的 type 属性规定脚本的 MIME 类型。

    JavaScript 的常见应用是图像操作、表单验证以及动态内容更新。

    用法<script type="text/javascript">document.write("Hello World!") ></script> 以后学javascript将会用到，这里只做了解。

    <style> 标签用于为 HTML 文档定义样式信息。（内联CSS样式）

    在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。

    type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"。

    用法<head> <style type="text/css"> h1 {color:red} p {color:blue} </style> </head>

    该标签将会在学习CSS时用到，这里只做了解

    <title> 元素可定义文档的标题。

    浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。

    同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

    用法<title>网页标题</title>

    <title> 标签是 <head> 标签中唯一要求包含的东西。（必须有title标签）

    <head>标签唯一要求包含的标签是<title>其他那几种可以包含也可以不包含，但是一般我们会包含<meta charset=“utf-8”>告诉浏览器我们的文件编码是什么。

    常用的标签有：

    <meta name=“keywords” content=“关键字”>告诉搜索引擎这个页面的关键字

    <meta name=“description” content=“页面介绍”>告诉搜索引擎这个页面的简介

    meta标签，会在Html高级部分继续讲解。

    <body>页面主体信息

    body 元素包含html的所有显示web内容（比如文本、超链接、图像、表格和列表等等。）

    Body中可以使用块级标签和内联标签来显示文档结构

    块级标签：h1~h6,p,div,table,ul,dl,from标签等

    内联标签：a,img,span,I,strong,select标签等

    什么块级标签（元素）呢？块级标签和内联标签区别是什么？

    块级元素(block)特性:总是独占一行

    内联元素(inline)特性:和相邻的内联元素在同一行。

    标签和元素是一个意思！

    <body>中包含的标签？

    通过<h1>~<h6>六个标签定义不同大写的标签。

    初学者学习html用什么工具（这一篇文章就够了）(6)

    初学者学习html用什么工具（这一篇文章就够了）(7)

    初学者学习html用什么工具（这一篇文章就够了）(8)

    早期编写html代码的时候，那个时候css用的很少，所以有一些标签来文本格式化。现在基本都用CSS来格式化文本的大小颜色粗体等等。

    而更多时候使用这些标签来进行占位，利用CSS来渲染这些标签。常用的是span。

    注释用来说明、注解、注释代码。给人看的不会被执行。

    格式为：<!– 注释内容-->

    浏览器页面不会被显示，而页面源代码中可以看到注释的内容。因为项目越大，或者你的页面越大，当时可能你能看懂。时间长了肯定看不明白。如果有注释的话，可以马上理解当时为什么要这么做。

    在HTML代码中加入一条水平线利用<hr />来操作。

    初学者学习html用什么工具（这一篇文章就够了）(9)

    初学者学习html用什么工具（这一篇文章就够了）(10)

    浏览器会自动地在段落的前后添加空行，一般用在大段的文章。

    初学者学习html用什么工具（这一篇文章就够了）(11)

    初学者学习html用什么工具（这一篇文章就够了）(12)

    <br/>标签可以实现换一个新行 ,正常来说，你在编写html页面的时候，无论怎么换行，在页面用浏览器打开的时候，是不会换行的，如果加入了<br/>标签，浏览器就会认为这里该换行显示了。

    初学者学习html用什么工具（这一篇文章就够了）(13)

    初学者学习html用什么工具（这一篇文章就够了）(14)

    HTML 使用超级链接与网络上的另一个文档相连。

    几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

    超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

    当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

    我们通过使用 <a> 标签在 HTML 中创建链接。

    有两种使用 <a> 标签的方式：

    1、通过使用 href 属性 - 创建指向另一个文档的链接

    <a href=“链接的文件名” target=“_blank”>链接名</a>

    2、通过使用 name 属性 - 创建文档内的书签

    一般锚点链接主要用于网页太长了，想浏览的那个位置需要滚轮滚动好几下才能到达那个位置，而使用锚点（书签）直接可以准确的跳转到你想去的位置。

    <a name=“文档标签名”>文档标签</a>

    文档中对锚进行命名（创建一个书签）

    <a href=“#tips”>链接名</a>

    同一个文档中创建指向该锚的链接用关键字# 锚名字

    <a href="http://www.xxx.com.cn/html/html_links.asp#tips">有用的提示</a>

    也可以链接到其他网络上的页面锚的链接

    可以使用img标签在页面上显示一张图片。

    格式：

    <img src=“图片路径” width=“宽” height=“高” alt=“图片无法显示时的提示”title=“鼠标放图片上的提示”/>

    初学者学习html用什么工具（这一篇文章就够了）(15)

    初学者学习html用什么工具（这一篇文章就够了）(16)

    备注：一般只设置宽即可，浏览器会根据图片大小进行缩放。如果强行设置宽、高，有的时候图片会失真。

    列表标签分为有序标签和无序标签

    初学者学习html用什么工具（这一篇文章就够了）(17)

    初学者学习html用什么工具（这一篇文章就够了）(18)

    当然、有序列表前面也可以更改序号，需要在CSS中学习改变序号的方法。

    初学者学习html用什么工具（这一篇文章就够了）(19)

    初学者学习html用什么工具（这一篇文章就够了）(20)

    Table标签用来制作表格，表格由若干个行<tr>组成，每一行又由若干个单元格<td>组成。

    初学者学习html用什么工具（这一篇文章就够了）(21)

    Table标签中使用tr标签定义行，td标签定义一行中的一个列。如：定义一个一行四列。

    初学者学习html用什么工具（这一篇文章就够了）(22)

    初学者学习html用什么工具（这一篇文章就够了）(23)

    表格的表头使用 <th> 标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本：

    初学者学习html用什么工具（这一篇文章就够了）(24)

    初学者学习html用什么工具（这一篇文章就够了）(25)

    <table>标签的cellpadding 属性规定单元边沿与其内容之间的空白。

    <table>标签的cellspacing 属性规定单元格之间的空间。

    初学者学习html用什么工具（这一篇文章就够了）(26)

    初学者学习html用什么工具（这一篇文章就够了）(27)

    横向合并单元格-colspan

    初学者学习html用什么工具（这一篇文章就够了）(28)

    初学者学习html用什么工具（这一篇文章就够了）(29)

    表格-table-竖向-rowspan

    初学者学习html用什么工具（这一篇文章就够了）(30)

    初学者学习html用什么工具（这一篇文章就够了）(31)

    可以使用iframe在页面中在嵌入另外一个页面。

    初学者学习html用什么工具（这一篇文章就够了）(32)

    在很早以前，小编刚入行的时候，那个时候CSS不流行，页面布局全部都用表格来做。那酸爽实在无法用言语来表达。而现在都是用CSS来进行页面布局。这个div标签页是以后布局常用的标签。

    Span标签是内联标签，没有特殊功能。主要是用来做为文本的容器，span标签主要是配合CSS来处理文字。

    比如，我只想让几个文字编程红颜色的，这个时候就可以用span标签配合CSS来做了。

    我们可以使用frameset标签把一个页面窗口分隔成多个窗口，然后使用frame标签为每一个窗口制定一个页面

    使用rows/cols的值规定每行或每列占据屏幕的面积,中间用逗号分隔。

    frameset不能放在body中，如果放在body中不能显示框架 ！

    初学者学习html用什么工具（这一篇文章就够了）(33)

    在最新的html5中已经删除了这个标签了

    在 HTML 中，某些字符是预留的。

    在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

    初学者学习html用什么工具（这一篇文章就够了）(34)

    比如我们想在网页使用空格，直接按空格键是肯定不好使的，所以使用使用实体&nbsp; !

    <embed src="http://img.studyofnet.comhelloworld.swf" height=“100” width=“100”/>

    <embed> 标签是 HTML 5 中的新标签。

    使用embed标签可以在网页中嵌入Flash，Mid，MP3等嵌入式内容

    现在html5出了很多新的标签，以后会专门有讲解html5的文章。

    今天我们一起了解了html相关的很多标签。其实都很简单。只要自己动手做一做，就可以做出来了。如果想要做出精美的页面，还是需要配合css来实现的哦。

    明天我们继续讲解html的一些其他相关知识。手写不宜！请给小编点个赞！十分感谢。

    ,