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>
       验证码:
    
     &nbsp;&nbsp;  <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>

草草写就,有空修正,尽量写短。

时间: 2024-10-09 19:50:12

web开发第一周的相关文章

电工助手App开发 第一周

2015年9月开始,每天两个主要任务,耗时一个月,完成了名为 “电工助手” 的iOS应用,App Store链接:https://itunes.apple.com/cn/app/dian-gong-zhu-shou/id1044537172?l=en&mt=8 这是我的第一个上架App.下面是第一周的开发过程记录:

如鹏网 静态Web开发 第一章:html

第一章:html 本章主干知识点: 1.最基本的html文件的格式是什么? 2.常用标签:font.列表(ul.ol.li).img 3.表格标签:table.tr.td:表格的合并. 4.超链接.新窗口中打开的超链接.超链接锚点. 5.框架:frameset 6.表单:input(文本.radio.checkbox.隐藏字段.submit):select下拉列表:textarea:label: 7.div和span的区别. -----------------------------------

Python自动化开发第一周知识点

知识点一:变量 1.变量名可以包括字母.数字.下划线,但是数字不能做为开头.例如:name1是合法变量名,而1name就不可以. 2.系统关键字不能做变量名使用 3.Python推荐使用XX_XX_XX形式起名 4.Python没有常量概念(如C++使用const定义一个常量) 5.Python表示常量用大写单词表示(但是实际上可以被修改) ------------------------------------------------------------------------------

UnityVR开发第一周小结

做的东西有限,把一个PC项目改成VR项目 学习的东西: 两个手柄和一个头显都有自己的Canvas,做出来的小界面是随着设备的移动而移动的. 手柄的射线只能点击在自己Player内的Canvas的UI,不能点击放在PC端摄像机的UI,点击的方式和用鼠标.触屏点击一样. 据现在了解的用手柄和别的物体进行交互,有两种方法: 1. 发射射线,进行射线检测,可以与物体交互,适合像这次改别人的项目,交互的东西太多,直接封装起来,一起玩. 2.碰撞检测,手柄自动的,需要给交互的物体放碰撞器 其他的和正常开发的

Unity开发第一周积累

# if UNITY EDITOR # endif 预加载 在打包时候不会打包其中的内容. 降低不同脚本之间的耦合度,尽量保持脚本的独立性. -例如为一个物体初始化数据,可以将存储信息的泛型集合直接以方法参数的形式传递给物体上挂载的脚本. 尽量不适用Gameobject.Find会消耗大量内存. 一个物体想实现遮罩,不光要有Mask组件,还要有Image组件. UGUI很简单的一种实现拖拽,有遮罩的方式. 如果A-B-C.C依次是父子关系.A为空物体,给A添加ScrollRect组件.Mask组

spring boot框架学习6-spring boot的web开发(2)

本章节主要内容: 通过前面的学习,我们了解并快速完成了spring boot第一个应用.spring boot企业级框架,那么spring boot怎么读取静态资源?如js文件夹,css文件以及png/jpg图片呢?怎么自定义消息转换器呢?怎么自定义spring mvc的配置呢?这些我们在公司都需要用的.这些怎么解决呢?在接下来的小节详细讲解这些.好了,现在开启spring boot的web开发第一节 本节主要: 1:InternalResourceViewResolver讲解 2:自动配置静态

spring boot框架学习7-spring boot的web开发(3)-自定义消息转换器

本章节主要内容: 通过前面的学习,我们了解并快速完成了spring boot第一个应用.spring boot企业级框架,那么spring boot怎么读取静态资源?如js文件夹,css文件以及png/jpg图片呢?怎么自定义消息转换器呢?怎么自定义spring mvc的配置呢?这些我们在公司都需要用的.这些怎么解决呢?在接下来的小节详细讲解这些.好了,现在开启spring boot的web开发第一节 本节主要: 1:自定义消息转换器 本文是<凯哥陪你学系列-框架学习之spring boot框架

java web开发阅读笔记:第一章

学习该书前所用推荐书籍<名师讲坛-java开发实战经典> 一web开发前奏 1.1网页发展 首先搞懂. 1.HTTP:超级文本传输协议,是一种通讯协议. 通过这个网络协议WW浏览器与WWW服务器之间的通讯进行规定,并且通过这个协议我们可以浏览网页,通过网页从客户端写入信息,从服务端得到信息.而通常的HTTP消息包括"客户端->服务端"与"服务端->客户端"的消息传送,图解HTTP协议的功能: 是在客户端通过浏览器根据HTTP协议中向服务器端发

Web前端开发第一篇

本人在学习和开发web前端中得到的一些javascript.jquery.html等等效果可能对大家有用和对大家有帮助的东西一起分享给大家. 这些效果也许很多人都已经有了,不过我还是积累下,分享给一起学习Web前端的人员和刚刚开始学习Web前端的人员, 希望能帮助大家. 我的语言组织能力比较差,还有我的技术水平也是比较差的,有些东西可能理解的不对,大神们可以指点出来我加以改正,希望大家见谅! Web前端开发第一篇