html学习笔记.docx
《html学习笔记.docx》由会员分享，可在线阅读，更多相关《html学习笔记.docx（27页珍藏版）》请在冰豆网上搜索。
html学习笔记
第二章基础标签3
1.html页面结构3
2.后缀名:
htm或html3
3.head下属标记3
3
3
4
4
5页面注释标记
---->4
第三章文字与段落4
1.标题：
4
2.文本样式5
3.文本格式化5
①粗体标签5
②斜体标签5
③上标和下标标签5
④大字和小字号标记:
比普通文字大一级或小一级5
⑤下划线标签6
⑥文字高亮标签6
4.段落标记6
5.水平线
6
6.其他标记6
7.原样输出标签7
第四章图像处理7
1.图像的格式7
2.图像超链接7
第五章使用列表8
1.有序列表8
2.无序列表8
3.定义列表：
用于解释名词9
4.目录列表：
一般用于创建多列的目录列表。
显示效果与无序列表同。
9
5.菜单列表:
用于设计单列的菜单列表。
显示效果与无序列表同。
9
第六章使用表格9
1.
9table属性10
tr行属性10
td单元格（列）属性10
2.样式标记11
第七章超链接11
1.链接基础知识11
2.链接类型11
①目标窗口：
11
②锚点：
12
③外部网站：
//...”>12
④邮箱：
邮件地址”>12
⑤下载文件：
12
第八章多媒体12
2.插入多媒体13
①embed：
需flash插件13
②video：
自身封装播放器。
HTML5新增加的多媒体标签-。
13
3.插入背景音乐13
4.插入JavaApplet13
第九章框架结构13
1.frameset属性：
分割窗口14
①水平分割14
②垂直分割14
③嵌套分割：
14
2.窗口属性frame：
15
3.浮动框架iframe15
4.框架链接15
①框架集页面设置框架name：
15
②导航页面设置链接：
15
5.其他16
第十章表单16
1.创建表单容器16
2.插入表单对象17
①文本框text17
②密码域password17
③单选按钮radio17
④复选框checkbox18
⑤普通按钮button18
⑥提交按钮submit18
⑦重置按钮reset18
⑧图像域image18
⑨隐藏域hidden18
⑩文件域file18
第十二章CSS样式表19
1.选择符{样式属性:
取值;样式属性:
取值;…}指向对象19
2.添加CSS的方法20
3.CSS属性21
①字体属性21
元素颜色：
color:
颜色;21
②背景属性21
③段落属性22
④外边距和内边距属性23
⑤边框属性24
⑥定位属性25
⑦列表属性：
26
⑧光标属性27
⑨滤镜属性27
⑩其他：
27
4.伪类：
27
总结：
31
一、html要点：
31
1.表格标签31
2.超链接与锚点31
3.浮动框架31
4.表单容器form31
5.表单对象：
31
6.下拉菜单32
二、CSS要点32
1.选择符：
标签、id、类、全局、包含选择符32
2.添加css样式：
内嵌和link样式表32
3.文本属性32
4.背景属性32
5.段落属性：
文字修饰text-decoration、文本行高line-height、边框属性32
6.定位属性：
定位position:
absolute、浮动float32
7.块级元素和内联元素转换：
div{display:
block}、div{display:
inline}32
8.列表标签：
list-stytle:
none;32
9.伪类32
10.应用：
32
第二章基础标签
1.html页面结构
2.后缀名:
htm或html
3.head下属标记
：
说明页面的用途，显示在浏览器的标题栏
：
用来定义页面信息的关键字（name）、说明（content）、刷新。
单标记，且一个页面可以有多个meta元素。
属性：
①name=”关键字”content=”关键字说明”:
:
供搜索引擎使用。
②http-equiv=”content-type”content=”text/html;charset=”字符集类型”
:
用于传送HTTP通信协议的标头，content才是具体内容。
字符集：
gb2312简体中文；ISO-8859-1英文；
③http-equiv=”refresh”content=”跳转时间;URL=’跳转地址’”
跳转时间以秒记。
4
属性：
text:
文本颜色
bgcolor:
背景色
background:
背景图片
link:
链接文字颜色
alink:
正在访问的文字颜色。
vlink：
访问过的链接文字颜色。
margin：
边距：
topmargin=”像素”上边距的值。
leftmargin=”像素”左边距
5页面注释标记
---->
第三章文字与段落
1.标题：
：标题标签1到6渐低
align:
left、center、right对齐属性
2.文本样式
：
属性：
face：
字体
size：
字号
color：
颜色
3.文本格式化
①粗体标签
②斜体标签
③上标和下标标签
④大字和小字号标记:
比普通文字大一级或小一级
⑤下划线标签
⑥文字高亮标签
4.段落标记
或：
开始一个段落
:
一个
代表一个换行
：
不换行标记
5.水平线
属性：
width=”宽度”
size=”高度”
noshade:
去掉阴影
color=”颜色”
align=left、center、right：
对齐方式
6.其他标记
：
空格
特殊符号：
引号“="；小于<=<大于>=>（略）
7.原样输出标签
：将标签内容原样布局格式输出
第四章图像处理
1.图像的格式
gif格式
jpeg格式
png格式
属性：
alt
width和height
border
vspace和hspace
align
2.图像超链接
基本图片链接：
图像热区链接：
映射地图
第五章使用列表
1.有序列表
属性：
type=”1、a、A、i、I”:
序号类型=数字、小写/大写字母、小写/大写字母数字
start=”起始数值”：
调整编号初始值。
2.无序列表
属性：
type=”Disc、circle、square”：
项目符号=黑色实心圆、空心圆、正方形
3.定义列表：
用于解释名词
- 指定需要解释的名词
- 具体解释
4.目录列表：
一般用于创建多列的目录列表。
显示效果与无序列表同。
5.菜单列表:
用于设计单列的菜单列表。
显示效果与无序列表同。
第六章使用表格
1.
table属性
width和height宽度、高度
align：
left、center、right对齐
border=””：
边框大小
bordercolor=””：
边框颜色
cellspacing=””：
单元格之间间距。
cellpadding=””：
表格内容与边框间距
bgcolor=””:
背景颜色
background=””：
背景图片
tr行属性
height=””：
行高
bordercolor=””:
行边框颜色
bgcolor或background:
行背景颜色
align=”left、center、right”行文字水平对齐方式
valign=”top、middle、bottom”行文字垂直对齐方式
td单元格（列）属性
width、height：
单元格宽度、高度
colspan=”跨度的列数”:
水平跨度
rowspan=”跨度的行数”：
垂直跨度
align=
valign=
bgcolor
bordercolor
bordercolorlight=””：
亮边框的颜色
bordercolordark=””：
暗边框的颜色
background=””：
单元格背景图片
2.样式标记
：
表格最上端表首的样式
：统一设计表主体部分的样式
：定义表尾的样式
第七章超链接
1.链接基础知识
绝对路径:
包括服务器规范在内的完全路径
相对路径：
同一站点用..符号构造的相互位置路径。
内部链接：
与自身网站页面有关的链接称为内部链接。
外部链接：
网站、邮箱、FTP、下载文件
2.链接类型
①目标窗口：
target：
_self、_blank、_top、_parent目标窗口的打开方式
_self:
在当前页面中打开
_blank：
新窗口打开。
_top:
_parent:
target：
超链接在目标框架打开
Preface
②锚点：
建立锚点
锚点名：
字母开头，字母或数字或下划线构成
同一页面跳转到指定锚点：
其他页面跳转到指定锚点：
③外部网站：
//...”>
④邮箱：
邮件地址”>
⑤下载文件：
第八章多媒体
1.滚动标签：
文字、图片、表格等。
属性：
direction=up、down、left、right：
向上、下、左、右滚动。
behavior=scroll、side、alternate：
循环、只滚动一次、来回交替滚动。
scrollamount=”滚动速度”：
像素单位
scrolldelay=”时间间隔”：
滚动时间间隔
loop=”循环次数”
width=”300”height=”400”：
背景宽度、高度
bgcolor=”背景颜色”
hspace、vspace：
2.插入多媒体
①embed：
需flash插件
②video：
自身封装播放器。
HTML5新增加的多媒体标签-。
属性：
autoplay=”autoplay”：
自动播放
controls=”controls”：
控制条
3.插入背景音乐
属性：
loop=”循环次数”：
可设置为true，无限循环。
4.插入JavaApplet
第九章框架结构
框架结构式将两个或两个以上的网页组合起来，在同一个窗口中打开的网页结构。
创建框架页面的目的是为了更好的导航。
第十章表单
1.创建表单容器
：
表单标记，定义一个表单的开始和结束位置。
其属性：
action：
指定表单数据提交到哪个地址进行处理。
name：
表单命令。
非必要属性。
method=”get”、”post”：
指定数据使用哪种HTTP提交方法提交到服务器。
get:
显示提交，所有提交的信息都会在浏览器地址栏显示。
post：
隐藏提交。
enctype：
设置表单信息提交的编码方式。
application/x-www-form-urlencoded
multipart/form-data
target：
指定目标窗口的打开方式。
目标窗口往往用来显示表单的返回信息。
=_blank
=_self
=_parent
=_top
2.插入表单对象
①文本框text
maxlength=”文本框最多可输入的字符数”/>
属性：
type:
表单对象类型。
text：
文本框
pattern=”^[1-9a-zA-Z_]\w{5,9}$”：
输入规则
^匹配开始
$匹配结束
（）分组
[]范围
{}次数
|或者
\w字母数字下划线
\W除了字母数字下划线的字符
\d数字
*匹配任意字符
②密码域password
③单选按钮radio
checked：
默认选中
④复选框checkbox
⑤普通按钮button
⑥提交按钮submit
：
提交容器数据
⑦重置按钮reset
：
重置容器数据
⑧图像域image
：
使用一幅图像作按钮
⑨隐藏域hidden
：
隐藏传送后台用。
⑩文件域file
：
上传文件
文本域
其他html5新增
邮箱：
日期：
年月：
年周：
网址：
颜色：
电话：
数字：
3.菜单和列表
①下拉菜单
内容
②列表项：
超过列表项数，出现滚动条。
第十二章CSS样式表
1.选择符{样式属性:
取值;样式属性:
取值;…}指向对象
①类型选择符：
标签
②id选择符：
id=”id号”标记标签
#号+id名，如#odiv{}，用于精确定位到某个对象，进行特殊的处理，id唯一。
③类选择符：
class=”类名”标记标签
使用英文状态下”.”点号+类名，如.odiv{}，用于批量处理。
④分组选择符：
同时对几个容器进行操作,容器与容器之间用”,”逗号隔开、如:
h1,ht,h3{}
⑤包含选择符：
容器嵌套容器的时，使用包含选择符，中间使用空格隔开。
如：
divul{},divulli{},divullia{}
⑥子选择符：
和包含选择符类似，只是将空格改为>符号。
如：
div>ul{},div>ul>li{},div>ul>li>a{}
⑦属性选择符：
通过每个对象或容器的属性来控制样式。
如:
[align=’left’]{}[bgcolor^=”#0”]特殊字符匹配
⑧UI伪类选择符：
通过表单的效果来控制样式。
如：
input:
属性{}
⑨结构选择符：
采用DOM（节点树）方式来控制样式。
如：
标签元素:
ntf-child（odd）{},tr:
ntf-child（evev）{}//odd表式奇数，even表式偶数。
⑩全局选择符：
制作整个HTML内容的样式。
通过*号。
如*{}。
2.添加CSS的方法
1内嵌样式:
html标记中使用。
red;>
2内部样式表：
head中创建样式表
//声明
—
body{font-size:
13px;}
-->
3外部样式表:
：
head中链接样式表文件
…
创建css文件：
@charset”utf-8”；：
解决中文乱码
/*…*/：
css及脚本语言的注释
4导入外部样式表:
创建样式表过程中：
部分内容import引用样式表文件
@import”slstyle.css”;
3.CSS属性
1字体属性
复合属性font:
字体大小风格加粗等
font-family:
字体;
font-size:
字体大小;
font-style:
italic/oblique;:
斜体/中间状态
font-weight:
bold/bolder/lighter/数值;:
粗体、特殊、特细、数字
元素颜色：
color:
颜色;
2背景属性
（1）背景颜色：
background-color:
颜色;
（2）引用背景：
background-image:
url（图像地址）;
（3）图片平铺：
bacground-repeat:
取值;
repeat;平铺。
no-repeat;背景图像不平铺。
repeat-x;水平方向平铺。
repeat-y;垂直方向平铺
（4）
展开阅读全文
相关搜索