zoukankan      html  css  js  c++  java
  • Web开发知识点总结

    HTML前言:这是一篇简单的web开发知识点的总结,适用于刚开始学习编程的人来学习的。我是为了能够在熟记熟记这些知识点而总结的一篇文章。

    1       什么是浏览器?

    (1) 浏览器就是接收浏览者的操作(打开一个网址,点击一个链接,点击一个按钮),然后帮助浏览者去Web服务器请求网页内容(HTML格式返回),然后展现成人眼能够看得懂的可视化页面的软件。

    (2) IE==浏览器?这句话是错误呢。IE是浏览器的一种,还有FireFoxOperaChrome等,注意遨游(Maxthon),世界之窗,搜狗浏览器,360浏览器等并不是一种独立于IE的浏览器,其内核还是IE的内核,只不过是换了一个外壳而已,所以用遨游的不能嘲笑用IE的,否则就露怯了。

    (3) 所谓Trident引擎就是IEWebBrowser控件,现在很多非IE核心的浏览器用的是Trident引擎,比如遨游3和搜狗的双核,Chrome,Safari

    2       静态页面,动态页面(*)

    (1) 网站页面分为静态页面和动态页面

     1) 静态页面:有一个Html页面文件保存在服务器上,浏览器需要这个页面的时候就把这个页面文件发给浏览器。

     2) 动态页面:服务器上没有浏览者要看的页面,而是服务器动态生成的Html页面发给浏览器。动态语言的服务器端可以用C#VB.NETJavaphpc等编写。

    3       HTMLXML的联系和区别

    (1) 格式标签:<p></p>创建段落;<br />回车,也可以写成<br>,在Html中有一些标签可以不关闭,<br>就是一个,这是和XML不同的地方(常考),但是为了遵循XHTML规范,推荐像XML一样严格关闭,<br /><img src=’2.gif’ />

    (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(文本框)。

    5       input表单详解

    (1) 点击Submit按钮表单就会被提交给服务器,中文IE下默认按钮文本为提交查询,可以设置value属性修改按钮的显示文本。

    (2) textsize属性为宽度,value为值,maxlength为可以输入的最大长度,readonly为只读字段。

    (3) checkboxchecked属性表示是否被选中。

    (4) radio:相同name属性的为一组,不同radio设定不同的value值,这样通过取指定name的值就可以知道谁被选中了,不用单独的判断。

     (5) file:使用file,formenctype必须设置为multip art/form-dataMethod属性为post

     (6) image:使用src属性指定图片的地址,用来实现美化的“登录按钮”。

    6       <select>标签

    (1) 用来创建类似于Winform中的ComboBox或者listBox

    (2) 如果size属性大于1就是ListBox,否则就是ComboBox。例如下面的两句话的比较:<select multiple=”multiple”>(推荐)或者<select multiple>,那么就是多选的ListBox(size的值为显示出来的列表数量)

    (3) select中的项是<option><option>北京</option>还可以设定项的值:

      <select value=”1”>北京</select>

    (4) 如何实现不选择,添加一个<option value=”-1”>---不选择---</option>,然后编程判断select选中的值如果是-1就认为是“不选择”。

    (5) select分组选项,可以使用optgroup对数组进行分组,分组本身不会被选择,无论对于下拉列表还是列表框都适用。

    7       其它控件

    (1) <label>:在<input type=”text”>前可以写普通的文本来修饰,但是单击修饰文本的时候input并不会得到焦点,而用label则可以,for属性指定要修改的控件的ID

     <label for=”txt1”>选中</label>

     1) 为被修饰的控件设置一个唯一的ID

     2) <label for=”ma”>婚否</labek> <input id=”ma” type=”checkbox” />

    (2) fieldsetGroupBox效果,将控件划分为一个区域,看起来跟规整。

       <fieldset>

            <legend>常用事件</legend>

         <input type=”text” />

    </fieldset>.

    8       样式表,CSS

    (1) CSS(层叠样式表),是用来美化页面的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色,背景颜色,边框等。CSS主要有元素内联,页面嵌入和外部引用三种使用方式,CSS是描述元素的皮肤。

     1) 元素内联,直接将样式写入元素的style属性中:

      <input type=”text” readonly=”readonly” style=”background-color:#FF00FF” />,适用于样式没有可以复用性的场合。

     2) 页面嵌入:在head中加入:

      <style type=”text/css”>

           input{background-color:Red;border-color:Green;}

     </style>

     表示页面中所有的input都要采用指定的样式,适用于样式复用,减少页面体积。

     3) 外部引用,将css内容写入css后缀的文件

       Textarea{background:yellow;}

     然后在页面中引用,在head中加入:<link type=”text/css” rel=”stylesheet” href=”1.css”/>适用于多个页面共享css

    9       (Div),(span)

    (1) 层:<div></div>将内容放到层中,就是将这些内容当成一个整体来进行处理,比如:整体隐藏,整体移动等。DIV非常强大和常用,类似于WinformPanel

    (2) (span)div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局,显示。

    10  常见样式

    (1) CSS计量单位,CSS中表示宽度,距离时有多种计量单位:px(像素)30%(百分比)em(相对单位)等,20px;

    (2) background-color:Red:背景颜色,color:文本颜色。

    (3) border-style:solid;边框风格,实现,还有dotted()等值,border-color:边框颜色;border-边框宽度(默认为0)。例如:

     style=”border-color:Red;border-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>

    <td class=”highlight”>韩迎龙</td>

    <td class=”warning”>盛敬恒</td>

    <td class=”highlight warning”>韩迎龙很棒哦!</td>

    </tr>

    </table>

    12  标签+class选择器

    (1) class选择器也可以针对不同的标签,实现同样的样式名对于不同的标签有不同的样式,只要在样式名前加上标签名即可,例如:

     input..accountno{text-align:right;color:Red;}

     label.accountno{font-style:italic;}

     <input class=”accountno” type=”text” value=”1111111111” />

     <label class=”accountno”>333333333333333</label>

    13  id选择器

    (1) 为指定id的元素设定样式,前面加上“#”。

      #username{font-size:XX-large;}

     <input type=”text” id=”username” value=”aaaaaaaaaa” />

    (2) style,class可以同时组合使用

    <input id=”username” class=”accountno” type=”text” style=”font-size:xx-large” value=”aa”>

    14  更多的选择器

    (1) 关联选择器

    p strong{background-color:Yellow;}表示p标签内的strong标签内的内容使用的样式。

    <strong>韩迎龙</strong>

    <p><strong>韩迎龙<strong><p>

    (2) 组合选择器,同时为多个标签设定一个样式

    h1,h2,input{background-color:Green;}

    <h1>韩迎龙</h1>

    <input type=”text” value=”text”>

    15  伪选择器

    (1) 伪选择器:为标签的不同状态设定不同的样式。

    (2) a:visited:超链接点击过的样式,a:active:选中超链接时的样式。

      a:link:超链接未被访问时的状态,a:hover:鼠标移到超链接时的样式。

    (3) 举例说明如下:

      a:visited{text-decoration:none;}

    a:active{text-decoration:none;}

    a:link{text-decoration:none;}

    a:hover{text-decoration:underline;}

  • 相关阅读:
    任务二 发布作业信息(已完成)
    查看作业信息(任务一 已完成)
    项目冲刺任务之任务场景分析(四)
    项目冲刺之任务场景分析(三)
    解析XML文件的两种方式 SAX和DOM
    解析XML文件的两种方式 SAX和DOM
    iOS开发代码规范(通用)
    随机创建点击对象
    自定义加载等待框(MBProgressHUD)
    KVO、KVC
  • 原文地址:https://www.cnblogs.com/hanyinglong/p/2436434.html
Copyright © 2011-2022 走看看