HTML用于定义内容的含义，而CSS（Cascading Style Sheet，层叠样式表）用于定义内容和网页如何显示。HTML页面和CSS文件（样式表，stylesheet）都是文本文件，因此很容易编辑。

渐进增强：那些只能访问基本页面的设备和浏览器会得到简化的、默认的体验，而那些能够浏览更健壮的网站的设备和浏览器将看到增强的版本。不必要求网站对所有人来说体验都是一样的，关键是网站的内容是可访问的。

一个网页主要包括以下三种成分：

  • 文本内容（text content）：在页面上让访问者了解页面内容的纯文字；
  • 对其他文件的引用（references to other files）：这些文件加载图像、音频、视频、SVG1文件等，指向其他HTML页面和资源，以及样式表（用于控制页面的布局）和JavaScript文件（用于为页面增加行为）；
  • 标记（markup）：对文本内容进行描述并使引用正确地工作。

1.1 基本HTML页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title>Blue Flax (Linum lewisii)</title>

</head>

<body>

    <article>

        <h1>The Ephemeral Blue Flax</h1>

        <img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />

        <p>I am continually <em>amazed</em> at the beautiful,

        delicate <a href="http://en.wikipedia.org/wiki/Linum_lewisii"

        rel="external" title="Learn more about the Blue Flax">Blue Flax</a>

        that somehow took hold in my garden. They are awash in color every morning,

        yet not a single flower remains by the afternoon.

        They are the very definition of ephemeral.</p>

        <p><small>&copy; Blue Flax Society.</small></p>

    </article>

</body>

</html>

<body>开始标记以上的代码是为浏览器和搜索引擎准备的指导信息。每个网页都以DOCTYPE声明开头。无论如何，页面一定要包含<!DOCTYPE html>。

从<!DOCTYPE html>一直到</head>之间的部分对用户来说是不可见的，除了一处例外，即<title>和</title>之间的文字——Blue Flax(Linum lewisii)。这部分文字会作为标题显示在浏览器窗口顶端和标签页。

每行之间的回车符和代码的缩进与其是否为有效HTML毫无关系。也不会影响内容在浏览器中的显示效果。

注：&copy;是一个表示版权的符号©。这样做可以确保无论以哪种编码方式保存这份文档，这个符号都会被正确地显示。

1.2　语义化HTML：有含义的标记

浏览器的默认样式表将标题（h1～h6元素）与普通文本区别开来，对em文本加上斜体样式，对链接加上颜色和下划线。

每个Web浏览器都有一个内置CSS文件（一张样式表），它决定了每个HTML元素的默认样式（你自己创建的CSS可以覆盖这些样式）。

1.2.1 块级元素、行内元素以及HTML5

有些HTML元素（如article、h1和p）各自显示为单独的一行，就像书里的各个段落一样，而另外一些元素（如a和em）则与其他内容显示在同一行里。

在HTML5之前，大多数元素都可以划入块级（block-level，显示为单独的一行）或行内（inline，可以与其他内容在一行并排显示）两种类别。

1.2.2 HTML5强调语义

HTML5强调HTML的语义，把所有视觉样式都扔给了CSS。

1.2.3 基本HTML页面的语义

基本页面的body，它包含article、h1、img、p、em和a元素以描述内容的含义。所有的内容都嵌套在article中。

用img在页面中插入图片很容易。如果图片未能显示，就会显示alt属性中的文字“Blue Flax(Linum lewisii)”。

em元素表示“强调”。

通过a元素定义一个链接。在这个例子中，文字“Blue Flax”是一个指向维基百科某页面的链接。rel="external"指出链接指向的是另一个网站，这也增加了语义。

1.2.4 为什么语义很重要

  • 提升可访问性和互操作性；
  • 改进了搜索引擎优化（SEO）；
  • 使代码更少，页面更快；
  • 使维护代码和添加样式变得容易。

改善SEO的效果，也就是说网页在搜索引擎中的排名会靠前，因为搜索引擎对用特殊方式标记的内容会赋予更高的权重。

1.3 标记：元素、属性和值

1.3.1 元素

一个非空元素由开始标记、内容和结束标记组成。

空元素（emptyelement）看起来像开始标记和结束标记的结合，由左尖括号开头，然后是元素的名称和任何可能有的属性，然后是一个可选的空格和一个可选的斜杠，最后是必须有的右尖括号，如：

<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />

空元素并不包围任何文本内容。空元素只有一个标记，既作为元素开始，又作为元素结束。

1.3.2 属性和值

属性包含的是有关文档内容的信息并非文档内容本身。

属性总是位于元素的开始标记里面，通常用一对引号包围属性的值。属性的顺序并不重要。不同的属性值对之间都用空格隔开。大多数属性仅接受枚举的或预定义的值，也就是说，必须从一个标准列表中选一个值。

1.3.3 父元素与子元素

如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。实际上，可以创建网页的家谱，显示页面上各元素之间的层次关系并唯一地标识每个元素。

当元素中包含其他元素时，每个元素都必须正确地嵌套，也就是子元素必须完全地包含在父元素中。使用结束标记的时候，它必须与最近的开始标记对应。

1.4 网页的文本内容

浏览器呈现HTML时，会把多个空格或制表符压缩成单个空格，并把回车和换行符转换成单个空格，或者将它们一起忽略。

HTML过去只能使用ASCII字符。ASCII只包括英语字母、数字和少数几个常用的符号。许多日常符号必须用特殊的字符引用来创建，如&eacute;（表示é）、&copy;（表示©）等。

详见：http://www.elizabethcastro.com/html/extras/entities.html

Unicode是ASCII的超集，大大减轻了特殊字符问题的负担。用UTF-8对页面进行编码（，并用同样的编码保存HTML文件已成为一种标准做法。

直接在head开始标记后面指明文档的字符编码。charset属性用以设置编码类型。

<head>

    <meta charset="utf-8" />

    ...

</head>

1.5 链接、图像和其他非文本内容

外部文件（如图片、视频）实际上并没有放在HTML文件中，而是单独保存的，只是简单地在页面中引用了这些文件。

1.6 文件名

对网页文件命名时要记住几点，这些要点有助于对文件进行组织，使访问者更容易找到并访问你的页面，确保他们的浏览器能正确地处理页面，以及增强SEO。

文件名全部使用小写字母，用短横线‘-’（而不是下划线‘_’）分隔单词，用.html作为扩展名。

1.7 URL

URL（Uniform Resource Locator，统一资源定位符）是地址的别名。它包含关于文件存储位置和浏览器应如何处理它的信息。互联网上的每个文件都有唯一的URL。

URL的第一个部分称为模式（scheme）。模式告诉浏览器如何处理需要打开的文件。最常见的模式是HTTP（Hypertext Transfer Protocol，超文本传输协议），用于访问网页。

第二个部分是文件所在服务器的名称，紧接着是到达这个文件的路径，以及文件自身的名称。有时URL不以文件名结尾，而以一个路径结尾，在这种情况下，URL指的是路径中最后一个目录中的默认文件（通常为index.html）。

其他常见的模式有https（用于安全网页）、ftp（File Transfer Protocol，文件传输协议，用于下载文件）、mailto（用于发电子邮件）、file（用于访问本地硬盘或本地文件共享网络上的文件）。

file模式后面跟着一个冒号和三个斜杠。

绝对URL&相对URL：

绝对显示文件的完整路径，无论是在哪个服务器上的网页中，某一文件的绝对URL都是完全一样的。

相对URL以包含URL本身的文件的位置为参照点，描述目标文件的位置。

要引用当前文件夹的子文件夹中的文件，应在文件名之前加上子文件夹名称和一个斜杠。要引用文件层次结构中更高层目录中的文件，那么应该使用两个句点和一个斜杠（../），上升一级。可以组合和重复使用两个句点和一个斜杠，引用当前文件所在服务器或硬盘上的任何文件。

总结

HTML5&CCS3（1） 网页的构造块的更多相关文章

  1. [转载]html5直接在网页上播放视频音频兼容所有浏览器

    文章给大家分享一个html5直接在网页上播放视频兼容所有浏览器,有需要的同学可参考. HTML5可以用video标签来播放视频 当前,video 元素支持三种视频格式: 格式 IE Firefox O ...

  2. 基于HTML5 Canvas的网页画板实现教程

    HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...

  3. (1) 类构造块，this(),static，单例模式串讲

    类构造块 在类只用一对大括号包含的内容,构造所有的对象时都会执行的内容,如果某个类有好几个够赞函数,公共部分抽取出来,放到构造块中. clas Boy { ... { syso("哭...& ...

  4. 关于html5中的 网页图标问题

    在html5 中 设置网页图标的语句<link rel="icon" type="image/x-icon" href="favicon.ico ...

  5. angular2自学笔记（二）---路由、服务等八大主要构造块

    angular的思想:总是把数据访问工作委托给一个支持性服务类. Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布 ...

  6. 135、Java中的静态块，构造方法和构造块

    01.代码如下: package TIANPAN; class Book { static String msg; // static属性,暂不封装 public Book() { // 构造方法 S ...

  7. 134、Java中的构造方法和构造块

    01.代码如下: package TIANPAN; class Book { public Book() { // 构造方法 System.out.println("[A]Book类的构造方 ...

  8. Java中继承时静态块，构造块，构造函数的执行顺序

    public class Father { static { System.out.println("Father静态块"); } { System.out.println(&qu ...

  9. HTML5&CCS3（2） 处理网页文件

    2.1 规划网站 为什么要创建这个站点,需要展示的内容是什么? 应该如何调整内容使之吸引期望的访问者? 需要多少个页面?网站的结构是怎样? 为页面.图像和其他外部文件设计一个简单且一致的命名规则. 2 ...

随机推荐

  1. 把本地的jar包导入到本地的maven仓库,Eclipse可以使用

    mvn install:install-file -Dfile=F:/SprintDirectory/ToolsDirectory/libary/fastdfs_client_v1.20.jar -D ...

  2. discussion|局限性|解释|猜测|前作与同行

    讨论是整篇论文的精华和灵魂,考查作者的文献积累量和对所研究内容的理解深度,作者需要阐述为什么结果是重要的,内容包括理论.应用.在其他其他领域的作用及应用,阐述时要求直接明确. 具体而言,首先概述最重要 ...

  3. MyBatis延迟加载及缓存

    延迟加载 lazyLoadingEnabled 定义: MyBatis中的延迟加载也成为懒加载,就是在进行关联查询的时候按照设置延迟加载规则推迟对关联对象的select检索.延迟加载可以有效的减少数据 ...

  4. MOOC（7）- case依赖、读取json配置文件进行多个接口请求-模拟接口响应数据（18）

    这里是把传入的请求数据作为响应值返回 # -*- coding: utf-8 -*- # @Time : 2020/2/15 9:47 # @File : do_mock_18.py # @Autho ...

  5. OpenCV 基本的阈值操作

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...

  6. webStrom 运行React-Native项目

    1.点击“Edit Configurations...” 2.点击“+”选择“npm” 3.“Name”随便输入一个名称,“Command”改为“help”,然后在点击“+”号. 4.选择“Run E ...

  7. Mysql错误问题:ERROR 1005 (HY000): Can't create table 'crm_1.tbl_client' (errno: 150)

    MySQL外键创建条件: 1.两个表必须是InnoDB数据引擎2.外键表的外键字段必须是主键3.字段类型必须一致 创建表时创建外键: create table tbl_client(userName ...

  8. Memcached Client 使用手册

    Memcached Client 使用手册 Author: cenwenchu Email: wenchu.cenwc@alibaba-inc.com Blog:http://blog.csdn.ne ...

  9. python对csv读写

    1.csv文件读取 with open("C:\\Users\\Administrator\\Desktop\\test.csv", 'r', encoding='utf-8') ...

  10. form组件及cookie和session

    多对多关系表的三种创建方式 1.全自动创建 优势:不需要你手动创建第三张表 不足:由于第三张表不是你手动创建的,也就意味着,第三张表字段是固定的无法更改 class Book(models.Model ...