现在的位置: 首页 > web前端 > 正文

对html的一点了解

2018年02月23日 web前端 ⁄ 共 8197字 ⁄ 字号 评论关闭

    HTML指的是超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言。HTML使用标签来描述网页,HTML标签是由尖括号包围的关键词,比如<html>。标签通常是成对出现的,比如<b>和</b>标签对中的第一个标签是开始标签,第二个标签是结束标签。   

    HTML文档和HTML元素是通过HTML标签进行标记的,由开始标签和结束标签组成的,某些HTML元素没有结束标签,比如<br />。 

    HTML元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。HTML元素以开始标签起始,以结束标签终止,元素的内容是开始标签与结束标签之间的内容。某些HTML元素具有空内容(empty content),空元素在开始标签中进行关闭(以开始标签的结束而结束)。大多数HTML元素可拥有属性。大多数HTML元素可以嵌套(可以包含其他 HTML 元素)。HTML文档由嵌套的HTML元素构成。

    <html>元素定义了整个HTML文档。这个元素拥有一个开始标签<html>,以及一个结束标签</html>。即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。未来的HTML版本不允许省略结束标签。

    空元素是在开始标签中关闭的。<br /> 就是没有关闭标签的空元素(<br /> 标签定义换行)。在 XHTML、XML 以及未来版本的HTML中,所有元素必须被关闭。在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML和XML都接受这种方式。即使<br>在所有浏览器中都是有效的,但使用<br />其实是更长远的保障。

    HTML标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的HTML标签。W3School使用的是小写标签,因为万维网联盟(W3C)在HTML 4中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

    属性为HTML元素提供附加信息。HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。属性总是以名称/值对的形式出现,比如:name="value"。属性总是在HTML元素的开始标签中规定。属性和属性值对大小写不敏感。不过,万维网联盟在其HTML 4推荐标准中推荐小写的属性/属性值。而 XHTML 要求使用小写的属性/属性值。属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号。

    标题(Heading)是通过<h1> - <h6>等标签进行定义的。<h1>定义最大的标题。<h6> 定义最小的标题。浏览器会自动地在标题的前后添加空行。默认情况下,HTML会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。请确保将HTML heading标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。应该将h1用作主标题(最重要的),其后是h2(次重要的),再其次是h3,以此类推。

    <hr /> 标签在 HTML 页面中创建水平线。hr元素可用于分隔内容。使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。可以将注释插入HTML代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不是显示它们。注释是这样写的:<!-- This is a comment -->开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。合理地使用注释可以对未来的代码编辑工作产生帮助。

    可以把HTML文档分割为若干段落。段落是通过<p>标题定义的。浏览器会自动地在段落的前后添加空行。使用空的段落标记<p></p>去插入一个空行是个坏习惯。用<br />标签代替它!如果您希望在不产生一个新段落的情况下进行换行(新行),请使用<br />标签。您也许发现<br>与<br />很相似。在XHTML、XML以及未来的HTML版本中,不允许使用没有结束标签(闭合标签)的HTML元素。即使<br>在所有浏览器中的显示都没有问题,使用<br />也是更长远的保障。

    HTML可定义很多供格式化输出的元素,比如粗体和斜体字。pre 标签等计算机输出标签很适合显示计算机代码,它保留了空格和换行。

    style属性用于改变HTML元素的样式。style属性的作用:提供了一种改变所有 HTML 元素的样式的通用方法。样式是HTML 4引入的,它是一种新的首选的改变HTML元素样式的方式。通过HTML样式,能够通过使用style属性直接将样式添加到HTML元素,或者间接地在独立的样式表中(CSS 文件)进行定义。在HTML4中,有若干的标签和属性是被废弃的。被废弃(Deprecated)的意思是在未来版本的HTML和XHTML中将不支持这些标签和属性。这里传达的信息很明确:请避免使用这些被废弃的标签和属性!

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

<h1 style="text-align:center">This is a heading</h1>

    HTML使用超级链接与网络上的另一个文档相连。HTML使用<a>(锚)标签来创建连接另一个文档的链接。锚可以指向网络上的任何资源:一张HTML页面,一幅图像,一个声音或视频文件等等。

创建锚的语法:

<a href="url">Text to be displayed</a><a> 用来创建锚。href 属性用于定位需要链接的文档,锚的开始标签和结束标签之间的文字被作为超级链接来显示。

    使用target属性,你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档:

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>锚标签和Name属性,Name属性用于创建被命名的锚(named anchors)。当使用命名锚(named anchors)时,我们可以创建直接跳至页面中某个节的链接,这样使用者就无需不停的滚动页面来寻找他们需要的信息。

以下是命名锚的语法:

<a name="label">Text to be displayed</a>

name属性用于创建命名锚。锚的名称可以是任何你喜欢的名字。

下面这行定义了命名锚:

<a name="tips">Useful Tips Section</a>你会注意到,命名锚会以特殊的方式来显示。

将#符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个节,就像这样:

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">

Jump to the Useful Tips Section</a>从文件 html_links.asp 内部链接到 Useful Tips 节的超级链接是这样的:

    总是将正斜杠添加到子文件夹。假如你这样书写链接的话:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/" 

    命名锚经常被用在长的文档中创建目录。可以为每个章节赋予一个命名锚,然后连接到这些锚的链接被置于文档的上部。假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

    表格由<table>标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义)。字母td指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。使用边框属性来显示一个带有边框的表格。

    表格的表头使用<th>标签进行定义。在大多数浏览器中,没有内容的表格单元显示得不太好。这个空的单元格的边框没有被显示出来。(不过 Mozilla Firefox 可以将整个边框显示出来。)为了避免这种情况,在空单元格中添加一个空格占位符 ;,就可以将边框显示出来。

    无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于<ul>标签。每个列表项始于<li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等同样,有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

    表单是一个包含表单元素的区域。表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。表单使用表单标签(<form>)定义。多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:文本域(Text Fields)、单选按钮Radio Buttons)、复选框(Checkboxes)、表单的动作属性(Action)和确认按钮。注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

    <img>是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的URL地址。定义图像的语法是:

<img src="url" />URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

    <img src="boat.gif" alt="Big Boat">在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

    <body> 拥有两个配置背景的标签。背景可以是颜色或者图像。背景颜色(Bgcolor):背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">

<body bgcolor="rgb(0,0,0)">

<body bgcolor="black">以上的代码均将背景颜色设置为黑色。

背景(Background):背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">

<body background="http://www.w3school.com.cn/clouds.gif">URL可以是相对地址,如第一行代码。也可以使绝对地址,如第二行代码。

    如果你打算使用背景图片,你需要紧记一下几点:背景图像是否增加了页面的加载时间。图像文件不应超过 10k。 背景图像是否与页面中的其他图象搭配良好。背景图像是否与页面中的文字颜色搭配良好。图像在页面中平铺后,看上去还可以吗?对文字的注意力被背景图像喧宾夺主了吗? 

    颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。仅仅有16种颜色名被W3C的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。如果需要使用其它的颜色,需要使用十六进制的颜色值。

    数年以前,当大多数计算机仅支持256种颜色的时候,一系列216种Web安全色作为Web标准被建议使用。最初216跨平台web安全色被用来确保:当计算机使用256色调色板时,所有的计算机能够正确地显示所有的颜色。

    颜色由红色、绿色、蓝色混合而成。颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。通过计算256x256x256,从0 到255的红色、绿色和蓝色的值一共可以组合出1600万种不同的颜色。大多数现代的显示器有能力显示出至少16384种不同的颜色。

    通过使用HTML4.0,所有的格式化信息都可以从HTML文件中剥离,并植入一个独立的样式表。因为HTML4.0将文档的表现与其结构分离,我们从而得到了我们一直需要的东西:在不把文档内容搞糟的情况下,对表现层进行完全的控制。XHTML是新的HTML。你现在就应该为此做好准备。而您可以做的最重要的事情就是开始编写正确的HTML4.01代码。并且使用小写字母编写标签。记得关闭标签。决不要在没有</p>标签的情况下结束一个段落。官方的HTML4.01标准推荐使用小写的标签。HTML文档是根据文档类型声明进行验证的。如果希望HTML文件被正确地验证,就要将恰当的 DTD 添加到文件的第一行。

    一些字符在HTML中拥有特殊的含义,比如小于号(<)用于定义HTML标签的开始。如果我们希望浏览器正确地显示这些字符,我们必须在HTML源码中插入字符实体。字符实体有三部分:一个和号(&),一个实体名称,或者#和一个实体编号,以及一个分号 (;)。要在HTML文档中显示小于号,我们需要这样写:< 或者 <

    使用实体名称而不是实体编号的好处在于,名称相对来说更容易记忆。而这么做的坏处是,并不是所有的浏览器都支持最新的实体名称,然而几乎所有的浏览器对实体编号的支持都很好。实体对大小写敏感。

    头元素包含关于文档的概要信息,也称为元信息(meta-information)。Meta意为关于某方面的信息。可以这么说,元数据(meta-data)是关于数据的信息,而元信息是关于信息的信息。头元素内的元素不会被浏览器显示出来。根据 HTML 标准,仅有几个标签在HTML的头部分是合法的。它们是:<base>, <link>, <meta>, <title>, <style>和<script>。

    头元素包含着关于文档的概要信息。HTML同样包含位于head元素内部的meta元素。Meta元素的作用是提供文档的元信息。大多数情况下,meta元素用来提供与浏览器或者搜索引擎相关的信息,比方说描述文档的内容等等。

    W3C 声明说:某些用户程序支持使用 META 在设定好的几秒钟后来刷新当前的页面,并将之替换为另一个url。开发人员不应使用此技术强迫用户转到不同的页面,因为这样会使页面的可用性变差。相反,应使用服务器端重定向来进行自动页面定向。 

    一个称为URL(统一资源定位器)的东西用于对万维网上的文档(或其他数据)进行寻址。一个完整的网址,例如:http://www.w3school.com.cn/html/lastpage.html,遵守如下语法规则:

scheme://host.domain:port/path/filename

    Scheme 定义因特网服务的类型。最流行的类型是 http。domain(域)定义因特网域名,比如:w3school.com.cn。host(主机)定义此域中的主机。如果被省略,缺省的支持 http 的主机是 www。:port(端口)定义主机的端口号。端口号通常是被省略的。缺省的端口号是 80。path(路径)定义服务器上的路径(一个辅助的路径)。如果路径被省略,资源(文档)会被定位到网站的根目录。filename(文件名)定义文档的名称。缺省的文件名一般会是 default.asp 或者 index.html,或者依据 WEB 服务器设置的其他文件名。

链接到邮件系统

以下HTML代码创建一个指向您的邮件系统的链接:

<a href="mailto:someone@w3school.com.cn">someone@w3school.com.cn</a>

使用 FTP 进行下载

以下 HTML 代码创建一个下载文件的链接:

<a href="ftp://www.w3school.com.cn/ftp/winzip.exe">Download WinZip</a>

    HTML 中的脚本使用<script>标签进行定义。请注意你可以使用type属性来指定脚本语言。如果浏览器压根没法识别<script>标签,那么<script>标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别<script>标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。

    除了将脚本隐藏于注释中,你还可以添加<noscript>标签。<noscript>标签用于定义假如脚本没有执行时的替代文本。这个标签被用于以下情况:如果浏览器能够识别 <script> 标签,但是不支持其中的脚本,那么这些浏览器将显示出<noscript>标签内部的文本。不过,如果浏览器支持<script>内的脚本,那么浏览器将忽略<noscript>标签。

    在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为,例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的JavaScript,可以将某些特定的事件处理器作为属性添加给特定的标签,并可以在事件发生时执行一个或多个JavaScript 命令或函数。

    事件处理器的值是一个或一系列以分号隔开的Javascript表达式、方法和函数调用,并用引号引起来。当事件发生时,浏览器会执行这些代码。例如,当您把鼠标移动到一个超链接时,会启动一个JavaScript函数。

    URL 编码的作用是把字符转换为可在因特网上安全传输的格式。在因特网上传送URL的话,只能使用ASCII字符集。由于URL经常会包含ASCII字符集以外的字符,所以必须对URL进行转换。URL编码所做的事情就是把URL转换为有效的ASCII格式。进行URL编码时,每一个非安全的ASCII字符会被替换为"%hh"格式,其中hh是两位十六进制数,它对应于该字符在ISO-8859-1字符集里的字符编码值。URL中不能含有空格,URL编码通常会将空格替换为加号(+)。

 

抱歉!评论已关闭.