你的位置:首页 > 网页设计

[网页设计]HTML5与CSS3基础教程第八版学习笔记1~6章


第一章,网页的构造块

网页主要包括三个部分:

1、文本内容(纯文字)
2、对其他文件的引用:图像,音频,视频,样式表文件,js文件
3、标记:对文本内容进行描述并确保引用正确地工作
注:所有这些成分都仅由文本构成

基本HTML页面

HTML使用< ,> 包围HTML标签。开始标签(如<head>)标记元素开始,结束标签(</head>)用于标记元素结束
网页顶部和头部
<body>开始标签以上的内容都是为浏览器和搜索引擎准备的。<!DOCTYPE html>部分告诉浏览器这是一个HTML5页面。
注:DOCTYPE应该始终位于页面第一行
接下来是<html>元素,包含着页面其余部分。再接下来是<head>文档头部,<meta>,<title>在文档头部。

标签:元素、属性、值和其他

标签组成:元素(element),属性(attribute),值(value)
注:习惯上标签采用小写字母
注:属性值两边的引号是可选的,建议写上,尽量使用小写字母编写属性名称
父元素,子元素
若一个元素包含另一个元素,它就是被包含元素的父元素,被包含元素称为子元素。
注:一定要正确嵌套,例如:

<div>   <p></p></div>

不可如下嵌套,会出问题


<div><p></div></p>

浏览器呈现HTML时,会把文本中的多个空格或制表符压缩成单个空格,将回车符和换行符转换成单个空格,或者将它们一起忽略。
&copy:版权符号的特殊字符
HTML5提供了audio和video元素,无需插件也可以播放音频和视频。
注意:文件名全部使用小写字母,用短横线分隔单词,用.html作扩展名。文件夹的名称也应全部使用小写字母,关键是保持一致,减少大小写转换浪费的时间

URL

URL(Uniform Resource Locator,统一资源定位符)
包含:模式,常见模式:HTTP(Hypertext Transfer Protocol,超文本传输协议),HTTPS是从HTTP衍生的。


其他模式,ftp(File Transfer Protocol,文件传输协议)用于下载文件。mailto用于发送电子邮件
模式后面常跟一个冒号和两个斜杠,mailto除外,它只有一个冒号。



注:对于FTP站点以及所有不使用HTTP协议的URL,都应该使用绝对路径

根相对URL

如果文件位于web服务器上,应该使用根相对URL
例:/img/family/test.html
语义化HTML

第二章,处理网页文件

规划网站
创建新网页
保存网页
编辑网页
组织文件
在浏览器中查看网页
注:要注意网页格式编码,推荐使用UTF8

第三章,基本HTML结构

每个HTML文档都应该包含以下基本部分:

<!DOCTYPE html><html><head>  <meta charset="utf-8" />  <title></title></head><body>  </body></html>

即:
DOCTYPE
html元素,推荐加上lang属性
head元素
说明字符编码的meta元素
title元素
body元素
注:在页面底部</body>标签结束前加载js文件是更好的选择
注:使用HTML5 DOCTYPE可以确保浏览器以可靠的模式呈现页面
注意:要确保你的代码保存的格式与<meta>里面的编码相同
每个页面都要有一个<title>元素,应该是简短的,描述性的,而且是唯一的
最佳实践:title应该是能够简要概括文档内容的文字
建议:将title的核心内容放在前60个字符(含空格)中。

创建分级标题

对于搜索引擎而言,如果标题和搜索词匹配,这些标题就会被赋予很高的权重,尤其是,等级最高的h1(并不意味页面中h1越多越好)。

创建页眉

一组介绍性或导航性内容的区域,应该用header元素对其进行标记
通常页眉包括网站标志,主导航和其他全站链接
注:只在必要时使用header元素,不能在header里面嵌套footer,header元素,footer和address元素里面也不能嵌套header元素

标记导航

HTML早期并没有元素明确表示主导航链接,HTML5则有,即nav,应该仅对文档中重要的链接群使用nav
HTML5中不允许在nav中嵌套address

标记页面的主要区域

main元素
main元素是HTML5新添加的元素,记住,一个页面里仅使用一次main元素
若创建的是web应用,使用main包围其主要功能
不能将main放在article、aside、footer、header、nav元素中

创建文章

HTML5的新元素article
article可以嵌套article,只要里面的article和外面的article是部分与整体的关系。
一个article可以包含一个或多个section元素

定义区块

HTML5的新元素,section
如果只是出于添加样式的原因要对内容添加个容器,应使用div而不是section
可以将section嵌套在article中,从而显示地标出报告、故事、手册等文章的不同部分或不同章节

指定附注栏

页面中有一部分内容与主体相关性没有那么强,但可以独立存在,则可以使用HTML5新元素,aside。
应该将附注栏内容放在main的内容之后
与内容有关的图像,使用figure而非aside
aside不允许嵌套在address中

创建页脚

footer元素
footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section、td元素的页脚,只有当它最近的祖先是body时,才是整个页面的页脚。
页脚通常包含关于它所在区域的信息,如指向相关文档的链接、版权信息、作者及其他类似条目
不能在footer里嵌套header或footer
只能对页面级的页脚使用role="contentinfo",且一个页面只能使用一次

创建通用容器

div
div从新的一行开始显示,不可滥用

使用ARIA改善可访问性

WAI-ARIA(Web Accessibility Initiative‘s Accessible Rich Internet Application,无障碍网页倡议-无障碍的富互联网应用)
地标角色
ARIA的地标角色可以帮助用户识别页面区域,从而让屏幕阅读器用户可以直接跳到这些区域。通常,只要设置role属性就可以

一些可用的地标角色
role="banner"(横幅)
面向全站的内容,通常包含网站标志、网站赞助者标志、
全站搜索工具等。通常显示在页面顶端,跨越整个页面
宽度
将其添加到页面级header元素,每个页面只能使用一次
role="navigation"(导航)
文档内不同部分或相关文档的导航性元素(通常为链接)
的集合
与nav元素是对应关系。应将其添加到每个nav元素,
或其他包含导航性链接的容器。这个角色可在每个页面
上使用多次,但同nav一样,不要过度使用该属性
role="main"(主体)
文档的主要内容
与main元素是对应关系,最好是添加到main元素,也可
添加到其他表示主体的内容元素,每个页面仅使用一次
role="complementary"(补充性内容)
文档中作为主体内容补充的支撑部分。
与aside元素是对应关系。应将其添加到aside或div中,可以
包含多个complementary角色,但不要过度使用
role="contentinfo"(内容信息)
包含关于文档的信息的大块可感知区域这类信息的例子
包含版权声明和指向隐私权声明的链接等
将其添加到整个页面的页脚,每个页面仅使用一次

其他的角色:对于表单元素,form角色是多余的,search用于标记搜索表单,application则属于高级用法

为元素指定类别或ID名称


1、为元素添加唯一的ID
2、为元素指定类别
指定多个类别,只需要用空格隔开即可,例:
推荐使用类别为元素添加样式。在class和id名称中,通常使用短横线分隔多个单词,例:

为元素添加title属性

可以使用title属性为网站上任何部分加上提示标签

第四章,文本

em元素用来标识强调的文本,cite用来标识对艺术作品、电影、图书等内容的引用,这两个的文本内容都是用斜体,code元素专门用来格式化脚本或程序中的代码,该元素中的文本默认使用等宽字体

添加段落

使用p元素

添加细则

使用small元素,表示细则一类的旁注,包括免责声明、注意事项、法律限制、版权信息等。只适用于短语。

标记重要和强调的文本

strong元素表示内容的重要性,而em则表示内容的着重点。
可以在标记为strong的元素里面再嵌套strong元素,em也一样
在HTML5中,em是表示强调的唯一元素,stron则表示重要程度
HTML5将b重新定义:
b元素表示出于实用目的提醒读者注意的一块文字,不传达任何额外的重要性,也不表示其他语态和语气,用于如文档摘要里的关键词、评论中的作品、基于文本的交互式软件指示操作的文字、文章导语等。
HTML5重新定义i元素:
i元素表示一块不同于其他文字的文字,具有不同的语态和语气,或其他不同于常规之处,用于如分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称等

创建图

HTML5引入figure和figcaption。图可以是图表、照片、图形、插图、代码片段,以及其他类似的独立内容。figcaption是figure的标题,可选,出现在figure内容的开头或结尾处。
figcaption并不是必须的,如果使用了,那它必须是figure元素内容的第一个或最后一个元素

指明引用或参考

使用cite元素可以指明对某内容源的引用或参考
对于要从引用来源中引述内容的情况,使用blockquote或者q元素标记引述文本

引述文本

1、引述块级文本:使用blockquote元素,可以添加cite="url"的属性
2、引述行内文本:使用q元素,可以添加cite="url"的属性,应lang属性
由于q元素的跨浏览器问题,很多开发人员选择直接输入正确的引号或使用字符实体。

指定时间

使用time元素,可选属性:datetime,用于帮助机器可读
如果忽略了datetime属性,则文本内容必须是合法的日期或时间格式。
不能在time中嵌套另一个time,也不能在没有datetime属性的time元素中包含其他元素

有效时间格式

datetime属性或者没有datetime属性的time元素,必须提供特定的机器可读格式的日期和时间,简化形式:
YYYY-MM-DDThh:mm:ss
小时部分使用24小时制,秒是可选的,也可以使用hh:mm.sss 格式提供时间的毫秒数,注意,毫秒数之前是一个点。

解释缩写词

可以使用abbr元素标记缩写词并解释其含义。

定义术语

使用dfn元素对要定义的术语作语义上的区分。仅用dfn包围要定义的术语,而不包围定义。

创建上标和下标

常见上标:商标符号、指数、脚注编号
常见下标:化学符号
<sub>创建下标,<sup>创建上标。
修复sub和sup造成的行间距问题:

/** 在所有浏览器中防止sub和sup影响line-height* gist.github.com/413930*/sub,sup{  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline;}sup{  top: -0.5em;}sub{  bottom: -0.25em;}

添加作者联系信息

address元素是用以定义与HTML页面或页面一部分有关的作者、相关人士或组织的联系信息。
HTML5禁止在address里面包含以下元素:h1~h6、article、address、aside、footer、header、hgroup、nav、section

标注编辑和不再准确的文本

两种用于标注编辑的元素:代表添加内容的ins元素和标志已删除内容的del元素。s元素用以标志不再准确或不再相关的内容。
1、标记新插入的文本
2、标记已删除的文本
3、标记不再准确或不再相关的文本

标记代码

使用code元素。
如果需要使用到<,>,则应用&lt和&gt代替。

使用预格式化的文本

<pre>元素。可以以原样像是文本,包含空格、回车和换行符。
注:浏览器默认关闭pre的自动换行。

突出显示文本

使用mark元素标注希望引起注意的字词。

创建换行

要确保br是最后的选择。
对于诗歌、街道地址等应该紧挨着出现的短行都适合用br元素

创建span

span元素同div一样,是没有任何语义的。与div不同,span只适合包围字词或短语。

其他元素

1、u元素:用于非文本注解。
2、wbr元素:代表一个可换行处,并不会强制换行。
3、ruby、rp、rt元素
4、bdi、bdo元素
5、meter元素:可用以表示分数的值和已知范围的测量结果
6、progress元素:指示某项任务的完成进度。

第五章,图像

关于Web图像

1、格式和下载速度
Web上用的最广泛的三种格式:gif,png,jpeg
(1)jpeg
jpeg适合用于彩色照片,因为它包含大量的颜色并进行了合理压缩,采用这种格式保存的文件相对较小。
(2)png和gif
png和gif是无损格式。支持透明。
2、颜色
3、大小
4、透明度:png和gif均支持透明度,jpeg不支持。
gif一个像素要么透明要么不透明,称作:索引色透明。png除了支持索引色透明,还支持alpha透明,即一个像素可以部分透明
5、动画:可以保存为gif,但不能是png或jpeg

获取图像

选择图像编辑器

ps,Adobe Fireworks,Gimp,Acorn,Pixelmator,Paint.NET,PaintShop Pro

保存图像

在页面插入图像

提供替代文本

指定图像尺寸

在浏览器中改变图像的尺寸

在图像编辑器中改变图像的尺寸

为网站添加图标


第六章,链接

链接的两个主要部分:目标和标签,使用a元素
rel属性是可选的,但对于指向另一个网站的链接,推荐包含这个值。
HTML块级链接。HTML5几乎允许在链接内包含任何类型的元素或元素组。

创建锚并链接到锚

通常,激活一个链接会将用户带到对应网页的顶端。如果要想用户跳至网页的特定区域,可以创建一个锚,并在链接中引用锚。
例:
<h2 id="features"><a href="#features">


点击链接,将会跳到h2所在区域。根据id进行跳转。

创建其他类型的链接

万维网上的任何文件(http://xxx.xxx.xx/xx.xx),电子邮件(mailto:name@example.com),电话号码(tel:+123456987)。
建议:不要使用指向电子邮件地址的链接。
对于能够识别tel:的只能手机,点击链接会询问用户是否拨打号码。不是电话设备的则将询问是否加到通讯录,有的浏览器会启动Google Voice或Skype,其他浏览器则不知道如何处理