web开发第一周
第一天:HTML基础内容。 超文本标记语言,Hyper Text Makeup Language.
列表(清单),表格,框架,和表单,四个方法还不是很熟练。
列表,list,分OL和UL,表格的每个单元是li,格式是
<ul >我在过马路
<li>人才</li>
<li>资本</li>
<li>市场</li>
</ul>
<ol type="1"><li>我们是一个人</li>
<li>我们是两个人</li>
</ol>
<ul type="disc">
<li>我们是一个人</li>
<li>我们是两个人</li>
</ul>
如果不想要前面的序号,则需要用到CSS,基本的HTML是无法修改的(css中在UL选择器中添加 list-style:“none”说明)
观察网页中的源文件,很多都是用列表的结构来做的。
表格,table(画一个容器),tr(画一个表格列),td(画一个储存格)。
<table border="1" bgcolor="gray" cellspacing="5" cellpadding="3" bordercolor="#FF00FF" color="dark" cols="4" width="80%">
<caption>我们一起唱歌</caption>
<tr align="center">
<td bgcolor="red" align="center" rowspan="3">我们在一起</td>
<td>真的吗?</td>
<td>真的吗?</td>
</tr>
<tr>
<td colspan="2">我们在一起</td>
</tr>
<tr>
<td >我们在一起</td>
<td >我们在一起</td>
</tr>
</table>
</center>表格用CSS的话使用绝对定位相对定位浮动什么的也可以。
框架,有一个iframe还不错,w3school上面也有看到,frameset和frame用的少
<iframe src=”http://www.baidu.com”width=”100%”>
在live writer如果写的话会加载网页,应该是设置的问题。
表单,forumn,也是一个容器,有一个作业说明的挺好,
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<B>免费开通人人网帐号</B> <br><br>
<form action="http://your.isp.com/cgi-local/example.cgi" method="POST">
注册邮箱:
<input type="Text" name="phone" value="" size="27" maxlength="8">
<br><br>
你还可以使用<a href="index.html" name="zh" > 帐号</a>或者<a href="index.html" name="sjh" >手机号</a> 注册<br><br>
创建密码:
<input type=="Text" name="password" value="" size="27" maxlength="8">
<br><br>
真实姓名:
<input type="Text" name="name" value="" size="27" maxlength="8">
<br><br>
性别:<input type="Radio" name="gender" value="" >男<input type="Radio" name="gender" value="" checked>女
<br><br>
生日:
<select name="birthday">
<option value="a">1991</option>
<option value="b" selected>1992</option>
<option value="c">1993</option>
<option value="d">1994</option>
<option value="e">1995</option>
</select>
年
<select name="birthday">
<option value="a">1</option>
<option value="b" selected>2</option>
<option value="c">3</option>
<option value="d">4</option>
<option value="e">5</option>
</select>
月
<select name="birthday">
<option value="a">1</option>
<option value="b" selected>2</option>
<option value="c">3</option>
<option value="d">4</option>
<option value="e">5</option>
</select>
日
<br><br>
我现在:
<select name="position">
<option value="gd" >广东</option>
<option value="hn" >湖南</option>
</select>
<br><br>
<input type="Image" name="submit" align="BOTTOM" src="verycode.gif">
<a href="index.html" name="zh" >看不清换一张</a>
<br><br>
验证码:
<input type="Text" name="yzm" value="" size="10" maxlength="10">
<br><br>
<input type="Image" name="submit" align="BOTTOM" src="btn_reg.gif">
<br><br>
用户留言<br><br>
<textarea name="comments" cols="40" rows="4" wrap="VIRTUAL" >
这是预设的字句,通常留空的,随你喜欢。</textarea></form>
</body>
</html>将其中图片替换之即可。
类型比较多,用时查表即可。
还有一个<Link>(用于head间
<link href="URL" rel="relationship">
)和<a>(<a href="index.html" name="hello" target="_top"> )以及<img>(<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif"> )的标签挺有用的。还有在<head>标签里面用的<meta>里面有个
<meta http-equiv="refresh" content="10; url=http://www.hkiwc.com">可以实现自动刷新,挺有用的,其他的用于搜索引擎,以及HTML文件和编码语系列。
也可插入多媒体,比如音乐、视频等。
还有一些<big> <strong>字体设定之类的。
HTML主要是掌握一些主要的结构,HTML页面,HEAD头,body还是框架,多用P来标记段落和用小标题来区分字体的大小。HTML相当于是一副骨架,骨架好了,才好用CSS来穿衣服,不用花太多功夫,CSS就能装点美丽。
第二天:CSS基础。
CSS东西太多,主要是掌握和HTML结合的方式以及CSS的几种选择器。
和HTML结合的方式有四种,行内(直接在标签内的类型中使用,但只作用于具体标签
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>
),内嵌结合(写在HEAD内,可作用于全局
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
),导入(写一个js,导入进去
<style type="text/css">
@import url(css_3.css);
div { color:#FF0000;}
</style>
),链接(用link链接进去<link rel="stylesheet" type="text/css" href="css_3.css" />)。
考虑代码规范和样式优先级,就近原则;从上到由外到内,优先级降低。
选择器有六种,HTML标签选择器,class选择器(.可以作用于多个),id选择器(#一个标签只能用一个id),上下文选择器(用空格 可作用多个比如div.li),组合选择器(用逗号),伪元素选择器(主要是链接的hover,linked,activied等)。
其他就是一些常见操作,比如对字体、定位(position、clear、float、z-index)、盒子模型(border、margin、padding)、curson(似乎用的少,不过作为用户体验还是挺不错的)、文本、背景、列表等。查表即可。在定位的时候要理解CSS的流的思想,以及盒子的模型。
有一个菜单的代码,
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>菜单制作</title>
<style type="text/css">
ul li{list-style:none;
float:left;
}
#menu{background-color:#383838;
width:980px;
height:30px;
margin:0 auto;
}
#menu li a{color:white;
text-decoration:none;
padding:0 15px;
font-size:25px;
font-weight:bold;
display:block;
line-height:30px;
}
#menu li a:hover{background:url('image/forumMenuBg.jpg') repeat-x;
}
</style>
</head>
<body>
<!--导航菜单开始-->
<div id="menu">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">学习论坛</a></li>
<li><a href="#">学员问答</a></li>
<li><a href="#">IT圈子</a></li>
<li><a href="#">实时课堂</a></li>
<li><a href="#">客户端下载</a></li>
<li><a href="#">帮助中心</a></li>
</ul>
</div>
<!--导航菜单结束-->
</body>
</html>
草草写就,有空修正,尽量写短。
web开发第一周的更多相关文章
- java web开发阅读笔记:第一章
学习该书前所用推荐书籍<名师讲坛—java开发实战经典> 一web开发前奏 1.1网页发展 首先搞懂. 1.HTTP:超级文本传输协议,是一种通讯协议. 通过这个网络协议WW浏览器与WWW ...
- 调查显示数据分析已取代Web开发成为第一用例
一项关于Python的开发者调查显示,编程语言现在主要用于数据分析,取代了之前的第一个用例Web开发. 去年秋天,由Python软件基金会和开发人员工具供应商JetBrains进行,2018 Pyth ...
- IT自由职业者的第一个月(下)——为什么放弃5年嵌入式驱动开发转到WEB开发?
如果单从兴趣来看,其实我对Linux内核,Android中间件的兴趣要高于WEB,何况还有这么多年的经验积累,何必从头探索一个新的技术方向呢? 这里面原因是很多的,最核心的大概是以下4 ...
- python web开发——django学习(一)第一个连接mysql数据库django网站运行成功
1.新建一个项目 2.新建一些文件夹方便管理 3.新建一个项目叫message 4.连接数据库 python web开发Django连接mysql 5.在数据库里自动生成django的表 6.运行 ...
- .NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- 转载:.NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- 201521123042 Java第一周学习总结
1. 201521123042 <Java程序设计>第一周学习总结 a.用notepad++和eclipse编写Java程序 b.安装Java Q1.为什么java程序可以跨平台运行?执行 ...
- Web开发人员vs网页设计师
Web开发人员vs网页设计师 我们都遇到过,但实际的区别是什么?如果您是该领域的新手,请阅读详细内容,这些内容比您想象的更重要. 经过几周(或几个月)的规划和准备,进行市场调查,与其他企业家交谈,现在 ...
- 201772020113李清华《面向对象程序设计(java)》第一周学习总结
201772020113<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com b ...
随机推荐
- 微信公共服务平台开发(.Net 的实现)2-------获得ACCESSTOKEN
成为了开发者之后微信平台会给您appid和secret,在订阅号中是没有的,所以因该申请一下服务号 有了ACCESSTOKEN才能做添加菜单,上传/下载图片等功能 private string Get ...
- java 写的能够响应浏览器请求的 http 服务器
这只是一个小Demo,话几十分钟搞出来的. 不废话先上代码. 首先是服务端的 package com.cnryb; import java.io.IOException; import java.io ...
- Linux下的nginx启动、重新启动
nginx的启动命令是: /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf -c制定配置文件的路径,不加-nginx会自动 ...
- GotFocus和PreviewLeftButtonDown事件
当TextBox获得焦点后,其中的文字会被全选.通过GotFocus和PreviewLeftButtonDown事件,就可以模拟上述行为. 如果用户只是用键盘操作,GotFocus事件就足够了. 如果 ...
- [Stephen]C#中调用C++动态链接库
1.主程序声明引用外部方法,并完成方法调用
- nyoj 96 一个水题目
虽然很简单,发现自己用内存太高了了,算了,我就是这水平了. 描述 已知w是一个大于10但不大于1000000的无符号整数,若w是n(n≥2)位的整数,则求出w的后n-1位的数. 输入 第一行为M,表示 ...
- 从打车软件你能想到多少?盈利模式?商机?大数据?移动互联网蛋糕?生活方式改变withApp?
物联网.云服务.大数据.. 淘宝.12306.卡通...一个产品改变一次生活方式. 打车app,无疑是改变生活方式的又一个产品.从打车软件,你能看到什么? 个人认为,打车软件值得各种投资方斥资,最重要 ...
- shell常识总结
#!/bin/bash cmd="ls -lt | grep ^d | awk 'NR==1 {print $9}'" $cmd 这是一个获取文件夹名字的脚本,但是却提示: ls: ...
- Linux vim的一些命令
一.vi/vim的多行注释及取消注释 1.多行注释 (1) 进入命令行模式,按ctrl + v进入 visual block模式,然后按j, 或者k选中多行,把需要注释的行标记起来 (2) 按大写字母 ...
- HW3.5
import java.util.Scanner; public class Solution { public static void main(String[] args) { int n1 = ...