likes
comments
collection
share

HTML&CSS (一) WEB与HTML

作者站长头像
站长
· 阅读数 33

WEB起源

HTML&CSS (一) WEB与HTML

网页的组成

根据W3C标准： 一个网页主要由三部分组成：结构、表现、行为

HTML&CSS (一) WEB与HTML

结构(HTML)

HTML用于描述网页结构

表现(CSS)

CSS用于控制页面中元素的样式

行为(JavaScript)

JavaScript用于响应用户操作

HTML(HyperText Markup Language)

HTML即 超文本标记语言

  • 超 (即超链接，从一个页面指向另一个页面)
  • 文本 (即纯字符，无任何修饰的文本)
  • 标记语言 (通过内容注释的方式来表示相应的信息并使内容结构化的语言)

HTML&CSS (一) WEB与HTML

拓展：超文本文档是指使用超链接的方式，把文字和图片信息相互联结，形成具有相关信息体系，并且超文本文档的格式也有很多，比如苹果推出的的rtf（富士文档）以及我们现在学的html等。

超文本文档在互联网发挥着重要的作用，其中标记语言真正的作用就是有着强大的收集能力，并且将数据组成一个完整的信息库，实现和其他文档链接起来，超文本同时也是一种用户界面范式，可以显示文本和文本之前的内容。现在很多文字都是可以和其他位置进行链接，也可以指向超文本要发生的位置。

html的发展

HTML1.0

实际上应该没有HTML1,所谓的HTML1是1993年IETF(互联网工作任务组)团队的一个工作草案，并不是成型的标准。

HTML2.0

1995年11月作为RFC1866发布，于2000年6月RFC2854发布之后宣布过时。

HTML3.2

1996年W3C撰写新规范，并于1997年1月推出HTML3.2。

HTML4.0与HTML4.0.1

1997年12月18日成为W3C的推荐标准。

1999年12月24日成为W3C的推荐标准。其中只做了细微的调整。

2000年5月15日发布，基于HTML4.01的ISO HTML成为了国际标准化组织和国际电工委员会的标准，一直被沿用至今，虽然有小的改动，但大体方向没有四年大变化。

HTML5.0

HTML&CSS (一) WEB与HTML

HTML5 是对 HTML 标准的第五次修订，其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。

网页的基本结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5</title>
</head>
<body>
<!--
  主体内容
-->
</body>
</html>

HTML&CSS (一) WEB与HTML

<!DOCTYPE html> 文档声明(告诉浏览器我写的HTML采用什么标准)

<html> HTML根标签

<head> 用于对HTML主体内容(<body>)进行全局控制，以及提供或显示除主体内容以外的信息(例如：title、meta)。

<meta> [ 元信息 ] 该标签定义了网页描述和关键字(有利于搜索引擎优化)，以及与文档有关的属性(例如：charset="字符编码")

<title> 文档标题(浏览器标签页标题; 搜索引擎结果页面的标题)

<body> 主体内容，包含页面所显示的内容​。

<!-- 这里写注释 --> HTML注释，注释的内容不会显示在页面中。

元信息 <meta>

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部(<head>)，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

字符编码

  • 计算机中任何数据都是以数字0和1表示，而文字符号也不例外。
  • 文字符号通过编码的方式事先存储在计算机中，通过计算机操作系统的管理，使文件能以不同方式进行编码与解码。
  • 常见的字符编码有 gb2312、iso-8859-1、utf-8 ( 可参考IANA字符集 )
<head>
  <meta charset="utf-8" />
</head>
  • 通过 charset 属性来指定浏览器采用什么字符编码来解析HTML文档。
  • 由于浏览器并不知道你写的html文档采用什么样的编码方式，所以需要事先在html文档中声明。
  • 如果不指定该属性，浏览器会用它默认的字符编码来解析HTML文档，因此可能会出现乱码的情况。

添加作者、网页描述与关键词

<head>
  <meta name="author" content="Time Science" />
  <meta name="description" content="一个分享简单教程的博客" />
  <meta name="keywords" content="html, css, javascript, web, 前端" />
</head>

通过name属性来指定描述类型，在通过content属性来指定该类型的值，以上代码定义了author(作者)、description(描述)、keywords(关键词)三种描述类型。

  • description(作为搜索引擎显示的内容摘要)
  • keywords(作为搜索引擎搜索时的关键词索引)

Url重定向

<head>
  <meta http-equiv="refresh" content="3;url=http://baidu.com">
</head>

上面的代码会在3秒后自动跳转到百度首页，如果去掉3后面的值(;url=http://baidu.com) ，则会3秒后自动刷新当前页面(无限刷新)。

站点图标( favicon )

HTML&CSS (一) WEB与HTML

  • 站点图标会显示在浏览器收藏夹和标签页的前面显示。
  • 对于用户来说，可以更容易在书签找到你的站点。

favicon 的使用：

<head>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>

favicon 支持的文件类型：

根据网站图标的格式，您必须更改type属性。

  • PNG，您需要使用 image/png
  • GIF，您需要使用 image/gif
  • JPEG，您需要使用 image/gif
  • ICO，您需要使用 image/x-icon
  • SVG，您需要使用 image/svg+xml
转载自:https://segmentfault.com/a/1190000041937746
评论
请登录