黑马程序员_如何使用Html创建简单站点

-----------Windows Phone 7手机开发.Net培训.net学习型技术博客、期待与您交流! ------------

1、  浏览器

a)         浏览器是万维网(Web)服务的客户端浏览程序。可向万维网(Web)服务器发送各种请求,并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。

b)  事务所网页浏览器是个显示网页服务器或档案系统内的文件,并让用户与此些文件互动的一种软件。它用来显示在万维网或局部局域网络等内的文字、影像及其他资讯。这些文字或影像,可以是连接其他网址的超链接,用户可迅速及轻易地浏览各种资讯。

c)  IE,360安全浏览器,火狐,世界之窗,TT,搜狗,谷歌,operamaxthon(傲游),greenbrowser,chromeplus(枫树),彩虹浏览器, Safari for windows,qq浏览器,内游浏览器,极速浏览器,Lunascape,糖果浏览器,IQ浏览器,Gecko内核浏览器, 花儿世界 儿童浏览器  ,彗星浏览器,Gomodo Dragon,蜜蜂浏览器,Slim Browser……

2、浏览器的核心

       IE 内核 Trident  ,WebBrowser 控件

       ②非IE 内核是 WebKit

③火狐firebox 内核是Gecko netapace 6.0

3Web开发过程中的一个重要的也是最头疼的问题是浏览器的兼容。测试不同版本的IE可以用IETester .

4、网站页面分为静态页面和动态页面。

静态页面:是实际存在的,无需经过服务器的编译,直接加载到客户浏览器上显示出来。静态页面需要占一定的服务器空间,且不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改(通过fso等技术例外)

常见的静态页面举例:.html扩展名的、.htm扩展名的。

动态页面:

u       动态页面是以ASPPHPJSPPerl、或CGI等编程语言制作的;

u       动态页面上的内容存在于数据库中,根据用户发出的不同请求,其提供个性化的网页内容;

u       动态页面内容不是存在于页面上,而是在数据库中,从而大大降低网站维护的工作量;

5.网页的基本框架

<html>

 

<head>

<title>网页标题</title>

</head>

 

<body>

    主页面

</body>

 

</html>

 

6.meta标签:解决网页乱码问题

<meta http-equiv="content-type" content="text/html;charset=gb2312">

charset=gb2312/big5/iso-8859-1

 

7.设置网页背景颜色和背景图片

<body bgcolor=颜色  background=“图片所在路径”>

 

8.标题标签:<hn></hn>共六级,号越小字体越大

 

9.文字颜色、大小、字体标签:<font size="" color="" face=""></font>

 

10.特殊符号:转义码,以&开始,以;结尾

&nbsp; 空格           &gt;大于号    &lt;小于号 &copy;版权号   &quot;”引号

 

11.段落标签:<p align ='center/left/right'></p>

   *换行标签:<br>强制换行

 

12.图像标签:<img src="图片路径" width="宽" height=“高” alt=“浮动文字”></img>

引入gif动画也用img标签

 

13.图像与文字的对齐方式

  <img align="top/bottom/left/right/middle">

 

14.水平线<hr  size="粗细" width=“长度”  color=“颜色”  noshade=“是否是实心,没有阴影效果”        align="left/center/right"> 若画竖线将size调大点,width调小

 

15.列表:有序和无序

     无序:<ul type="disc(默认实心圆)circle(空心圆) square(空心方)">

               <li>内容</li>

               <li>内容</li>

               .............

            </ul>

      有序:<ol type=“1/a/A/i/I”>

                  <li>内容</li>

                  <li>内容</li>

                  .............

            </ol>

 

16.预格式文本:<pre>要在网页中显示的格式文本</pre>

 

17.链接:      

     链接到其他页面:<a href="要链接的页面地址">热点文字或图片</a>

     链接到本页面:1)设定锚记 <a name="锚记">主题名称</a>

                                2)   链接锚记<a href="#锚记名称">主题名称</a>

     链接到邮箱:<a href="mailto:邮箱地址">热点文字</a>

 

18.滚动:<marquee scrolldelay="" direction="up/down/left/right"></marquee>

     scrolldelay:滚动延迟,以ms为单位

     direction:滚动方向 默认从右向左

     两个方法:鼠标放到图片上停止滚动:onmouseOver="this.stop()"

            鼠标离开后开始滚动:onmouseOut="this.start()"

 

19.写出HTML中的单标记标签

<br>

<img>

<hr>

<meta>

 

20.HTML中的注释<!--注释-->

 

21.创建表格基本框架:border属性,用来设置表格边框

align 横向对齐方式   valign  纵向对齐方式

<table border="">

  <tr>

         <th>//表头标签

                <td>内容</td>

                <td>内容</td>

                .....  

         </th>

  </tr>

          <th>

                <td>内容</td>

                <td>内容</td>

                .....  

         </th>

  <tr>

  ……

  </tr>

</table>

 

22.表格属性(9个):border:边框;width:宽度;height:高度;bordercolor:边框颜色

       bgcolor:整个表格的背景颜色;background:整个表格的背景图像

       align:文字在单元格中的对齐方式(left/center/right)

cellspacing:表格间距;(内框宽度)cellpadding:文字与表格边框的距离(单元格填充或单元格边距)用在table中的两个属性

   表格、行、单元格都可以设置背景颜色,表格和单元格可以设置背景图像,但行不可以;并且单元格的背景色可以覆盖行的背景色,而行的背景色又可以覆盖表格的背景色和图像。

align属性在table中表示整个表格针对页面的对齐方式,而写在tr和td中,则表示文字在单元格中的对齐方式

 

23.表单的基本结构:

<form name="form1" method="post/get" action="url">

  <input name="" type="" value="" size="" maxlength="" checked="">

  .........

</form>

注意:post/get两种表单提交方式的区别:post提交方式提交表单信息后,浏览器地址栏不发生变化,安全;而get提交表单信息后,浏览器地址栏发生变化,会暴露相关用户信息,不安全

 

24. 文本框:text (name,type,size,value,maxlenght)

   密码框:password(name,type,size,value,maxlenght)

   单选按钮:radio(name,type,value,checked)为了达到互斥的效果,要求名字必须相同

   复选框:checkbox(name,type,value,checked)名字可以不相同

   *列表框:<select name="" size="行数">

              <option value="" selected="selected默认被选中">列表内容</option>

              <option></option>

            </select>

   feildSet:GroupBox效果,将控件划分一个区域,看起来更规整

        <fieldSet>

            <legend>个人信息</legend>

            <input type=”text”/>

        </fieldSet>

 

   按钮:button/submit/reset(name,type,value)

   *多行文本框:textarea(name,cols,rows)

                <textarea name="" cols="" rows="">显示内容</textarea>

 

25. 框架:(有框架集就不能有body标签)

    <frameset  cols="25%,40%,*" rows="20%,*" border="">

        <frame src="url">

    </frameset>

 

   <a href="" target=""></a>

 

26. 四个target目标区别:

_blank:新启一个窗口打开

_self:在同一个窗口打开(默认)

_parent:在上一级窗口打开

_top:在整个浏览器窗口打开

 

27.样式表的基本结构(样式表要在head标签中写)

<style type="text/css">

选择器{属性1:值1;属性2:值2;.......}

</style>

注意:如果选择器是一个类,那么在定义的时候类名前面要加.点,在body中使用时class="类选择器名称"不用加.点

 

28.文本属性:

大小:font-size(以像素为单位 eg:24px)

字体:font-family(宋体/隶书)

颜色:color

对齐方式:text-align(left/center/right)

样式:font-style(normal/italic(斜体)/oblique)

粗体:font-weight(bold/bolder/light/lighter)

 

29.背景属性:

背景颜色:background-color

背景图像:background-image(url("图像地址"))

背景平铺:background-repeat(repeat/no-repeat/repeat-x/repeat-y)

 

 

30.方框属性

边界属性:margin-top/margin-bottom/margin-left/margin-right

边框属性:border-style(边框样式)/border-width(边框宽度)/border-color(边框颜色)

border-right-style/border-left-style/border-top-style/border-bottom-style

border-style值为:

none :  默认值。无边框。不受任何指定的 border-width 值影响

hidden :  隐藏边框。IE不支持

dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线

solid :  实线边框

double :  双线边框。两条单线与其间隔的和等于指定的 border-width 值

groove :  根据 border-color 的值画3D凹槽

ridge :  根据 border-color 的值画3D凸槽

   

填充属性:padding-top/padding-bottom/padding-left/padding-right

 

31.特殊样式

未被访问的链接样式:A:link{color:red}

已被访问过的链接样式:A:visitied{color:green}

鼠标悬浮在链接上的样式:A:hover{color:yellow}

鼠标正在按下时的样式:A:active{color:bule}

 

 

设置没有下划线的链接样式:text-decoration:none(underline)

 

 

32. 样式表的3类应用方式:

1)内嵌样式表:写在head标签中的样式

2)行内样式:写在标签中增加style属性

3)外部样式表:将所有样式放到一个文件中,以.css结尾的文件名

在使用的时候有两种用法:

   a.链接外部样式文件(在head标签中写)

    <link rel="stylesheet" type="text/css" href="newstyle.css">

    rel:表示网页中使用这个样式

    type:文本类型样式

    href:样式文件名称

   b.导入样式表(在head标签中写)

@import 样式文件名.css;

层(div):是将内容放到一个矩形的区块中,会影响布局。

块(span):只是把一段内容定义成一个整体进行操作,但不影响布局、显示。

 

样式选择器

CSS选择器共有三种:标签选择器、ID选择器、类选择器。

还可以:标签选择器+class选择器

33.在Dreamweaver中设置所有标签的属性在哪里设置?

属性面板

34.使用Dreamweaver编辑文本时,换行及换段如何实现

换行:Shift+Enter

换段:Enter

35.开发网站的步骤

需求分析、网站制作、测试网页、发布网站

36.页面布局有哪几种?

框架布局、表格布局、DIV层布局、DIV层布局+表格布局

37.ID样式如何定义

#样式选择符 id=""

38.使用模版的好处

可以重用  将内容和设计相分离

39.模版文件自动存储在站点的哪个文件夹下

Templates

 -----------Windows Phone 7手机开发.Net培训.net学习型技术博客、期待与您交流! ------------

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值