zoukankan      html  css  js  c++  java
  • 中软培训第一周复习总结 --简单的HTML 与CSS

    一些需要记住的点:

    day1 HTML格式及简单标签:

      html 文件一般格式:

    1 <html>
    2     <head lang="en">
    3         <meta charset="utf-8">
    4         <title>页面名称</title>
    5     </head>
    6     <body>
    7         页面内容
    8     </body>
    9 </html>

      charset 设置字符编码,避免页面中文内容出现乱码。

      <img />没有闭标签 需要在末尾打斜杠“/”,alt属性不行的时候可以用title属性代替,align 属性可以设置一个段落内图片居左还是居右,还有width和height属性设置照片大小

      <ol>有序列表 <ul> 无序列表都可以用type设置项目标志样式:

        <ol>的默认type 是 1,还有A a 等样式,<ul>不想要小黑点设置type为none.

      分级列表<dl><dt><dd>分级列表,<dd>内可以包含,<ul><ol>

      <h1><p>标签就不做描述了

    day2 <table>标签:

      <table>一般格式:

     1 <table cellpadding="0" cellspacing="0" border="1">
     2             <tr>
     3                 <td>a</td>
     4                 <td>a</td>
     5                 <td>a</td>
     6             </tr>
     7             <tr>
     8                 <td colspan="2">跨两行</td>
     9                 <td rowspan="2">夸两列</td>
    10             </tr>
    11             <tr>
    12                 <td>a</td>
    13                 <td>a</td>
    14             </tr>
    15             <tr>
    16                 <td colspan="3">
    17                     最后一行跨3行
    18                 </td>
    19             </tr>
    20         </table>

      运行结果图为:

      其中cellspacing为表格外边距,即每个单元格的间距,cellpadding为单元格内边距;<td>的colspan和rowspan分别为跨行数和跨列数,

    单元格的大小会随内容改变,固定大小对文字有用,对块及元素无用,依然会撑大单元格,可以对块元素固定大小

      还有一些特殊字符如&copy;表示版权号,&lt;表示<,&gt;表示>..其他的可以查帮助文档

    day3 表单标签<form>:

      <form>标签用来创建一个表单,一般有method,action 属性。method有GET 和POST 两种方法,一般用POST,Post比较安全

    1. get是从服务器上获取数据,post是向服务器传送数据。get是默认方法。
    2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 
    3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。 
    4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。 
    5. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。 

    建议: 
    1、get方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式; 
    2、在做数据查询时,建议用Get方式;而在做数据添加、修改或删除时,建议用Post方式;

    更详细用法:http://blog.163.com/llf_046/blog/static/527371192009224022140/

      action属性指定一个url,在用户提交后转到这个页面

      <input/>同样没有闭标签,他的type属性常用值有text,password,radio,checkbox,submit,reset...

      更多type 值:http://www.w3school.com.cn/html5/att_input_type.asp

      写<input />标签时要有写name属性的习惯,这样能让获取值更方面,radio写单选框的时候,同组单选框应设置相同名字才能实现单选,checked可以

    设置默认选中。

      readonly可设置只读,placeholder可设置灰色描述字段。

    day4 DIV frame 及 css:

    左图为div布局的重要属性的参考图

    div是块级元素,可以设置大小,背景,边框等等,还可以设置float浮动属性,可以实现并排的布局,需要排版的div都要设置float属性

    div内的divmargin-top属性没有效果,可以设置父级DIv的padding-top属性代替

    frame

    frame是框架,可以实现在一个页面内放置几个不同的HTML页面,代码格式如下:

     1 <html>
     2 
     3 <frameset rows="50%,50%">
     4 
     5 <frame src="../example/html/frame_a.html" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">
     6 
     7 <frameset cols="25%,75%">
     8 <frame src="../example/html/frame_b.html" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
     9 <frame src="../example/html/frame_c.html" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">
    10 </frameset>
    11 
    12 </frameset>
    13 
    14 </html>

    效果图:

    需要注意的是如果用到框架 则不需要<body>标签。

    例如设置B框架中的超链接target的属性值为a,然后C框架的name属性为a就可以实现导航的效果,及B中超链接的页面在C框架中显现

     

    css

    css即是将标签的样式打包在一起放在head内或者单独的css文件,然后通过

    <link href="css文件路径" type="text/css" rel="stylesheet">导入css文件

    关于css的命名规范:http://www.cnblogs.com/WebShare-hilda/p/4686067.html

    还有一些目前见过难记有用的样式:

    边框四角圆形:border-radios:5px;

    阴影:box-shadow:0px 0px 3px black inset; inset 内置阴影 可选

    渐变:background:linear-gradint(to 位置(对角渐变的话写两个位置 right bottom),开始颜色,结束颜色)

    还有其他不太接触到日后查文档

     

     

     

     

     

      

      

     

  • 相关阅读:
    团队项目——技术规格说明书
    Scrum Meeting 11.1
    Scrum Meeting 10.31
    Scrum Meeting 10.30
    Scrum Meeting 10.29
    Scrum Meeting 10.28
    Scrum Meeting 10.27
    Scrum Meeting 10.26
    团队作业Week5
    Boost C++: 数据结构---tuple
  • 原文地址:https://www.cnblogs.com/dogLin/p/5839929.html
Copyright © 2011-2022 走看看