zoukankan      html  css  js  c++  java
  • # 基础(9)--网页

    XHTML语法标准

     

    <html>

    <head>

    <title>标题</title>

    <head>

    <body>

     

    </body>

    </html> 

     

     

    HTMLXML的联系与区别

    属性值:

    HTML中的属性值既可以用单引号括起来,也可以用双引号括起来,甚至不用引号括起来也可以,建议用引号括起来。

    注释:

    HTMLXML一样的。<!—注释内容-->

    特殊字符:

    HTML< . >是有特殊含义的。

    <   (< less than)

    >  (>greater than)

      (空格 no-break space) 

     

    格式标签:

    <p></p> 创建段落

     

    HTML不把“ ”当成空格,因为在HTML中经常有缩进,如果把缩进的空格在浏览器中以空格的形式展现的话,排版会很麻烦。

     

    <center>要居中的字</center>

    <br/> 回车 开始即结束,只是换行,没有空白

    <p></p>中间有空白

    <b>要转换成粗体的字</b>

     

    H标签:

    HTML定义了<h1></h1><h6></h6>六个标签,分别表示不同大小的字体。

     

    <font></font>字体标签

     

    Url: 统一资源定位符(URL英语UniformResourceLocator的缩写)也被称为网页地址,是因特网上标准的资源的地址。表示资源在网络中的地址。

     

    超级链接:

    <a href = “http://www.baidu.com”>百度网</a>

     

    <a>中还可以嵌套图片,这样就可以点击图片就打开网页

    <a href = “http://www.baidu.com”> 

    <img src = “1.jpg”/>

    </a>

     

    “/”表示网站跟目录

    “../”表示父目录

    ..//..//”表示父目录的父目录

    ./或者不写任何斜线表示当前路径的目录,站内引用最好使用相对URL,这样改变域名,目录改变也不受影响。

     

    <a>target属性设定为“_blank”就可以在新窗口中打开链接。

     

    Imgalt属性为图片无法显示时的显示文本

           Border属性指定边框

           Height 属性

           Width 属性

     

     

    列表:

    无序列表<ul></ul>  unorderlist

    有序列表<ol></ol> orderlist

     

    表格:

    <table></table>在内部通过<tr></tr>创建行,在<tr>内部通过<td></td>创建单元格

    可以将table 的属性设为0来隐藏表格线.

    <tr>的属性:align 

    Rowspan colspan 进行单元格的合并

     

    子标签默认继承父标签的属性,如果自己单独指定了属性,则会覆盖父类的属性。

     

    表单:

    <from></from>

    Action 把页面提交给谁

     Input 主要表单元素

     Type 可选值

          Submit 提交按钮,点击被提交到服务器

          Button 普通按钮

    Checkbox  chencked 属性是否被选中

    Hidden 隐藏字段

    Image  图片按钮

    File 文件选择框 method= POS(*)  multiport  enctype才能提交给服务器

    Password 密码框

    Radio 单选按钮,name同一组才能相互排斥

    Reset  重置按钮

    Text  文本框 size readonly  

     

    Ctrl +j  把可选的值提示出来

     

     

    缩略图 制作小图 超链接大图  要有两个图 一大一小

     

    Checked readOnly 这种只有一种可选属性值都可以省略属性值,可以只写属性名而不懈属性值。

     

    <select>标签:

    用来创建类似于WinForm中的ComboBox 或者ListBox 

    如果Size>1 ListBox

         否则 为ComboBox

    Multiple = multiple

    <option></option>size的值为显示出来的列表数量。

    Selected  指定哪一项处于被选择的状态

     

    不选择value的值默认为-1 

     

    Value的值不会改变

     

    分组:

    <optgroup  lable=”城市”><option></option> </optgroup>+

    多行文本

    <textarea>

    </textarea>

    Cols   rows 属性表示行数和列数

     

    <lable>

    <input type = "text"/>前可以写普通的文本来修饰,但是单击修饰文本的时候,input并不会得到焦点,而用lable则可以。For属性指定要修饰的控件的ID 

    <tr ><td ><lable for = "password1">重复密码</lable></td><td><input type ="password" id = "password1"/></td></tr>

     

     

    Fieldset :comboBox的效果

    <fieldset>

    <legend>常用</legend>

    <.....>

    </fieldset>

     

    <a href = "htmlpage.htm">同意</a>

    点击同意链接到htmlpage.htm

     

    样式表CSS层叠样式表

    美化页面用的,CSS描述元素的皮肤

    CSS主要有元素内联、页面嵌入和外部引用方式。

    1)在某个元素的Style设置样式

    2)页面嵌入

    <head>

    <style  type = "text/css">

      Input {

         Border-botton-color:green;

         Background-color:red;

    }

    </style>

    </head>

     

    3)引用文件   .css文件

    <head>

    <title></title>

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

    </head>

     

    <div></div>

    将内容放到层中,就可以将这些内容作为一个整体进行处理,比如整体隐藏、整体移动等。

     

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

     

    常见样式:

    计量单位

    Px (像素)

    30% 百分比

    Em相对单位

    Borderstyle

    Display

    Cursor 鼠标在元素上显示的光标图案

    Li 不显示圆点 把LIst-style-Tyoe 的属性设为none

    <body style = "cursor:URL(图片后缀名为cur或者为ani)">

     

     

     

    选择器

    1)class选择器

    <head>

    <style type = "text/css">

    .warning{border:   }

    .hieggg{font-size}

    </style>

    </head>

     

    <div class = "warning"> 大家好</div>

    2)标签+class选择器

    Input.account{    color :  }

    Lable.account{   fontsize  }

     

    <input  class = "account"   type = "text"  value = "111"/>

     

    3)ID选择器

    为指定的ID的元素设定样式,ID前加

    #username

    {

        Font-size: XX-large;

    }

    <input id = "username" type = "text"  value = "fhasdgh">

     

    关联选择器

    P strong { background-color}

    表示p标签内的strong 标签的内容的使用样式

     

    <head>

    </stryle>

    <strong >   </strong>仅仅是加粗

    <p><strong >   </strong></p> 不仅加粗,而且还有p strong 

    </style>

    </head>

     

    组合选择器

    H1,H2,input{backgroud-color:green}

     

    伪选择器:

    为标签的不同状态设定不同的样式

    A:visited 超链接点击的样式

    A:active 选中超链接时的样式

    A:link 超链接未被访问时的状态

    A:hover 鼠标移到超链接时的状态

    一般都放在.CSS文件中

     

     

     

  • 相关阅读:
    博士考试复习过程总结
    制作在Linux、Unix上以daemon方式启动Apusic的详细步骤(转)
    重开Blog
    给计算机的兄弟姐妹们补补身体→煲银耳粥
    被人夸成像设计师,高兴呐
    今天问题总结(Hibernate配置参数访问Oracle,Linux下的Apusic自启动)
    HDU ACM 1272 小希的迷宫
    Uva 10115 Automatic Editing
    HDU ACM 1162 Eddy's picture(MST)
    Uva 10474 Where is the Marble?(水题)
  • 原文地址:https://www.cnblogs.com/sly-tongtong/p/3688287.html
Copyright © 2011-2022 走看看