第2 章 基本格式

学习要点:

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 文档结束

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

<!DOCTYPE html>       //不分区大小写

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

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

3.head 元素
  用来包含元数据内容,元数据包括:<link>、<meta>、<noscript>、<script>、<style>、<title>。这些内容用来浏览器提供信息,比如 link 提供 CSS 信息,script提供
JavaScript 信息,title 提供页面标题等。

<head>...</head>     //这些信息在页面不可见

4.meta 元素
  这个元素用来提供关于文档的信息,起始结构有一个属性为:charset="utf8"。表示告诉浏览器页面采用的什么编码,一般来说我们就用 utf8。当然,文件保存的时候也是utf8,而浏览器也设置 utf8 即可正确显示中文。

<meta charset="utf-8">    //除了设置编码,还有别的

5.title 元素
  这个元素很简单,顾名思义:设置浏览器左上角的标题。

<title>基本结构</title>

6.body 元素
  用来包含文档内容的元素,也就是浏览器可见区域部分。所有的可见内容,都应该在这个元素内部进行添加。

<body>...</body>

7.a 元素
  一个超链接,后面会详细探讨。

<a href="http://www.baidu.com">百度</a>

三.元素标签探讨
  HTML 是一种标记语言,刚才的结构我们已经详细探讨过。这里,我们再剖析一下这些“标记”或者叫“标签”,书面上经常称作为“元素”的东西是怎么构成的。

1.元素
  元素就是一组告诉浏览器如何处理一些内容的标签。每个元素都有一个关键字,比如<body>、<title>、<meta>都是元素。不同的标签名称代表不同的意义,后面将会涉及到段落标签、文本标签、链接标签、图片标签等。
元素一般分为两种:单标签(空元素)和双标签。单标签一般用于声明或者插入某个元素,比如声明字符编码就用<meta>,插入图片就用<img>;双标签一般用于设置一段区域的内容,将其包含起来,比如段落<p>...</p>。

2.属性和值
  元素除了有单双之分, 元素的内部还可以设置属性和值。 这些属性值用来改变元素某些方面的行为。比如超链接:<a>中的
href 属性,里面替换网址即可链接到不同的网站。当然一个元素里面可以设置多个属性,甚至自定义属性。

时间: 2024-10-10 17:47:26

第2 章 基本格式的相关文章

读《精通css》--第三章可视化格式模型

一. 盒模型: 1. IE 和 盒模型: 非标准盒模型 2. 外边距叠加:什么情况下外边距会叠加? 1)两个垂直的块元素 2)两个包含关系的块元素并且之间没有padding和border隔开 3)外边距与自身发生叠加,空元素,没有padding和border 4)空元素的外边距碰到另一个空元素的外边距. 解决办法:行内元素.浮动元素.绝对定位元素的外边距不会叠加.如果是包含关系的话,加上padding或者border. 二. 3种可视化格式模型: 1. 普通流:块级元素和行内元素. 1)块级框从

第3章 语法格式

1.1 常量1.1.1 常量概述– 在程序执行的过程中,其值不可以发生改变的量1.1.2 常量分类– 字符串常量 用双引号括起来的内容("HelloWorld")– 整数常量 所有整数(12,-23)– 小数常量 所有小数(12.34)– 字符常量 用单引号括起来的内容('a','A','0')– 布尔常量 较为特有,只有true和false– 空常量 null(数组部分讲解)1.1.3 案例代码四: /* 常量:在程序执行的过程中,其值不可以发生改变的量 常量分类: A:字符串常量

第3章 可视化格式模型

一·盒模型 1 IE 和盒模型 IE早期版本包括IE6,在混杂模式下使用自己的非标准盒模型,其width属性不是内容的宽度,而是内容,内边距,和边框宽度的总和.因此,IE专有的盒模型使元素预期小.目前最好的解决方法是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素或子元素.其他方法见后. 2 外边距叠加 两个或多个垂直外边距相遇,将叠加形成一个外边框,高度等于两者中的较大者. 可以利用外边距使段落之间的空间保持一致. 只有在普通文档流中才会叠加,行内框,浮动,绝对

Python 学习参考书目推荐

Python 学习,参考书目推荐 前言 好的技术书籍可以帮助我们快速地成长,大部分人或多或少地受益于经典的技术书籍.在「Python开发者」微信公号后台,我们经常能收到让帮忙推荐书籍的消息.这类的问题在@Python开发者 微博 和 伯乐在线的 Python小组 讨论中也不绝于耳. 7月3日,伯乐在线在「Python开发者」微信公号发起了一个讨论 (注:PC端无法看到大家的评论,需要关注微信公号后,从微信才可以看到),通过这个讨论话题,在评论中分享对自己帮助很大的Python技术书籍.  (Py

LaTeX中titlesec宏包的使用

在 xelatex 中使用 \usepackage 指令使用 titlesec 宏包时,可以指定一些格式选项,如下:\usepackage[center]{titlesec}其中 center 可使标题居中,还可设为 raggedleft (居左,默认), raggedright (居右).标题由标签与标题内容构成,其格式通常在 xelatex 文档导言区通过 titlesec 宏包提供的指令 \titleformat 进行设定. \titleformat 指令用法如下:\titleformat

《精通CSS-高级Web标准解决方案》阅读计划

第一周     第1章 基础知识 1 第2章 为样式找到应用目标 1 第3章 可视化格式模型 1 第4章 背景图像效果 1       第二周     第5章 对链接应用样式 1 第6章 对列表应用样式和创建导航条 1 第7章 对表单和数据表格应用样式 1 第8章 布局 1       第三周     第9章 bug和修复bug 1 第10章 实例研究:Roma Italia 2 第11章 实例研究:Climb the Mountains 2

Swift编程规范

文档编号: 应用开发Swift编码规范 (版本v1.0.0)       成文信息 主题词: Swift开发编码规范 作  者: 周少停 文档类别: 开发规范 审  核: 批  准: 文档性质: 初稿 主  送: 存档日期: 抄  送: 发布日期: 2016年4月8号 变更信息 版本 原因 作者 日期               第一章 概述 1.1 编写目的 开发规范制定的目的是为了保证在系统设计.编码.测试.维护的过程中项目组人员遵循一套统一系统设计标准.应用程序编写标准.页面风格标准, 借

【LaTeX排版】LaTeX论文模版

本文是对前面LaTeX论文排版文章的总结.前面的几篇文章是分别从论文的几个方面来讲述LaTeX的排版问题,这里综合了前面的内容,给出了论文排版的模版. 模版的使用: 1.首先建立一个main.tex文件,该文件用于管理论文的整体构架,文件代码为: \documentclass[a4paper,12pt]{book} \usepackage{ctexcap} \usepackage{amsmath} \usepackage{graphicx} \usepackage{fancyhdr} \usep

Java关键字、常量、变量、数据类型以及标识符

1.1  关键字 1.1.1    关键字概述 –      被Java语言赋予特定含义的单词 1.1.2    关键字特点 –      组成关键字的字母全部小写 –      常用的代码编辑器,针对关键字有特殊的颜色标记,非常直观,所以我们不需要去死记硬背,在今后的学习中重要的关键字也会不断的出来. 1.1.3    案例代码三: /* 关键字:被Java语言赋予特定含义的单词 特点: A:组成关键字的字母全部小写 B:常见的代码编辑器,针对关键字有特殊的颜色标记 */ public cla