《web前端技术》课件-第二章_第1页
《web前端技术》课件-第二章_第2页
《web前端技术》课件-第二章_第3页
《web前端技术》课件-第二章_第4页
《web前端技术》课件-第二章_第5页
已阅读5页，还剩38页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端技术签到扫码下载文旌课堂APP扫码签到签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。

HTML5基础第二章在HTML技术发展之初，因为各浏览器没有统一的标准，导致它们解析网页的方式各不相同，这无形中增加了网站开发人员的工作量。直到2014年，万维网联盟发布了通用的标准——HTML5。它具有跨平台使用的特性，为如今发达的网站前端开发技术奠定了坚实的基础。本章将介绍HTML5的基础知识。章节导读掌握HTML5的基本语法。熟悉HTML5的文档结构。熟悉HTML5的结构标签。学习目标掌握HTML5的基础知识，培养代码规范意识。实战演练加持，提升实践动手能力。素质目标2.1

HTML5的文档结构

HTML5的结构标签第二章Web前端技术概述/章节导航/2.22.3

HTML5的基本语法实战演练——创建“金企鹅教育”网站主页HTML5的基本语法2.1HTML5使用标签来描述网页，HTML5文档中实质上只包含标签和纯文本。

思考：标签是什么？2.1HTML5的基本语法

在HTML5文档中，标签是由一对尖括号（“<”和“>”）括起来的关键词。大部分标签都是成对出现的，称为双标签；也有少数标签是单独出现的，称为单标签。

2.1.1标签2.1HTML5的基本语法

（1）双标签的基本语法格式为：

第一个标签“<标签名>”是开始标签，又称开放标签；第二个标签“</标签名>”是结束标签，又称闭合标签；两个标签中间的内容称为标签内容。

<标签名>标签内容</

标签名>

2.1.1标签<html>…</html>

<head>…</head>

<body>…</body>

<title>…</title>

常见的双标签有：2.1HTML5的基本语法超链接在HTML5文档中，标签不区分大小写。例如，“<P>标签的大小写</p>”在HTML5中是合法的。但是，一般不建议这样写，而是统一小写。

TISHI提示2.1HTML5的基本语法（2）单标签也称空标签，基本语法格式为：2.1.1标签<br/>常见的单标签有：<img/><hr/>2.1HTML5的基本语法<标签名/>

单标签中的“/”可以省略。但是从长远来看，应该养成正确关闭单标签的习惯，因此建议使用单标签时加上“/”。

TISHI提示超链接在HTML5文档中，还有一个人们常常提到的概念——元素，它是指从开始标签到结束标签的所有内容。通常情况下，“标签”和“元素”所指的内容是一样的。例如，<p>标签和p元素都是指内容“<p>段落</p>”。因此，一般不对这两个概念做具体区分。超链接ZHIDIAANMIJIN指点迷津2.1HTML5的基本语法2.1.2标签的属性一个标签可以拥有多个属性，且这些属性必须写在开始标签中，位于标签名之后。属性之间不分先后顺序，标签名与属性名、属性与属性之间均用空格隔开。任何标签的属性省略时都使用标签的默认属性。2.1HTML5的基本语法

在HTML5中，可以根据需要为标签设置属性。例如，为段落标签设置字体颜色、字体大小等。

设置双标签属性的语法格式为：

<标签名

属性名1＝"属性值1"属性名2＝"属性值2"…>标签内容</标签名>

设置单标签属性的语法格式为：<标签名属性名1＝"属性值1"属性名2＝"属性值2"…/>超链接在HTML5中，标签的属性值可以用双引号或单引号括起来，当属性值不包含特殊字符的时候，引号也可以省略。例如，以下3行代码在HTML5中都是合法的，且代码含义相同。<metacharset="utf-8"/><metacharset='utf-8'/><metacharset=utf-8/>此外，在HTML5中使用具有布尔类型值（即表示true或false）的属性时，可以省略其属性值。例如，当使用具有布尔类型值的属性checked时，若希望该属性表示true的意思时，直接在元素开始标签中添加该属性即可，代码如下：<inputcheckedtype="checkbox"/>常见的具有布尔类型值的属性有disabled、readonly、defer、ismap等。

TUOZHANYUEDU拓展阅读2.1HTML5的基本语法2.1.3标签的分类2.1HTML5的基本语法

根据是否独占一行，可以将HTML标签分为块级标签和行内标签。块级标签：其内容在浏览器中显示时独占一行，标签的宽度和高度属性可以设置。块级标签在页面中按照从上到下的顺序排列。常见的块级标签有：

<p>、<div>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<form>等。行内标签：也称内联标签，其内容在浏览器中显示时不能独自占据一行，标签的宽度和高度属性不可以设置，而是由内容决定，只有在内容超过页面的宽度时，才会换行。行内标签在页面中按照从左到右的顺序排列。常见的行内标签有：<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>等。超链接行内标签不可以包含块级标签，它只能位于块级标签之内。块级标签既可以包含其他块级标签，也可以包含行内标签。超链接ZHIDIAANMIJIN指点迷津2.1HTML5的基本语法在HTML5文档中，使用注释解释代码的含义。注释内容不会显示在页面上，但是会保存在页面的源代码文件中。注释由“<!--”开始，由“-->”结束，基本语法格式为：

2.1.4注释在实际开发中，开发者常在网页各功能模块代码的起始和结尾处添加注释，这样可以增强代码的可读性，还有利于其他开发人员修改和理解代码，更便于企业对网页进行后期维护。2.1HTML5的基本语法

<!--注释内容-->HTML5的文档结构2.2超链接使用HBuilderX编辑器新建的HTML5文档会自带一些源代码，如下：2.2HTML5的文档结构<!DOCTYPEhtml><html>

<head>

<metacharset="utf-8">

<title></title>

</head>

<body>

</body></html>这些源代码构成了HTML5文档的基本结构，主要包括<!DOCTYPE>声明、<html>标签、<head>标签和<body>标签，下面进行具体介绍。2.2超链接如果省略<!DOCTYPE>声明，大多数浏览器也能够正确显示文档内容，但是编写网页代码时不应依赖于浏览器的处理，要保持良好的编写习惯，正确声明文档所使用的标准规范。GAOSHOUDIANBO高手点拨2.2.1<!DOCTYPE><!DOCTYPE>声明是指文档声明，位于文档首行，用于向浏览器说明当前文档使用的标准规范。“<!DOCTYPEhtml>”表示当前文档使用HTML5标准。2.2HTML5的文档结构<head>标签标记的内容是文档头部，跟在<html>标签之后，用于封装其他位于文档头部的标签，这些标签中存储着网页的各种基本信息，可以使浏览器快速解析页面，其中的内容一般不会显示在页面中。文档头部一般包括以下几个元素。2.2.2<head>标签

（1）网页标题。使用<title>…</title>标签可以标记网页的标题，浏览器会将标签中的内容显示在浏览器标题栏或状态栏中，如图所示。

网页标题2.2HTML5的文档结构超链接每一个页面都需要含有<title>…</title>标签，且该标签的内容不具有任何格式。网页标题是搜索引擎识别网页内容的标识，它可以影响网页在搜索引擎中的排名，一个表达明确的网页标题可以为网站带来巨大的流量。TISHI提示超链接2.2HTML5的文档结构（2）网页元信息。使用<meta/>标签可以标记网页元信息，一般网站都会在其中设置描述和关键词等属性，以便搜索引擎检索。它还可以标记文档的字符编码。例如，“<metacharset="utf-8">”表示将网页文档的字符编码设置为“utf-8”。

（3）网页视口。网页视口就是浏览器中显示网页页面的那部分区域，通过设置视口的宽度、缩放比例等属性可以使网页适配移动端。设置视口使用“<metaname="viewport">”，具体内容见7.4.1节。2.2HTML5的文档结构超链接html、head

和body这3种元素在一个HTML5文档中只能出现一次，且<head>和<body>标签必须在<html>标签之内，<body>标签位于<head>标签之后，与<head>标签并列。ZHISHIKU知识库超链接2.2HTML5的文档结构HTML5的结构标签2.3除了前面介绍的主体结构标签<html>、<head>和<body>外，HTML5还提供了多个其他结构标签（又称语义化标签），以便于用户创建更加友好的页面主体框架，下面详细介绍每个结构标签。2.3HTML5的结构标签

2.3HTML5的结构标签

标签名称标签功能标签用法页眉标签<header>用于标记整个页面的标题栏或一个内容块的标题区域一个页面可以包含多个<header>标签，它们的具体含义会因其上下文不同而有所不同。例如，位于页面顶部的<header>标签表示整个页面的页头，位于某个栏目区域的<header>标签表示该栏目的标题。页眉中通常包含网站Logo、主导航和搜索框等。导航标签<nav>用于标记页面导航的链接组一个页面可以包含多个<nav>标签，分别表示页面整体或不同部分的导航，如主菜单导航、侧边栏导航或页内导航等。2.3HTML5的结构标签

标签名称标签功能标签用法主要区域标签<main>用于标记页面的主要内容一个页面中只能包含一个<main>标签，<main>标签不能放在<header>、<nav>、<article>、<aside>或<footer>标签中。文章块标签<article>用来标记页面中一块完整的、独立的内容，如报纸文章、博客条目、用户评论等。一个页面可以包含多个<article>标签，在<article>标签中也可以嵌套一个或多个<article>标签。2.3HTML5的结构标签

标签名称标签功能标签用法区块标签<section>用于标记文档中的节，从而对内容进行分区，如文档中的章节、页眉、页脚等<section>标签可以嵌套在<section>标签中。<section>标签标记的是页面中的特定区域，可对其中的内容进行操作。例如，<section>标签包含的内容可以单独存储到数据库中或输出到Word文档中。附栏标签<aside>用于标记一个与其余页面内容几乎无关的部分，将它单独拆分出来后不会影响整体内容例如，它可以包含与当前页面或主要内容相关的引用、侧边广告等。2.3HTML5的结构标签

标签名称标签功能标签用法页脚标签<footer>用于标记文档或节的页脚<footer>标签通常包含关于它所在区块的信息，如指向相关文档的链接、版权信息、作者信息等。当<footer>标签作为整个文档即<body>标签的页脚时，一般位于页面底部。HTML5还有其他标签么？除了上述结构标签外，HTML5中还有两个无语义容器，分别是<div>标签和<span>标签。<div>标签是块级的无语义容器，<span>标签是行内的无语义容器，灵活使用它们可以制作出更具结构化的页面样式。超链接——创建“金企鹅教育”网站主页实战演练WEB扫一扫上一章中已经带领大家使用HBuilderX创建了“金企鹅教育”项目，本节带领大家在该项目文件目录下创建“金企鹅教育”网站的主页HTML5文档，并使用HTML5结构标签标记该网站主页的主体框架。超链接步骤1

打开HBuilderX，右击主界面左侧栏中的“JinqieProject”文件夹，弹出快捷菜单，选择“新建(N)”→“7.html文件”，如图所示。——创建“金企鹅教育”网站主页实战演练WEB新建html文件超链接步骤2

弹出“新建html文件”对话框，输入html文件名称“index”；根据需要选择模板，如“default”；单击“创建(N)”按钮，如图所示。——创建“金企鹅教育”网站主页实战演练WEB“新建html文件”对话框步骤3

“金企鹅教育”网站主页创建成功，文档内容显示在编辑窗口中，如图所示。其中，“index.html”文档位于“JinqieProject”项目文件夹下。——创建“金企鹅教育”网站主页实战演练WEB“index.html”文档显示在编辑窗口中超链接步骤4

规划“金企鹅教育”网站主页的主体框架，包括页眉、导航栏、页面主要区域、页脚。其中，页面主要区域中还包括轮播图、企业宣传、教育资讯、精品图书模块。利用HTML5结构标签构建该网页的主体框架和模块，即在<body>标签内添加标签<header>、<nav>、<main>、<footer>和<section>，如图所示。——创建“金企鹅教育”网站主页实战演练WEB构建“金企鹅教育”网站主页结构本章主要介绍了HTML5的基础知识。通过本章的学习，读者应重点掌握以下内容。（1）标签是由一对尖括号（“<”和“>”）括起来的关键词。大部分标签都是成对出现的，称为双标签；也有少数标签是单独出现的，称为单标签。（2）HTML5文档的基本结构由<!DOCTYPE>声明、<html>标签、<head>标签和<body>标签构成。（3）HTML5提供了多个结构标签，包括页眉标签<header>、导航标签<nav>、主要区域标签<main>、文章块标签<article>、区块标签<section>、附栏标签<aside>、页脚标签<footer>。本章小结超链接课堂练习WEB（1）用于标记整个页面的标题栏或一个内容块标题区域的结构标签是（

）。

A．页眉标签<header>

B．主要区域标签<main>

C．文章块标签<article>

D．区块标签<section>（2）用来标记页面中一块完整的、独立的内容（如报纸文章、博客条目、用户评论等）的结构标签是（）。

A．页眉标签<header>

B．主要区域标签<main>

C．文章块标签<article>

D．区块标签<sec

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论