html学习笔记Word格式.docx
- 文档编号:17695781
- 上传时间:2022-12-08
- 格式:DOCX
- 页数:27
- 大小:33.86KB
html学习笔记Word格式.docx
《html学习笔记Word格式.docx》由会员分享,可在线阅读,更多相关《html学习笔记Word格式.docx(27页珍藏版)》请在冰豆网上搜索。
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:
②导航页面设置链接:
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.伪类:
总结:
31
一、html要点:
1.表格标签31
2.超链接与锚点31
3.浮动框架31
4.表单容器form31
5.表单对象:
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.应用:
第二章基础标签
1.html页面结构
html>
head>
/head>
/html>
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=’跳转地址’”
跳转时间以秒记。
text:
文本颜色
bgcolor:
背景色
background:
背景图片
link:
链接文字颜色
alink:
正在访问的文字颜色。
vlink:
访问过的链接文字颜色。
margin:
边距:
topmargin=”像素”上边距的值。
leftmargin=”像素”左边距
第三章文字与段落
h1>
/h1>
标题标签1到6渐低
align:
left、center、right对齐属性
2.文本样式
font>
/font>
face:
字体
size:
字号
color:
颜色
3.文本格式化
①粗体标签
b>
/b>
strong>
/strong>
②斜体标签
i>
/i>
em>
/em>
cite>
/cite>
③上标和下标标签
sup>
/sup>
sub>
/sub>
比普通文字大一级或小一级
big>
/big>
small>
/small>
⑤下划线标签
u>
/u>
⑥文字高亮标签
mark>
/mark>
4.段落标记
p>
或<
/p>
开始一个段落
br>
一个<
代表一个换行
nbr>
/nbr>
不换行标记
width=”宽度”
size=”高度”
noshade:
去掉阴影
color=”颜色”
align=left、center、right:
对齐方式
6.其他标记
&
nbsp:
空格
特殊符号:
引号“=&
quot;
小于<
=&
lt;
大于>
gt;
(略)
header>
/header>
footer>
/footer>
section>
/section>
nav>
/nav>
7.原样输出标签
pre>
/pre>
将标签内容原样布局格式输出
第四章图像处理
1.图像的格式
gif格式
jpeg格式
png格式
imgsrc=””>
alt
width和height
border
vspace和hspace
align
2.图像超链接
基本图片链接:
ahref=””>
imgsrc=””>
图像热区链接:
映射地图
imgsrc=””usemap=”映射图像名称”>
mapname=”映射图像名称”>
areashape=”热区形状”cords=”热区坐标”href=””>
/map>
第五章使用列表
1.有序列表
ol>
li>
/li>
/ol>
type=”1、a、A、i、I”:
序号类型=数字、小写/大写字母、小写/大写字母数字
start=”起始数值”:
调整编号初始值。
2.无序列表
ul>
/ul>
type=”Disc、circle、square”:
项目符号=黑色实心圆、空心圆、正方形
用于解释名词
dl>
dt>
指定需要解释的名词<
/dt>
dd>
具体解释<
/dd>
/dl>
dir>
/dir>
menu>
/menu>
第六章使用表格
caption>
表格标题<
/caption>
tr>
th>
表头<
/th>
/tr>
td>
/td>
/table>
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=””:
暗边框的颜色
单元格背景图片
2.样式标记
thead>
/thead>
表格最上端表首的样式
tbody>
/tbody>
统一设计表主体部分的样式
tfoot>
/tfoot>
定义表尾的样式
第七章超链接
1.链接基础知识
绝对路径:
包括服务器规范在内的完全路径
相对路径:
同一站点用..符号构造的相互位置路径。
内部链接:
与自身网站页面有关的链接称为内部链接。
外部链接:
网站、邮箱、FTP、下载文件
2.链接类型
ahref=””target=””>
target:
_self、_blank、_top、_parent目标窗口的打开方式
_self:
在当前页面中打开
_blank:
新窗口打开。
_top:
_parent:
超链接在目标框架打开
ahref="
/example/html/pref.html"
target="
bodyFrame"
>
Preface<
iframeid="
name="
frameborder="
0"
/iframe>
建立锚点<
aname=”锚点名”>
锚点名:
字母开头,字母或数字或下划线构成
同一页面跳转到指定锚点:
ahref=”#锚点名”>
其他页面跳转到指定锚点:
ahref=”url#锚点名”>
第八章多媒体
marquee>
/marquee>
滚动标签:
文字、图片、表格等。
direction=up、down、left、right:
向上、下、左、右滚动。
behavior=scroll、side、alternate:
循环、只滚动一次、来回交替滚动。
scrollamount=”滚动速度”:
像素单位
scrolldelay=”时间间隔”:
滚动时间间隔
loop=”循环次数”
width=”300”height=”400”:
背景宽度、高度
bgcolor=”背景颜色”
hspace、vspace:
2.插入多媒体
需flash插件
embedsrc=”多媒体文件地址”width=”控件宽度”height=”控件高度”>
/embed>
vidiosrc=”视频/音频文件地址”width=”控件宽度”height=”控件高度>
/video>
autoplay=”autoplay”:
自动播放
controls=”controls”:
控制条
3.插入背景音乐
bgsoundsrc=”背景音乐的地址”>
属性:
loop=”循环次数”:
可设置为true,无限循环。
4.插入JavaApplet
第九章框架结构
框架结构式将两个或两个以上的网页组合起来,在同一个窗口中打开的网页结构。
创建框架页面的目的是为了更好的导航。
frameset>
和<
noframes>
位于head和body之间。
iframe>
在body内部使用。
分割窗口
①水平分割
framesetrows=”框架窗口的高度”>
frame>
/frameset>
②垂直分割
framesetcols=”框架窗口的高度”>
frameborder=1、0或yes、no:
是否隐藏边框。
适用框架集frameset和框架frame
framespacing=”边框宽度”:
只适用框架集frameset
bordercolor=”边框颜色”:
只适用框架集frameset
高度数值用百分比表式,逗号分隔,方便显示器全屏显示所有框架页面。
另*星号可表式剩余。
framesrc=”本窗口要用的html文件地址”name=”页面名称”noresize
marginwidth=””marginheight=””scrolling=”yes/no/auto”>
noresize:
禁止调整窗口尺寸。
marginwidth:
水平边距
marginheight:
垂直边距。
scrolling:
滚动条。
3.浮动框架iframe
iframesrc=”本窗口要用的html文件地址”width=””height=””
align=”left/right/middle/bottom”scrolling=auto/yes/noframeborder=””>
4.框架链接
framesrc=”本框架地址”name=”框架名”>
或
iframesrc=”本框架地址”name=”框架名”>
ahref=”要跳转的页面”target=”显示跳转页面的框架名”>
5.其他
如果当前浏览器不支持框架时候,那么显示此标签内容<
/noframes>
第十章表单
1.创建表单容器
form>
/form>
表单标记,定义一个表单的开始和结束位置。
其属性:
action:
指定表单数据提交到哪个地址进行处理。
name:
表单命令。
非必要属性。
method=”get”、”post”:
指定数据使用哪种HTTP提交方法提交到服务器。
get:
显示提交,所有提交的信息都会在浏览器地址栏显示。
post:
隐藏提交。
enctype:
设置表单信息提交的编码方式。
application/x-www-form-urlencoded
multipart/form-data
指定目标窗口的打开方式。
目标窗口往往用来显示表单的返回信息。
=_blank
=_self
=_parent
=_top
2.插入表单对象
①文本框text
inputname=”控件名”type=”text”value=”文本框默认值”size=”控件长”
maxlength=”文本框最多可输入的字符数”/>
type:
表单对象类型。
text:
文本框
pattern=”^[1-9a-zA-Z_]\w{5,9}$”:
输入规则
^匹配开始
$匹配结束
()分组
[]范围
{}次数
|或者
\w字母数字下划线
\W除了字母数字下划线的字符
\d数字
*匹配任意字符
②密码域password
inputname=”控件名”type=”password”value=”密码域默认值”size=”控件长”maxlength=”文本框最多可输入的字符数”/>
③单选按钮radio
inputname=”控件名”type=”radio”value=”按钮取值”checked/>
checked:
默认选中
④复选框checkbox
inputname=”控件名”type=”checkbox”value=”选框取值”checked/>
⑤普通按钮button
inputtype=”button”name=”控件名”value=”按钮取值”onclick=”处理程序”/>
⑥提交按钮submit
inputtype=”submit”name=”控件名”value=”按钮取值”/>
提交容器数据
⑦重置按钮reset
inputname=”控件名”type=”reset”value=”按钮取值”>
重置容器数据
⑧图像域image
inputname=”图像域名”type=”image”src=”图像路径”>
使用一幅图像作按钮
⑨隐藏域hidden
inputname=”隐藏域名”type=”hidden”value=”隐藏域取值”>
隐藏传送后台用。
⑩文件域file
inputname=”文件域名”type=”file”size=””maxlength=”最长字符数”>
上传文件
文本域
textareaname=””cols=”列数”rows=”行数”>
/textarea>
其他html5新增
邮箱:
inputtype=”email”name=””/>
日期:
inputtype=”date”name=””/>
年月:
inputtype=”month”name=””/>
年周:
inputtype=”week”name=””/>
网址:
inputtype=”url”name=””/>
颜色:
inputtype=”color”name=””/>
电话:
inputtype=”tel”name=””/>
数字:
inputtype=”number”name=””/>
3.菜单和列表
①下拉菜单
selectname=”下拉菜单名”>
optionvalue=”选项值”selected=”selected”>
内容<
/option>
option>
/select>
②列表项:
超过列表项数,出现滚动条。
selectname=”列表名”size=”同时显示的列表项数”multiple>
第十二章CSS样式表
…}指向对象
①类型选择符:
标签
②id选择符:
id=”id号”标记标签
#号+id名,如#odiv{},用于精确定位到某个对象,进行特殊的处理,id唯一。
③类选择符:
class=”类名”标记标签
使用英文状态下”.”点号+类名,如.odiv{},用于批量处理。
④分组选择符:
同时对几个容器进行操作,容器与容器之间用”,”逗号隔开、如:
h1,ht,h3{}
⑤包含选择符:
容器嵌套容器的时,使用包含选择符,中间使用空格隔开。
如:
divul{},divulli{},divullia{}
⑥子选择符:
和包含选择符类似,只是将空格改为>
符号。
div>
ul{},div>
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标记中使用。
tablestyle=color:
red;
2内部样式表:
head中创建样式表
styletype=”text/css”>
//声明
—
body{font-size:
13px;
}
-->
/style>
3外部样式表:
:
head中链接样式表文件
…
linkrel=stylesheettype=text/csshref=slstyle.css>
创建css文件:
@charset”utf-8”;
解决中文乱码
/*…*/:
css及脚本语言的注释
4导入外部样式表:
创建样式表过程中:
部分内容import引用样式表文件
styletype=text/css>
@import”slstyle.css”;
3.CSS属性
1字体属性
复合属性font:
字体大小风格加粗等
font-family:
字体;
font-size:
字体大小;
font-style:
italic/oblique;
:
斜体/中间状态
font-weight:
bold/bolder/lighter/数值;
粗体、特殊、特细、数字
2背景属性
(1)背景颜色:
background-color:
(2)引用背景:
background-image:
url(图像地址);
(3)图片平铺:
bacground-repeat:
repeat;
平铺。
no-repeat;
背景图像不平铺。
repeat-x;
水平方向平铺。
repeat-y;
垂直方向平铺
(4)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 学习 笔记