阅读笔记 | 《HTML网页设计参考手册》

HTML网页设计参考手册

书籍:《HTML网页设计参考手册》

阅读方法:王者速读法

阅读目的:工作需要;专业性的知识,已经阅读过几次,长时间没用也忘记的差不多了,需要重新拾起来,也想做一个系统性的笔记梳理。

第一阶段,预览

要明确目的的解决问题

第一,想获得什么信息。专业基础知识,长时间没用,从知识、到思维都需要梳理梳理。

第二,能获得什么信息。基础而全面的HTML知识,基本的CSS、JavaScript知识,简单的HTML编辑工具,丰富的HTML实例及效果展示。

第三,明确重点内容。HTML核心知识,HTML标签的用法,以及标签体系;HTML各种标签记不住不要紧,弄懂核心逻辑,使用的时候能随时查找。

具体阅读

1.封面。「内容全面,囊括HTML、JavaScript、CSS等知识」,「实用性强,代码规范,大量的实例及展示效果」,「工具使用,配合Dreamwerver,符合网页制作技术特点」;张金霞编著。

2.版权页。2007年4月出版;内容简介对全书内容做了概括。

3.编辑寄语及前言。对全书内容及特点做一个概括性阐述。

4.目录。共13章,可以分为四大部分。第一部分第1章,HTML入门;第二部分第2章到第10章,讲述HTML各种标记的语法内容及使用;第三部分第11章和第12章,拓展知识,基本的CSS和JavaScript知识;第四部分第13章,使用Dreamwerver工具创建网页。

总结

本书内容是比较熟悉的,以前已经读过,再读一次,进行专业知识的梳理。学好一门编程语言,包括语法、词汇、工具,甚至还有算法等,所以,光读书是远远不够的,还需要大量的实践,5分钟要浏览完所有的封面、前言、目录没有问题,在熟悉的基础上也能梳理出一个框架来。

前言里说到,全书是基于HTML4的。

第二阶段,快速翻阅全书

对图表的印象

翻阅所有的书页,标题、图表、照片等最显眼的内容基本都看不过来,抽样阅读统计性整体印象,全书的图片有图序,也有标题,图片基本上是实例效果图,表格大部分是知识点列表,所以图片价值不高,基本只有在操作实例或阅读实例时需要参考,表格在跳读环节可以选择性阅读。

对章节内容的印象

全书300多页,5分钟翻页时间都不够,真累,要不是对书本内容比较熟悉,真是会头晕掉。跟浏览目录相比,内容更加细致,比如不只是标签,还会浏览过许多标签的属性。

总结:

书本内容比较丰富,尽管已经比较熟悉,匆匆翻页还是觉得有眼花缭乱抓瞎的感觉,这时候已经不是抓取知识,而是通过视觉效果来使脑海的知识浮现出来。所谓开卷有益,至少会对知识系统性的把握变得更加清晰。

第三阶段,跳读

第1章 HTML的基本概念

HTML简介、HTML文件结构、HTML发展历史、网页设计原则、Dreamwerver简介及编辑HTML。

重点:HTML定义的3种用于描述页面整体结构的标记:<html>、<head>、<body>。

第2章 HTML基本标记

头部标记<head>、标题标记<title>、元信息标记<meta>、基底标记<base>、页面主题标记<body>、注释标记<!-- -->

重点内容:

(1)元信息标记<meta>有name和http-equiv两种属性,与一般的标记属性及属性值不同,该标记属性给出属性值后还有一个内容content的描述。

(2)主体标记<body>主要有bgcolor、background、文字颜色text、链接文字颜色link、边距margin等属性。

第3章 文字与段落

标题文字标记<h1>到<h6>,属性主要有对齐方式align。

文本字体标记<font>,主要属性有face、size、color、strong。

文字格式标记em、u、sup、sub、strike、code,以及特殊字符标记空格「&nbsp;」、双引号「 &quot;」等。

段落标记<p>;换行标记<br>;保留原始排版方式标记<pre>;居中对齐标记<center>,向右缩进标记<blockquote>。

水平线标记<hr>,主要属性有width、height、color、align。

文字标注标记<ruby>;声明变量标记<var>。

第4章 列表

无序列表标记<ul>,有序列表标记<ol>,两者都有属性序号类型type,有序列表还有属性起始数值start。

定义列表标记<dl>,菜单列表标记<menu>,目录列表标记<dir>。

第5章 超链接

理解超链接的绝对路径和相对路径。

超链接标记<a>,主要属性有超链接方式href,目标窗口参数target。

内部链接使用相对路径方式即可;外部链接使用绝对路径链接方式。

书签链接需要建立书签,再使用超链接标记进行链接,分文同一页书签的链接和不同页书签的链接,不同页书签的链接需要先链接到页面再链接书签。

第6章 使用图像

图像格式主要以GIF、JPEG、PNG。

图像标记<img>,属性src、height、width、border、hspace、vspace、align、alt。

图像的超链接:在超链接里面嵌套图像标记。

图像热区链接:对图像的部分区域设置超链接。

第7章 添加多媒体元素

设置动态文字标记<marquee>,属性direction、behavior、loop、scrollamount、scrolldelay、bgcolor、width、height、hspace、vspace。

设置背景音乐标记<bgsound>,属性src、loop。

添加多媒体文件embed,属性autostart、loop、hidden。

第8章 表格的应用

表格结构的标记:表格标记<table>、行标记<tr>、单元格标记<td>,表格标题标记<caption>、表头样式标记<thead>、表主体样式标记<tbody>、表尾样式标记<tfoot>、表头单元格标记<th>。

<table>标记的主要属性:width、height、align、border、bordercolor、cellspacing、cellpadding、bgcolor、background。

<tr>标记的主要属性:height、bordercolor、bgcolor、background、align、valign。

<td>标记的主要属性:width、height、colspan、rowspan、align、valign、bgcolor、bordercolor、bordercolorlight、bordercolordark、background、nowrap。

表格可以嵌套。

拓展:层标记<div>,语法:<div id=值 align=对齐方式 style=样式 class=应用的样式类></div>。

重点:本章内容涉及网页布局,(1)使用表格布局网页,(2)使用层标记<div>配合css布局。

第9章 添加表单

表单标记<form>,属性action、name、method、enctype、target。

表单的主要控件:输入类<input>、列表类<select>。

输入类<input>标记的type属性标识输入控件的类型,主要有text、password、radio、checkbox、button、reset、image、hidden、file。

列表类<select>通过<option>标记设置列表项,无属性size则为下拉菜单列表,设置属性size则为列表项列表。

第三种控件:文本域标记<textarea>。

第10章 框架结构

框架结构通过<frameset>、<frame>、<iframe>等标记实现。

第11章 CSS样式表

一个CSS样式的语法由3部分构成:选择符(selectors)、属性(property)和属性值(value)。基本语法:selector{property:value}。

在页面中插入样式表的方法有4种:

(1)链入外部样式表。基本语法:<link rel="stylesheet" type="text/css" href="样式表文件的地址">。

(2)内部样式表。基本语法:<style type="text/css"> selector{property:value} </style>。

(3)内嵌样式。基本语法:<HTML标记 style="property:value;…">

(4)导入外部样式表。使用@import声明导入。

注:CSS知识还需要一本书籍来说明。

第12章 使用JavaScript脚本

JavaScript基本语法、JavaScript函数、JavaScript对象、JavaScript事件等内容。

注:此处略过不读。

第13章 在Dreamwerver中创建网页

Dreamwerver工具的使用。

两种网页布局练习:使用表格布局、使用层<div>进行布局。

各种HTML元素的应用:表单、表格、多媒体运用等。

总结

专业性书籍,都还不能算是一门编程语言,重要的是掌握标记的原理和使用方法,剩下的就是多实践,需要使用时查询即可。

本书知识全面,对于HTML而言,掌握文件结构、标记语法、标签的属性等原理,然后重点练习两个案例:使用表格布局制作一个网页,使用层布局制作一个网页,并不断添加HTML元素和属性,基本就能掌握HTML的内容了。


关于王者阅读法的实践,还可以阅读以下文章:

1.阅读笔记 | 《「微信+」时代:再小的个体也有自己的品牌》

2.阅读笔记 | 《引爆社群:移动互联网时代的新4C法则》

3.阅读笔记 | 《草根自媒体达人运营实战》

4.阅读笔记 | 《玩转微信》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,657评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,662评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,143评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,732评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,837评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,036评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,126评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,868评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,315评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2 351

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,856评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,637评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,741评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,525评论 32 459
  • 他们都是90后,他们中很多人现在都没有所谓的梦想,只想着能有一个技能,以后能让自己多赚点钱,生活更好一点。 他们因...
    蒋莹阅读 334评论 0 0