第一天：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>

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

web开发第一周的更多相关文章

  1. java web开发阅读笔记：第一章

    学习该书前所用推荐书籍<名师讲坛—java开发实战经典> 一web开发前奏 1.1网页发展 首先搞懂. 1.HTTP:超级文本传输协议,是一种通讯协议. 通过这个网络协议WW浏览器与WWW ...

  2. 调查显示数据分析已取代Web开发成为第一用例

    一项关于Python的开发者调查显示,编程语言现在主要用于数据分析,取代了之前的第一个用例Web开发. 去年秋天,由Python软件基金会和开发人员工具供应商JetBrains进行,2018 Pyth ...

  3. IT自由职业者的第一个月（下）——为什么放弃5年嵌入式驱动开发转到WEB开发？

        如果单从兴趣来看,其实我对Linux内核,Android中间件的兴趣要高于WEB,何况还有这么多年的经验积累,何必从头探索一个新的技术方向呢?     这里面原因是很多的,最核心的大概是以下4 ...

  4. python web开发——django学习(一)第一个连接mysql数据库django网站运行成功

    1.新建一个项目 2.新建一些文件夹方便管理 3.新建一个项目叫message  4.连接数据库 python web开发Django连接mysql 5.在数据库里自动生成django的表  6.运行 ...

  5. .NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  6. 转载：.NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  7. 201521123042 Java第一周学习总结

    1. 201521123042 <Java程序设计>第一周学习总结 a.用notepad++和eclipse编写Java程序 b.安装Java Q1.为什么java程序可以跨平台运行?执行 ...

  8. Web开发人员vs网页设计师

    Web开发人员vs网页设计师 我们都遇到过,但实际的区别是什么?如果您是该领域的新手,请阅读详细内容,这些内容比您想象的更重要. 经过几周(或几个月)的规划和准备,进行市场调查,与其他企业家交谈,现在 ...

  9. 201772020113李清华《面向对象程序设计（java）》第一周学习总结

    201772020113<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com b ...

随机推荐

  1. NET中的引用类型和值类型 zt

    .NET中的类型分为值类型和引用类型,他们在内存布局,分配,相等性,赋值,存储以及一些其他的特性上有很多不同,这些不同将会直接影响到我们应用程序 的效率.本文视图对.NET 基础类型中的值类型和引用类 ...

  2. POJ 3254 （状态压缩DP）

    思路:状态压缩dp,用二进制位的1表示放了,0表示没有放.设dp[i][j],表示第i行状态为j时,前i行的方案数,状态转移方程就是 dp[i][j] += dp[i-1][k],j与k这两个状态不冲 ...

  3. Html笔记(二)字体

    字体标签:<font> 例:<font size=5 color=red>字体标签示例</font> 注:简单颜色可以直接写对应的英文,复杂的颜色用16进制表示,表 ...

  4. HDU4737 - A Bit Fun(线段树)

    题目大意 给你一个数组a,定义f(i,j)=ai|ai+1|ai+2|⋯|aj ,|为or运算,求满足f(i,j)<m的二元组个数,N≤105,m≤230 题解 枚举起点i,然后找出最靠右的k, ...

  5. Scala的安装（本地）

    前言 Scala版本的选法: 目前,Kafka库和JDBC并不支持Scala2.11的编译,以及结合大多数人的使用请来看.      scala2.10.*为主,在这,scala2.10.4版本,强烈 ...

  6. 跟我一起写Makefile:MakeFile介绍

    makefile 介绍 make命令执行时,需要一个 makefile 文件,以告诉make命令如何去编译和链接程序. 首先,我们用一个示例来说明makefile的书写规则.以便给大家一个感性认识.这 ...

  7. 教程-Delphi资源文件(全面分析于使用)

    Delphi资源文件(全面分析之位图.光标.图标.AVI.JPEG.Wave)   几乎每个Windows应用程序都使用图标.图片.光标等资源.资源是程序的一部分,但是它是不可执行代码.下面我们就详细 ...

  8. robotframework-FQA

    发现是一波三折,刚开始信步漫游,就又遇上了沟,整理一下吧:  1.WebDriverException: Message: 'geckodriver' executable needs to be i ...

  9. HTML几类标签的应用总结

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

  10. Javascript 高阶函数等

    高阶函数 函数可以接受另一个函数作为参数 称为 高阶函数. map : arr.map(pow); 数组.map(函数); reduce :arr.reduce(function(){ }); 数组. ...