HTML5入门教程：基本结构与文档声明 - CSDN文库

版权申诉

60 浏览量更新于2024-06-28 收藏 1.19MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"HTML5+CSS3笔记.pdf" HTML5是现代网页开发的基石，它引入了许多新特性，改进了原有的HTML4规范，使得网页开发者能够创建更具交互性和表现力的网页。HTML5不仅关注结构，还强调语义，旨在提高网页的可读性和可访问性。 1. HTML5概述 HTML5的核心目标是简化Web开发，同时提高用户体验。它通过新增标签和API来减少对JavaScript和Flash的依赖，支持多媒体元素，如音频、视频、图形和动画。此外，HTML5还强化了离线存储功能，使网页在离线状态下也能部分运行。 2. HTML5基本格式 HTML5文档的结构通常由以下几个部分组成： - `<!DOCTYPE html>`：这是HTML5的文档类型声明，告诉浏览器文档遵循的是HTML5标准，不再需要指定特定版本。 - `<html lang="zh-cn">`：html元素是整个文档的根元素，`lang`属性用于指定文档的语言，这里是简体中文（zh-cn）。 - `<head>`：包含文档的元数据，如字符编码、页面标题、样式表链接、脚本引用等。 - `<meta charset="utf-8">`：声明文档的字符编码为UTF-8，确保跨平台的字符显示正确。 - `<title>`：定义页面的标题，显示在浏览器的标签页上。 - `<body>`：文档的主要内容区域，包含所有可见的网页元素，如段落、图像、链接等。 3. 元素解析 - `<head>`中的`<meta>`元素：常用来设置页面的元信息，例如`charset`属性用于设定字符编码。 - `<link>`：可以链接外部CSS文件，定义页面样式。 - `<script>`：引入JavaScript代码或外部JS文件，实现动态交互功能。 - `<style>`：内联样式表，用于定义页面的样式规则。 - `<noscript>`：当浏览器不支持或禁用了JavaScript时，显示替换内容。 - `<title>`：定义浏览器标题栏显示的文本，也是搜索引擎识别页面主题的重要依据。 4. CSS3简介 CSS3是CSS的最新版本，提供了许多新的选择器、布局模式、动画和过渡效果。例如，它可以实现更精确的元素定位（如Flexbox和Grid布局），添加阴影、渐变、边框圆角等视觉效果，以及创建复杂的动画和过渡效果。 HTML5和CSS3的结合使用，极大地增强了网页的设计能力和功能性，使得开发者能够创建出响应式、动态且美观的网页，同时保持良好的浏览器兼容性和性能。随着技术的不断进步，这两个技术将继续在互联网行业中发挥关键作用。

资源详情

资源推荐

左到右）。一般默认是ltr。还有一个<bdi>元素也是处理方向的，由于是特殊语言的特殊

效果，且主流浏览器大半不支持，忽略。

19.<mark>突出显示文本

<mark>HTML5</mark>

解释：<mark>实际作用就是加上一个黄色的背景，黑色的字；从语义上来看，与上下

文相关而突出的文本，用于记号。

20.<time>表示日期和时间

<time>2015-10-10</time>

解释：<time>元素没有实际作用；从语义上来看，表示日期和时间。

21.<span>表示一般性文本

<span>HTML5</span>

解释：<span>元素没有实际作用；语义上就是表示一段文本，我们经常用它来设置CSS

等操作。

四、 HTML5 超链接和路径

一．超链接的属性

<a>元素属于文本元素，有一些私有属性或者叫局部属性。那么，相对应的还有通用属

性或叫做全局属性。这方面的知识，后面会详细探讨。

属性名称说明

href 指定<a>元素所指资源的URL

hreflang 指向的链接资源所使用的语言

media 说明所链接资源用于哪种设备

rel 说明文档与所链接资源的关系类型

target 指定用以打开所链接资源的浏览环境

type 说明所链接资源的MIME 类型（比如text/html）

在这几个属性当中，只有href 和target 一般比较常用，而href 是必须要用的。其

他几个属性，在<a>元素使用较少，将在CSS 章节再探讨。

1.href 属性

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

解释：href 是必须属性，否则<a>元素就变成空元素了。如果属性值是http://开头

的URL，意味着点击跳转到指定的外部网站。

2.target 属性

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

解释：target 属性告诉浏览器希望将所链接的资源显示在哪里。

属性名称说明

_blank 在新窗口或标签页中打开文档

_parent 在父窗框组（frameset）中打开文档

_self 在当前窗口打开文档（默认）

_top 在顶层窗口打开文档

这四种最常用的是_blank，新建一个窗口。而_self 是默认，当前窗口打开。_parent

和_top 是基于框架页面的，分别表示在父窗口打开和在整个窗口打开。而HTML5 中，框架

基本被废弃，只能使用<iframe>元素，且以后大量结合JavaScript 和PHP 等语言配合，

框架用的就很少了。

二．相对与绝对路径

所谓相对路径，就是相对于链接页面而言的另一个页面的路径。而绝对路径，就是直接

从file:///磁盘符开始的完整路径。我们在同一个目录下做上两个页面，其中一个页面链

接到另一个页面。

1.绝对路径

<a href="file:///D:/备课/HTML5 第一季/code/index2.html">index2</a>

解释：首先是file:///开头，然后是磁盘符，然后是一个个的目录层次，找到相应文

件。这种方式最致命的问题是，当整个目录转移到另外的盘符或其他电脑时，目录结构一旦

出现任何变化，链接当即失效。

2.相对路径

<a href="index2.html">index2</a>

解释：相对路径的条件是必须文件都在一个磁盘或目录下，如果是在同一个目录下，直

接属性值就是被链接的文件名.后缀名。如果在同一个主目录下，有多个子目录层次，那就

需要使用目录结构语法。

3.目录语法

同一个目录：index2.html 或./index2.html；

在子目录：xxx/index2.html；

在孙子目录：xxx/xxx/index2.html；

在父目录：../index2.html；

在爷爷目录：../../index2.html；

三．锚点设置

超链接也可用来将同一个文档中的另一个元素移入视野。通过属性id 或name 实现锚

点定位。

//链接

<a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a>

//锚点

<a name="1"></a> <a id="3"></a>

五、 HTML5 分组元素

一．分组元素总汇

为了页面的排版需要，HTML5 提供了几种语义的分组元素。

元素名称说明

p 表示段落

div 一个没有任何语义的通用元素，和span 是对应元素

blockquote 表示引自他出的大段内容

pre 表示其格式应被保留的内容

hr 表示段落级别的主题转换，即水平线

ul,ol 表示无序列表，有序列表

li 用于ul,ol 元素中的列表项

dl,dt,dd

表示包含一系列术语和定义说明的列表。dt 在dl 内部表示

术语，一般充当标题；dd 在dl 内部表示定义，一般是内容。

figure 表示图片

figcaption 表示figure 元素的标题

剩余25页未读，继续阅读

春哥111

粉丝: 1w+
资源: 5万+

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈