HTML+CSS编写静态网站-06 创建基础结构

来源：互联网发布：python curl post 编辑：程序博客网时间：2024/05/17 10:57
视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015这节课我们来创建HTML文件的基础结构，在过去几年， HTML增加了一些新的元素，这些新的元素和技术被称为HTML5，它是一个新版本的HTML。但它的作用可能被夸大了。当你听到其他网页设计师或者开发人员使用术语HTML5，实际上，这只是意味着一些新的HTML元素以及一些新的浏览器技术，并没有太多特别的地方，就像office2016和office2013一样。现在，让我们编写代码。首先，让我们删除掉这些style标签，现在我们不需要它，因为后面我们再来添加新的样式，<h1>I Love www.oxox.work</h1>实际上。每个网页必须有文档类型或者说doc类型。它看起来就像这样。用尖括号开始，紧接着一个感叹号。然后DOCTYPE，所有字母大写，然后一个空格，接着html，都是小写字母，最后一个关闭尖括号。<!DOCTYPE html>这里没有结束标记，这个标记也不会创建任何可见的页面。有许多其他像这样的标签只是用于创建结构，对于网站访问者来说，这些标签的内容并不可见。这行代码的作用就是告诉浏览器这是一个HTML文档。文档类型应该始终在页面的顶部，也就是最开始的地方。现在，让我们创建一个HTML元素。当然，我们在这里创建的一切都是HTML元素。但这个元素实际上就被称为HTML。它将被视为我们的文档结构的根，和文档类型类似，它也不会被访问者看到。这里，我们用HTML元素来包装我们的标题，为了做到这一点，我们剪切这里的h1标题元素。然后将它们粘贴到html中间。<!DOCTYPE html><html>       <h1>I Love www.oxox.work</h1></html>现在我们准备添加两个元素到我们的页面中，它们分别是head元素和body元素。所以，进入我们的HTML元素中。我要创建head元素，接着，创建一个新行，然后创建一个body元素。<html>       <head></head>       <body></body><h1>I Love www.oxox.work</h1></html>接下来，我们还需要将h1元素放入body元素中：<html><head></head>       <body>              <h1>I Love www.oxox.work</h1>       </body></html>这样我就知道我的h1嵌套在我的body里面。当然，它也是嵌套在我们的HTML元素中。这时，你可能开始明白为什么缩进是如此重要。当你有一个更大的HTML文件时，使用缩进，可以非常方便的查看元素之间的嵌套关系。现在让我们看看这两个我们刚刚添加的元素。head元素将包含关于我们的文档的元信息，它也对网站访问者来说，也是不可见的。然而，它包含了重要的信息，比如CSS样式和元信息。这里键入的body元素将包含我们的网站内容。换句话说，这是网页的正文，对于访问者来说，它是可见的。现在，让我们跳进head元素，并按Enter键。点击Tab缩进我们的代码。然后，让我们为我们的网站键入一个标题。这里，我要写我的名字，后面跟一个空格和一个竖杠，紧接着是我的私人微信账号。这样，访问者就知道它访问的是什么网站。       <head>              <title>bangge | oxoxwork</title></head>那么这个title标签是什么意思呢？我们保存下，然后双击index.html：你看，它就相当于标签页的标题。现在让我们为页面添加字符集。我们将键入meta，后跟charset，一个等号，然后两个双引号。在双引号里面，我们要输入utf-8。最后，我们需要关闭Meta标签，       <head><meta charset=utf-8"><title>bangge | 虚幻大学</title><body>这段代码看起来有点吓人，但是，不要让它吓到你。它只是告诉浏览器我们的网页是如何编码的以及使用什么类型的字符。类似于DOCTYPE，它对网站访问者不可见。它也没有结束标记。在这个meta标记的旁边，你会注意到我们使用了新的语法。我们有一个单词后面跟一个等号，然后是一个包装在双引号中的值。这种语法被称为属性。属性是HTML元素内的额外信息，为浏览器提供关于页面如何构建的关键信息。在后面，我们将进一步了解其他的元素如何使用属性，但现在，让我们专注于这个属性的意思。这里的字面翻译是字符集是utf-8，它的意思是：通用字符集转换格式-8位。你不需要记住它。事实上，它只是描述我们的页面是如何编码的。更多精彩内容尽在视频中！本文固定链接：http://www.oxox.work/web/html-css/create-struct/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/create-struct/
阅读全文
0 0