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

我们连续讲解。

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

淼哥学php在进修html这一篇文章就够了跟着淼哥学php全栈之路8 Java

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

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

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

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

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

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

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

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

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

这个是我们上次讲解的html架构。

接着我们连续讲解。

html标签

•写法<html></html>

HTML标签是HTML文档的根标签,在HTML中标签是一层嵌套一层的,而<HTML>标签是根标签(最表面一层的标签),所有其他的标签都写在这个标签中。

根标签我们可以理解为最外层的标签。
(看上面的构造)

文档头信息

HTML又包含head标签和body标签,个中head标签中设置文档头信息,body标签中设置文档的内容。

<head> 标签用于定义文档的头部,它是所有头部元素的容器。

<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、供应元信息等等。

下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

那么怎么理解元信息呢?比如对付网页本身的一些描述,该网页的标题?该网页的描述,该网页用的什么字符编码!
等等,这些信息描述着网页,用户又看不到这些信息。

比如某个人的性别,姓名,当你看到这个人,可以看到外面,身高,穿衣服的颜色。
但是你并不知道这个人的姓名,有的也不知道性别。
尤其像某些中性一点的长相。
是吧。
元信息不会渲染,但是属于该网页的信息。

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\公众/>

默认target的属性是_self,也便是点击超链接,在当前页面的框架中打开。
(为什么不是当前页面呢?由于页面有可能嵌套在框架里)

link标签

<link> 标签定义文档与外部资源的关系。
也便是说定义外部CSS文件存放的位置。
由于如果将CSS全部写在网页中,这样显的页面太乱,一样平常都是单独存放在一个CSS 文件中的。

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

用法: <head> <link rel=\"大众stylesheet\"大众 type=\"大众text/css\"大众 href=\"大众test.css\"大众></head>

meta标签

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

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

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

meta标签的浸染有:搜索引擎优化(SEO),定义页面利用措辞,自动刷新并指向新的页面,实现网页转换时的动态效果,掌握页面缓冲,网页定级评价,掌握网页显示的窗口等!

由于meta信息相比拟较繁芜我们将在往后HTML高等课程中讲解

最常用meta标签是:

<meta charset=“utf-8”/>

设置页面编码写法。
(页面编码把稳,要设置的编码和文档的编码统一,否则会出乱码)

详细编码往后的文章讲解。

script标签

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

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

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

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

用法<script type=\公众text/javascript\"大众>document.write(\"大众Hello World!\"大众) ></script> 往后学javascript将会用到,这里只做理解。

style标签

<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>

<title> 标签是 <head> 标签中唯一哀求包含的东西。
(必须有title标签)

head 标签总结

<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代码的时候,那个时候css用的很少,以是有一些标签来文本格式化。
现在基本都用CSS来格式化文本的大小颜色粗体等等。

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

html中的注释

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

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

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

水平线

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

段落标签-<p>

浏览器会自动地在段落的前后添加空行,一样平常用在大段的文章。

换行标签<br/>

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

链接<a>标签

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标签在页面上显示一张图片。

格式:

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

备注:一样平常只设置宽即可,浏览器会根据图片大小进行缩放。
如果强行设置宽、高,有的时候图片会失落真。

列表标签

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

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

二级列表<dl>标签

表格标签-table

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

Table标签中利用tr标签定义行,td标签定义一行中的一个列。
如:定义一个一行四列。

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

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

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

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

横向合并单元格-colspan

表格-table-竖向-rowspan

内联框架

可以利用iframe在页面中在嵌入其余一个页面。

分区标签-div

Div是块级标签,紧张是用来作为标签容器,和方案页面构造(页面布局)的

用法:

<div style=\公众margin:auto;border:1px solid #f00;width: 300px;height: 600px\"大众></div>

在很早以前,

Span标签

Span标签是内联标签,没有分外功能。
紧张是用来做为文本的容器,span标签紧张是合营CSS来处理笔墨。

比如,我只想让几个笔墨编程红颜色的,这个时候就可以用span标签合营CSS来做了。

框架集-frameset

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

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

frameset不能放在body中,如果放在body中不能显示框架 !

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

实体

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

在 HTML 中不能利用小于号(<)和大于号(>),这是由于浏览器会误认为它们是标签。

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

音频

<embed src=\"大众helloworld.swf\"大众 height=“100” width=“100”/>

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

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

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

本日我们一起理解了html干系的很多标签。
实在都很大略。
只要自己动手做一做,就可以做出来了。
如果想要做出精美的页面,还是须要合营css来实现的哦。

来日诰日我们连续讲解html的一些其他干系知识。
手写不宜!
请给

(注:本内容属于原创,未经容许严禁抄袭。
内容真实性已考证,图片来源于网络,图片如有侵权请联系作者删除)