html网页布局模板范本模板.docx

html网页布局模板范本模板.docx

《html网页布局模板范本模板.docx》由会员分享，可在线阅读，更多相关《html网页布局模板范本模板.docx（21页珍藏版）》请在冰豆网上搜索。

html网页布局模板范本模板

1html笔记

一、HTML的概述（了解）

a.html是什么：

hypertextmarkuplanguage超文本标记语言

超文本：

音频，视频，图片称为超文本..

标记：

<英文单词或者字母>称为标记。

一个HTML页面都是由各种标记组成.

b.作用：

编写HTML页面.

c。

HTML语言不是一个编程语言（有编译过程），而是一个标记语言（没有编译过程）.

HTML页面直接由浏览器解析执行.

二、HTML的历史（了解）

三、HTML的网络术语（明白）

＊网页：

由各种标记组成的一个页面就叫网页。

＊主页（首页）：

一个网站的起始页面或者导航页面.

*标记：

〈p〉称为开始标记〈/p>称为结束标记.也叫标签。

每个标签都规定好了特殊的含义。

＊元素：

内容〈/p〉称为元素。

*属性：

给每一个标签所做的辅助信息。

＊xhtml：

符合XML语法标准的HTML。

*dhtml：

dynamic,动态的.javascript+css+html合起来的页面就是一个dhtml

*http：

协议标准。

用来规定客户端浏览器和服务端交互时数据的一个格式。

SMTP邮件传输协议,ftp:

文件传输协议。

四、HTML的编辑工具（了解）

＊.notepad记事本

＊.editplus：

语法高亮显示

技巧：

根据颜色判断单词是否出错。

（不是100%）

*。

ultraedit:

根据颜色判断单词是否出错，可以显示2进制数据.

＊.dw（dreamweaver，专业工具）代码提示。

五、HTML的规范（知道）

*.HTML是一个弱势语言

*.html不区分大小写

＊。

html页面的后缀名是html或者htm（有一些系统不支持后缀名长度超过3个字符，比如dos系统）

*。

html的结构

1）声明部分。

主要作用是用来告诉浏览器这个页面使用的是那个标准。

<！

doctypehtml〉是HTML5标准.

2）head部分：

不会显示在页面上。

作用是告诉浏览器一些页面的额外信息。

3）body部分:

我们缩写的代码必须放在此标签內。

六、HTML的各种标签（掌握）

明确：

每个标签都有私有属性.也都有公有属性。

html中表示长度的单位都是像素。

HTML只有一种单位就是像素。

body:

bgcolor:

背景颜色

background：

背景图片

text:

文本颜色

1.排版标签

所有的浏览器默认情况下都会忽略空格和空行

P：

p代表一个段落

属性：

align：

对齐方式。

取值：

left，right，center

代表是换行。

hr：

color:

线的颜色

size:

线的粗细

width:

线的长短

两种写法：

1）绝对值eg：

500

2）相对值：

50％

noshade:

不要阴影

align:

对齐方式取值:

left,right,center

center：

内容居中

pre:

预定义格式标签.告诉浏览器不要忽略空格和空行

div:

块级标签必须单独占据一行

属性:

align:

span:

块级标签不换行字体标记

2字体标签

h1..。

h6：

定义字体大小

属性：

align：

居中

font:

color:

字体颜色

颜色的写法有3种：

1）英文单词：

red

2）十六进制:

＃00ffcc

3）RGB（三原色）：

newRGB（124,156，23）

size：

字体大小

face：

字体类型

特殊字符：

＆lt;小于>大于＆amp;＆符号"；双引号'单引号

©；版权＆trade；商标 ；空格

扩展:

＆＃32464；

b:

加粗

strong:

加粗

i：

斜体

em：

斜体

u：

下划线

s：

中划线（删除线）

sup:

上标

sub:

下标。

3.图像标记

img:

代表是一副图片

属性:

src:

图片的路径

两种写法：

a）:

相对路径路径是相对页面所在的路径两个标记。

和..，分表代表当前目录和父路径

b）：

绝对路径

1）：

以盘符开始的路径

eg：

C:

\DocumentsandSettings\Administrator\桌面\day01_html\上课示例/images/1。

jpg

2）:

网络路径

eg:

http:

//www.baidu。

com/images

width:

宽度

height：

高度

Alt：

当图片显示不出来的时候代替图片显示的内容

title：

提示性文本

border：

边框

热点：

就是特定的位置添加超链。

〈areashape=”circle”coords=”122，81,38"href="demo_字体标签。

html”/>

〈/map〉

4。

清单标记

列表标签：

3种

a.无序列表ul

属性：

type：

值：

disc（默认，实心原点），square（实心方点）,circle（空心圆）

b。

有序列表（OL）

属性：

type：

取值：

1（阿拉伯数字，默认）,a,A,i，I

start:

从几开始

c。

定义列表（dl）

dt:

列表项的标题

dd:

列表项

5。

超链接

3种超链接:

1。

连接到其他页面

2.锚：

指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。

使用name属性给超链起名字

3。

连接到邮件:

xugang＠"〉进入我的邮箱〈/a〉

属性：

target:

告诉浏览器怎么显示目标页面

HTML中已定义4个值：

_self：

在同一个浏览器中显示

_blank:

打开新的浏览器显示

_parent：

在父窗口中显示

_top:

在顶级窗口中显示

6。

表格标记

table：

表格

属性：

border:

边框

width：

宽度

height:

高度

align：

表格的对齐方式

cellpadding:

单元格内容到边的距离

cellspacing：

单元格和单元格之间的距离

bgcolor：

背景颜色

background:

背景图片

bordercolorlight:

表格的上，左边框,以及单元格的右，下边框的颜色

bordercolordark:

表格的右,下边框，以及单元格上，左的边框的颜色

dir：

单元格内容的排列方式取值:

ltr从左到右,rtl:

从右到左

tr：

行

属性：

dir:

bgcolor：

td:

单元格

属性：

align：

内容的横向对齐方式

valign:

内容的纵向对齐方式top，middle，bottom

width：

绝对值或者相对值（％）

height:

单元格的高度

单元格的合并：

单元格的属性:

colspan:

横向合并

rowspan:

纵向合并

th：

相当于

属性同〈td>

caption:

表格的标题

属性：

align：

取值：

left，center，right,top,bottom

thead

tbody

tfoot

写与不写的区别：

1。

当表格非常大的时候,如果不写，则必须等表格的内容全部下载完成才能显示。

但是用tbody标签的话，那么边下载边显示。

2。

如果不写thead,tbody，tfoot那么浏览器解析表格内容的时候是从上到下解析.如果写了，那么顺序任意,浏览器解析的时候还是按照thead，tbody,tfoot的顺序显示内容

7.框架标记及