HTML5&CCS3（1） 网页的构造块
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>© Blue Flax Society.</small></p>
</article>
</body>
</html>
<body>开始标记以上的代码是为浏览器和搜索引擎准备的指导信息。每个网页都以DOCTYPE声明开头。无论如何，页面一定要包含<!DOCTYPE html>。
从<!DOCTYPE html>一直到</head>之间的部分对用户来说是不可见的，除了一处例外，即<title>和</title>之间的文字——Blue Flax(Linum lewisii)。这部分文字会作为标题显示在浏览器窗口顶端和标签页。
每行之间的回车符和代码的缩进与其是否为有效HTML毫无关系。也不会影响内容在浏览器中的显示效果。
注：©是一个表示版权的符号©。这样做可以确保无论以哪种编码方式保存这份文档，这个符号都会被正确地显示。
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只包括英语字母、数字和少数几个常用的符号。许多日常符号必须用特殊的字符引用来创建，如é（表示é）、©（表示©）等。
详见：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） 网页的构造块的更多相关文章
- [转载]html5直接在网页上播放视频音频兼容所有浏览器
文章给大家分享一个html5直接在网页上播放视频兼容所有浏览器,有需要的同学可参考. HTML5可以用video标签来播放视频 当前,video 元素支持三种视频格式: 格式 IE Firefox O ...
- 基于HTML5 Canvas的网页画板实现教程
HTML5的功能非常强大,尤其是Canvas的应用更加广泛,Canvas画布上面不仅可以绘制任意的图形,而且可以实现多种多样的动画,甚至是一些交互式的应用,比如网页网版.这次我们要来看的就是一款基于H ...
- (1) 类构造块，this(),static，单例模式串讲
类构造块 在类只用一对大括号包含的内容,构造所有的对象时都会执行的内容,如果某个类有好几个够赞函数,公共部分抽取出来,放到构造块中. clas Boy { ... { syso("哭...& ...
- 关于html5中的 网页图标问题
在html5 中 设置网页图标的语句<link rel="icon" type="image/x-icon" href="favicon.ico ...
- angular2自学笔记（二）---路由、服务等八大主要构造块
angular的思想:总是把数据访问工作委托给一个支持性服务类. Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布 ...
- 135、Java中的静态块，构造方法和构造块
01.代码如下: package TIANPAN; class Book { static String msg; // static属性,暂不封装 public Book() { // 构造方法 S ...
- 134、Java中的构造方法和构造块
01.代码如下: package TIANPAN; class Book { public Book() { // 构造方法 System.out.println("[A]Book类的构造方 ...
- Java中继承时静态块，构造块，构造函数的执行顺序
public class Father { static { System.out.println("Father静态块"); } { System.out.println(&qu ...
- HTML5&CCS3（2） 处理网页文件
2.1 规划网站 为什么要创建这个站点,需要展示的内容是什么? 应该如何调整内容使之吸引期望的访问者? 需要多少个页面?网站的结构是怎样? 为页面.图像和其他外部文件设计一个简单且一致的命名规则. 2 ...
随机推荐
- Kintinuous解析
版权声明:本文为博主原创文章,未经博主允许不得转载. Kintinuous是Thomas Whelan在National University of Ireland Maynooth读博期间的工作,有 ...
- 一、美国国家经济研究局NBER教育经济研究项目工作论文合集
一.美国国家经济研究局NBER教育经济研究项目工作论文合集 (一)项目地址: American National Bureau of Economic Research - Economics of ...
- CocoaPods 安装和使用 - darcy_tang 的博客
最近换了新机器,重新搭建了开发环境,其中当然包括 CocoaPods. 装完顺便更新下 CocoaPods 安装文档. 正文 安装 CocoaPods 是用 ruby 实现的,要想使用它首先需要有 r ...
- import org.apache.commons.codec.binary.Base64;
import org.apache.commons.codec.binary.Base64;
- Pycharm 2019 破解激活方法
转载:https://blog.csdn.net/guofang110/article/details/87793264 使用破解补丁方法虽然麻烦,但是可用激活到2099年,基本上是永久激活了,毕竟在 ...
- [LC] 236. Lowest Common Ancestor of a Binary Tree
Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...
- mybatis 添加后获得该新增数据自动生成的 id
// useGeneratedKeys默认值为false,keyProperty的值对应的是User类中的主键字段名 // mybatis 写法如下 <insert id="inser ...
- box-sizing: border-box
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中
- Redis 原理
线程IO模型 Redis 是个单线程程序!(对外网络请求服务) 对于那些时间复杂度为 O(n) 级别的指令,一定要谨慎使用,一不小心就可能会导致 Redis 卡顿. 使用缓冲区,事件轮询 API(Li ...
- Stock Starer股票盯盘
一个业余小项目,用于监控指定股票的成交指标,触发事件的主动通知 源码 !https://github.com/jeffchen81/stock-starer 设计说明 场景 定时任务1:通过网上Ope ...