html基础

Html基础:

    无论什么编写语言,编程软件编写出来的网站,网页发送到浏览器被执行后都是HTML语言.

    HTMLHTML由标记组成.从<Html>开始,到</Html>结束.<Html></Html>中包含两大部分分:<head></head><body></body>.<head></head>中有<title></title>标签,来显示网页的标题;脚本语言一般也放在<head></head>中.<body></body>中,用来呈现网页的具体内容.

    在网页中<Form></Form>较为重要.Form表单常用来提交用户的信息,可以用在用户注册,用户登录,修改相关信息,发表留言或内容.提交信息时有两种方式,一种是get请求,一种是post请求.get请求是以查询字符串的形式提交,写在Form属性的action中.在action的值后加”?”之后加查询字符串的类型多个类型之间用”&”连接.post的提交方式可以直接在表单中添加<input  type=”submit”>直接提交;也可以添加一个<input type=”Button”></input>,在Javascript脚本中先进行相应的验证后在提交,把Button的onclick()事件和Form的submit()事件相关联.我们熟知的百度和谷歌这一类搜索引擎都是用get进行提交的;要实现文件上传必须以Post为提交方式 并且设置表单属性enctype="multipart/form-data"<input type=“file” name=“file”/>

         写入标记包括9中:type类型分别是Text,Button,Radio,checkbox,Passwordhidden,image,submit,Reset,file.

单行文本框(text)的常用属性:

                                               Name: 定义控件名称

                                               Value  指定控件初始值

                                               Size   指定控件的宽度

    属性及说明:            Maxlength  表示该文本框输入框允许输入的最大字符数

                           Onchange   当文本改变时要执行的函数

                           onselect   当控件被选中时要执行的操作

                           Onfocus    当文本接受焦点时要执行的操作

 

   密码框(Password): 

                            Name 定义控件名称

                            Value  指定控件初始值,该值就是浏览器一开始在文本框中的内容

                            Size 指定控件宽度,表示该文本输入框所能显示的最大字符数

   属性:

                            Maxlegnth 表示该文本输入框允许用户输入的最大

 

   按钮(Button):

                            普通按钮:<input  type=”Button”/>

   分类:                

                            提交到服务器的按钮:<input type=”submit”/>

                            重置按钮: <inpue type=”Reset” /> 

   按钮的共同属性:

                                     Name 按钮的名称

                                     Value 按钮表面显示的文字

   共同属性:                         onclick 指定单击按钮后要调用的函数

                                     Onfocus 指定按钮接受焦点时要调用的函数 

   单选按钮(Radio):

                                     Name 控件名称

                                     Value 控件的值

   属性:                             checked 设定控件初始状态是被选中的

                                     Onclick 控件被选择时要执行的函数

                                     Onfocus 控件为焦点时要执行的函数 

   下拉列表

                          <select><Option></Option></select>:

                                     Multiple 可多选 

   属性:                          

                                     Name 控件名称 

                                     Size设置列表的高度 

   可输入多行的文本框:            

                             <Textarea></Textarea>

                                     Onchange  指定控件时要调用的函数

                                     Onfocus  当控件接受焦点时要执行的函数

                                     Onblur     当控件失去焦点时要执行的函数

                                     Onselect 当控件内容被选中时要执行的函数

    属性:                          

                                     Name   文字区块的名称,作识别之用,将会传至CGI

                                     Cols    文字区块的宽度

                                     Rows   文字区块的列数,即其高度

                                     Wrap   定义输入内容大于文本域时显示的方式 

    在标签中只有两个<br/>和<hr/>是单标签,其他的是双标签.

    标签中可以有属性,比如:<body>标签中 bgcolor 设置背景色,text 设置文本颜色,link设置超级链接颜色,vlink 设置已使用的超级链接颜色,alink设置为正在被点击的超级链接的颜色.
    连接: 

                             本地链接:< a href =”D:\mypicture\pin.jpeg”>图片</a>

                             外部网络链接<a href =”http://www.baidu.com”>百度</a>

                             文件内部链接:< a name=”标签a ”>flag</a>

                                         <a href=”#标签a”>转到flag初</a> 

                              邮件链接:<a href =”mailto:cj910408@sina.cn”>阿进</a>

   清单:              

                         无序清单<ul>,有序清单<ol>,有序清单type属性:<li type=#A /a/I/i>

   定义清单:         

                     <dl> 用<dl>开始,清单条目用<dt>引导,说明用<dd>引导

   页面板式:

           <p>分段;<br/>换行;<center>剧中标记<hr/>水平线标记<pre>预排版标记<div>层定位标记 

   插入图像:

                  <img src=”图形文件地址”/>

   图像链接:

                  <a href=”资源地址”><Img Src=”URL”></a>

   图片的热点:

                  <map>和<area>

   插入背景音乐:<bgsound src=”音乐地址” autostart=”true” loop=”infinite”>

<table></table>标记很实用.在做网页时经常用到,用来布局.表格可以互相嵌套,<tr></tr>表示一行,<td></td>表示一列.其中,行和列也可以嵌套表格.

框架:常用来设置网站的后台管理,各种WEB应用系统的使用界面.使用框架可以实现一个网页呈现多个窗口的效果,而且,每个窗口通过target可以相会沟通.

         框架的结构:

         <Frameset rows=”%,%,*” border=”数字”>

                   <Frame Name=”top” Src=”….Html”>

                   <Frame Name=”middle” Src=”….Html”>

                   <Frame Name=”Buttom” src=”….html”>

         <Frameset>

注:在<Frameset>标记的文档中,将不再使用<body>标记

多个复杂的窗口(示例):

<Frameset rows=”20%,*” Frameborder=”0”(设置为无框架边框)>

         <Frame Src=”top.Html” name=”topFrame”  scrolling=”no”(不显示滚动条) Noresize=”noresize”(禁止调整框架大小)>

         <Frameset cols=”20%,*”>

         <frame src=”left.html” noresize=”noresize” scrolling=”no” name=”leftframe”>

         <frame src=”right.html” name=”rightframe”(框架名称,便于超文本链接锚标签target属性所引用)>

         </frameset>

</frameset>d

窗口间相互操作:

每个窗口起一个名字,用属性Name来定义,有了窗口的名称,还需要结合target来配合使用,target属性指定了所链接的文本出现在哪一窗口,target的值可以是Name定义的名称,也可以是:_blank(显示一个新窗口),_Self (显示在同一个窗口),_parent(显示在前一份文件的窗口),_top(显示在整个浏览器窗口)

Target示例:(target属性指定了所链接的文件出现在名称为”rithrframe”的框架里)

 

<a href =”right.html” target=”rightframe”>rifht页面</a>

<a href=”buy.html” target=”rithrframe”>buy页面</a>

 

嵌入式框架:Iframe(浮动帧标记),可以用它将一个HTML文档嵌入在一个HTML中显示 .常用来在页面上动态的显示其他系统页面的内容.

示例:

<Iframe Src=”URL” width=”x” height=”X” Frameborder=”x” Scrolling=”[Option]”></Iframe>

其中,URL是文件的路径,既可以是HTML的文件,也可以是文本,ASP等

 

在当今的网页中,重中之重的就是CSS了.有了CSS才使网页呈现出不同的效果,增强了用户的体验,使网页多姿多彩.

实现样式的三种方式:

外部链接CSS:在HTML文件里加一个超级连接,连接到外部的CSS文档(*.css)

内定义CSS:在HTML文件内的<head></head>之间

文本内CSS:在HTML文件的文本内容中,在需要时随时加CSS样式.

根据样式文件与网页的关联方式又分为:

连接(link)外部样式表和导入(@input)外部样式表

CSS:标记选择器,类选择器,ID选择器,符合选择器.作用范围是(或者优先级):ID选择器>类选择器>标记选择器

CSS架构:

<style type =”text/CSS”>p{color:red;font-size:30px;font-family:隶书;}</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值