[译]HTML&CSS Lesson1: 构建第一张页面

时间  2019-11-09
标签 html&css html css lesson1 lesson 构建 一张 页面 栏目 CSS 繁體版
原文   原文链接

能够的话，请想象一下互联网没有发明以前的日子。网站还不存在，纸质的书本是咱们主要的信息来源，而在书本中查询咱们想要的资料会耗费至关多的精力和时间。
而现在，你打开个浏览器用搜索引擎搜索，任何你能想到的信息都会呈如今你的指间。而且有可能某人在某地创建了一个跟你心中实际要搜索内容一致的网站。
在接下来的一系列课程中， 我将引导你使用HTML和CSS构建一个属于你的网站。但在开始构站之旅前，咱们须要重点的了解两个语言之间的差别，它们的语法和一些常见的术语。css

什么是HTML&CSS

HTML(HyperText Markup Language) 超文本标记语言，经过标记告诉浏览器若是去解析文本信息，好比解读为标题、 段落、图片等。
CSS(Cascading Style Sheets)层叠样式表，这是一种描述性语言，经过样式来修饰页面，好比设置文字的字体、大小、颜色等。
这两种语言是相对独立的，咱们在编写它们时也应该保持这种原则。CSS不该嵌入HTML文本中，反之亦然。
通常来讲， HTML表明内容，而CSS表明内容的外观。html

HTML术语

在开始接触HTML时，你可能会遇到新的陌生的术语。别担忧，随着接下来的学习你会对它们愈来愈熟悉。首先你须要了解三个常见的术语：元素，标签和属性。前端

元素(Elements)

元素是定义页面中对象的结构和内容的指示符。一些最经常使用的元素例如多级标题(<h1>...<h6>)、段落(<p>),还有<a>,<div>,<span>,<strong> 和<em>等等。
元素是使用小于号<和大于号>包裹元素名来标示。以下所示：git

<a>

标签(Tags)

使用小于号<和大于号>包裹元素名造成标签，标签一般都是成对出现的，由开始标签和结束标签组成。
一个开始标签表示一个元素的开始,它由 <+元素名+ >组成，例如<div>。
一个结束标签表示元素的结束,它由小于号<+ /+元素名+ >组成 例如</div>。
在开始标签和结束标签中的内容为那个元素的内容。例如一个连接，拥有开始标签<a>和结束标签</a>，两个标签之间的内容为连接的内容，以下所示：github

<a>...</a>

属性(Attributes)

属性用来为元素添加额外信息。最经常使用的属性例如id属性，用来标识元素；class属性将元素进行分类；src属性指向嵌入内容的来源。href属性提供对连接资源的引用。
属性定义在开始标签的标签名以后，属性一般包含一个属性名和一个属性值，格式是属性名=值。以下所示：web

<a href="http://shayhowe.com/">Shay Howe</a>

clipboard.png

示例中，文字Shay Howe会展示在页面上，点击 Shay Howe 用户将访问 http://shayhowe.com/。
超连接元素a经过用开始标签<a>和结束标签</a>包裹文本内容来声明。 超连接属性为href="http://shayhowe.com/"。chrome

如今你已经知道了什么是HTML元素(elements),标签(tags)和属性(attributes)。让咱们一块儿来完成咱们的第一张页面，若是在这里遇到了一些新的知识，别担忧，咱们会将它们一一破解。canvas

设置文档结构

HTML文档使用.html为扩展名。要开始编写HTML，你只须要使用纯文本编辑器， 请不要使用 Microsoft Word 和 Pages，它们属于富文本编辑器。 固然你也可使用目前很流行的编辑器 Dreamweaver、Sublime Text。 或者选择免费的编辑软件 Windows中的Notepad++ 和 Mac 中的 TextWrangler 。浏览器

全部的HTML文档都有一个必需的结构，由如下元素构成：<!DOCTYPE html>，<html>，head 和 <body>ruby

文档类型声明(<!DOCTYPE html>)，告诉浏览器使用的HTML版本，写在HTML文档最开始。因为咱们使用的是最新版本的HTML，因此咱们的声明只需写<!DOCTYPE html>，很是简便。文档类型声明以后，<html>元素表示文档开始(根元素)。
<html>元素内，<head>为其第一个子元素，它包含了文档标题(显示在浏览器窗口标题栏上)，外部文件连接以及其余有用的元数据。<head>中的内容不会显示在网页上。
全部可视的内容都包含在<body>元素中。典型HTML的结构以下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

clipboard.png

上述示例中，先声明了文档类型<!DOCTYPE html>，跟着是<html>元素。<html>元素中包含了<head>和<body>，<head>中声明了页面字符编码<meta charset="utf-8">和页面标题 <title>。<body>中包含了一个标题元素<h1>和一个段落元素<p>。<h1>和<p>嵌套在<body>内，它们页面中都是可视的。
当时咱们进行元素嵌套的时候，注意子元素的缩进，可使代码结构看起来更清晰，更易辨识。上述示例中，<head>和<body>都进行了缩进，他们内部嵌套的元素也都进行了缩进。

自闭合元素

在前面的例子中，能够看到<meta>没有结束标签。放轻松，这是故意的。不是全部的元素都由开始标签和闭合标签组成。一些元素只是简单的从单标签的属性中获取值或行为。<meta>
元素就是其中之一， charset属性设置了它须要处理的内容。如下是一些常见的自闭合元素：

  • <br>
  • <img>
  • <meta>
  • <input>
  • <hr>
  • <link>
  • <source>

再提一句， 在html文档中使用<!DOCTYPE html>，<html>，<head>，<body>，是广泛行为。咱们能够保存这个结构，由于咱们建新页面的时候会常用到它。

代码检验

无论咱们书写代码时多么仔细，仍是会有一些小错误。幸运的是，咱们有验证工具帮助咱们验证。W3C构建了 HTML和CSS验证工具帮助检查代码错误。 代码验证不只能够帮助代码在全部浏览器中都能正确渲染，也助于教会咱们书写代码的最佳实践。

实践

做为网页设计师和前端工程师， 咱们奢侈的参加一系列大型讨论会来提高咱们的能力。如今咱们将本身组织一个样式讨论会，并为接下来的课程建立一个网站，开始！

  • 首先咱们打开编辑器，建立一个名为index.html的文件，我在本地桌面建立了一个“styles-
    conference”文件夹，并将文件保存在其中。
  • 在index.html中添加一个文档结构，包含<!DOCTYPE html>，<html>，<head>和<body>元素
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>
  • 在<head>元素中添加<meta> 和<title>元素。<meta> 中包含了charset 属性和值， <title>中设置标题名为“Styles Conference”
<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
</head>
  • 在<body>元素中添加<h1>和<p>元素,在<h1>中仍是添加内容“Styles Conference”，<p>中输入一段话简单的介绍咱们的讨论会。
<body>
 <h1>Styles Conference</h1>
 <p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>
</body>

clipboard.png

接下来咱们切换频道，从HTML转换到CSS上来。 再提一次，HTML设置页面的结构和内容， 而css定义页面的样式和外观。

CSS术语

除了HTML术语， CSS也有一些经常使用术语你须要熟悉。这些术语包括 选择器，属性，值。和HTML术语同样，你使用的越多，那么你会对他们越熟悉。

选择器(Selectors)

当元素被添加到页面中，就可使用CSS控制其样式。一个选择器能够精确的为选中的元素添加样式(例如颜色color， 尺寸size，位置position)；选择器能够经过不一样限定词组合起来选中惟一元素，这取决于咱们的需求。例如，咱们但愿选中页面中的每一个段落(<p>)或者咱们想要选中页面中的某一个段落。
选择器一般使用属性值，例如id或class的值 或者使用元素名，例如<h1>和<p>
在CSS中，选择器后跟着大括号{} ，其中包含了应用于选中元素的样式。下面示例是选中全部的<p>元素：

p { ... }

属性(Properties)

一旦元素被选中，那么所写的属性就会被应用在这个元素上，属性名写在{}中，后面跟着一个冒号:，有不少能够设置的属性例如：background, color, font-size, height, 和width。 在下面的实例中，咱们在选择器中定义了color和font-size属性：

p {
  color: ...;
  font-size: ...;
}

值(Values)

到目前为止，咱们选中了一个元素，并且决定了设置它的什么样式。如今咱们能够为属性设置一个值，值被定义在冒号:的右侧，以分号; 结束,如今咱们将color 属性的值设置为orange，将font-size属性的值设为16px。

p {
  color: orange;
  font-size: 16px;
}

回顾一下，CSS中咱们先定义选择器，而后在选择器后添加{}，在大括号中添加属性和值；属性描述由属性名:值;组成,记住以分号;结尾。
对属性和值缩进也是CSS的广泛作法，和HTML同样，缩进有利于保持咱们的代码结构清晰。

clipboard.png

如今咱们对CSS语法有了一些了解，不过在深刻探讨以前，还须要知道一些知识 。好比选择器是如何工做的。

使用选择器

类型选择器

类型选择器(也叫做元素选择器)根据元素类型选择元素。好比咱们想要选择全部的div元素，咱们可使用类型选择器div，如下示例展现了CSS选择器与其选中的HTML元素：

CSS

div {...}

HTML

<div>...</div>
<div>...</div>

Class选择器

类选择器根据元素的 class属性的值选择元素，它比类型选择器稍微具体一些，它会选择特定的元素而不是全部同种类型的元素，可使咱们在多个不一样类型的元素添加同同样式。
在CSS中，Class选择器经过在class值前添加前缀.表示，如下示例展现了CSS与其选中的HTML元素：

CSS

.awesome { ... }

HTML

<div class="awesome">...</div>
<p class="awesome">...</p>

ID选择器

ID选择器比Class选择器更精准，每一个ID选择器只能选中一个元素。与Class选择器同理， ID选择器是经过id属性的值来选择元素。
不管是什么类型的元素，每一个ID值在单页面中只能出现一次,保持其惟一性。推荐只在重要元素中使用。
在CSS中，ID选择器经过在id值前添加前缀#表示，如下示例展现了CSS与其选中的HTML元素：

其余选择器

选择器很是强大，咱们列出的是最经常使用的选择器类型。还有许多高级选择器存在，若是你有兴趣能够去多了解一些高级选择器
好了，总之呢，咱们在HTML页面中添加元素，经过选择器选中它们并添加样式。如今咱们来学习怎么使CSS在HTML页面中生效，怎么链接它们。

引用CSS

为了让CSS在HTML页面中生效，咱们须要将CSS文件引入HTML中， 最佳实践方式是将全部的CSS放在一个外部的样式表中，在HTML的<head> 元素中引用它。 外部CSS文件能够将相同的样式覆盖到整个网站而且能够快速的作出修改。

其余引用方式
引用CSS还有内联和内嵌两种方式 ，这里不深刻介绍了，这两种方式并不推荐使用，它们会使页面变得繁琐和笨重，不易维护。

咱们能够用文本编辑器建立一个扩展名为.css的文件，并将它保存在HTML所在的文件夹或子文件夹中。
在<head>元素中添加<link>元素来创建HTML与CSS之间的联系。因为咱们引用的是CSS文件，因此<link>的rel属性的值设为stylesheet,href属性来指定CSS文件的路径。以下所示：

<head>
  <link rel="stylesheet" href="main.css">
</head>

为了让CSS在页面中正确渲染，href属性必须正确关联CSS文件地址。 在上述例子中，main.css所在目录与HTML所在目录一致。
若是CSS文件在子文件夹中，举个例子，若main.css文件在名为stylesheets的子文件夹下，那么href指向的路径就变为了stylesheets/main.css，用斜杠/表示移动到了子文件中。
咱们的页面要开始成型了，虽然很慢。你能够发现不少元素自己就带有样式，尽管咱们没有添加CSS；这是由于浏览器自身对这部分元素的样式进行了渲染。幸运的是，咱们能够对这部分的样式复写和覆盖，这就是咱们接下来学习的CSS重置。

CSS重置

每一个浏览器都对不一样的元素都设置了默认样式。chrome对标题(<h1>...<h6>)、段落(<p>)、列表(li)的呈现可能与IE是不一样。为了却确保跨浏览器的兼容，CSS重置成了普遍的需求。
CSS重置为经常使用的HTML元素预设了样式，并兼容全部的浏览器。这些重置涉及移除margin、padding或其余样式，调小这些样式的值。由于样式渲染是从上至下的，因此咱们把它添加到CSS文件的最上面。确保这些样式会第一时间被解读，那么不一样浏览器之间的基本样式就保持了一致，在一条基准线上。
有一推重置方案可供咱们使用，这些方案都有他们本身的强项。最流行的方案是 Eric Meyer’s reset, 它包含了HTML5元素的样式。
若是你觉仍是不够全面，能够选择Nicolas Gallagher建立的Normalize.css，Normalize.css重点不在对样式的重置，而是对这些元素设置了通用的样式。它须要咱们对CSS有更多的了解，知道什么样式是你想要的。

跨浏览器兼容及测试
前面有提到，不一样的浏览器对元素的渲染不一样，因此识别跨浏览器兼容性和测试很是重要。虽然网站不须要在每一个浏览器中看起来如出一辙，但要接近。哪些浏览器须要支持，支持到什么程度，考虑好这些能够帮助你建立出最符合你需求的网站。

练习

咱们来看下上次练习中，咱们是否能够添加一些CSS上去

  • 在“styles-conference”文件夹下面建立一个名为"assets"的文件夹。咱们将会把资源都存在这个目录下，例如：样式文件、图片、视频等等。接下来咱们再在"assets"文件夹下为样式文件建立一个名为“stylesheets”的文件夹。
  • 打开咱们的文本编辑器，建立一个名为main.css的文件，并将它保存在“stylesheets”文件夹下。
  • 在浏览器中打开咱们的index.html页面，能够看到<h1>和<p>元素都有默认的CSS样式，它们都有各自的字体大小和周边空间。若是咱们使用 Eric Meyer’s reset ，会下降这些差异，让它们处在差很少的基准线上。接下来咱们将Eric Meyer’s reset中的样式复制过来，粘贴在main.css文件的最上面。
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
  • 接下来，咱们将main.css文件链接到index.html页面中。在文本编辑器中打开index.html页面，在<head>元素中的<titile>元素后添加一个<link>元素，
  • 因为咱们使用<link>引用样式表， 咱们要把rel属性的值设置为 stylesheet
  • 咱们还要用href属性连接到main.css文件，main.css保存在“assets”文件夹中的“stylesheet”文件夹下，因此href属性的值为assets/stylesheet/main.css 
<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
  <link rel="stylesheet" href="assets/stylesheets/main.css">
</head>

如今咱们来检验一下HTML和CSS是否正常工做。 在浏览器中打开index.html对比一下是否跟以前有所不一样

clipboard.png

演示源代码

这是练习的源代码。点击下载

总结

很是好！ 咱们已经完成了初步的学习。回顾一下你目前学到的基础知识，接下来咱们会花更多的时间来书写HTML和CSS，你将会对它们更加熟悉。

到目前为止，咱们所学内容归纳以下：

  • HTML和CSS以前的区别
  • 了解了什么是HTML元素、标签和属性
  • 建立了第一张网页
  • 了解了什么是CSS选择器、属性和值
  • 使用选择器
  • 引用CSS到HTML中
  • CSS重置

接下来咱们将进一步的学习HTML并了解语义化。

文章来源

http://learn.shayhowe.com/htm...

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程