学习HTML第三天

作者: 官方发布人 分类: HTML 发布时间: 2017-09-04 02:41 ė 6 学习HTML第三天已关闭评论

 

1.1回顾undefined

1、<meta>

a)作用1:告知浏览器通过什么字符编码来解析本页面

b)作用2:供爬虫使用,(seo)

2、<img>

a)用来插入图片,src属性用来选择图片源(source

b)网页上的图片就是三种,gifJPG(jpeg)PNG

c)Alt属性

i.但图片无法显示的时候,将alt说明性文字显示到图片的位置上

ii.给搜索引擎使用,让搜索引擎知道是个什么样的图片。

3、热点

a)作用:点击图片的不同的区域,跳转到不同的地方。

b)热点有三种:运行热点、圆形热点、多边形热点

c) 

1.1回顾

1、<meta>

a)作用1:告知浏览器通过什么字符编码来解析本页面

b)作用2:供爬虫使用,(seo)

2、<img>

a)用来插入图片,src属性用来选择图片源(source

b)网页上的图片就是三种,gifJPG(jpeg)PNG

c)Alt属性

i.但图片无法显示的时候,将alt说明性文字显示到图片的位置上

ii.给搜索引擎使用,让搜索引擎知道是个什么样的图片。

3、热点

a)作用:点击图片的不同的区域,跳转到不同的地方。

b)热点有三种:运行热点、圆形热点、多边形热点

c)

4、<Object>

a)插入flash

b)取出flash的背景颜色:选择flash,在属性面板中选择wmode,将值选择透明

5、<pre>

a)预格式化标签,标签里面的内容是什么格式,浏览器就显示什么格式。

b)作用:

i.用来原样显示代码

ii.调试PHP代码的时候要使用

6、实体

a)&nbsp;           空格

b)&lt;           <

c)&gt;          >

d)&quot;           “

7、表格的作用

a)用来做网页布局的

8、与表相关的标记

a)<table>          表格

b)<tr>              

c)<th>               标题

d)<td>               单元格

9、单元格中数据的对齐方式

a)水平对其  align=       left()  center(中)right ()

b)垂直对其 valign       top()middle()    bottom()

10、单元间距和单元填充

a)Cellspace        单元格间距

b)Cellpadding   单元格填充

11、合并单元格

a)Rowspan  合并行

b)Colspan    合并列

12、表单的作用

a)收集客户输入的数据

13、表单域

a)表单的区域<form></form>

b)提交表单的时候,提交的是表单域中的表单元素的值。

14、表单元素

a)文本框:<Input type=text name=’’ />

b)密码框:<Input type=password name=’’/>

c)单选按钮:<Input type=radio name=’’ value=’’ checked=’checked’/>

d)复选框:<Input type=checkbox name=’’ value=’’ checked/>

e)下拉菜单:<select> <option value=’’
selected=’selected’></option> </select>

f)下拉列表:<select size=’’ multiple=’ multiple’> <option value=’’
selected=’selected’></option> </select>

g)文本域(多行文本) <textarea cols=’’ rows=’’ name=’’></textarea>

h)提交按钮:<Input type=’submit’ name=’’ value=’’/>

i)重置按钮:<input type=’reset’ name=’’ value=’’/>

j)普通按钮:<input type=’button’ name=’’ value=’’/>

15、使用表单

a)Action=’url地址’     action表示数据提交的地址,action=’’表示提交到本页面

b)Method=’get|post’    数据的提交方式

1.2框架

框架属于将要被淘汰的标签,主要应用在后台管理处, w3c建议以后使用内嵌框架。

思考:如何实现在一个浏览器上看到多个页面?

用框架

框架集:<frameset>

框架:<frame>

如果有N个框架,保存N+1个文件

在保存框架的注意事项:

光标放在哪个框架中就保存哪个框架中的页面,这样保存麻烦。如果要保存所有的页面,文件——保存全部(先保存框架集,再保存框架)

 

如何将已经有的页面显示到框架中。

将光标定位到框架中,执行文件——在框架中打开的命令。

框架中显示其他页面用<frame>标记的src属性。

在指定框架中显示页面  语法:target=’框架的名称

1.3内嵌框架(iframe

<iframe
name=”main” src=”main.html” frameborder=”0″
marginwidth=”0″ marginheight=”0″></iframe>

 

Frame:框架

border:边框

margin:边界

src:在内嵌框架中插入页面

连接的页面在指定内嵌框架中打开

target=’内嵌框架带名称

代码如下:

<table width=”700″
border=”1″>

<tr>

    <td
width=”100″>

    <a
href=”
锄禾.html”
target=”main”>
锄禾</a><br
/>

    <a
href=”
.html”
target=”main”>
</a>

</td>

<td>

        <iframe name=”main”
src=”main.html” frameborder=”0″ marginwidth=”0″
marginheight=”0″></iframe>

</td>

</tr>

</table>

1.4关于图片基本概念

1.位图图像:由屏幕上的像素点来描述图像。放大失真,会出现马赛克模糊

2.矢量图形:使用线和面组成图形,所以称为矢量。放大不失真。

3.分辨率:在单位长度上的像素数,通常以“像素/英寸”,网上一般72象素/英寸

4.网站默认尺寸单位为象素。

1.5常见的图象格式

1JPG/JPEG

2Gif

注:二者比较:

1gif颜色数目少,最多256种。JPG颜色细腻丰富,支持颜色多达1600多万种。用于质量要求较高的图像,如人物照片、风景等。

3gif支持透明,jpg没有透明色

4gif支持动画,jpg不支持

3png

无损压缩,质量很好,体积小,此格式越来越被广泛应用

 

在项目中用jpgpng格式的图片

1.6格式转换

打开源图,文件——另存为——选格式——保存即可

1.7图片的优化

(1)改大小:修改画布图像大小,或者直接点击属性面板中的“图像大小”按钮

(2)降分辨率

(3)压缩:文件图象预览品质降得别大太,否则会失真

 

4)做切片:(拿到一个效果图以后,将有用的部分给切下来)

           A、切割

使用切片工具,

           B、文件导出,类型选“仅图象”,切片选择“导出切片”

导出图片的命名规则如下,r表示行c表示列。

           C、拿到dreamweaver中拼图

1.8psfw中几个常用快捷键(两个软件中是一样的)

1ctrl+加号:放大

2ctrl+减号:缩小

3、双击手型工具,将图片自适应大小显示

4Tab键全部显示/隐藏工具面板,在FWF4也可以显示/隐藏工具面板,DW中显示/隐藏工具面板也是F4

5、按住空格键快速切换到手型工具

6ctrl键快速切换到选择工具

1.9网页基本概念

l  1、网站: 所有网页的集合

l  2、首页:也叫主页,但收入网址后打开页面 名称一般为index default,如果一个网站中没有首页,则这个网站无法显示。

l  3、子页命名规则:小写的英文字母或数字(不能中文)

l  4、页面尺寸:以不出现横向的滚动条为准,目前的页面宽度以17纯平为准(1024*768)

1.10  通过设计器插入素材

1.10.1插入图片

第一种方法:点击插入图片的按钮

第二种方法:直接将站点中的图片拖放到页面上即可

1.11  插入文字

文字直接输入,

注意:

回车:换端

Shift+回车:换行

1.12  设计器下做超链接

选择文字或图片,在属性面板上选择连接的地址,或者用指向文件工具连接到指定文件处。

连接文件在新的浏览器中打开,在目录选项中选择_blank

1.13插入表格

1.13.1宽度单位:

1)像素:绝对单位

2)百分比:相对单位

l  最外层表格单位是像素,套用的可以是像素也可以是百分比。

l  边框:一般调成0

l  单元格填充(填充):内容距边的距离。( 默认为1 像素 )一般设为 0

l  单元格间距:单元格与单元格的距离 默认为 2 像素 )一般设为0

1.14标签选择

标签选择用来快速选择标签对象。

1.15合并单元格和拆分单元格

选中单元格,在属性面板上会出现合并单元格和拆分单元格的按钮。

1.16表格布局注意点

l  1.整个页面不要都套在一个表格里,尽量拆分成多个表格;若将内容都放在一个表格中,下载速度会很慢。

l  2. 表格的结构尽量整齐;

1.17拼版的特性

1、表格可以被内容撑开,不能被背景撑开

2、背景默认是平铺的,标签有多大,背景就铺多大

3、内容不能放在内容上面,内容可以放在背景的上面

思考:什么情况下使用背景图?

1、图在图上或字在图上,使用背景图

2、一张图重复出现,使用背景图

1.18表格拼版

代码参照例题

 

本文出自Anpingblog,转载时请注明出处及相应链接。

本文永久链接: http://hezhaoyu.com/archives/329

0
Ɣ回顶部