Giskard

(一)HTML入门

2019-01-29

HTML 语言用于描述网页。

  • HTML 是指超文本标记语言: Hyper Text Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签文本内容
  • HTML 文档也叫做 web页面
  • HTML 标签通常是成对出现
  • 一个 HTML元素即某一行,包含了开始标签与结束标签
  • Web 浏览器(如谷歌浏览器、Internet Explorer、Firefox 和 Safari)是用于读取 HTML 文件,并将其作为网页显示
  • Web 浏览器不会直接显示 HTML 标签,而是通过使用标签来决定如何向用户展现 HTML 页面的内容

一个例子

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title>this is a title</title>
</head>
<body>
    <h1>标题</h1>
    <p>段落</p>
</body>
</html>
DOCTYPE 声明了文档的类型(即document的type)
<html>标签是HTML页面的根元素,该标签的结束标志为 </html>
<head>标签包含了文档的元(meta)数据,如<meta charset="utf-8">定义网页编码格式为utf-8。(charset意思为字符集)
<title>标签定义文档的标题,在head标签中
<body> 标签定义文档的主体,即网页可见的页面内容,该标签的结束标志为 </body>
<h1> 标签作为一个标题使用,该标签的结束标志为 </h1>
<p> 标签作为一个段落显示,该标签的结束标志为 </p>

title为文档标题,在网页不可见

h1为文本内容的标题,在网页可见

<!DOCTYPE> 声明

是标准通用标记语言的文档类型声明,有助于在浏览器中正确地显示网页。

由于网络上文件的类型不一,因此需要正确声明 HTML 版本,以使得浏览器能够正确识别并显示您的网页内容。

doctype 声明是不区分大小写的

在 HTML 页面的头部声明字符为 UTF-8 可以解决在浏览器中出现中文乱码的现象。

HTML链接

HTML 链接是通过标签 <a>定义的 (anchor(锚点)元素),既可以用来链接到外部地址实现页面跳转功能,也可以链接到当前页面的某部分实现内部导航功能。在 href 属性中指定链接的地址。(h为超文本,ref为reference指向)

<a href="http://www.w3cschool.cn">这是一个链接</a>

HTML图像

HTML 图像是通过标签 <img> 来定义的。使用img元素来为你的网站添加图片,使用src属性指向一个图片的具体地址。

img元素是自关闭元素,不需要结束标记。

<img src="picture.png" width="100" height="200">

HTML元素

HTML 文档由 HTML 元素定义,HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性
<p>元素、<html>元素、<body>元素...
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>,以及一个结束标签 </html>.
元素内容是另一个 HTML 元素(body 元素)。

HTML 的一个空元素为 <br>(用于定义换行),<br> 元素就是没有关闭标签。

HTML 空元素的关闭方法是在开始标签中添加斜杠,比如 <br />,HTML、XHTML 和 XML 都接受这种方式。

Tags: HTML