首页 > 技术文章 > html的入门——从标签开始(4)

banbianfengxue 2019-04-07 11:49 原文

html中的其他标记:

~

DOCTYPE(文档类型):

<!DOCTYPE html>:

由于HTML存在多个版本,因此每个网页的开头都应该用一个DOCTYPE声明来告诉浏览器此页使用了HTML的哪个版本(当然,即使没有声明DOCTYPE声明,浏览器通常也会显示页面)。

由于XHTNL是采用XML编写的,因此有时你会看到使用了严格版XHTML DOCTYPE的页面以一个可选的XML声明开头。只要使用可XML声明,就必须将它放在最开始之处。

在它前面不能有任何字符,即使一个空格也不行。

HTML中的注释:

<!--   -->:

如果你希望在代码中添加一段不会显示在用户浏览器上的注释,可以在<!--   -->中添加相应文本。

在代码中添加注释是个良好的习惯,这会帮助别人理解你的代码,同时在以后自己翻看代码时,会更加清晰。

ID特性:

<p id="text1">text1</p>

每个HTML元素都可以附带id特性。id特习惯用来从页面上的其他元素中对一个元素进行唯一标识,他的值应该以字母或下划线开头(而不能以其他字符或数字)。

在一个页面中所有的id特性都是独一无二的。ID特性一般使用在JavaScript当中。

class特性:

<p class="text1">text1</p>

每个HTML元素都可以附带一个class特性。有时候,一种方法可以指定多个元素并将这些元素和页面上的其他元素区分出来,而不是单独指定文档中的某个元素。

为此,可以使用class属性。class属性指明了元素所属的类。

class特性和id特性不同,同一个风格的元素可以使用相同的class值。class特性一般使用在CSS当中。

块级元素:

有些元素在浏览器窗口中显示时总是另起一行,这些元素被称为块级元素。

块级元素的实例包括:<h1>,<p>,<ul>以及<li>等。

内联元素:

有些元素在显示时总是与它的相邻元素出现在同一行内。这些元素被称为内联元素。

内联元素的实例包括<a>,<b>,<em>以及<img>等。

将文本和元素集中在一个块级元素中:

<div></div>:

<div>元素允许你将一组元素集中到一个块级元素内。

例如,你可能会创建一个<div>元素来包含网站头部的所有元素(标志和导航),还可能会创建一个<div>元素来包含访问者的评论。

如果在<div>元素上使用id特性或者class特性,就意味着你可以通过创建CSS规则来制定<div>元素的一些风格。

由于<div>元素的内部具有其他一一些元素,所以最好在结束标签</div>后面添加一个注释,如:
<div>

Some Docments

</div><!--  end of header -->

将文本和元素集中在一个内联元素中:

<span></span>:

<span>元素就像是<div>元素的内联版本,它用来:

1.在没有其他合适元素的情况下包含一段文本并将其与周围的文本区别开

2.包含若干个内联元素
我们使用<span>元素最常见的原因就是使用CSS来控制<span>元素内部的风格。

内联框架:

<iframe></iframe>:

<iframe
width="450";
height="350";
src="https://www.amap.com/">
</iframe>

内联框架就像你在网页里面分割的一个小窗口——你可以在这个小窗口看见另一个网页。iframe这一术语时inline frame(内联框架)的缩写。

src:特性指定要在框架中显示的页面URL。

height/width:特性值指定内嵌框架高度/宽度的像素值。

更多的风格建议在CSS中设置。

页面信息:

<meta>元素位于<head>元素中并包含着所在页面的相关信息。 

它对用户不可见,却有很多用途,比如把页面的相关信息告诉搜素引擎,指出页面的设计者以及这个页面是否存在事件敏感性(如果页面具有时间敏感性,也可以设置他的过期时间)。

<meta>元素是空元素,所以它没有结束标签。他通过特性来携带信息。

最常用的特性是name特性和content特性,它们还经常同时出现。这些特性用来指定页面某些特性。name特性的值就是你要设定的属性,而content特性的值就是i你想给这个属性指定的值。

name特性的值可以任意指定,该特性的一些常用值有:

description:用于包含一段有关页面的描述信息。该描述信息通常被搜索引擎用来了解页面的内容并且最多只能容纳155个字符。有时它会显示在搜索引擎的检索结果中。

keywords:用于包含一组以都好分割的关键词列表,用户可能通过这些关键词来找到这个页面。事实上,这一特性对于搜索引擎建立你的网站的索引已经没有明显作用了···

robots:用于指定搜索引擎是否可以加入到它们的搜索结果中。如果不希望页面加入搜索结果中,可以使用值noindex。

如果希望搜索引擎将该页面加入搜索结果,但不要收录页面上链接的其他页面,可使用值nofollow。

<meta>元素还会成对使用http-equiv特性和content特性。在本页的实例中,你可以看到http-equiv特性的三个实例。每个实例都有各自的用途:

author:用于定义网页设计者。

pragma:用于防止浏览器对页面的缓存(员村是将页面保存在本地,以后访问该页面时就可以节省页面的加载时间)。

expires:由于浏览器经常缓存页面内容,expires选项可以用来指定页面的过期时间(以及缓存的有效期)。注意,必须按照示例中给出的格式来设置日期。

推荐阅读