web 基础（一） HTML

时间 2020-06-27

标签 web 基础 html 栏目 HTML 繁體版

原文原文链接

web 基础（一） HTML 与 XHTML

1、HTML介绍

HTML（ Hyper Text Markup Language）指的是超文本标记语言，是用来描述网页的一种语言。它包括一系列标签．经过这些标签能够将网络上的文档格式统一，使分散的Internet资源链接为一个逻辑总体。css

（一）特色：

简易性。超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性。超级文本标记语言的普遍应用带来了增强功能，增长标识符等要求，超级文本标记语言采起子类元素的方式，为系统扩展带来保证。
平台无关性。虽然我的计算机大行其道，但使用MAC等其余机器的大有人在，超级文本标记语言可使用在普遍的平台上，这也是万维网（WWW）盛行的另外一个缘由。
通用性。另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它容许网页制做人创建文本与图片相结合的复杂页面，这些页面能够被网上任何其余人浏览到，不管使用的是什么类型的电脑或浏览器。

2、XHTML

XHTML(eXtensible HyperText Markup Language) 指的是可扩展超文本标记语言，是将超文本标记语言HTML（HyperText Markup Language）做为XML应用而从新定义的标准。html

（一）、HTML和XHTML之间的差别

XHTML 元素必须被正确地嵌套。 通常html网页能够“<b><i>主要内容</b></i>”这是个不严格，在XHTML是错误的；正确的在xhtml标准中就必需要求这样“<b><i>主要内容</i></b>”。
XHTML 元素必须被关闭。如一个HEAD里的例子，“<meta name="keywords" content="关键字" > ”像这个标签在html是可行的，可是为了xhtml的标准因此必须关闭如“<meta name="keywords" content="关键字" /> ”
标签名必须用小写字母。在之前的网页中对于不少标签一般使用大写或大小写的编排方式，可是在为了WEB标准如今标签都要求小写统一
XHTML 文档必须拥有根元素。意思就是一什么标签开始就要用什么标签结束，如<body>开始就要在内容结束用</body>来关闭。
对于图片需添加alt属性。之前不少时候在网页里显示图片img标签里均可加可不加alt属性，可是如今xhtml要求必须加上alt属性,否则xhtml验证将提示错误，哪怕alt的值为空均可以。加上alt能够对图片进行文字说明，可以让搜索引擎辨别图片内容，是优化网页好地方。

3、HTML经常使用标签

上面列出了HTML 经常使用的标签，详细标签可访问：HTML 标签（按功能排序）。web

4、元素的经常使用属性

上面是 HTML文档里标签的共同属性，每一个标签不只有共同属性，还有它们各自特有的属性，详细内容能够访问：元素的其余属性。浏览器

5、头部

一个完整的HTML 文档，分别有头部和主题部分，头部 <head>元素包含了全部的头部标签元素。能够添加在头部区域的元素标签为: <title>、<style>、<meta>、<link>、<script>、<noscript> 和 <base>.。网络

<title>：定义文档的标题。浏览器会以特殊的方式来使用标题，而且一般把它放置在浏览器窗口的标题栏或状态栏上， <title>文档标题</title>
<style>：用于为 HTML 文档定义样式信息。在 style 中，能够规定在浏览器中如何呈现 HTML 文档。
<meta>：元素可提供有关页面的元信息（meta-information），好比针对搜索引擎和更新频度的描述和关键词。
<link>：标签订义了文档与外部资源之间的关系。最多见的用途是连接样式表， <link rel="stylesheet" type="text/css" href="style.css" /> 。
<script>：用于加载或编写脚本文件，如： JavaScript。
<noscript>：用来定义在脚本未被执行时的替代内容（文本）。
<base>：为页面上的全部连接规定默认地址或默认目标。

6、主体

主体部分是 HTML 文档的重要部分，该部分编写的代码最终会呈现给客户。<body> 元素定义文档的主体。<body> 元素包含文档的全部内容（好比文本、超连接、图像、表格和列表等等）。其中常见的有：工具

一、定义标题：<h1> -> <h6>

<h1> 定义最大的标题。 <h6> 定义最小的标题。标题是经过 <h1> -> <h6> 标签进行定义的。以下所示：优化

<h1>这是h1标题。</h1>
<h2>这是h2标题。</h2>
<h3>这是h3标题。</h3>

二、定义段落：<p>

定义一个段落，若是在不产生一个新段落的状况下进行换行（新行），使用 <br> 标签。以下所示：ui

<p>这个<br>段落<br>演示了分行的效果</p>

三、超连接：<a>

定义超连接，用于从一个页面连接到另外一个页面。<a> 元素最重要的属性是 href 属性，它指示连接的目标。以下所示：搜索引擎

<a href="https://www.baidu.com/">百度</a>

四、图片：<img>

向网页中嵌入一幅图像，<img> 标签有两个必需的属性：src 属性和 alt 属性。src 指 "source"。源属性的值是图像的 URL 地址。alt 属性用来为图像定义一串预备的可替换的文本。以下所示：spa

<img src="图片的URL"  alt="图片" />

五、文档的分区或节点：<div>

<div> 标签能够把文档分割为独立的、不一样的部分。它能够用做严格的组织工具，而且不使用任何格式与其关联。若是用 id 或 class 来标记 <div>，那么该标签的做用会变得更加有效。以下所示：

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

7、示例

HTML 规范的文档格式：

<!DOCTYPE html> -----------------》 文档的定义类型
<html lang=en> ------------------》 HTML 文档
  <head> ------------------------》 文档头部
    <meta charset=utf-8> --------》 定义文档字符集 utf-8
    <title>HTML</title> ---------》 定义一个标题
  </head>
  <body> ------------------------》 网页主体，网页可见内容
  </body>
</html>

HTML 示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>第一个网页</title>
</head>
<body>
     <h1>这是第一个网页</h1>
     <p>这是一个段落</p>
     <a href="https://www.baidu.com/">跳转到百度</a>
</body>
</html>