*****写html代码的流程*****

1先写控制内容的标记，例如这内容比较重要，可以在语义上加权关键字

如果这部分内容是这篇文章的主题----使用

标题文本

2段落文字内容----

段落内容

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

3

例如：E:\笑笑\网页设计\html-exercise\demo1

笔记本电脑

排行榜全面强劲 新锐之选

ThinkPad Edge系列采用英特尔(R)酷睿TM处理器.性能强劲提升,身躯更轻薄!全新悬浮式键盘,

将想象力发挥至极致,操作更便捷,创想从此拥有更多可能!

2013-07

- 推广

2013全新索尼

笔记本电脑

旗舰 索尼VAIO Pro新登场!

4

索尼

笔记本电脑VAIO Pro-轻,薄,彰显品质.新一代超极本(TM) 创新源自英特尔科技.全新索尼

VAIO Pro采用坚固碳纤维机身,8.5小时持久续航.详情请登陆索尼商城!

2013-07

- 推广

笔记本

排行 华硕笔记本S300,13.3英寸超薄轻巧

Asus VivoBook触控

笔记本,华硕S300CA笔记本采用第三代智能英特尔(R)酷睿(TM)i5处理器.轻

薄便携,搭配SonicMaster美声大师,海量存储,2秒开机,2周待机,快速响应Win8无延迟.

2013-07

- 推广

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

（3）段落标记

Html标记之间嵌套使用，一层套一层，若出现交叉嵌套会出现问题

段落标记格式：

属性名称 属性值 说明

Align left 左对齐（默认）

Center 居中

Right 右对齐

（4）段落标题

格式：…

5

说明：X取值1~6 hX内的文本会自动加粗显示（h1最大）

hX针对对象是段落，而font针对对象是任意文本

（5）
:换行（换行不换段）

二、修饰标记：

(6)水平直线

属性名称 属性值 说明

Size 像素 查手册

百分比

Width 像素

百分比

Noshade=“noshade”实体线

三、特殊标记

定义一个块引用：使用文本缩进

格式：

…

属性名称 属性值 说明

①Cite url 被引用的地址

例如：

②预格式化：

例如：网站上面显示一个“钻石”

 
** 
****** 
********* 
****** 
** 

Html列表与图片的应用

文档中使用的特殊字符

特殊字符

空格

版权号©

转义码 注释

  第一个文字前敲空格毫无作用；两个文字间敲空格无论几个，只有一个有效

© 无

无

注册商®

标®

“ "

无

6

&

<

>

&

<

>

无

例如：要在网页上面显示“

2网页中信息的排序显示——如何实现?

3列表的标记

1) 用途：列表标记可以创建一般的无序列表、编号列表、以及定义列表的三种方式，

还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容

① 无序列表

…

② 有序列表

…

③ 定义列表

…

*****注意***

可以直接输入标记，查看标记默认状态

2）无序列表

①语法：

• 内容
• 内容

其中：

7

② 项目符号类型参数及显示

参数值（必须小写）

disc

circle

square

3）有序列表

①语法：

1. 内容1
2. 内容2

② 项目符号类型参数及显示说明

参数值

1

a

A

i

I

4)定义列表

①语法：

标题1

内容1

标题2

内容2

4课堂操作：

4.1.1无序列表

8

描述

●（默认）

○

■

说明

表示以1,2,3,4来表示

表示a,b,c,d来表示

表示A,B,C,D来表示

i，ii，iii

I,II,III

4.1.2 无序列表嵌套

4.2有序列表

4.3定义列表（参照当当网）

5网页支持的图片

① GIF 256种颜色，支持透明，动画

② JPEG（高度压缩）1670万种颜色，不支持透明，不支持动画

③ PNG（网络可移植格式）无损压缩，支持透明，不支持动画，颜色从几种到1670万种

6插入图片标记

7路径：

①绝对路径：提供目标文档的完整主机名称、路径信息及文档全称

②相对路径：从当前文档开始的路径

③使用:

（1）如果当前文档和目标文档的位置平行，则直接书写目标文档全称；

（2）如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称

（3）如果当前所在文档所在文件夹和目标文档位置平行，则书写为../目标文档全称

例如： ../返回上一级文件夹

9

../../返回上两级文件夹

（4）根相对路径：从站点根目录开始的路径，以“/”开始（PHP使用）

8图片属性

属性名称

src

alt

title

width

height

border

align

属性值

URL

文本

文本

像素/百分比

像素/百分比

数字

left

right

top

middle

bottom

vspace

hspace

像素

像素

说明

图片的路径

规定图片的替代文本[图片无法显示时]

鼠标悬停时显示的内容

设置图片宽

设置图片高

设置图片边框

图片靠左，文字靠右

图片靠右，文字靠左

文字垂直居上靠

文字垂直居中

文字垂直居下（默认）

定义图像顶部和底部的空白（垂直边距）

定义图像左侧和右侧的空白（水平边距）

张鹏老师html笔记整理Lesson7~Lesson10

第7讲是通过新闻网站实例来复习之前的内容

Lesson8~Lessson10 是通过hao123实例来讲解表格

一、表格基本结构

...----定义表行

...---定义表列（单元格）

10

...----文字标题栏（加粗）会默认自动居中

二、表格标题：

三、表格结构化

作用：代码乱序时结构得到保持

(1)结构化格式（加了无效果，浏览器看）

...----表示表头区

...----表体区

....------表尾区

(2)直列化格式

... 用于统一控制某一列的格式，取代重复的工作

（例如：用于某一列标红，或者某一列居中）

四、特殊表格技巧

（1）制作凹凸表格：改变table的 bordercolorlight、bordercolordark属性(这是手册中没有的)

Bordercolorlight 设置边框亮时的颜色（boder=”1”时才有用）

Bordercolordark 设置边框暗时的颜色（boder=”1”时才有用）

（2）隐藏表格某部分边框线：改变table下的frame属性和rules属性

（3）细线表格效果公式

①表格自身的border==”0”

②给表格设置背景颜色==细线颜色

③给表格设置、单元格之间距离cellspacing==细线粗细

④设置表格内部背景色

五、仿站小技巧

①结构分析图

②可以通过标签嵌套实现一些复杂布局

③代码尽可能精简，（网站优化）减少网页内存，提高运行速率

这是传智播客张鹏老师的html+css第11节笔记：html超链接使用

一、超链接：Hyperlink 由当前文档到目标文档间的跳转

二、语法…

Target：

_blank 在新窗口中打开

_self 在自身窗口中打开（默认）

_parent在上一级窗口中打开，框架会经常使用

_top 在浏览器的整个窗口中打开，忽略任何框架

三、链接类型

(1) 内部链接：当前网页与网页在同一个站点

(2) 外部链接：当前网页与网页在不同一个站点

(3) E-mail链接：允许访问者向指定的地址发邮件（一般指要付费的企业邮箱）

href=”mailto:电子邮件地址”>

(4) 局部链接：锚点：跳转到同一页面的某个位置or其他文档中的指定位置

1)相同文档：

11

① 创建锚点：…

② 链接锚点：…

2)不同文档：

…

(5) 空链接 … （无目标，用于特效）

例如：

设为首页

onClick=”or=‟url(#default#homepage)‟;epage(„‟)”>设为首页

添加收藏

加入收藏夹

(6) 脚本链接：一种特殊的链接，当单击设置脚本链接的文本or图像时，可以运行相应的javaScript语句。

常用脚本链接：

新浪

关闭窗口：输入 javascript:()

打开窗口：输入javascript:(„文件名‟)

四、小技巧：

1. 增加网页长度，采用空段

„„

Lesson12~13

html表单基础与应用

Post方法可以传递大量信息（主流）

Get方法将值附加到请求该页的URL中，适合传递少量信息（默认）

表单的元素 input标签必须含有name 属性和type属性

1. 文本框：

2. 密码框：

3. 单选框:

4. 多选框：

5. 上传文件：

6. 下拉列表：

分组的下拉列表：

12

7. 多行文本：

8. 按钮

1. 提交按钮

2. 重置按钮

3. 普通按钮

4. 图片按钮

注意：图片按钮的功能相当于提交按钮

Lesson 14 html多媒体应用

一、FLASH动画插入，两种方式

① 通过dw自动生成代码