根据这个书名,想下载的可以自行搜索,还是建议购买正版
Tip:好多书上的内容,并没有很详细的写出来,是我觉得,细节的地方用的多了自然会记住,学习新知识还是构建知识框架更为重要,细节需要在实战中慢慢深化,再说,实在不行不是还是可以搜索的嘛!
~
第一章:网页的构造块
1.1 HTML思想:元素
1.2 基本的HTML页面
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8" />
<title>Your page title</title>
</head>
<body>
</body>
</html>
1.3 标签: 元素、属性、值及其他
1.元素
元素具有一个或多个属性,这些属性用来描述元素.
大多数元素包含文本也包含其他元素,然而这只是大多数!
2.属性和值 key = value
3.父元素和子元素
1.4 网页的文本内容
1.5 连接、图像和其他文本内容
1.6 文件名和文件夹名
a.文件名采用小写字母
b.使用正确的扩展名
c.用短横线分隔单词
1.7 URL
模式+主机名+路径
路径 = 目录 + 文件名
index.html
1.绝对URL 引用别人Web服务器上的文件时使用
2.相对URL 引用同一目录下的文件
引用子目录下的文件
引用上层目录的文件 ../
根相对URL
3.绝对URL和相对URL的比较
1.8 HTML:有含义的标记
1. 基本HTML页面的语义
2. 为什么语义很重要
1.9 浏览器对网页的默认显示效果
1.10 要点回顾
~
第二章 处理网页文件
2.1 规划网站
规划网站的方法:
确定为什么要创建这个网站,需要展示什么内容
考虑网站的访问者。应该如何调整内容使之吸引这些访问者
需要多少个页面,你希望网站是怎么样的结构,你是希望访问者以某种特定的次序浏览网站,还是希望访问者可以自由地探索。
画出网站的结构草图
为页面.图像和其他外部文件设计一个简单且一致命名的规则
2.2 创建新的网页
2.3 保存网页
2.4 指定默认页面或主页 index.html
2.5 编辑网页
2.6 组织文件
通常为网站的主要区块创建单独的问就爱你家,将相关的HTML也页面放在一起
为网站的图像,样式表CSS文件和javaScript文件创建一个或多个文件夹.
2.7 在浏览器中查看网页
2.8 借鉴他人的灵感
~
第三章:基本的HTML结构
3.1 开始编写网页
a. 页面基础
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="utf-8" />
<title></title> </head>
<body>
</body> </html>
lang指定默认语言 en代表英语
html元素包含了lang属性,lang属性不必须,推荐添加
head元素
说明字符编码的meta元素
title元素
body元素
b. 编写HTML5页面开头的步骤
<!DOCTYPE html>生命页面为HTML5文档
<html lang="language-code">页面内容默认语言
<html lang="en">英语
<html lang="es">西班牙
<html lang="fr">法语
<html lang="en-GB">英语英语
<html lang="en-US">没过英语
<head>开始网页文档的头部
<meta charset="utf-8"/>或<meta charset="UTF-8"/>空格和斜杠是可选的
因此可以写成<meta charset="uft-8">
<title></title>包含页面的标题
</head>结束页面文档的头部
<body></body></html>
c. 网页的两个部分 head和body
head:指名页面标题
提供为搜索引擎准备的关于页面本身的信息
加载样式表
加载javaScript文件(出于性能考虑,多数的时候在页面底部</body>标签结束前加载JavaScripts是更好的选择)
出了title外,head里的其他内容对访问者来说是不可见的
body:包住页面的内容(文本。图像。表单。音频、视频、其他交互式内容)
3.2 创建页面标题
title简短的、描述性的、唯一的
title元素是必须的
title中不能包含任何格式、HTML图像或指向其他页面的连接
3.3 创建分级标题
HTML提供了六级标题用于创建页面信息的层级关系h1,h2,h3,h4,h5,h6
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8" /> <title>Antoni Gaudí - Introduction </title>
</head>
<body>
<h1>Barcelona's Architect</h1>
<h2 lang="es">La Sagrada Família</h2> <h2>Park Guell</h2>
</body>
</html>
a. 分级标题的重要性
b. 使用标题对网页进行组织的步骤
不要从h2直接跳到h4
不要使用分级标题标记副标题,标语以及独立标题的子标题
副标题的正确做法是使用段落
分级标题可以用使用lang属性设置语言
3.4 普通页面的构成 例:
带导航的页头
主页面内容区
页脚
相关但较为次要的信息
3.5 创建页眉
如果页面中包含一块或一组介绍性的内容或导航性的内容,应该用header元素对其进行标记
页面可以有任意数量的header
a. 页眉的内容例如:h1-h6标题、标识、导航、搜索框、
3.6 标记导航nav
nav中的链接可以指向页面中的内容,也可以指向其他页面或资源,或者两者!
应该仅对文档中重要的连接群使用nav。
a. 将一组链接指定为重要导航
1.输入nav
2.输入一组连接并将其标记为url(无须列表)结构,除非连接的顺序比较重要。
如果连接顺序重要就将其标记为ol(有序列表)结构。
3.输入</nav>
Tip:HTML5规范不推荐对辅助性的页脚连接如使用标签 隐私政策等使用nav。
不过有时候页脚会再次显示顶级全局导航,或者包含商店位置,招聘信息等重要连接,在大多数情况下,我们推荐将页脚中的此类连接放入nav中!
html5不允许将nav嵌套在address元素中。
3.7 标记页面的主要区域
一个页面应该有一个最重要的部分代表主要内容,把这个内容应该包含在main元素中,该元素一个页面仅使用一次
p,header,footer,main这些元素的内容显示在新的一行
3.8 创建文章
article如果
article不唯一,可以包含一个或多个section,里面可以有独立的h1-h6.
3.9 定义区块
section,section元素代表文档或应用的一个一般的区块。在这里,section是具有相似主题的一组内容,通常包含一个标题。
section的例子包含章节、标签式对话框中的各种标签、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。
注意相似主体的一组内容
注意相似主体的一组内容
注意相似主体的一组内容
3.10 指定附注栏
aside元素包括重要引述、侧栏、指向相关文章的一组链接(通常针对新闻网站)、广告、nav元素租(如博客的友情链接)、twitter源、相关产品列表(通常针对电子商务网站)等等
尽管aside很容易被看做是侧栏,但该元素其实可以用在页面的很多地方,具体依上下文而定。如果aside嵌套在页面主要内容内(而不是作为侧栏位于主要内容之外),则其中的内容应该与其所在的内容密切相关,而不是仅与页面整体内容相关。
注定附注栏的步骤:
输入附注栏的内容,内容可以包含任意数量的元素,元素类型包括段落,列表,音频,视频,图像,图形等
辅助栏内容应该放在main内容之后</main><aside></aside>
<aside>元素不可嵌套在aside元素内
3.11 创建页脚
通常包括版权声明,可能还包括指向隐私政策页面的连接,以及其他类似的内容。
fooer元素可以在用在这样的地方,和header一样,还可以用在其他地方
foot元素代表嵌套它最近的article,aside,blockquote,body,details,fieldset,figure,nav,section或td元素的页脚!只有当他最近的祖先是body时,他才是整个页面的页脚。如果一个footer包着它所在的区块,如一个article的所有内容,它代表的是像附录/索引/版权页、许可协议的内容。
不能在footer中嵌套header footer address
3.12 创建通用容器
在内容外包一个容器从而可以为其使用CSS样式表或javaScript效果,如果没有这个容器,页面就会不一样。在评估的时候,考虑使用article,section,aside,nav等元素,切发现他们从语义讲都不合适。
这个时候,需要一个通用容器---
3.13 使用ARIA改善可访问性
WAI-ARIA(Web Accessibility Initiative’s Accessible Rich Internet Applications,无障碍 网页倡议 – 无障碍的富互联网应用,也简称 ARIA)是一种技术规范,自称“有桥梁作用 的技术”。之所以这样说,是因为在 HTML 提供相应的语义功能之前,它会使用属性来 填补一些语义上的空白。
role属性,
role="banner"横幅 一次
role="navigation"导航 多次
role="main" 主体 一次
role="complementary" 补充性内容 多次
role="contentinfo" 内容信息 一次
3.14 为元素指定类别或ID名称
id class
1.为元素添加唯一的ID
id="your want name"
2.为元素指定类别的方法
class="name name1"
3.15 为元素添加title属性
这里是title属性不是title元素
使用title可以提升无障碍访问功能
可以为任何元素加title,不过用的最多的是连接1
1.为网页中的元素添加标签
在需要添加title的HTML元素中,输入title="label"其中label是访问者将鼠标移动到这个元素上时希望出现在提示框里的文本,或者希望由屏幕阅读器朗读的文本。
3.16 添加注释
可以在html文档中添加注释,表明区块和结束的位置,提醒自己或未来的代码编辑者!
<!-- -->
~
第四章 文本
em 标识强调的文本
cite 标识对艺术作品 电影 图书 等内容的引用。
code 标识代码
4.1 添加段落
p元素 段落 通常使用article包住
4.2 指定细则
small元素
4.3 标记重要和强调的文本
strong元素表示内容的重要性。em表示内容的着重点。
strong中可以嵌套strong
4.4 创建图
图表 照片 图形 插图 代码片段以及其他类似的独立内容
创建图及其标题的步骤:
<figure>
<figcaption>开视图的标题
现代浏览器会在默认情况下给figure添加40px宽的左右外边距,
可以使用CSS的margin-life和margin-right属性修改这一样式!
4.5 指名引用或参考
使用cite元素可以指名对某内容源的引用或参考
例如:戏剧 脚本 图书的标题
歌曲 电影 照片 雕塑的名称
对于要从引用来源中引述内容的情况,使用blockquote或q元素标记引述的文本,
4.6 引述文本
有两个特殊的元素用以标记引述的文本,blockquote元素标识单独存在的引述(通常更长,但也不绝对)
blockquote可长可短,可以包含cite属性
引述块级文本的步骤:
<blockquote如果需要cite="url">
引述行内文本的步骤:
<q cite="url html lang="引述内容语音的两个字母的代码"
如果blockquote中仅包含一个单独的段落或语句,可以不必将其抱在p中再放入blockquote
可以对blockquote和q使用可选的cite属性,提供引述内容来源的URL。
q元素引用内容不能跨越不同的段落,这种情况下应该使用blockquote
4.7 指定时间
我们可以使用time元素标记的事件,日期或时间段。这是HTML5新增的元素
<time 如果需要datatime="time">
4.8 解释缩写词
abbr元素标记缩写词并解释其含义。
<abbr 可选title = "缩写次的全称">
缩写词
</abbr>
4.9 定义术语
dfn元素
4.10 创建上标和下标
sub sup
上标是对某些外语缩写词进行格式化的理想方式
下标适用于化学分子式
上标和下标会扰乱行间距
4.11 添加作者练习信息
没有专门用于定义通讯地址的元素
address是用以定义与HTML页面或页面一部分有关的作者,相关人士或组织的联系信息,通常位于页面底部或相关部分内
提供作者联系信息
1.<addtess>
4.12 标注编辑和不再准确的文本
代表添加内容的ins元素
代表已删除内容的del元素
代表不再准确或者不相关的内容s
4.13 标记代码
code
4.14 使用格式化的文本
使用预格式化的文本pre
4.15 突出显示文本
<mark> </mark>
4.16 创建换行
br
4.17 span元素没有任何语义同div一样 span只适合包围字词或短语div适合包块级内容
4.18 其他元素
u元素
wbr元素
ruby rp rt元素
bdi bdo元素
meter元素
progress元素
~
第五章 图像
5.1 关于Web头像
1.格式与下载速度
JPEG
PNG GIF
2.颜色
3.大小(尺寸)
4.透明度
5.动画
6.小结 大部分是JPEG PNG-8 PNG-24
5.2 获取图像
获取图像的手段:
5.3 选择图像编辑器
5.4 保存图像
5.5 在页面中插入图像
<img src="image.url">
5.6 提供替代文本
alt可以为图像添加一段描述文本
alt=
5.7 指定图像尺寸
1.在浏览器中查看图像尺寸
2.在ps中查看图像尺寸
3.在HTML中指定图像尺寸 width="x" height="y"
5.8 在浏览器中改变图像的尺寸
5.9 在图像编辑器中的改变图像尺寸
5.10 为网站添加图标 16*16 ICO格式 32*32 Retina 图标放在根目录
~
第六章: 链接
6.1 创建指向另一个网页的连接
a元素
<a href="page.html">链接标签</a>
HTML块级链接
段落,列表,整片文章和区块--几乎任何元素都行,但其他链接,
音频,视频,表单元素,iframe等交互内容除外!
6.2 创建锚并连接到锚
1.创建锚的步骤,
id="anchor-name"
#anchor-name
6.3 创建其他类型的链接
创建其他类型连接的步骤:
<a href=URL >
网友评论