中软培训第一周复习总结 --简单的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),开始颜色,结束颜色)

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

  

  

时间: 2024-10-11 17:52:31

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

暑期培训第一周组队赛

DNA Sorting Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 20000/10000K (Java/Other) Total Submission(s) : 9   Accepted Submission(s) : 3 Problem Description One measure of ``unsortedness'' in a sequence is the number of pairs of entries that

图灵ios培训第一周(使用UIWebView创建简易浏览器)

借着给学弟学妹们培训ios的机会,给大家ios新手带来一系列的新手知识博客,希望能给广大ios爱好者以及希望进入ios领域的童鞋们得到帮助.大神路过的请指点. 课前小探索 制作一个简易的浏览器 首先打开Xcode,新建一个工程. 打开main.storyboard 点击View Control 去掉UseAuto Layout和Use Size Classes(新版的Xcode自动排版很不友好,所以每次创建完工程都要去掉对号) 接下来在工具栏的搜索框输入: 拖拽webView到场景中: 点击场景

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

样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head></head>标签内.个人感觉多用于较多或通用的一类标签,用来减少工作量 <style type="text/css"> {} </style> 分为三种: 标签选择器 <style type="text/css">

老男孩Python3.5培训第一周作业

一,博客: 二,编辑登录接口 输入用户名密码 认证成功后显示欢迎信息 输入三次后锁定 三,多级菜单 三级菜单 依次选择进入各自子菜单 所需知识点:列表,字典 可以随时退出到上一级菜单 作业二: 我自己写的: #!/usr/bin/env python #-*-coding=utf-8 -*- #AUTHOR:duwentao username = ['duwentao','liuxiaohui']  #存储用户名 password = ['123456','456789']      #存储对应

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

[吴恩达课后测验]Course 1 - 神经网络和深度学习 - 第一周测验[中英] 第一周测验 - 深度学习简介 和"AI是新电力"相类似的说法是什么? [ ?]AI为我们的家庭和办公室的个人设备供电,类似于电力. [ ?]通过"智能电网",AI提供新的电能. [?]AI在计算机上运行,??并由电力驱动,但是它正在让以前的计算机不能做的事情变为可能. [★]就像100年前产生电能一样,AI正在改变很多的行业. 请注意: 吴恩达在视频中表达了同样的观点. 哪些是深度学

七月份第一周进度总结

说实话,我是不善于写文章的人,因为从小被机械时要求每天写日记,现在孩子的生活这么单调,三点一线式,要是有话可写才怪.长大后稍微看了一点闲书,总算有点无稽之言可写.我参加了一个大专院校的招生工作,以电话的形式和家长学生沟通,为他们填报志愿提供服务,最后推荐一下这个大专院校.这份工作对于一个未来想做程序员的人来说有点难,动的是嘴上工作,不过我觉得良好的沟通能力是一个健全的人必须具备的素质,所以我来了这里.这种工作一般是没有底薪的,靠提成吃饭,工作压力和竞争比较激烈,我想未来程序员的工作是不是也有这么

第一周综合练习

请大家做出如下网页 [备注]左上框为No.1,右上为No.2,左下为No.3,右下为No.4 [要求] 1.除了No.1内的表格外,其他所有地方的框请用div+css来写,练习浮动float.margin.padding 2.No.1制作表格,用上背景色.边框色.文字色 3.No.2制作图片链接,并设置鼠标放上去变手指形状 4.No.3制作背景图片+文字,文字用上颜色.字体.字号,中间用span改变部分文字 5.No.4使用绝对定位和相对定位来放置图片位置 -------------------

【小练习】任务三 第一周综合练习

[小练习]请大家做出如下网页 [备注]左上框为No.1,右上为No.2,左下为No.3,右下为No.4 [要求] 1.除了No.1内的表格外,其他所有地方的框请用div+css来写,练习浮动float.margin.padding 2.No.1制作表格,用上背景色.边框色.文字色 3.No.2制作图片链接,并设置鼠标放上去变手指形状 4.No.3制作背景图片+文字,文字用上颜色.字体.字号,中间用span改变部分文字 5.No.4使用绝对定位和相对定位来放置图片位置 --------------

中软国际长沙ETC培训周志一(20160725-20160731)

前言:本系列日志记录在中软国际长沙ETC培训的这4个月(20160725-201611??)的点点滴滴. 7月23日坐高铁来到长沙.开始了在长沙的新生活. 长沙的美女很多,很辣. 长沙的气温很高,35℃左右. 长沙的口味很重,炒菜必放辣椒. 长沙的公交司机资历都很老. 长沙的湘江很宽,很广. 长沙的人很悠闲,节奏很慢. 25日早上简短的开班仪式,班主任 威廉*喜 (长得好像我的小学语文老师...让我的思绪一下就飘到了遥远的小学三年级) 简单地介绍了一下有关规定,下午就正式上课了. Java的课还