《HTML5+CSS3网页布局和样式精粹》 -- 读书笔记

最新推荐文章于 2021-06-07 15:42:49 发布

崔世勋

最新推荐文章于 2021-06-07 15:42:49 发布

阅读量3.1k

点赞数 1

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/CHS007chs/article/details/37519277

版权

HTML+CSS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

第1章认识HTML和CSS

HTML是英文HyperText Mark-up Language的简称，是根据SGML（Standard Generalized Markup Language）标准定义的。CSS是Cascading Style Sheet的缩写，它是描述文档怎样被呈现的语言。

W3C

World Wide Web Consortium的简称，也就是“万维网联盟”或“万维网协会”。

第2章 HTML文档编写规范与基本结构

基本上用户只要明白了各种标签的用法便算学会了HTML。

对一于一个网站上的网页，如果没有另存文件的话，用将不能改变源文件，这样做是为了避免页面被更改。所以，用户实际查看网页的一个副本文件，而不是网页文件本身。

HTML网页文件可以使用*.html或*.htm两种扩展名，并且这两种扩展名没有本质的区别。主要是因为在某些较旧的系统上不能识别4位的文件扩展名。

HTML文档的基本结构

<!doctype html>
<html>

<head></head>
<body></body>
</html>

（1）在使用HTML语法编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5标准模式下渲染网页。文档类型的声明如下：

<!doctype html>

HTML语法是不区分大小写的。

（2）html标签对，用来标示HTML文档的开始和结束

（3）head标签对，其间的内容构成HTML文档的开头部分，之间的内容是不会在浏览器的框内显示出来的。

（4）body标签对，其间的内容构成HTML文档的主体部分

HTML5元素和属性

一个HTML网页文件都是由元素构成的，元素由开始标签、结束标签、属性和元素的内容4部分构成。

（1）标签

标签的使用有两种形式：成对出现的标签和单独出现的标签。

（2）属性

与元素相关的特性称为属性，可以为属性赋值。可以有任何数量的“属性-值” 对，并且它们可以以任何的顺序出现，但是，不能在同一个开始标签中定义同名的属性。格式：

<元素属性=“值”>内容</元素>

<元素属性=‘值’>内容</元素>

<元素属性=值>内容</元素>

属性值都是字符串，属性也可以没有值，但必须要有默认值；属性值中空白可以用“%20”替换；当单引号作为属性值时，可以用双引号来包括，也可以用数字字符引用（&#39）来代替；当双引号作为属性值时，就要使用&#34或字符实体引用（"）来代替。

元素名和属性都是不区分大小写的。

全局属性

全局属性可以定义在任何元素上

属性	值	描述
accesskey	字符	定义访问元素的键盘快捷键
class	类名	定义元素的类名
contenteditable	true, false	定义是否允许用户编辑元素的内容
contextmenu	menu,id	定义元素的上下文菜单
dir	ltr, rtl	定义元素中内容的广文本方向
draggable	true,false,auto	定义是否允许用户拖动元素
hidden	hidden	定义元素是否隐藏
id	id	定义元素唯一的id
lang和xml:lang	自然语言代码	定义元素中内容的自然语言代码
spellcheck	true,false	定义是否必须对元素进行拼写或语法检查
style	样式定义	定义元素的行内样式
tabindex	数字	定义元素的tab键控制次序
title	文本	定义元素的相关描述信息

html中的id是用#来识别，class是用.来识别。二者的区别是id在一个网页中只能被用一次，而class类可以被多次引用。

下表中的事件属性也可以定义在任何元素上，因此也是全局属性

属性	值	描述
onabort	JavaScript代码	当元素的内容被取消加载时触发
onblur	JavaScript代码	当元素失去焦点时触发该事件
oncanplay	JavaScript代码	当能够进行回放时解发，但还是会要求缓冲
oncanplaythrough	JavaScript代码	当能够进行不间断回放时触发，即不要求缓冲就可以顺利播放完
onchange	JavaScript代码	当元素的值发生变化时触发
onclick	JavaScript代码	当定位设备（如鼠标指针）在一个元素上单击时触发
oncontextmenu	JavaScript代码	当鼠标右击该元素打开右键快捷菜单时触发
ondblclick	JavaScript代码	当定位设备在一个元素上双击时触发
ondrag	JavaScript代码	当元素被拖拽时触发
ondragend	JavaScript代码	当元素拖拽状态结束时，即释放时该事件被触发
ondragenter	JavaScript代码	当另一个被拖拽的元素进入当前元素时该事件被触发
onfragleave	JavaScript代码	当另一个被拖拽的元素离开当前元素时该事件被触发
ondragstart	JavaScript代码	当一个对象被放置到当前元素时触发
ondrop	JavaScript代码	当元素从拖拽状态结束时，即释放时该事件被触发
ondurationchange	JavaScript代码	当duration属性发生改变时触发
onemptied	JavaScript代码	当media元素恢复到初始状态时触发
onended	JavaScript代码	当播放到结尾时触发
onerror	JavaScript代码	当与此元素相关联的对象有错误发生时就会触发该事件
onfocus	JavaScript代码	当元素获取焦点时触发
onformchange	JavaScript代码	当表单改变时触发
onforminput	JavaScript代码	当表单获得用户输入时触发
oninvalid	JavaScript代码	当元素无效时触发
onkeydown	JavaScript代码	当元素处于焦点状态下按某个键盘键时触发该事件
onkeypress	JavaScript代码	当元素处于焦点状态下某个键盘键并释放时触发该事件
onkeyup	JavaScript代码	当元素处于焦点状态下释放某个按着的键盘键时触发该事件
onload	JavaScript代码	在元素的内容完成加载后被触发
onloadeddata	JavaScript代码	当元素失去鼠标指针捕捉时触发
onloadedmetadata	JavaScript代码	当media元素的duration属性的元素加载完成时触发，此是可以读取这些数据
onloadstart	JavaScript代码	当开始查找要加载的media数据时触发
onmousedown	JavaScript代码	当元素处于焦点状态下在其单击鼠标时触发该事件
onmousemove	JavaScript代码	当鼠标指针在该元素上移动时触发该事件
onmouseout	JavaScript代码	当鼠标指针离开该元素时触发该事件
onmouseover	JavaScript代码	当鼠标指针进入该元素时触发该事件
onmouseup	JavaScript代码	当元素处于焦点状态下在其上释放鼠标按键时触发该事件
onmousewheel	JavaScript代码	当元素处于焦点状态下在其上滚动鼠标滚动轮时触发该事件
onpause	JavaScript代码	当视频或音频中止播放时触发
onplay	JavaScript代码	当调用play()方法开始播放时触发
onplaying	JavaScript代码	当视频或音频正在播放时触发
onprogress	JavaScript代码	当浏览器正在从服务器接收数据时触发
onratechange	JavaScript代码	当media数据的播放速率改变时触发
onreadystatechange	JavaScript代码	当元素的准备状态发生变化时触发该事件
onreset	JavaScript代码	当表单被重置时触发
onscroll	JavaScript代码	当用户滚动该元素内容时触发该事件
onseeked	JavaScript代码	当media元素的seeking属性不再为真且定位已结束时触发
onseeking	JavaScript代码	当media元素的seeking属性为真且定位已开始时触发
onselect	JavaScript代码	当元素被定时触发
onshow	JavaScript代码	当menu元素被显示为上下文菜单时触发
onstalled	JavaScript代码	当取回media数据过程中（延迟）存在错误时触发
onsubmit	JavaScript代码	当数据被提交时触发
onsuspend	JavaScript代码	当已经在获取media数据，但在取回整个media数据之前中止时触发
ontimeupdate	JavaScript代码	当media改变其播放位置时触发
onvolumechange	JavaScript代码	当media改变音量或当音量被设置为静音时触发
onwating	JavaScript代码	当media已停止播放但打算继续播放时触发

虽然这些属性可以应用于所有元素，但是属性并不一定会发生作用。

字符引用

在HTML文档中，某些地方不允许存在某些字符。为了显示内容，HTML提供了字符引，字符引用以and符（&）开头，以分号（；）结尾。有两种类型的字符引用：字符引用（十进制或十六进制）和字符实体引用。

（1）字符数字引用

用于十进制引用的语法：&#value
用于十注进制引用的语法：&#xvalue

（2）字符实体引用

< ：小于号（<）

>：大于号（>）

&：and符（&）

"：双引号（“）

 ：不换行空格

注释

<!--多行注释

-->

第3章 HTML文档的头部和无数据定义

title元素

这可以将网页的标题显示在浏览器的顶部，<title></title>标签只能放在<head></head>标签之间，并且除了全局属性没有其他属性。

元数据

META（元数据）是用来描述HTML文档的信息，它使用meta元素来完成此工作。meta元素的name属性说明数据信息的关键字，content属性用来定义该关键字的值，lang属性用来定义content属性值的语言，dir属性用来定义文字方向，http-equiv属性用来定义HTTP消息报头，charset属性用于定义文档的字符编码。

http-equiv属性用来定义一些实用的元数据，

http-equiv属性值	功能
content-language	设置网页内容语言
content-type	网页内容类型和字符集
default-style	设置默认样式表
refresh	设置定时跳转
Set-Cookie	设置网页Cookie

第4章段落与文字

段落与行

1.p元素表示一个段落，但不能包含一个”块级元素“，可以省略结束标签

2.br元素强制当前文本行的分行

3.wbr元素实现软换行，也即仅在适合的时候才会换行

4.连字符，HTML中有两种类型的连字符：简单连字符（plain hyphen）和软连字符（soft hyphen）。简单的连字符可以被浏览器理解为简单的字符，而软连字符则可以告诉浏览器在这里换行。软连字符语意学：如果一行被软连字符分开，连字符必须显示于第一行的结尾；如果一行并不在软连字符处换行，浏览器则不显示连字符。HTML中简单连字符是”-“（-，-），而软连字符则是实体引用条目”"(,)

5.pre元素：告诉浏览器处理文本在浏览器中的呈现时，该元素内的文本是预格式化的文本，浏览器必须按照如下的方式对待预格式式文本：

原封不动地保留空白区域
可以用组合字体来呈现文字
禁止自动的单词换行
不必禁止双向处理

标记文章改变

ins和del用来标记文章中的哪部分相对于原来版本是插入还是删除了。属性：

（1）cite=url

这个属性的值是一个统一资源定位器（URL）用来指定源文档或者消息来源

（2）datetime=datetime

用来定义改变发生的日期和时间

（3）title

可用来定义注释

基本文字格式

（1）i元素用来呈现斜体

（2）b元素用来呈现加粗体

（3）small元素用来呈现小字体

（4）s元素用来呈现那些不再准确或不再相关的内容，与del元素呈现的视觉效果相同，但语义不同

hr元素在网页中呈现为一条水平分割线。

语义化、结构化的文本

（1）em元素用于强调，strong元素用于强烈的强调

（2）sub元素与sup元素分别用来实现上标和下标

（3）ruby元素是父元素，它由一个或多个字符和一个提供该信息的rt元素组成，还包括可选的rp元素，rp元素定义不支持ruby元素的浏览器所显示的内容。

（4）blockquote元素一般用于引用内容较多的情况下，q元素一般用于引用内容较少情况

（5）cite元素用来标注一个作品的标题，随后的内容是对该作品的描述

（6）abbr元素允许作者清楚标识一个组成缩略语的字符序列

（7）dfn元素允许作者为一个术语做定义，表示这是对一个特定术语的明确说明。注意与abbr元素的区别，abbr元素表示缩写，dfn表示术语的定义，这是语义上的不同。

（8）code元素用来表示呈现的是计算机代码的片断

（9）mark元素定义需要突出显示的文本，以提示用户注意这个文本，与em的strong不同的是，前者主要为了“突出重要性”，后者纯粹为了突出显示

（10）time元素定义日期时间

第5章建立列表

HTML有3种列表形式：

（1）有序列表

有序列表中每个列表项前标有数字，表示顺序。有序列表由<ol>和</ol>标签对实现，每个列表项由<li>标签开始（结束标签不是必需的）

（2）无序列表

无序列表中采用一个符号标志每个列表项，由元素<ul>和</ul>标签实现

（3）解说列表

通常用于术语的定义，由<dl></dl>标签对实现，包含术语和描述两个部分。术语由<dt>标签开始，术语的解释由<dd>标签实现

自定义有序列表

（1）type属性

type属性值
1	阿拉伯数字	1，2，3，...
a	小写字母	a,b,c,...
A	大写字母
i	小写罗马字母	i,ii,iii,...
I	大写罗马字母

（2）start属性

表示开始的条目序号，默认的开始序号为1

（3）reversed属性

用来表示序列表是否反转序号显示

（4）定制有序列表中的列表项序号的数值

通过li元素的value属性实现

第6章建立超链接

有两个html元素都可以用来定义链接：

（1）link元素只能出现于HTML文档的头部（作为head元素的内容），它定义了当前文档和另一个资源之间联系

（2）a元素只能出现于文档的主体部分（作为body元素的内容），它定义了当前文档中某个区域与另一个资源之间的联系

a元素

（1）href属性

在a元素内添加href属性后，则元素的起始标签与结束标签之间的文本就会成为网页中的超文本内容

（2）target属性

使用target属性可以定义链接打开的目标窗口或框架

_blank：将链接的文档载入一个新的，未命名的浏览器窗口

_parent：将链接的文档载入包含该链接的框架的父框架集或窗口。如果包含链接的框架没有嵌套，则相当于_top

_self：将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定

_top：将链接的文档载入整个浏览器窗口，从而删除所有框架

（3）title属性

定义链接的提示信息

（4）hreflang属性

使用这个属性允许创作者给用户浏览器提示：链接的另一端的文本语言

（5）ref属性

用来表示当前文档与href属性所指定文档之间的链接关系

关键字	link	a和area	功能描述
alternate	超链接	超链接	表明链接指向的文档是当文档的一个替代版本
archives	超链接	超链接	表明链接所指向的是一组材料的历史归档。出于向前兼容的考虑，也可以使用archive实现相同的目标
author	超链接	超链接	表明链接所指向的是当前文档的作者，或者是最近的父级 article元素内容的作者。
bookmark	不允许	超链接	表明链接所指向的是距当前元素最近的父级article元素的永久链接。如果没有article元素定义，那么指向的是距当前元素最近的父级分节元素的永久链接
external	不允许	超链接	表明链接所指向的文档位于外部站点，与当前文档不位于同一站点
first	超链接	超链接	如果当前文档是一系列文档中的一个，该值就表明链接指向的文档是第一个文档
help	超链接	超链接	表明链接指向的文档是当前文档的帮助和说明，目的是提供更多信息
icon	外部资源	不允许	导入一个图标来标当前文档，常和sizes属性结合使用
index	超链接	超链接	表明链接指向的文档是为当前文档提供索引的一个文档
last	超链接	超链接	如果当前文档是一系列文档中的一个，该值就表明链接指向的文档是最后一个文档
license	超链接	超链接	表明链接指向的文档是当前文档的版权声明。出于向前兼容的考虑，也可以使用copyright实现相同的目标
next	超链接	超链接	如果当前文档是一系列文档中的一个，该值就表明链接指向的文档是当前文档中的下一个文档
nofollow	不允许	注解	表明当前文档的原作者或出版者没有批准链接所指向的文档
noreferrer	不允许	注解	当用户打开这个超链接时，要求浏览器要不发适HTTP Referer报头
pingback	外部资源	不允许	指定一个pingback服务器地址，处理对该文档的pingback
prefetch	外部资源	外部资源	指定何种目标资源应被预先缓存
prev	超链接	超链接	如果当前文档是一系列文档中的一个，该值就表明链接指向的文档是当前文档的前一个文档
search	超链接	超链接	指定一个链接资源，使用该资源事以搜索当前文档的内容及与当前文档相关联的网页
stylesheet	外部资源	不允许	导入一个样式表
sidebar	超链接	超链接	指定链接指向的文档应该被显示在浏览器的侧栏，该侧栏一般是使用 iframe元素实现的
tag	超链接	超链接	提供一个标记以标示该文档
up	超链接	超链接	表明链接指向的文档是当前文档的上下文环境

（6）media属性

可以向浏览器提示链接所指向的文档适用的介质

介质描述符	功能描述
screen	预定用于非分页的计算机屏幕
tty	预定用于显示固定宽度字符的介质，
tv	预定用于电视类型的设备
projection	预定用于投影机
handheld	预定用于手持设备
print	预定用于分页的、不透明的材料
braille	预定用于布莱盲文设备
embossed	预定用于分页的布莱盲文设备
speech	预定用于语音分成器，通常为视力有残疾的用户准备
all	适合于所有设备

定义书签和链接到书签

使用任何元素的id属性都可以定义一个字符串作为命名锚点，然后就可以在同一个或不同的网页中链接到它，只需要在链接目标的URI并加上井号（#）后跟书签名称。

第7章链入图片和妴热点区域

GIF、JPEG和PNG是最适合在网页中使用的文件格式，使用img元素可以链入图片

（1）src属性

指定图片的文件的URI地址，可以绝对地址，也可以是相对地址

（2）width和height属性

width属性和height属性分别表示图片宽度和高度的像素值，如果没有指定这两个属性时，图片将以原始大小显示，也可以使用百分比

（3）title属性

对图片的文字说明，如果把鼠标放在图片上稍作停留,title属性值就会以浮动的形式显示出来

（4）alt属性

用于链接的图片存在的情情况，或者一些用户为了提高浏览器速度而关闭图片下载，它的内容会显示在浏览器中。

figure元素和figcaption元素结合用来为图片、视频、表格或者嵌入元素声明标题。figcaption元素应该被置于figure元素的第一个或最后一个直接子元素的位置。

由于img元素是行内级元素，所以可以使用a元素为图片定义超链接。

图像映射

它可以为某个部位创建一个称为“热点”的区域，每个热点就是一个映射，当用户单击不同的热点时就可以跳转到不同的网页。

图像映射分为为在服务器上分析和在客户端浏览器中分析两种。前者被称为客户端图像映射，后者被称为服务端图像映射。可以使用area元素定义图像的热点区域，然后使用map元素将热点区域与img元素关联起来。

第8章 HTML 视频和音频

video元素

<video></video>之间的插入的内容是供不支持video元素的浏览器显示的

属性	值	描述
autoplay	autoplay	用来设定视频是否在页面加载后自动播放
controls	controls	用来设置是否为视频添加控件，如播放、暂停等。如果视频播放器宽度无法展开控件的长度，那么就会仅显示“播放”、“暂停”两个控件，控件条的外观可以自定义
height	像素	设置视频播放器的高度
loop	loop	设置视频播是否循环播放
poster	url	用于指定一张图片（作为预览图），在当前视频数据无效时显示。视频数据无效可能是视频正在加载，也可能是视频地址错误
preload		用于定义视频是否预加载。（1）none：不进行预加载。（2）metadata：部分预加载（3）auto：全部预加载
src	url	要播放的视频的URL
width	像素	设置视频播放器的宽度

source元素

不代表任何含义，不能单独出现，只能位于video元素和audio元素内，用于给video元素和audio元素指定多个可供选择的文件地址（浏览器最终只能选一个），且只能在video元素和audio元素没有定义src属性时使用。

第9章链入内联框架、对象和其他多媒体元素

iframe

允许在一个网页文本块中插入和显示另一个网页。

（1）src属性

定义框架的所指向的文档资源，可以是一个HTML文档，也可以是一个图片。

（2）name属性

给框架指定一个名称作为该框架的标识

（3）sandbox属性

用来实现沙盒安全限制：通过限制被嵌入内容所允许的操作而提升iframe的安全性。值可以是下面几个关键字：

allow-same-origin表示允许将iframe中的内容看作是与父页面同源，可以访问父页面的DOM
allow-top-navigation表示允许iframe中的内容导航父页面中的内容
allow-forms表示允许iframe中的表单被提交
allow-scripts允许iframe中的内容运行其中的脚本

可以在属性值中指中多个关键字，其间使用空格隔开。

（4）seamless属性

是一个逻辑值，表示是否将框架作为包含网页的一部分

使用object元素链入对象

object元素是一个通用的用于链入多媒体内容的元素

第10章使用表格

使用HTML表格的两个常见原因是：在表格中安排数据，从而用来呈现数据间的关系；或者在网页上组织图形和文本，也就是用于网页布局。

表格的基本语法

（1）table元素用来定义表格，整个表格包含在<table>和</table>标签中

（2）tr元素用来定义表格中的一行

（3）th元素和td元素用来定义单元格，</tr></th></td>都是可以省略的，th元素用来创建头信息单无格，俗成表头，td元素定义普通的单元格

（4）summary属性为表格的目的和结构提供一个开概要的说明

（5）每一个表格可以通过caption元素来对表格的目的作一个简单的说明，并且caption元素必须紧接着table元素开始的标签后被定义

（6）th元素可以定义headers属性和scope属性，scope属性指定该th单元格的内容用于哪些单元格的表头

（7）跨越横行和竖列的数量可以用rowspan和colspan属性来对th或td元素进行设置

表格的按行分组显示

表格中的行可以分开组织成表格头、表格尾和表格主体3部分，thead元素用来定义表格头，tbody元素用来定义表格主体，tfoot元素用来定义表格尾。这三个元素必须位于table元素中，thead元素和tfoot元素在一个表格中都只能有一个，而tbody元素可以有多个

表格的按列分组显示

表格的按列分组可以将表格结构化地分隔成几个部分，每个部分可以应用不同的设置，而同一个组内的部分可以定义相同的设置。每个“列分组”中列的数量可以用两种方式定义，这两种方式是互斥的：

（1）使用colgroup的span属性

（2）使用col元素

如果colgroup元素不定义span属性，那么就会创建一个单列分组，它仅包含一个列；如果col元素不定义span属性，那么该col元素也会创建一个列分组，并且也是仅包含一个列
如果定义一个正整数N，那么就会创建一个包含N个列的分组
span属性的值是大于0的整数
如果colgroup元素中包含有col元素，那么就会忽略colgroup元素的span属性

第11章建立HTML5新式表单

form元素

form元素是表单的容器，可以提定下面的内容：

（1）表单的布局

（2）指定处理表单的服务器端程序URI地址，该服务器程序应该可以处理“名称/值”对

（3）数据传送到服务器的方式

（4）表单数据的字符编码

（5）除了包含表单控件，form元素也可以包含其他的文本元素

控件

用户与表单交互是通过控件进行的，控件通过name属性标识，每一个控件有一个初始值，也有一个当前值，值的类型都是字符串。

使用input元素创建表单控件

input元素可以定义大多数类型的控件，控件的类型取决于type的属性值

type属性值	控件类型
button	表示普通按钮
checkbox	表示复选框
file	表示插入一个文件，由一个单行文本框和一个“浏览”按钮组成
hidden	表示隐藏文本框
image	表示插入一个图像，作为图形按钮
password	表示单行显示文本框，但输入的数据用星号表示
radio	表示单选按钮
reset	表示重置按钮，
submint	表示提交按钮
text	表示单行显示文本框

HTML5新增的属性值

type属性值	控件类型
color	调色板控件
date	日期控件
datetime	日期和时间控件
datetime-local	本地日期和时间控件
email	一个单行文本行，呈现email
month	月份控件
number	表现为一个单行文本框，或带步进按钮
range	滑动刻度控件
search	搜索文本框
tel	一个单行文本框，呈现电话号码
time	时间控件
url	一个单行文本框，呈现URL地址
week	星期控件