Web开发知识点总结
前言:这是一篇简单的web开发知识点的总结,适用于刚开始学习编程的人来学习。
1.什么是浏览器?
(1)浏览器就是接收浏览者的操作,然后帮助浏览者去Web服务器请求页内容,然后展现成能够看得懂的可视化页面的软件。
(2)IE=浏览器?这句话是错误的。IE是浏览器的一种,还有FireFox,Opera,Chrome等,注意遨游(Maxthon),世界之窗,搜狗浏览器,浏览器等并不是一种独立于IE的浏览器,其内核还是IE的内核,只不过是换了一个外壳而已。
(3)所谓Trident引擎就是IE的WebBrowser控件,现在很多非IE核心的浏览器用的是Trident引擎,比如遨游3和搜狗的双核,Chrome,Safari。
2.静态页面,动态页面(*)
(1)站页面分为静态页面和动态页面
1)静态页面:有一个Html页面文件保存在服务器上,浏览器需要这个页面的时候就把这个页面文件发给浏览器。
2)动态页面:服务器上没有浏览者要看的页面,而是服务器动态生成的Html页面发给浏览器。动态语言的服务器端可以用C#,,Java,PHP,c等编写。
ML和XML的联系和区别
(1)格式标签:p/p创建段落;br/回车,也可以写成br,在Html中有一些标签可以不关闭,br就是一个,这是和XML不同的地方,但是为了遵循XHTML规范,推荐像XML一样严格关闭,br/,imgsrc=f/
(2)属性值:HTML中属性值可以用单引号括起来,也可以用双引号括起来,甚至不用引号都可以。
(3)注释:HTML使用和XML一样的。!--注释内容--
4.表单
(1)form标签是表单标签,如果要把数据提交到服务器,则需要将input,Textarea,select等表单元素放到form中。
(2)input是主要的表单元素,type的可选值:submit(提交按钮),Button(普通按钮),CheckBox(复选框),file(文件选择),Hidden(隐藏字段),Image(图片按钮),PassWord(密码框),Radio(单选按钮),reset(重置按钮),text(文本框)。
put表单详解
(1)点击Submit按钮表单就会被提交给服务器,中文IE下默认按钮文本为”提交查询”,可以设置value属性修改按钮的显示文本。
(2)text:size属性为宽度,value为值,maxlength为可以输入的最大长度,readonly为只读字段。
(3)checkbox:checked属性表示是否被选中。
(4)radio:相同name属性的为一组,不同radio设定不同的value值,这样通过取指定name的值就可以知道谁被选中了,不用单独的判断。
(5)file:使用file,则form的enctype必须设置为multipart/form-data,Method属性为post。
(6)image:使用src属性指定图片的地址,用来实现美化的“登录按钮”。
lect标签
(1)用来创建类似于Winform中的ComboBox或者listBox。
(2)如果size属性大于1就是ListBox,否则就是ComboBox。例如下面的两句话的比较:selectmultiple=”multiple”(推荐)或者selectmultiple,那么就是多选的ListBox。(size的值为显示出来的列表数量)
(3)select中的项是option,option北京/option还可以设定项的值:
selectvalue=”1”北京/select
(4)如何实现不选择,添加一个optionvalue=-1—不选择—/option,然后编程判断select选中的值如果是-1就认为是不选择。
(5)select分组选项,可以使用optgroup对数组进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都适用。
7.其它控件
(1)label:在inputtype=text前可以写普通的文本来修饰,但是单击修饰文本的时候input并不会得到焦点,而用label则可以,for属性指定要修改的控件的ID。
labelfor=txt1选中/label
1)为被修饰的控件设置一个唯一的ID。
2)labelfor=ma婚否/labekinputid=matype=checkbox/
(2)fieldset:GroupBox效果,将控件划分为一个区域,看起来跟规整。
fieldset
legend常用事件/legend
inputtype=text/
/fieldset.
8.样式表,CSS
(1)CSS(层叠样式表),是用来美化页面的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色,背景颜色,边框等。CSS主要有元素内联,页面嵌入和外部引用三种使用方式,CSS是描述元素的皮肤。
1)元素内联,直接将样式写入元素的style属性中:
inputtype=textreadonly=readonlystyle=background-color:#FF00FF/,适用于样式没有可以复用性的场合。
2)页面嵌入:在head中加入:
styletype=text/css
input{background-color:Red;border-color:Green;}
/style
表示页面中所有的input都要采用指定的样式,适用于样式复用,减少页面体积。
3)外部引用,将css内容写入css后缀的文件
Textarea{background:yellow;}
然后在页面中引用,在head中加入:linktype=text/cssrel=stylesheethref=s/适用于多个页面共享css。
9.层(Div),块(span)
(1)层:div/div将内容放到层中,就是将这些内容当成一个整体来进行处理,比如:整体隐藏,整体移动等。DIV非常强大和常用,类似于Winform的Panel。
(2)块(span):div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局,显示。
10.常见样式
(1)CSS计量单位,CSS中表示宽度,距离时有多种计量单位:px(像素),30%(百分比),em(相对单位)等,width:20px;
(2)background-color:Red:背景颜色,color:文本颜色。
(3)border-style:solid;边框风格,实现,还有dotted(点)等值,border-color:边框颜色;border-width:边框宽度(默认为0)。例如:
style=border-color:Red;border-width:1px;border-style:dotted;
(4)display:元素是否显示,可选值none(不显示),block(显示为块级元素,此元素前后会带有换行符),inline(显示为内联元素,元素前后没有换行符)等。
(5)cursor:鼠标在元素上时显示的光变图标,可选值:cursor(默认光标),pointer(超链接上的手),text(输入Bean),wait(忙沙漏),help(帮助)等。
(6)li不显示圆点,list-style-type:none;一般设在li或者ul上。
11.样式选择器
(1)对于非元素内联的样式样式需要定义样式选择器,通俗的说就是这个样式适用于哪些元素,三种:标签选择器,class选择器和ID选择器。
(2)标签选择器:input{border-color:Yellow;color:Red;}。对于指定的标签采用统一的样式。
(3)class选择器:以定义一个命名的样式,然后再用到它的时候设定元素的class属性为样式的名称,还可以同时设定多个class,名称之间加空格。例如:
.warning{background:Yellow;}
.highlight{font-size:XX-large;cursor:help;}
table
tr
tdclass=highlight韩迎龙/td
tdclass=warning盛敬恒/td
tdclass=highlightwarning韩迎龙很棒哦!/td
/tr
/table
12.标签+class选择器
(1)class选择器也可以针对不同的标签,实现同样的样式名对于不同的标签有不同的样式,只要在样式名前加上标签名即可,例如:
input..accountno{text-align:right;color:Red;}
countno{font-style:italic;}
inputclass=accountnotype=textvalue=/
labelclass=accountno/label
选择器
(1)为指定id的元素设定样式,前面加上#。
#username{font-size:XX-large;}
inputtype=textid=usernamevalue=aaaaaaaaaa/
(2)style,class可以同时组合使用
inputid=usernameclass=accountnotype=textstyle=font-size:xx-largevalue=aa
14.更多的选择器
(1)关联选择器
pstrong{background-color:Yellow;}表示p标签内的strong标签内的内容使用的样式。
strong韩迎龙/strong
pstrong韩迎龙strongp
(2)组合选择器,同时为多个标签设定一个样式
h1,h2,input{background-color:Green;}
h1韩迎龙/h1
inputtype=textvalue=text
15.伪选择器
(1)伪选择器:为标签的不同状态设定不同的样式。
(2)a:visited:超链接点击过的样式,a:active:选中超链接时的样式。
a:link:超链接未被访问时的状态,a:hover:鼠标移到超链接时的样式。
知行常年开设前端开发、PHP课程,欢迎咨询。
(尤老师)
(马老师)
全国治白癜风最好医院白癜风最好的医院