HTML学习笔记(不定时更新)

HTML学习笔记

第一篇: 第8章: 框架 (frame)

1 概述:

使用框架灵活的组织网页

2 框架分栏

垂直分栏 水平分栏

3框架的常用属性

设置不可调节框架大小, 设置浏览器不支持框架 设置框架边框 设置滚动条

4框架链接:

包括 导航框架 和 内联框架
1> 导航框架: 详见示例
配置导航框架:
在名站导航栏的配置过程中 我们可以利用图片处理工具制作符合规格大小的图标 然后添加图片的超链接
2> 内联框架: 详见示例

总结:
<1>使用框架可以将网页设置为不同的部分
<2>可以对经常变动的网页使用框架表示,更新页面只需要对其进行更新即可
<3>框架经常用在网页的页头和页脚 在正常的网站中,网页的头部和尾部 是 不需要 变化的, 即使要变化也是对整个网站的全部网页统一更新. 这时,框架就有用了, 在这些网页中嵌入两个框架网页, 分别放在网页的头部和尾部, 以后
网站更新只需 要对 框架页面进行更新,即可更新全部的网页头部和 尾部 此部分介绍详见示例

第9章:多媒体文件

1 望周知

截止到 2017/09 标签内多种属性 已经失效
所以不要纠结 或 埋怨!

2 设置对齐方式

正如##1所示, 当前属性 已失效!

推荐使用 DIV+CSS布局

截止目前 , 第一篇知识点全部讲解完毕

第二篇: 第10章 DIV介绍 与 使用

1 概述:

DIV最常用的用途是 构造表格 , 从而代替 table 元素

DIV 是 HTML 中的标记, 又叫做”层” ; 使用DIV布局 也可以叫做 层布局, 所以 DIV标记对是用来布局的, 结合层叠样式表设计出 更好的网页!

DIV标记主要用来布局, 在布局中 可以作为容器使用, 里面可以包含其他对象, 例如 表格, 表单 , 文本 和 图片等.

DIV 标记中 还可以嵌套DIV标记, 层数没有限制

DIV和 SPAN 这两种元素 默认对各自内部的对象 不进行 格式化渲染, 前者 主要用于应用样式表

DIV是 块元素, SPAN是 行内元素

2 DIV嵌套

层容器 和 子层

最外围的DIV被称为 “层容器” , 内部的DIV层 被叫做 “子层”

3 DIV和 table 的区别

table 布局中的众多属性 已经无法使用 , 所以此处没有示例
这是因为 官方 推荐使用 CSS+DIV 架构布局网页

接下来是 使用DIV构造表格 的 示例:

一个div 标记 就是 一行

使用样式表文件 把 通用的样式属性集中在一起

如下图所示:

CSS选择符相关介绍:

类选择符: "."开头, 与class关联

ID选择符: “#” , 与id 关联

详见示例

使用样式表修饰网页内容

利用样式表(即:CSS)来控制HTML标记, 使之达到预期的效果
最经典的搭配就是 CSS+DIV 组合 详见示例代码10-5 或者 代码10-6

显示器问题

不要在网页的对称性 因为很有可能你的显示器本身就有问题
有很多显示器 并不符合主流的分辨率

可能正常的网页 在你的显示器 和 其他的显示器上面的展示效果完全不同, 或者 说 在你的显示器上面 就是 显示出”滚动条” 或者 根本就是 “畸形的页面”

渲染程序 或者说 系统本身的渲染效果非常的号,但是 你的显示器太落后了 , 依旧无法”正常地展现” 良好的渲染效果

就拿我自己的Samsung-300-E4C 型号的电脑来说吧 , 系统 推荐的分辨率高达1366 x 768 , 但是我的显示器无法正常显示 对应分辨率的 网页(因此,浏览器会显示对应的辅助用户浏览的滚动条) , 此外其他众多的场景下也无法正常显示应用界面(例如 玩CF , 神武 等游戏, 只能应用较低的分辨率, 无法达到最佳的使用体验效果! 好气呦!)

和开发者说的话:
我自己在写HTML代码的时候, 不喜欢添加width属性,因为不是每一位用户的显示器都是高性能的
margin属性 1px 较为适宜
至于border属性 ,一般的话 都会为网页北京添加图片 ,所以推荐1px
float 属性呢, 类似于 Android布局的自动排版功能, 即 默认填充”左上角”

4 网站的网页布局可以选择DIV+CSS的方式

CSS文本可以保存成以css为扩展名的文件, 在网页中链接进来即可!
进而达到复用的效果!

5 float 属性 ,margin属性

利用float, 进行漂移定位
例如 向右漂移就设置成 float : right

6 设置DIV的背景颜色

本示例只演示布局,
至于里面的具体内容如何配置 以后再讲 莫急!

先对布局进行基本认识

利用RGB进行颜色设置, 格式如下:

666666 , “#”是固定符号,后面加上六个16进制数

亦可为 #abc 等价于 #aabbcc 是一种快捷缩写方式,便于使用

7 使用DIV的注意事项

教程言辞严重不符合逻辑
请GOOGLE一下

以下言论在可接受范围内!
1> 当前层在使用float 后,接下来的层会受到空间漂移的影响
这时我们就需要使用clear来结束float的作用域
以保证 以后的层不受影响!
2> 有时候 width 或者 height 不是必须的
不是所有的浏览器 都能 如期的 展现 网页的排版效果
我们应当 减少代码量 , 增强 网页 的 兼容性
3> 在层内部设置绝对定位时, 需要在父对象中 先设置相对定位 ,
否则 绝对定位 是 以 为父对象进行定位的!!!

8 认识 SPAN 元素

DIV是块级元素 , SPAN是 行内元素

用来修饰 文本 等 , 将其称为 文本容器!

1> 基础:
span标记不能使用width 属性, 它的 宽度 由 子对象 而定 , 但是 我们 可以设置 SPAN的 外边距(即:margin)

SPAN的语法 和 DIV 类似, 其参数可以 连接ID 和 class

2> div 与 span 的区别

二者都可以用来布局 ,而且 在布局用SPAN 时, DIV 难以取代 ; 反之亦然 .

第一点: 二者默认宽度不同

DIV是块级元素 ,可以包含 段落 标题 表格 乃至 章节 摘要 和 备注
SPAN 是 行内元素

span 的前后是 不会换行的 它没有结构的意义, 纯粹是应用 自定义的 CSS文件

SPAN对象的宽度 是 文本的实际宽度 ,而 DIV则是默认为100%的宽度

第二点: 块元素 和 行内元素
块元素 和 行内元素 也不是 一成不变的, 通过定义 CSS的display 属性值 可以相互转化

上机检测:

display:inherit; 无法把

转换为 行内元素 , 用不用都一样!!! 习惯了,好多语法都失效了!
display:block ; 可以把 转换为 块元素

第三点: 修饰对象
一般地, 我们常用 +CSS 修饰文本

其余的, 则 推荐使用

+CSS进行修饰

9 多层布局示例

详见代码10-11

可以嵌套哦!

第11章 DIV+CSS 的结合

概述: DIV 只是个层而已, 并不会给网页添加添加什么其他的实质性的内容
CSS(cascading style sheet),它是控制网页样式并允许将样式信息 与 网页内容分离的一种标记语言
DIV通过与CSS的结合使得CSS能够控制DIV的外观,大小等等

在网页中通过三种方式应用CSS文件 , 一) 外接方式链接CSS文件 , 二) 内接方式链接CSS文件 , 三) 通过在DIV中加入style方式结合样式文件,

这三者两者统称为CSS文件链接 ,随后的##1会进行讲述

名值对 : 即, 一个属性名称 对应一个值 , 在CSS 代码中都是这种形式的代码, 用”;” 分隔
一个名值对表示样式表的一个动作或者效果, 分号表示当前名值对结束

1 CSS文件链接

概述: CSS文件的存在节省了网页的 代码量

1>内联定义
作用域:限于当前对象

即 在对象的标记内使用style属性定义相应的样式表属性

优点是灵活的设置对象的样式 , 缺点是样式扩展性 差(也就是 不能让其他对象共享)

本章 概述所说的 第三种方式

2>链接内部CSS
作用域:当前网页

网页加载更快
同一个网页中 ID只能使用一次 , class可以无限次使用

3>链接外部CSS

作用域: 所有 链接了CSS文本 的网页

提高项目效率,降低维护成本

使用方法: 假设有 网页A.html 和 CSS文件 B.css , 现在我们要让A 链接 外部的 B

现在A中 标记对中添加 单标记 ,具体语法如下:

为什么 有两种 选择符? 到底有什么用? 什么是W3C呀?

木鸡!!!! U CAN GOOGLE SEARCH FOR IT!

第12章: CSS的基础知识
概述:CSS 是 Cascading Style Sheet 的缩写. 中文是 “层叠样式表”
想要让网页 美观 大方, 升级方便 ,维护轻松 , 还需要引入 CSS哦!!!

一般定义:CSS是控制网页样式 并允许 样式信息与网页内容分离的一种标记语言

1 CSS文件链接方式

分为 内链接
链接内部CSS
链接外部CSS

&& 在网站设计过程中, 都会新建一个CSS文件 然后在网页中链接此文件 ,
当控制HTML标记时,都在这个CSS文件中 写入相应的CSS代码 ;
当修改所有网页的风格时,只要对CSS样式文件进行修改即可

每个网站几乎都使用CSS来控制样式 , 如果想要链接多个样式,则需要多个单标记

2 选择符

CSS选择符就是样式的名称,
命名规则如下:必须 以 字母开头
英文字母 大/小 写 ; 数字 ; 连字符 ; 下划线 ; 冒号 ; 句号

种类: HTML标记选择符 , CLASS选择符 , ID选择符
以上是常用的三种 我们目前只介绍这些

1>HTML标记选择符
示例如下:

在CSS代码中:
P
{
Margin: 0px;
}

&&在HTML标记中

双标记表示一个段落 , 当这个 段落被上面的 “CSS 样式表” 控制的时候, 默认的段落间隔就不存在了
类似的 , 还有DIV ,td , tr , body 等

2> ID选择符
概述:
ID选择符 是 唯一性选择符 ; 在一个页面中只能出现一次 ,
在整个网站中也最好出现一次(这样有利于 程序员控制此元素 , 有多个相同名称的元素, 就无法区别 ,不好控制了!)

3> 类选择符
略!

3 伪类(包括 ,伪类选择符, 伪元素选择符)

概述: 伪类选择符 是基于一组预定义性质的选择符 , HTML元素可以占有这些预定义性质

详见第20章

4 注解

单行注解 /* 在这里输入单行注解内容 */

多行注解 /*
在这里输入多行
注解哦哦哦哦哦!!!!
*/

5 单位

很多 ,详见Google

常用的就是 px , % , etc.

6 CSS与浏览器的兼容性问题

目前的

世界范围内 主流”网页浏览器” IE , chrome , Firefox , opera 等等 进行调试

小众范围内:
例如MAC-OS 的Safari, 毕竟不是人人 都用的起 Apple!
例如中国国内商家 用于推广自家产品的一系列”推广产品浏览器” , 好比 360 , QQ ,UC , Sougou ,Liebao , 想了很久只能先用”推广产品浏览器 ” 命名它们!!!

个人推荐 , 先在 网页浏览器包含的那4个进行调试 , 其他再说吧!!!

第13章: 字体设置 和 文本设置
概述: 本章的主要内容如下:
字体 与 字体颜色
字体类型
字体大小 和 字体重量
行距, 间距 与 间隔
文本省略标记
文本空格处理方式
文本水平对齐 和 垂直对齐
文本缩进

1 字体

1>字体的复合属性
字体是给对象设置文本特性的属性, 而且是复合属性
所谓复合属性 是指该属性是由多种属性组合而成, 在CSS中 字体用 font表示

个人不推荐使用此属性, 太TMD SB了, 需要一次记住6个属性的种类 以及 名称 , 还不能略过 必须要填充”normal” 这个词才可使用默认值 , 相比之下 , 还不如使用 单个属性 配置文本!!!

接下来 介绍 “单个属性”

2>单个属性汇总如下:
语法:
color: # ; //字体颜色

是指 16进制的RGB数值来表示

font-size: # ; //字体大小

单位是px

font-weight: # ; //字体重量, 即 字体粗细程度

数值范围如下: normal || bold ||bolder || lighter || 100 || 200 || 300 || 400 ||500 || 600 || 700 ||800 ||900 ,必须从以上范围内选择!!!!

其中 , normal 表示正常粗细,相当于 400 ; bold 表示 粗体字 ,相当于 700 ; 总的来说,数字越大 字体越粗

font-family: # ; //字体类型 例如 宋体 ,微软雅黑 , 黑体 , Courier New ,etc.

就是上一行所给的字体名称 , 只需要你的系统字体库 支持即可!!!

line-height: # ; //行距

数值+单位是px

word-spacing : # ; //文本间距 , 即: 字间距 (包括 汉字 和 英文)

单位是 : normal 或者 数值(可以为负数)+px

&& 汉字 由笔画 构成 , 英文 由 字母构成 , 不要纠结 哦哦哦哦哦哦哦!!!!
从这个角度来讲 笔画 和 字母 具有同等性质

2 字母的大小写转换

语法:
text-transform : # ; //转换英文的大小写状态

数值域如下:{captialize , uppercase , lowercase , none }

第一个 表示 把英文的 首字母 变为大写
第四个 表示 不改变英文的大小写状态

3 文本修饰

概述: 通过关键词的5个属性 中的一个来修饰文本

在进行文本修饰时, 可以任选 下划线 ,上划线 ,删除线 ,闪烁 , 或者缺省 其中的一个

语法如下:
text-decoration : # ; // 用于文本修饰

的数值域为{underline , overline , line-through , line-blink , none }

其中 ,none参数 使得包含超链接的文字 不再以下划线的形式展现

4 空格处理

概述: 如果希望 文本在同一行中显示, 或者 , 想要处理程序代码所包含的用于缩进和转行的空格

语法如下:
white-space: normal || pre || nowrap ; //空格处理语句

参数解释:
normal :默认处理方式 , 会自动换行
pre:使用等宽字体显示预先格式化的文本. 不合并字符间的空格
nowrap: 强制在同一行内显示所有文本,直到文本结束或者遭遇
标记

5 设置文本垂直 和 水平对齐

&&{
HTML文档引用样式文件的时候, 只需要 在HTML的合法标记的头部 直接以
id=# 或者 class=# 的形式引用即可

合法标记例如 ,

等等
}

语法如下:
垂直对齐:
vertical-align: # ; //垂直对齐

的取值共有8个,例如top ,middle ,bottom,详见Google

水平对齐:
text-align:# ; //水平对齐

的取值left , 浏览器的默认

right , 右对齐
center , 居中
justify , 左右对齐

6 文本缩进

&&目录可以分为 索引目录 和 正文目录
{
有的PDF文档 ,由于权限问题, 无法快速搜索正文 , 同样也就无法快速定位到指定正文页码;

但是, 所有的PDF文档 ,都会随之而生成 索引目录, 这个可以在chrome浏览器, 或者其他专业的PDF阅读器上找到, 包括 “索引页码, 对应的标题” ;
}

索引页码 : P207 ;

概述: 文本缩进属性可以用于块级元素(P , H1 ,H3等) , 以定义该元素第一行可以接受的缩进的数量

7 段落缩进

索引页码: p.208

概述 : 正文往往在一个层中显示, 把这个层 设置好段落缩进 ;
系统就会对每个段落设置其缩进 , 提升阅读体验

第14章: 设置背景和尺寸
概述: 本章所讲的背景是 CSS中的背景属性 , 背景属性 也是复合属性 , 例如 背景颜色 ,背景图像
在CSS中 ,背景属性 用background 表示, 共包含5个子属性

语法如下: background: transparent none repeat scroll 0% 0%
以上列出的是 默认值 , 详见索引页码P.211

接下来详细介绍5个子属性

1 设置背景颜色

语法:
background-color: transparent || color ;

前者表示默认值背景色透明,后者 直接添加RGB颜色值

详见 索引页码P.213

2 设置背景图片

语法:
background-image: none || url(URL) ;

前者为默认值 无背景 , 后者示例 如下 url(desktop/img_1.jpg)

详见索引页码 P.214

3 设置背景图片滚动

语法:
background-attachment: scroll || fixed ;

scroll表示图片因内容滚动而滚动 , 在博客中 使用鼠标滚轮下滑页面即可观察此效果
而参数fixed 是 固定的 也就是把图片钉在网页的某个固定位置

4 设置背景图片的位置

语法:
background-position: length length
或者
background-position: position position

length是指具体的数值+单位 , position 包括方位值(例如 top center left) 或者 表示为
X轴+Y轴的百分数值

详见索引页码 P.216

5 设置背景图片的铺排方式

语法:
background-repeat: repeat || no-repeat ||repeat-x || repeat-y

第一个是 默认值 , 图片将在横向 和 纵向 上 “重复平铺”
第二个是 背景图像 只平铺一次,不会重复
第三个是 在横向上重复平铺
第四个是 在纵向上重复平铺
详见索引页码 P.218

6 技巧介绍: 设置层居中

层居中不同于用align设置TABLE布局的居中

语法:
margin:auto ; //设置 层的上右下左的 四个方向的 距离为自动即可

auto 自动确定外边距 , 就可以实现层居中的效果!!!

第15章 设置外边距 和 内边距
概述: 外边距(margin), 是指 当前对象 与 父对象的距离

内边距(padding) , 是指 当前对象 与 子对象的距离(或者理解为 “内部填充距离”)

1 外边距的基本语法

margin: auto || length ;
length 是指数值+单位 ,
其后只接一个数值 表示 四周的外边距都是该数值
只接两个 数值 ,那么 第一个数值是指上下的外边距 ,第二个数值 是指左右的外边距

显而易见, margin 是 复合属性, 其自属性 包括 margin-top , margin-bottom,margin-left/right

2 设置层漂移

默认情况下, 层与层之间不会平行对齐, 需要使用 float 设置层与层之间的漂移,从而使其达到 平行对齐的效果!!!

3 设置层与层之间的间隔

层与层之间默认的没有间隔
当我们设置了 间隔后 , 就会使层布局更具有 模块感 , 更美观!!!

第16章: 设置对象边框
概述: