网页编程笔记文档格式.docx
- 文档编号:16169560
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:34
- 大小:42.33KB
网页编程笔记文档格式.docx
《网页编程笔记文档格式.docx》由会员分享,可在线阅读,更多相关《网页编程笔记文档格式.docx(34页珍藏版)》请在冰豆网上搜索。
/body>
/html>
一、HTML
1.名词解释:
WWW:
WordWideWeb,万维网
W3C:
WorldWideWebConsortium,万维网联盟/W3C理事会。
HTML:
HyperTextMarkupLanguage,超文本标记语言。
CSS:
CascadingStyleSheet,级联样式表。
XHTML:
eXtensibleHyperTextMarkupLanguage,可扩展超文本标记语言。
2.参考网页的源代码。
右击,查看源文件。
3.HTML不是编程语言,而是一种描述性的标记语言。
标记:
就是用来描述网页内容的一些特定符号。
4.html标记的语法:
标记分为两种,单标记、双标记
<
没有结束的标记—单标记
开始标记符>
/结束标记符>
—双标记
5.需要注意的:
在xhtml中规定,所有html标记,都要小写
所有的标记,都是要有关闭符号的。
如下:
html-------xhtml
br>
------<
br/>
标记名称属性="
属性值"
>
……<
/标记名称>
所有html都有一个基本结构。
网页的head信息,标识网页文件的头部信息,如标题、搜索引擎关键字等。
6.meta标记:
meta标记用于定义文件信息,是对网页文件进行说明,便于搜索引擎查找。
放置于<
之间。
用meta设置关键字:
metaname="
keywords"
content="
关键字"
多个关键字用“,”分隔。
设置描述:
description"
对关键字的扩展说明"
设置作者:
author"
作者名"
设置字符集:
metahttp-equiv="
content-type"
text/html;
charset=gb2312"
编码格式:
GB2312编码占用2个字节,UTF-8占用3个字节,如果网页文字较多,选择GB2312编码。
设置页面定时跳转:
refresh"
2;
URL="
/>
里面的2,代表2秒
上面的几个地方需要特别注意:
1.http-equiv之间不能加空格,否则没用,也就是不能写成“http-equiv”!
2.content-type也是一个整体,不能以空格分隔。
7.<
标记的详解:
【1】<
是网页的主体标记。
【2】注释的写法:
!
--这里面填写注释内容-->
。
【3】<
的属性:
<
bodybgcolor="
背景颜色"
backgroud="
背景图片的路径"
text="
文本颜色"
link="
链接文本颜色"
vlink="
访问过的链接颜色"
alink="
激活的链接颜色"
leftmargin="
左边界"
rightmargin="
右边界"
topmargin="
上边界"
bottommargint="
下边界"
上面的边界的单位都是像素。
【4】html元素、html标签、html标记都是一样的。
【5】有些html元素,有默认的值,比如margin,它不是直接靠在页面的边缘或顶端的,而是空了一点距离,如果想取消这个可以把leftmargin或者topmargin都设置为0。
8.标记语义的应用:
【1】font标记没有语义上的作用。
【2】普通加粗标记:
b>
文字内容<
/b>
普通倾斜标记:
i>
/i>
,二者都没有在语义上突出是重点的意思。
【3】语义加强加粗标记:
strong>
文本内容<
/strong>
语义加强的倾斜标记:
em>
/em>
,二者都告诉了浏览器,加粗或倾斜的是重点。
【4】各个标记之间的权限不同,当控制比较重要的内容时,可以用<
,标题部分,一般都用<
h1>
标记。
【5】下划线<
u>
文本<
/u>
;
删除线<
s>
/s>
上标<
sup>
下标<
sub>
,<
换行标记。
【6】段落(paragraph)标记<
p>
/p>
:
格式:
palign="
对齐方式(left、center、right)"
【7】用适合的html标记,去描述网页内容,这才是网页优化的核心。
9.标题:
hnalign=“对齐方式”>
标题内容<
hn>
,标题标记,n的取值范围是1-6。
标题标记内的文本会以加粗方式显示,hn针对的是段落,font标记针对的是任意对象的文字。
【2】align属性。
10.<
换行标记:
换行不分段,在一个段落里面换行。
11.<
hr/>
水平分割线:
【1】主要属性:
align属性,分割线的对齐方式;
size属性,像素值和百分比,数值越大,线越粗;
width属性,像素值和百分比,决定线的长度。
其中,像素值是一个绝对的值,不会随着窗体大小的改变而改变。
noshade属性,不带阴影,纯色的实体线。
color属性,颜色。
11.在xhtml中,所有的标签都必须有属性值,如果没有,就是用属性名,例如:
hrnoshade="
noshade"
/>
,在html中,可以直接写成<
hrnoshade>
12.特殊标记:
【1】定义一个块应用:
文本缩进标记<
blockquote>
...<
/blockquote>
属性:
citeurl被引用的地址。
如:
blockquotecite="
"
--这里的链接不会显示在网页中-->
引用的正文……
【2】<
center>
/center>
居中(在xhtml中已被废弃的标记)。
【3】预格式化:
pre>
/pre>
13.特殊字符(转义符)的输入:
【1】特殊字符转义码
空格:
&
nbsp;
版权号©
copy;
注册商标®
reg;
引号"
quot;
and符号&:
amp;
小于符号(<):
lt;
大于符号(>):
gt;
14.网页中信息的排序显示:
【1】列表的标记:
1、无序列表<
ul>
/ul>
[UnorderedList无序列表]
语法:
ultype="
项目符号类型"
<
litype="
列表内容1<
/li>
li>
列表内容2<
……
<
说明:
表示一个列表。
项目符号类型有三种,disc是实心圆圈,circle是空心圆○,square是正方形。
2、有序列表<
ol>
/ol>
[OrderList(有序列表),li=list]
olstart="
列表起点"
type="
start属性,表示列表从哪个数字开始,type属性的值有:
1、a、A、i、I。
也可用上面无序列表的符号。
1表示编号从阿拉伯数字1开始依次往后。
a表示小写英文字母开始,a、b、c、d
A表示大写的英文字母。
i表示小写的罗马数字,i、ii、iii、iv
I表示大写的罗马数字,I、II、III、IV
3、定义列表<
dl>
/dl>
[definelist定义列表]
dt>
标题1<
/dt>
dd>
内容1<
/dd>
内容2<
定义一个列表;
表示一个项目(标题);
表示一个项目(标题)下更详细的内容的解释。
15.图片:
【1】语法:
imgsrc="
图片路径"
注:
src=source。
【2】网页常用图片格式:
GIF:
最多只能保存256种颜色,支持透明色,支持动画;
JPEG:
不支持透明及动画,颜色可达1670万种。
PNG:
支持透明色,不支持动画,颜色从几种到1670万种。
【3】路径:
绝对路径:
提供文档全部主机名、路径及文档名称。
相对路径:
当前文档开始的路径。
一般都用相对路径,把图片和网页放在同一个文件夹内。
../向上一级目录。
根相对路径:
【4】标记属性:
■src:
图片的路径,URL。
■alt:
规定图片的替代文本(图片无法显示时),文本。
■title:
鼠标悬停时显示的内容,文本。
■width:
设置图片宽度,像素值和百分比,设置成百分比的时候,是相对于浏览器窗口的。
■height:
设置图片高度,像素值和百分比。
■border:
设置图像的边框,像素值。
■align:
对齐方式。
●left:
图片靠左,文字靠右
●right:
图片靠右,文字靠左
●top:
文字垂直居上,文字在右边。
●middle:
文字垂直居中,文字在右边。
●bottom:
文字垂直居下(默认值),文字在右边。
■vspace:
定义图像顶部和底部的空格(垂直边距),像素值。
■hspace:
定义图像左侧和右侧的空白(水平边距),像素值。
16.网页布局思想:
【1】传统的table标记,发展到DIV+CSS。
【2】从大到小排列。
【3】从左到右,从上到下。
17.网页布局之table标记:
【1】基本结构:
●<
table>
/table>
定义表格
tr>
/tr>
定义表行,是tablerow的缩写,row,“行”的意思。
td>
/td>
定义单元格,是tabledatacell的缩写,cell,“单元格”。
th>
/th>
定义标题栏(文字加粗)。
【2】属性:
tablebgcolor="
,设置表格的背景颜色。
tablebackground="
,设置表格的背景图片。
tableborder="
,设置表格边框的
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 编程 笔记
![提示](https://static.bdocx.com/images/bang_tan.gif)