第 2 章基本格式 - 水之原-HTML Tutorial-php.cn

第 2 章基本格式 - 水之原

WBOY

Release： 2016-05-20 16:50:38

Original

1015 people have browsed it

学习要点：

1.HTML5 文档结构
2.文档结构解析
3.元素标签探讨

主讲教师：李炎恢

　　本章主要先从 HTML5 的文档结构谈起。这些基础元素确定了 HTML 文档的轮廓以及浏览器的初始环境。几乎所有页面都必须首先键入这些元素。

一．HTML5 文档结构
1.第一步：打开 Sublime Text 3，打开指定文件夹；
2.第二步：保存 index.html 文件到磁盘中，.html 是网页后缀；
3.第三步：开始编写 HTML5 的基本格式。

DOCTYPE html>                                  //文档类型声明
html lang="zh-cn">                              //表示 HTML 文档开始
    head>                                       //包含文档元数据开始
        meta charset="utf-8">                   //声明字符编码
        title>基本结构title>                   //设置文档标题
    head>                                      //包含文档元数据结束
    body>                                       //表示 HTML 文档内容
        a href="http://www.baidu.com">百度a>  //一个超链接元素（标签）
    body>                                      //表示 HTML
html>                                          //表示 HTML 文档结束

Copy after login

二．文档结构解析
1.Doctype
　　文档类型声明（Document Type Declaration，也称 Doctype）。它主要告诉浏览器所查看的文件类型。在以往的 HTML4.01 和 XHTML1.0 中，它表示具体的 HTML 版本和风格。而如今 HTML5 不需要表示版本和风格了。

DOCTYPE html>       //不分区大小写

Copy after login

2.html 元素
　　首先，元素就是标签的意思，html 元素即 html 标签。html 元素是文档开始和结尾的元素。它是一个双标签，头尾呼应，包含内容。这个元素有一个属性和值：lang="zh-cn"，表示文档采用语言为：简体中文。

html lang="zh-cn">   //如果是英文则为 en

Copy after login

3.head 元素
　　用来包含元数据内容，元数据包括：、、

、<style>、<title>。这些内容用来浏览器提供信息，比如 link 提供 CSS 信息，script提供 JavaScript 信息，title 提供页面标题等。 <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><head>...</head> //这些信息在页面不可见 4.meta 元素 　　这个元素用来提供关于文档的信息，起始结构有一个属性为：charset="utf8"。表示告诉浏览器页面采用的什么编码，一般来说我们就用 utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8 即可正确显示中文。 <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><meta charset="utf-8"> //除了设置编码，还有别的 5.title 元素 　　这个元素很简单，顾名思义：设置浏览器左上角的标题。 <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><title>基本结构</title> 6.body 元素 　　用来包含文档内容的元素，也就是浏览器可见区域部分。所有的可见内容，都应该在这个元素内部进行添加。 <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><body>...</body> 7.a 元素 　　一个超链接，后面会详细探讨。 <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><a href="http://www.baidu.com">百度</a> 三．元素标签探讨 　　HTML 是一种标记语言，刚才的结构我们已经详细探讨过。这里，我们再剖析一下这些“标记”或者叫“标签”，书面上经常称作为“元素”的东西是怎么构成的。 1.元素 　　元素就是一组告诉浏览器如何处理一些内容的标签。每个元素都有一个关键字，比如<body>、<title>、<meta>都是元素。不同的标签名称代表不同的意义，后面将会涉及到段落标签、文本标签、链接标签、图片标签等。 元素一般分为两种：单标签（空元素）和双标签。单标签一般用于声明或者插入某个元素，比如声明字符编码就用<meta>，插入图片就用<img alt="第 2 章基本格式 - 水之原" >；双标签一般用于设置一段区域的内容，将其包含起来，比如段落...。 2.属性和值 　　元素除了有单双之分，元素的内部还可以设置属性和值。这些属性值用来改变元素某些方面的行为。比如超链接：<a>中的 href 属性，里面替换网址即可链接到不同的网站。当然一个元素里面可以设置多个属性，甚至自定义属性。 <div id="MySignature"> <div class="clear">