一些需要记住的点:

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),开始颜色,结束颜色)

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

  

  

中软培训第一周复习总结 --简单的HTML 与CSS的更多相关文章

  1. Python自动化培训第一周学习总结

    Python自动化培训第一周学习结束,看视频复习,把作业完成了. 总体来说,开卷有益. 首先,工具真是好东西,能够极大提升效率,也是人区别于动物所在.想起前任大领导对工具的不屑,本质也是对效率的不屑, ...

  2. 第一周复习二 (CSS样式表及其属性)

    样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head& ...

  3. 第一周复习一 ( HTML表单form)

    form <from id="" name="" method="post/get" action="">& ...

  4. 【吴恩达课后测验】Course 1 - 神经网络和深度学习 - 第一周测验【中英】

    [吴恩达课后测验]Course 1 - 神经网络和深度学习 - 第一周测验[中英] 第一周测验 - 深度学习简介 和“AI是新电力”相类似的说法是什么? [  ]AI为我们的家庭和办公室的个人设备供电 ...

  5. 第一周python入门

    第一编程语言的分类: 1.机器语言  二进制编程 直接操作硬件 优点:执行速度快 缺点:开发效率低   面向机器编程 2.汇编语言 英文标签代替一串特定的二进制,直接操作硬件 缺点开发效率低   面向 ...

  6. 程序设计入门-C语言基础知识-翁恺-第一周:简单的计算程序-详细笔记(一)

    目录 第一周:简单的计算程序 1.1 第一个程序 Hello World! 1.2 变量 1.3 计算 1.4 编程作业及课后讨论 第一周:简单的计算程序 1.1 第一个程序 Hello World! ...

  7. 关于天津中软国际ETC培训中心的见与闻

    半个月的时间转眼即逝,在中软国际天津ETC的实训的两个星期就这样过去了,在中软国际天津站的这段时间也收获了非常多.明确了非常多,了解了很多关于社会就业的知识以及关于软件培训的一些事情.尽管我的了解可能 ...

  8. 201871010105-曹玉中《面向对象程序设计(Java)》第一周学习总结

    201871010105-曹玉中<面向对象程序设计(Java)>第一周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  9. 软工作业-----Alpha版本第一周小结

            软工作业-----Alpha版本第一周小结   Part1.第一周周计划记录 姓名 学号 周前计划安排 每周工作记录 自我打分 yrz(队长) 1417 1.进行任务分析 2.任务分配 ...

随机推荐

  1. 正则表达式的JS验证

    /判断输入内容是否为空    function IsNull(){        var str = document.getElementById('str').value.trim();      ...

  2. FastDFS+Nginx(单点部署)事例

    FastDFS是由淘宝的余庆先生所开发,是一个轻量级.高性能的开源分布式文件系统,用纯C语言开发,包括文件存储.文件同步.文件访问(上传.下载).存取负载均衡.在线扩容.相同内容只存储一份等功能,适合 ...

  3. ORACLE应用调优:请避免SQL做大量循环逻辑处理

    前阵子遇到一个案例:一个同事说以前一个运行很正常的包,突然间比以前慢了很多,执行时间非常长,晚上的作业调用这个包跑了几个小时也没有跑出数据.于是我在跟踪.优化过程中定位到包中一个存储过程的一段SQL, ...

  4. Oracle逻辑结构(TableSpace→Segment→Extent→Block)

    一.逻辑体系结构图 二.逻辑结构图组成介绍 从上表可以看出,一个数据库是由多个表空间(tablespace)组成,一个表空间又由多个段(segment)组成,一个段又由多个区(extent)组成,一个 ...

  5. js作用域问题

    <script type="text/javascript"> alert(i);//Uncaught ReferenceError: i is not defined ...

  6. EF6 的性能优化

    引言 EntityFramework 6 作为微软的开源ORM框架,有着得天独厚的优势.微软也在MVC中主推EF做为ORM框架.但是在实际的项目开发中我们总是感觉到EF有些慢,或者有这样那样的问题.但 ...

  7. 针对github权限导致hexo部署失败的解决方案

    hexo deplay出错,没有反应 今天想在自己的另一个博客地址(链接地址)上更新一下博客,没想到hexo deplay没有反应,以下是解决过程:(更新于 2016-12-24 11:17:43) ...

  8. 旧文备份:CANopen协议PDO的几种传输方式

    (于2007.1.22) 由于PDO所传输的数据内容是无协议的且分配的标识符范围较SDO靠前,因此,其效率和优先级都是较高的,通常用于实时过程数据的传输. PDO是生产/消费类型的通讯方式,数据只有一 ...

  9. 关于C语言的问卷调查

    你对自己的未来有什么规划?做了哪些准备? 答:游戏开发,参与一些游戏的测试,通过自身的游戏体验和其他人的游戏体验来总结什么样的游戏会让人眼前一亮,爱不释手. 你认为什么是学习?学习有什么用?现在学习动 ...

  10. CF444C. DZY Loves Colors[线段树 区间]

    C. DZY Loves Colors time limit per test 2 seconds memory limit per test 256 megabytes input standard ...