HTML5网页制作技术第4章 文本
手把手教你制作HTML5网页
手把手教你制作HTML5网页随着互联网的发展，各种网页应运而生，现在已经成为人们必不可少的信息来源工具。
而网页制作也逐渐成为一项重要的技能。
在本篇文章中，我们将一步步教你如何制作HTML5网页。
HTML5是最新的HTML标准，是用于展示网页内容的基本语言。
因为它的功能更加强大，适应性更强，所以被越来越多的人所青睐。
为了制作HTML5网页，我们需要掌握一些基本技能和工具。
1. HTML5语言基础在制作HTML5网页之前，我们需要了解HTML5的基础语言。
HTML5包括标记、元素和属性。
其中标记是HTML的基本语言结构，元素是标记和内容的结合体，属性是指定元素的特定信息的关键字。
在HTML5中，用于定义HTML文档的标记是“<! DOCTYPE HTML>”。
然后，计算机就知道我们正在使用HTML5。
然后，我们在“<html>”标记内输入HTML5网页的基本信息，如网页标题等。
2. 利用文本编辑器在制作HTML5网页时，需要使用一些文本编辑器，如Notepad++或Sublime Text等。
当你打开一个文本编辑器时，可以选择“新建文件”，然后输入“<! DOCTYPE HTML>”开始制作HTML5网页。
为了使网页更好看，我们需要添加些样式。
这里可以使用CSS （层叠样式表），CSS用于控制HTML文本内容的布局和样式。
它与HTML5结合使用可以使网页看起来更加美观。
3. 增加网页内容在HTML5网页制作中，你可以添加各种内容，如文本、图像、表格和视频等。
这需要我们掌握一些标签。
比如在添加文本时，我们可以使用“<p>”标签。
如果要插入图片，我们使用“<img>”标签。
表格使用“<table>”标签，视频使用“<video>”标签。
除此之外，我们还可以使用超链接来将网页链接到其他网页或文件。
为此，我们可以使用“<a>”标签，并使用“href”属性指定要链接的目标。
项目四(网页文本、图像与多媒体)
（7）text-align属性用于设置文本的水平对齐方式。属性值有4个，left是默认值，表示左对齐；right表示右对齐； center表示居中对齐；justify表示两端对齐。
（8）text-decoration属性用于设置文本划线。属性值有4个，none表示默认效果；underline表示下划线效果； overline表示上划线效果；line-through表示贯穿线效果。
（9）text-indent属性用于设置文本的缩进。属性值为表示缩进大小的数值与单位（一般为em，表示一个字符）。
（10）text-shadow属性用于设置文本阴影。该属性有4个值，依次为h-shadow、v-shadow、blur与color。 其中，h-shadow表示阴影的水平偏移量，v-shadow表示阴影的垂直偏移量，这两个属性值都可以为负值，0
border-radius属性用于设置元素的圆角。属性值为数值加单位，设置该属性时可
03 以直接在属性后输入属性值（表示同时设置四个方向角的圆角），也可以在下方
的矩形元素示意图上设置特定方向角的圆角。
CSS3中新增了一些属性用于设置元素的变形与过渡效果，从而展示动画效果，提升页面趣味性。
01 变形:在CSS3中，使用transform属性即可实现元素的平移、缩放与旋转等变形效果。属性值有以下几种:
各级别标题标签与段落标签的页面效果
3．文本格式化标签
HTML5中提供了一些文本格式化标签，如<strong>（粗体）、<em>（倾斜）标签，使Dreamweaver CC添加这两种标签的方法如下:
01 打开本书配套素材“项目四”→“任务一”文件夹，右击“ex1.html”文件，在弹出的快捷菜单中选择
HTML5完整教程
HTML5完整教程HTML5是HTML（超文本标记语言）的第五个版本，它不仅为网页开发者提供了更多的功能和选项，还增加了许多新的元素和属性。
与之前的HTML版本相比，HTML5更加强大灵活，并且能够更好地满足现代网页的需求。
首先，我们来了解一下HTML5的基本结构。
一个HTML5文档以<!DOCTYPE html>开始，这是必须包含的声明，它告诉浏览器使用HTML5的解析模式。
接下来的部分是html元素，它是文档的根元素。
整个网页的内容都位于html元素中。
在html元素内部，有两个主要的部分：head元素和body元素。
head元素用于定义网页的一些元信息，比如标题、字符编码等。
body元素则用于定义网页的实际内容，比如文本、图片、链接等。
HTML5引入了许多新的元素，这些元素使得网页的结构更加语义化，并且能够更好地描述网页的内容。
比如，我们可以使用<header>元素定义网页的头部，<nav>元素定义导航栏，<article>元素定义一个独立的文章，<footer>元素定义网页的底部等等。
这些元素不仅使得网页的结构更加清晰，而且对于引擎的优化也非常有帮助。
总结一下，HTML5是一种强大、灵活的标记语言，用于编写现代网页。
它引入了许多新的元素、属性和功能，使得网页的结构更加清晰、语义化，并且能够更好地满足现代网页的需求。
在使用HTML5构建网页时，我们应该遵循最佳实践，编写语义化的、可访问的代码，并进行优化，以提高网页的性能。
希望这篇HTML5教程能够为您提供一些帮助。
《HTML5完整教程》课件
制作一个简单网站注 册页面
学习如何设计和实现一个用户 注册页面。
制作一个简单网页动 态效果
使用JavaScript和CSS3为网页添 加动态效果和交互性。
结束语
1 HTML5的未来
展望HTML5的发展前景和可能的趋势。
2 学习建议和资源推荐
提供给学习者关于深入学习HTML5的建议和推荐资源。
3 答疑时间
多媒体元素
学习如何在HTML5中嵌入视频、 音频和Canvas。
第四章 CSS3新特性
1 CSS3介绍
了解CSS3的功能和应用领域。
2 盒模型
深入了解CSS3盒模型的各个方面，包括边框、填充、外边距等。
3 文字样式
探索CSS3提供的新的文字样式特性，如文pt基础语法
Web Workers
探索Web Workers如何提供多线程编程能力。
Web Socket
学习使用Web Socket实现实时通信和数据传输。
WebGL
了解WebGL的基本原理和在浏览器中展示3D图 像的方法。
第七章 HTML5实战案例
制作一个简单网站
使用HTML5和CSS3创建一个功 能丰富的静态网站。
《HTML5完整教程》PPT 课件
在这份《HTML5完整教程》的PPT课件中，我将向大家介绍HTML5的各个方 面，包括概述、基础语法、新增元素、CSS3新特性、JavaScript基础语法、高 级技术和实战案例等内容。
第一章 HTML5概述
HTML5介绍
了解HTML5的定义、用途和优势。
HTML5特性
1
JS脚本位置
学习如何在HTML文档中嵌入JavaScript代码。
第4章 【HTML5入门精通实战教程】HTML5文档标签
浏览器显示效果：
4.8 footer元素
1、footer元素的使用说明 （1）<footer> 标签定义文档或节的页脚。页脚通 常包含文档的作者、版权信息、使用条款链接、 联系信息等等。 （2）离body最近的footer表示整个页面的页脚。 （3）不能将footer元素嵌套在header、address里。 Footer里不能嵌套header或另一个footer。 （4）footer可以嵌套在article中，作为文章的页 脚，可以放置文章作者及联系方式。联系信息 放在address中。 2、举例
浏览器显示效果：
浏览器显示效果：
4.8 main元素
1、main元素的使用说明 （1）<main> 标签规定文档的主要内容。 （2）<main> 元素中的内容对于文档来说应当是 唯一的。在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后 代：<article>、<aside>、<footer>、<header> 或 <nav>。 2、举例：
4.5 article元素
代码：
<body> <header> <nav> <ul> <li><a href=“#”> 首页 </a></li> <li><a href=“#”> HTML5 </a></li> <li><a href=“#”> CSS3 </a></li> </ul> </nav> </header> <article> <h1> HTML5介绍 </h1> <p> HTML5是HTML的最新版本 </p> <p> HTML5增加了很多新的语义标签 </p> <h2> CSS3介绍 </h2> <p> CSS3是CSS的最新版本 </p> <p> CSS3增加了很多新的功能 </p> </article> </body>Leabharlann 4.8 main元素代码：
《HTML5开发指南》
《HTML5开发指南》HTML5开发指南HTML是一种标记语言，用于创建网页。
它在过去几十年中一直是Web开发的基础。
随着时间的推移，HTML不断进化，引入了新的特性和功能，成为了今天众所周知的HTML5标准。
HTML5标准是一种全新的Web开发技术，它可以让Web开发者更加轻松地创建响应式设计、多媒体和互动应用等。
在本篇文章中，我们将向您介绍HTML5的一些基本概念和新特性，以及如何使用这些新特性来创建各种Web应用。
我们将介绍HTML5的一些新元素和属性，如何创建动画和游戏，以及如何使用Web存储和Web Workers等功能优化性能。
我们还将介绍在Web应用中使用多媒体和地理位置等方面的开发技术。
新标签和属性HTML5为Web开发者提供了一些新的标签和属性，使页面构建更加灵活和易于维护。
以下是一些新标签和属性的示例：1. nav - 用于定义导航链接部分。
2. article - 用于定义文章部分。
3. section - 用于定义一个页面的段落或部分。
4. time - 用于定义日期和时间。
5. required - 用于定义表单元素是否必填。
动画和游戏除了新的标签和属性之外，HTML5还引入了一些新的API，使Web开发更具有互动性和动感。
Canvas API是HTML5中最值得关注的API之一，它提供了一个2D绘图表面，让开发者可以基于像素绘制各种图形，例如：图表、图像等。
WebGL则允许开发者使用3D图形和硬件加速在Web上创建复杂的动画和游戏。
另外还有Audio和Video API，它们允许多媒体的播放和处理，这让开发者能够更易于控制音频和视频的播放。
优化性能与其他语言、框架相比，HTML5可以让开发者创建更快、更流畅的Web应用。
一些优化技巧包括使用Web存储和Web Workers。
Web存储可以让Web 应用程序缓存和访问数据，而Web Workers则允许开发者在后台线程中处理任务，不会影响到Web UI的运行效率。
HTML5+CSS3 Web前端设计基础教程(第4章)
4.3 控制图像和颜色
此处图片通过横向 平铺实现效果。此 外，同时设置图像 高度，如果不设置， div元素内又没有内 容将容器撑起来， 将无法显示背景图 片 此处图片设置了跟 随滚动条滚动的效 果，即便不设置， 浏览器默认状态就 是滚动效果
图4-15 背景色、背景图预览效果
此 处 为 box 容 器同时设置背 景图和背景色
此处文本溢出，文 字折返到下一行
此列表项内容超出了容器设 置的范围，出现了省略标记
图4-7 文本溢出处理预览效果
4.2 控制超链接
4.2.1 文本链接、邮件链接与锚链接 4.2.2 CSS伪类与超链接 1．什么是CSS伪类 伪类的语法形式为：
选择符：伪类 { 属性: 属性值; }
表4-3 常见的伪类及其含义 伪类 :link、:visited、:hover、:active :focus :not(s)（CSS 3新增） :root（CSS 3新增） :first-child :last-child（CSS 3新增） :nth-child(n) （CSS 3新增） 解释 设置超链接被访问前后的4个状态样式。 设置对象在成为输入焦点时的样式。 匹配不含有s选择符的元素。 匹配某一个元素在文档的根元素。 匹配父元素的第一个子元素。 匹配父元素的最后一个子元素。 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
4.1 控制文本
1．font-family（字体类型） 2．font-size（字号大小）
3．font-style（字体风格）
标题设置固定字号， 字体风格为斜体
此行设置为“宋体” 此行设置为“华文彩云 此行设置为“微软雅黑”
图4-3 字体类型、字号和风格预览效果
此行设置为“黑体”， 字号大小为父级的 80%
网站建设与网页制作_第四章_HTML超文本标记语言
网站建设与网页制作
4.2
插入图像
背景图案的设定
在网页中除了用一种单一的颜色作背景外，还可以用 图像平铺的方法制作背景。图像平铺就是把一张小的图像 在屏幕上一个一个地拼接起来，构成一个屏幕的完整的背 景。定义背景图像的语法格式如下： <body background="image-URL"> 其中，“image-URL”指图像的位置。 在建立这种形式的背景之前，首先要确定所选定的图 案能否看上去无痕迹地连接在一起，或者能否产生一种较 好的背景效果。 用平铺图像作背景，将极明显地降低网页的显示速度。 唯一的解决办法就是尽量使用小的图像文件，如果可能的 话则不用。
网站建设与网页制作
4.2
插入图像
图像使用原则
在使用图像的问题上，网页的制作者可能会与浏览者产生一些 矛盾。比如，制作者往往希望在自己的网页上有一些漂亮的图像， 使网页充满艺术的魅力；而浏览者常常因为网页下载时间太长而不 耐烦，甚至不愿等着下载全部内容。因此，我们可以采用以下的方 法来缓解这个矛盾： 1．在设计网页时，应该反复斟酌哪些图像必须要，哪些图像 可在可无，对于那些不是必需的图像，要舍得忍痛割爱； 2．把图像尽量做得小一点，小图像在网上的传输速度比较 快， 这对于网络传输速度较慢的用户更为重要。较小的图像可以是尺寸 比较小，也可以通过减少图像颜色使图像文件减小；
网站建设与网页制作
4.3
插入表格
设置表格边框的尺寸border
设置边框尺寸的语法如下： <table border="数值"> border属性的参数值是数字，表示表格边框宽度所占 的像素点数。例如，<table border=10>表示表格的边框 宽度为10个像素点。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
B. <p><b>文章标题</b></p>
B. <h1>文章标题</div>
D.<strong>文章标题</strong>
2、如果想要实现粗体效果，我们可以使用（ ）标签来实现。
A. <strong></strong>
B. <em></em>
C. <sup></sup>
D.<sub></sub>
3、下面有关自闭合标签说法不正确的是（区别 ➢ 掌握标题标签、段落标签、文本标签等 ➢ 掌握自闭合标签的特点 ➢ 掌握块元素和行内元素的区别 ➢ 了解网页特殊符号
4.1 文本简介
• 在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、 h5、h6。其中h是“header”的缩写。
4.7 自闭合标签
• 在HTML中，标签可以分为2种：（1）一般标签；（2）自 闭合标签
• 一般标签：由于有开始符号和结束符号，因此可以在内 部插入其他标签或文字
• 自闭合标签：由于只有开始符号而没有结束符号，因此 不可以在内部插入标签或文字。所谓的“自闭合”，指 的是本来要用一个配对的结束符号来关闭，然而它却 “自己”关闭了
4.9 特殊符号
• 在HTML中，如果想要显示一个特殊符号，也是需要通过 代码形式来实现的
• 网页特殊符号对应的代码，都是以“&”开头、并且以“;” （英文分号）结尾的
• 我们只需要记住一个：
练习题
一、单选题
1、选出你认为最合理的定义标题的方法是（ ）。
A. <div>文章标题</div>
A. 自闭合标签只有开始符号没有结束符号
B. 自闭合标签可以在内部插入文本或图片
C. meta标签是自闭合标签
D. hr标签是自闭合标签
4、在浏览器默认情况下，下面有关块元素和行内元素说法不 正确的是（ ）。
A. 块元素独占一行
B. 块元素内部可以容纳块元素
C. 块元素内部可以容纳行内元素
D. 行内元素可以容纳块元素
4.8 块元素和行内元素
• 在HTML中，根据元素的表现形式，一般可以分为2类：块元素、 行内元素
• 块元素的特点： （1）块元素独占一行，排斥其他元素（包括块元素和行内元素）
与其位于同一行； （2）块元素内部可以容纳其他块元素和行内元素；
• 行内元素的特点： （1）行内元素可以与其他行内元素位于同一行； （2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素；
• 这6个标题标签在页面的重要性是有区别的，其中h1标签 的重要性最高，h6标签的重要性最低。
• 一个页面一般只能有一个h1标签，而h2~h6标签可以有多 个
4.2 标题标签
• 不是“会动”的页面就叫动态页面，静态页面和动态页 面的区别在于：是否与服务器进行数据交互。以下4种情 况不一定是动态页面：
5、下面标签中，哪一个不是块元素？（ ）
A. strong
B. p
C. div
D. hr
二、编程题
1、使用这一章学到的各种文本标签，把下图所示的网页效果 做出来。
重点掌握：strong、em、sup、sub
4.5 水平线标签
• 我们可以使用“hr标签”来实现一条水平线。hr， “horizon（水平线）”的缩写。
4.6 div标签
• div，全称“division（分区）”，用来划分一个区域 • div标签最重要的用途：划分区域，然后结合CSS针对该区
域进行样式控制。
➢ 带有音频和视频 ➢ 带有Flash动画 ➢ 带有CSS动画 ➢ 带有JavaScript特效
【疑问】网页不是有title标签来定义标题了吗？为什么还要用 h1标签呢？ • title标签和h1标签是不一样的。title标签用于显示地址栏的
标题，而h1标签用于显示文章的标题
4.4 文本标签
• 粗体标签：strong、b • 斜体标签：i、em、cite • 上标标签：sup • 下标标签：sub • 划线标签：s、u • 字号标签：big、small