WEB►前端

HTML CSS 学习笔记

HTML 学习笔记

该笔记是对David Rossiter教授开设的 HTML、CSS和JavaScript 课程的学习记录。主要对其讲义进行翻译，记录。

初始html Getting to know html

  • 涉及到的html元素
    • 结构 <html> <head> <body>
    • 在<head>中： <meta> <author> 和 <style> <link> <script> <base>
    • 在<body>中： <h1> <p>
  • HTML的命令（commands）称为元素（elements）。元素通常由一个开始标签（tag)和一个结束标签组成。例如：<p>...</p>

  • HTML页面结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
        ... header elements go here...
        ... 这里添加头元素 ...
    </head>
    <body>
        ... the main web page content goes here ...
        ... 正文内容 ...
    </body>
    </html>

  • 一个简单的网页

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
        <title>A Simple Web Page</title>
        <meta name="athor" content="David Rossiter">
    </head>
    <body>
        <h1>My Web Page</h1>
        <p>This web page is so awesom!</p>
    </body>
    </html>
  • <h1>表示第一级标题(heading)
  • <p>表示段落(paragraph)
  • <head>...</head>中的代码
    • <head>中的任何内容都是关于网页的信息，通常不会在页面中显示

  • <head>中可能添加的其他内容

    • 样式信息(Style-layer)
      PPT中标注中的Style-later，可能是拼写错误

      1
      2
      3
      4
      5
      <style>
      body {background-color: yellow}
      </style>
      <link rel="stylesheet" href="stylerules.css">

    • 其他相关信息(meta information)

      1
      2
      3
      <meta name="description" content="An example">
      <meta name="keywords" content"HTML, CSS, JavaScript">
      <meta charset="UTF-8">

    • 脚本层

      1
      2
      3
      4
      5
      6
      7
      <script>
      function surprise() {
          alert("Hello!");
      }
      </script>
      <script src="mycode.js"></script>

    • main文件位置 The location of the main file

      1
      <base href="http://www.ust.hk/" target="_blank">

  • 属性（attributes)

    • 所有属性均需要用引号括起
    • 单引号和双引号均合法
      1
      2
      <meta name="author" content="David Rossiter">
      <meta name='author' content='David Rossiter'>

一些常见的HTML元素 Some common HTML elements

  • 设计到的HTML元素
    • 标题(Headiings) <h1><h2><h3><h4><h5><h6>
    • 片段(Sections) <section>
    • 列表(Lists) <ul> and <ol> togethre with <li>
    • 注释(comments) <！-- a comment -->
  • HTML标题
    <h1> <h2> <h3> ... <h6> 用于表示标题,浏览器显示<h1>比<h2>大，<h2>比<h3>大。人们有时“作弊”，使用这个特性来表示不同的文字大小

  • 标题标签 heading tags

    1
    2
    3
    4
    <h1>Introduction to Something</h1>
    <h2>An Area of Something</h2>
    <h3>A Sub-Area...</h3>
    <p>This sub-area is fun! Let's discuss it here in detail.</p>

  • 使用片段 using section

    • 用于表示片段
      1
      2
      3
      4
      <section>
          <h1>Intruction to Something</h1>
          <p>Let's discuss something here!</p>
      </section>

  • 使用列表

    • <ul>表示无序列列表，<li>表示有序列列表

      1
      2
      3
      4
      5
      <ul>
          <li>The firest item</li>
          <li>The second item...</li>
          <li>Yes... the third item!</li>
      </ul>
      1
      2
      3
      4
      5
      <ol>
          <li>The firest item</li>
          <li>The second item...</li>
          <li>Yes... the third item!</li>
      </ol>

    • 使用start=”number”来调整开始序号

      1
      2
      3
      4
      <ol start="1990">
          <li>In this year I was born...</li>
          <li>In this year I learned to walk...</li>
          <li>In this year I learned to program...</li>

    • 使用reversed来是序号倒序

      1
      2
      3
      4
      <ol start="2001" reversed="">
          <li>In this year I learned to program...</li>
          <li>In this year I learned to walk...</li>
          <li>In this year I was born...</li>

    • 设置type=”A”来使用字母序号

      1
      2
      3
      4
      5
      6
      <ol type="A">
          <li>is for 'Anchor'...</li>
          <li>is for 'Body'...</li>
          <li>is for 'Cdata'...</li>
          <li>is for 'Div'...</li>
      </ol>

  • 注释

    • 注释如这样<!-- a comment -->

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      <html>
      <!-- This is s simple demonstration of using comments in a web page -->
      <head>
          <meta name="author" content="Daivd Rossiter">
          <!-- I can't believe how amazing that guy really is! -->
      </head>
      <body>
          <!-- Here's my simple 'to do' list-->
          <p>Items I need to fix in my business:</p>
          <ol>
              <li>The people</li>
              <li>The process</li>
              <li>The product</li>
          </ol>
          <!-- That's a lot of things to fix! I better get started soon. -->
      </body>
      </html>

    • 注释可以在任何地方添加

      格式化HTML中的文字 formting html text

  • 涉及到的HTML元素
    • 斜体和加粗(Italic and Bold) <i> <em> <b> <strong>
    • 下划线(Underline) <u>
    • 加大/变下(Big and Small) <big> <small>
    • 高亮(Highlighted) <mark>
    • 下标/上标（Subscript & Superscript) <sub> <sup>
    • 插入和删除(Inserte & Deleted) <ins> <del>

  • 斜体

    • <i>是文字变成斜体；<em>可以实现同样的功能。差别在于突出强调(emphasises)的含义。
      1
      2
      <p>He said <i>I am just going outside and may be some time</i>.</p>
      <p>If you don't have a vaccination <em>you may catch malaris and die</em>.</p>

  • 加粗

    • <b>使文字加粗; <strong>可以实现同样的功能。差别在于突出强调的含义
      1
      2
      3
      <p>She said <b>If you want something said, ask a man;
               if you want something done, ask a woman</b>.</p>
      <p>If you can't repay your mortgage <strong>you may lose your home</strong>.</p>

  • 下划线

    • 尽量不要使用下划线，容易造成迷惑和歧义
      1
      2
      <p>The viewer <u>may be confused</u> if you use underline.</p>
      <p>Her name is <u>Cheng</u> Sin Ying.</p>

  • 放大或缩小文字

    • <big> and <small> 正如其字面意思一行
    • 然而,最新的HTML标准并不包含<big>
      1
      2
      <p>It's dangerous to use <big>big</big> because it isn't part of HTML 5!</p>
      <p>I'm embarrassed to say it loudly so here it is: <small>I love you!</small></p>

  • 高亮文字

    • <mark>可以是文字高亮
      1
      <p>Send us your bank details and you may become a <mark>millionaire</mark>!</p>

  • 上下标

    • <sub>和<sup> 用于偏移文字
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <p>
      If x<sub>1</sub>=2 and x<sub>2</sub>=4 then
      x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>3</sup> equals 68
      </p>
      <p>
      Some video streaming may use XML<sup>1</sup>
      </p>
      <p>
      <sup>1</sup> G. Lam & D. Rossiter, 'A Web Service Framework
      Supporting Multimedia Streaming', IEEE Transactions on Services Computing, 2013
      </p>

  • 插入和删除文字

    • <ins>和<del> 用于插入和删除文字，如下所示。
      1
      2
      <p>Let's do this edit: Prof. Rossiter is <ins>truly</ins> the most intelligent.</p>
      <p>Also this: Prof. Rossiter has an <del>astonishingly</del> old car.</p>

图片

  • 涉及到的元素和属性
    • <img>
    • src 属性
    • width 属性
    • height 属性

  • 使用img将图片加到网页中

    1
    <img src="stella_photo.jpg">

  • 精确控制大小

    • 添加width=”number”和height=”number”
      1
      <img src="stella_photo.jpg" width="300" height="300">

  • 使用正确的比例控制大小

    • 尽使用width或height
      1
      <img src="stella_photo.jpg" width="300">

  • 控制相对大小

    • 添加width=”number%”和height=”number%”

      1
      <img src="stella_photo.jpg" width="50%">

    • 百分比大小是相对于包含图片的元素，即图片的父元素

      声音

  • 涉及到的元素和属性
    • <audio>
    • src 属性
    • autoplay 属性
    • controls 属性
    • loop 属性
    • alt 属性

  • 处理声音 handing sound

    • 仅<audio>将声音文件添加到网页，但不播放

      1
      <audio src="beets_turnips.mp3"></audio>

    • autoplay使声音在网页一加载就播放

      1
      <audio src="beets_turnips.mp3" autoplay></audio>

  • 控制声音

    • 添加contorls，使浏览器显示控制按钮 
      1
      <audio src="beets_turnips.mp3" controls></audio>

  • 循环声音

    • 添加loop，以一直循环播放声音 
      1
      <audio src="beets_turnips.mp3" autoplay loop></audio>

  • 旧版本浏览器中添加声音

    • 通常MP3格式的声音文件被广泛支持，应该可以在现在所有的浏览器中工作

  • 在旧版本浏览器中，处理新类型的标签

    • 就浏览器无法处理较新的标签。为了友好展示，我们可以显示警告信息

      1
      2
      3
      <this_new_html_tag>
      <p>Sorry, your browser can't handle <i>this_new_html_tag</i>!</p>
      </this_new_html_tag>

    • 旧版本的浏览器由于无法处理，会忽略<this_new_html_tag>,但可以处理<p>,变可以正常显示警告信息。

    • 新版本的流量器可以处理所有标签，但会故意忽略警告信息。
      1
      2
      3
      <audio src="drum_loop.mp3" autoplay>
      <p>Sorry! Your browser does not support the <i>audio</i> tag</p>
      </audio>

视频

  • 涉及到的元素和属性
    • <video>
    • src 属性
    • autoplay 属性
    • controls 属性
    • loop 属性
    • alt 属性
  • 处理视频文件，和处理声音文件基本一致

  • 添加视频

    • 仅<video>将视频文件添加到网页，但不播放 
      1
      <video src="walking_video.mp4"></video>

  • 自动播放

    • autoplay使声音在网页一加载就播放 
      1
      <video src="walking_video.mp4" autoplay></video>

  • 添加视频控制

    • 添加contorls，使浏览器显示控制按钮 
      1
      <video src="walking_video.mp4" controls></video>

  • 其他处理视频的方法

    • 添加loop，循环播放

      1
      <video src="walking_video.mp4" loop></video>

    • 添加alt供搜索引擎和残疾人使用

      1
      <video src="walking_video.mp4" alt="Walking the High Junk Peak trail"></video>

    • 处理旧版本浏览器

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
              <video src="walking_video.mp4" controls>
              <p>Sorry! Your browser does not suppor    <p>
          My favourite word is supercalifragilisticexpialidocious. It comes
          from the movie 'Mary Poppins' and is hard to spell correctly.
          </p>
          <p>
          My favourite word is supercalifragilisticexpialidocious.<br>It comes
          from the movie 'Mary Poppins' and is hard to spell correctly.
          </p>
          <p>
          My favourite word is supercalifragilistic<wbr>expialidocious. It comes
          from the movie 'Mary Poppins' and is hard to spell correctly.
          </p>
          <p>
          My favourite word is supercalifragilisticexpialidocious.<hr>It comes
          from the movie 'Mary Poppins' and is hard to spell correctly.
          </p>    
      t the <i>video</i> tag</p>
              </video>
  • 涉及到的元素，属性
    • <a>
      • fref 属性
      • name 属性
    • 任何元素
      • id 属性
  • <a>表示钩子(anchor)。将一个东西，链接到另一个上面。
  • 页面中的位置
    • 链接可以指向页面中的任何位置
      • 添加`id=”here”到待链接的位置
      • 使用<a href = "#here">Go here</a>。添加链接标签

        空元素和换行 void elements & breaks

  • 空元素 void elements
    • 我们之前见到的元素，多为<start_tag>...</end_tag>,但是有些元素没有任何内容，我们称之为空元素。空元素不需要结尾标签。
  • 一些常见的空元素
    • <meta name="author" content="Daivd Rossiter">
    • 处理多媒体<img>
    • 处理表单<input>
    • 处理换行<br> <wbr> <hr>
  • 换行 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <p>
    My favourite word is supercalifragilisticexpialidocious. It comes
    from the movie 'Mary Poppins' and is hard to spell correctly.
    </p>
    <p>
    My favourite word is supercalifragilisticexpialidocious.<br>It comes
    from the movie 'Mary Poppins' and is hard to spell correctly.
    </p>
    <p>
    My favourite word is supercalifragilistic<wbr>expialidocious. It comes
    from the movie 'Mary Poppins' and is hard to spell correctly.
    </p>
    <p>
    My favourite word is supercalifragilisticexpialidocious.<hr>It comes
    from the movie 'Mary Poppins' and is hard to spell correctly.
    </p>

样式

  • 涉及到的元素和属性
    • <link>
      • href 属性
      • rel 属性
      • type 属性
    • <style>
    • 任何html元素 id 属性
    • Foreground color color
    • Background color background
  • CSS Cascading Style Sheets
  • 将内容和样式在页面中分离开来粗来
    • Information + Sytle = Visual Output
  • 一个CSS文件可以被多个页面使用

  • 链接到CSS文件

    • html 文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <!DOCKTYPE html>
      <html>
      <head>
          <title>Demonstration of Linking a Sytle File</title>
          <link href="html_example_css_file.css" rel="stylesheet" type="text/css">
      </head>
      <body>
          <h1>My first heading</h1>
          <p>My first paragraph</p>
          <h1>My second heading</h1>
          <p>My second paragraph</p>
      </body>
      </html>

    • css文件

      1
      2
      h1 {color: purple}
      p {color: blue}

  • 样式中常见的属性

    • color 字体颜色
    • background 背景颜色
    • font-family 字体类型
    • font-size 字体大小
    • text-align 文字对齐类型

  • 在html开始位置定义格式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <html>
        <head>
            <style>
            h1 {color: purple}
            p {color: blue}
            </style>
        </head>
        <body>
            <h1>My first heading</h1>
            <p>My first paragraph</p>
            <h1>My second heading</h1>
            <p>My second paragraph</p>
        </body>
    </html>

  • 使用唯一编号　use a unique id

    • 每个元素可以添加id属性
    • 我们可以使用id属性，来对应所选的样式
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      <html>
          <head>
              <sytle>
                  #rainbowColors {background: grey}
                  #red {background: red}
                  #orange {background: orange}
                  #yellow {background: yellow}
                  #green {background: green}
                  #blue {background: blue}
                  #indigo {background: indigo}
                  #violet {background: violet}
              </sytle>
          </head>
          <body>
              <ul id="rainbowColors">
                  <li id="red">Red</li>
                  <li id="orange">Orange</li>
                  <li id="yellow">Yellow</li>
                  <li id="green">Green</li>
                  <li id="blue">Blue</li>
                  <li id="indigo">Indigo</li>
                  <li id="violet">Violte</li>
              </ul>
          </body>
      </html>

  • 使用类 using class

    • 定义自己的规格，去控制任何元素。一种规格可以被多个不同的元素使用
    • 一个类的例子
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <html>
          <head>
              <sytle>
                  .zappy {color:purple; background:yellow}
                  .wowo {color:blue; background:lightgrey}
              </sytle>
          </head>
          <body>
              <h1 class="zappy">My first heading</h1>
              <p class="wow">My first paragraph</p>
              <h1 class="wow">My second heading</h1>
              <p class="zappy">My second paragraph</p>
      </html>

  • 混合使用多个元素　using multiple class

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <html>
        <head>
            <sytle>
                .zappy {color: blue}
                .spicy {color: red}
                .wow {background: lime}
                .lol {background: lightgrey}
            </styel>
        </head>
        <body>
            <p class="zappy wow">My first paragraph</p>
            <p class="zappy lol">My second paragraph</p>
            <p class="spicy wow">My third paragraph</p>
            <p class="spicy lol">My fourth paragraph</p>
        </body>
    </html>

  • 更多样式相关内容　more on style

  • 涉及到的元素和属性
    • 伪类 Peseude-classes
      • link
      • visited
      • hover
      • active
      • empty

  • 行内样式 inline sytle

    • 样式规则可以直接添加到特定元素
      <p sytle="text-align:right">Welcome.</p>
    • 示例 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      <html>
          <head>
              <style>
              li {background: yellow}
              </style>
          </head>
          <body>
              <ul>
                  <li>One</li>
                  <li>Two</li>
                  <li style="background:purple">Three</li>
                  <li>Four</li>
              </ul>
          </body>
      </html>

  • 控制上下文　context control

    • 可以添加样式规则到特定的元素
      • ul li{color: red}
      • 这里对li中的ul添加样式规则
    • 示例 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      <html>
          <head>
              <style>
              ul li {background:yellow}
              </style>
          </head>
          <body>
              <ul>
                  <li>One</li>
                  <li>Two</li>
                  <li>Three</li>
                  <li>Four</li>
              </ui>
              <ol>
                  <li>One</li>
                  <li>Two</li>
                  <li>Three</li>
                  <li>Four</li>
              </ol>
          </body>
      </html>

  • 伪类 Pseude-classes

    • 伪类是一种具有一定智能的类(Pseude-classes are classes with some kind of ‘intelligent’)
      • h1:hover {color: red}
      • 当鼠标移动到任何h1上，其字体都会变成红色
    • link表示链接
      • a:link {color: red}
    • visited表示一个链接已经被浏览过
      • a:visited {color: red}
    • active表示一个链接正在被激活
      • a:active {color: red}
    • empty表示一个元素为空
      • p:empty {color: red}
    • 示例 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      <html>
          <head>
              <style>
              a:link {backgound: yellow}
              a:visited {background: pink}
              a:hover {background:lightgreen}
              a:active {background: purple}
              li:empty {background: brown}
              </style>
          </head>
          <body>
              <a href="http://www.google.com">Google</a>
              <a href="http://www.cnn.com">CNN</a>
              <a href="http://www.twitter.com">Twitter</a>
              <a href="http://www.facebook.com">Facebook</a>
              <ol>
                  <li>One</li>
                  <li>Two</li>
                  <li>Three</li>
                  <li></li>
              </ol>
          </body>
      </html>

表格

  • HTML表格是一种呈现结构内容的方式。为了实现这个目标，需要几个不同的标签
  • 涉及到的标签
    • 结构 <table> <thead> <tbody>
    • 表头 <th>
    • 内容 <tr><td>
  • 涉及到的相关属性
    • 表格边框 border
    • 表格宽度 width
    • 表格高度 height
    • 对齐方式 vertical-align
    • 填充方式 padding

  • 表格结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <table>
        <thead>
            <tr> <th>...</th> <th>...</th> <th>...</th> </tr>
        </thead>
        <tbody>
            <tr> <td>...</td> <td>...</td> <td>...</td> </tr>
            <tr> <td>...</td> <td>...</td> <td>...</td> </tr>
        </tbody>
    </table>

  • 简单示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <table>
        <thead>
            <tr> <th>Skills</th> <th>Difficulty</th> <th>My Level</th> </tr>
        </thead>
        <tbody>
            <tr> <td>HTML</td> <td>Easy</td> <td>Some</td> </tr>
            <tr> <td>CSS</td> <td>Medium</td> <td>A little</td> </tr>
            <tr> <td>JavaScript</td> <td>Hard</td> <td>Zero</td> </tr>
        </tbody>
    </table>

  • 常用的样式属性

    • color 字体颜色
    • text-align 文字的水平对齐
    • border 表格边框
    • width 表格宽度
    • height 表格高度
    • vertical-align 垂直对齐
    • pading 表格填充

  • 使用样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <html>
        <head>
            <style>
                table, td, th {border: 1px solid black; padding: 15px}
                td {color: purple}
            </style>
        </head>
        <body>
            <table>
                <tr> <th>Menu</th> <th>Price</th> </tr>
                <tr> <td>Snail pizza</td> <td>$15</td> </tr>
                <tr> <td>Creative curry</td> <td>$10</td> </tr>
                <tr> <td>Sloppy salmon</td> <td>$20</td> </tr>
            </table>
        </body>
    </html>

  • 使用规则类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <html>
        <head> <style>
            table, td, th {border: 1px solid green; width:50%; text-align: center}
            .profit {text-align:left; background-color:lightblue}
            .zero {text-align: center; background-color:yellow}
            .loss {text-align: right; background-color:red}
        </style> </head>
        <body>
            <table>
                <tr> <th>Product</th> <th>Income</th> <th>Cost</th> <th>Difference</th> </tr>
                <tr> <td>Product</td> <td>$300</td> <td>$100</td> <td class="profit">$200</td> </tr>
                <tr> <td>Stationary</td> <td>$150</td> <td>$150</td> <td class="zero">$0</td> </tr>
                <tr> <td>Chairs</td> <td>$50</td> <td>$300</td> <td class="loss">$250</td> </tr>
            </table>
        </body>
    </html>

  • 调整位置的示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <html>
        <head> <style>
            table, td {border: 1px solid black; width: 80%; height: 80%}
            td {width: 33.33%; height: 33.33%}
            .t {vertical-align: top} .m {vertiaal_align: middle} .b {vertical-align: bottom}
            .l {text-align: left} .c {text-align: center} .r {text-align: right}
        </style> </head>
        <body>
            <table>
                <tr> <td class="t l">1</td> <td class="t c">2</td> <td class="t r">3</td> </tr>
                <tr> <td class="m l">4</td> <td class="m c">5</td> <td class="m r">6</td> </tr>
                <tr> <td class="b l">7</td> <td class="b c">8</td> <td class="b r">9</td> </tr>
            </table>
        </body>
    </html>

DIV和SPAN

  • 涉及到的元素
    • 用于大片区域<div>
    • 用于几个单词<span>
  • 涉及到的属性
    • font-size font-family background position top left width
  • div
    • 没有默认的样式
    • 没有默认的含义
    • 可以用于任何用途

  • 了解div

    1
    2
    3
    4
    5
    6
    7
    8
    <p>This is a pargraph before the div</p>
    <div>
        This is a div with no style
    </div>
    <p>This is a pargraph in the middle</p>
    <div style="background:lightblue">
        This is a div with a blue background
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    <p> This is a paragraph before the div</p>
    <div style="background:yellow; font=size:16pt; font-family:courier">
        This is a div with a yellow background
    </div>
    <p>This is a paragraph in the middle</p>
    <div style="background:lightblue; font-size:18pt; font-family:Arial; width:50%">
        This is a div with a blue background
    </div>

  • 调整一个元素的位置

    1
    2
    3
    4
    5
    6
    7
    8
    像其他元素一样，一个div可以被放置到任何地方
    使用positon:absolute与top:xxx和left:yyy
    top和left石相对于div的左上方
    top:0和left表示div位于左上角
    Like many elements, a div can be put anywhere
    Use position:absoulte with top:xxx and left:yyy
    top and left refer to the top left corner of the div
    top:0 and left:0 means the div is in the top left corner

    • 绝对位置

      1
      2
      3
      4
      5
      6
      7
      <div style="background:yellow; font-size:16pt; font-family:counter;
      position:absoute; top:60px; left:60px">
      This is a div with a yellow background
      </div>
      <div style="background:lightblue; font-size:18pt; position:absolute; top:92px; left:80px">
          This is a div with a blue background
      </div>

    • 相对位置

      • postion:relative设置相对的正常位置的偏移。position:relative sets the position relative to the normal position
        1
        2
        3
        4
        <p>This is a pargraph</p>
        <div style="background:yellow; font-size:14pt; font-family:courier; position:relative; top:-20px; left:-20px">
            This is a div with a yellow background
        </div>

  • SPAN

    • 和div一样，span没有特殊含义。
    • span用于几个字词
      1
      2
      <p>This is not span text <span>but this is</span> and this isn't</p>
      <p>This is not span text <span sytle="background:yellow">but this is</span> and this isn't</p>

表单

  • 设计到的元素和数据
      • method 属性
      • action 属性
  • 从浏览器到服务器
    • 表单是最简单的方法
    1. 用户填写表单并提交
    2. 浏览器将表单数据发送到服务器
    3. 服务器接收到数据，处理完成后发送回复信息
    4. 浏览器显示回复信息
  • 表单的基本结构
1
2
3
4
<from action="destination" method="get or post">
        ... form elements go there ...
    <input type="submit">
</form>

  • destination 目标

    action="destination"告诉浏览器表单数据发送到的程序地址，例如：

    1
    <form action="http://www.server.com/subdirectory/program.php">

    如果程序和html文件在同一服务器的话：

    1
    <form action="subdirectory/program.php">

    如何程序和html文件在同一文件夹的话：

    1
    <form action="program.php">

  • GET 或 POST

    method=”get”。get 是默认的方法。如在bing.com中搜索cats, 则URL是http://www.bing.com/search?q=cat...

    对于你正在开发的项目，使用 get 是获取表单数据一个很好的方法。但是，你无法做到保密，并且尽可以处理少量的传输。如，几百个单词或字母。

    method=”post”。和 get 的主要区别是你无法直接看到任何数据。使用 post 可以保密，并可以处理大量的传入，如文件。

  • 简单示例 - TEXTAREA
1
2
3
4
5
6
7
<form>
    <p>Please enter any feedback you have.</p>
    
    <textarea rows="3" cols="60" name="feedback">
    Pleaser enter your text here
    </textarea>
</form>

添加提交按钮

1
2
3
4
5
6
7
8
9
<form action="http://ihome.ust.hk/~rossiter/cgi-bin/show_everything/php"
      method="get">
    <p>Please entery any feedback you have.</p>
    
    <textarea rows="3" cols="60" name="feedback">
    Please enter your text here
    </textarea>
    <br>
    <input type="submit" value="Send">

更多表单相关内容

  • 涉及到的元素
  • 涉及到的属性
    • placeholder
    • value
    • autofocus
    • required
  • 表单的输入元素
    • 提交按钮 <input type="submit">
    • 简单文本 <input type="text">
    • 勾选框 <input type="checkbox">
    • 选择按钮 <input type="radio">
    • 密码域 <input type="password">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
    Please enter your name. <br>
    <input type="text" name="feedback"> <br> <br>
    
    Please select eacho of the following that you have. <br>
    <input type="checkbox" name="items" value="car">Car <br>
    <input type="checkbox" name="items" value"teddy bear">Teddy bear <br>
    <input type="checkbox" name="items" value="toothbrush">Toothbrush <br> <br>
    
    Please indicate your intelligence level. <br>
    <input type="radio" name="iq" value="high"> High <br>
    <input type="radio" name="iq" value="medium" checked>Medium <br>
    <input type="radio" name-"iq" value="low">Low <br> <br>
</form>

注意密码域应使用post方法，使用get会直接泄露密码

1
2
3
4
5
6
7
<form action="http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php"
      method="post">
     <p>What is the secret password?</p>
     <input type="password" name="userpassword"> <br>
     
     <input tpye="submit" vaue="Send">
</form>

1
2
3
4
5
6
7
8
<form action="http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php"
      method="get">
      <--! 注意，使用get方法不安全 -->
     <p>What is the secret password?</p>
     <input type="password" name="userpassword"> <br>
     
     <input tpye="submit" vaue="Send">
</form>

  • 设置表单列表

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form>
        <p>What city would you like to go to?</p>
        
        <select name="cites">
            <option value="hk">Hong Kong</option>
            <option value="vc">Vancouver</option>
            <option value="sf">San Francisco</option>
        </select>
    </form>

  • 有用的属性

    • value="something 决定一开始显示的内容
    • placeholder="something显示一些有用的提示，当输入文字是会自动消失
    • autofocus 设置一开始聚焦的域
    • required 表示该域必须完成

处理文件上传

  • 涉及到的元素与属性

  • 上传文件

    分为两部分：浏览器和服务器。服务器段之后讨论。

  • 表单结构

    1
    2
    3
    4
    5
    <form action="dectination" method="post" enctype="multipart/form_data">
            ... other form input elements go here ,if any ...
        <input type="file" name="fileToUpload">
        <input type="submit">
    </form>

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <form method="post" enctype="multipart/form-data"
        action="http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php">
        
        <p>Select the file you want to upload</p>
            <input type="file" name="fileToUpload">
            
            <p>Press this button to send it</p>
            <input type="submit" value="Upload the file">
    </form>

一些新的 HTML5 输入元素

  • 涉及到的元素

    • 数字输入 <input type="number">
    • 日期输入 <input type="date">
    • 时间输入 <input type="time">
    • 颜色选择 <input type="range">
    • 滑动条 <input type="range">

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <form action="http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php">
        <label for="age">Your age:</lael>
        <input type="number" min="0" max="99" step="1" value="18" name="age" required><br>
        <label for="birthday">Your birthday:</label>
        <input type"date" anme="birthday"><br>
        <label for="wakeup">You want to wake up at:</label>
        <input type="time" name="wakeup"><br>
        <label for="color">Ypur favorite color:</label>
        <input type="color" name="color"> <br>
        <label for="mood">Your mood:</label>
        Bad <input type="range" min="0" max="100" step="5" value="50" name="mood"> Good<br>
        <input type="submit" value="Submit"></form>
    </form>

元素组合

  • 涉及到的元素

    • 组合元素 <fieldset>
    • 设置标题 <legend>

  • 示例

    使用表单

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <form>
        <fieldset>
            <legend>Personal Information</legend>
            First name? <input type="text" name="firstName"> <br>
            Last name? <input type="text" name="lastName"> <br>
        </fieldset> <br>
        <fieldset>
            <legend>Favrourite Things</legend>
            Favourite cartoon? <input type="text" name="favCartoon"> <br>
            Favourite pizza? <input type="text" name="lastName"> <br>
        </fieldset> <br>
        <input type="submit" value="Send">
    </form>

    使用提取元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div>
        <fieldset>
            <legend>Defeated Enemies</legend>
            Ice Cream Man <br>
            SuperScary Monster <br>
        </fieldset> <br>
        <fieldset>
            <legend>Friends</legend>
            Flower lady<br>
            Amazon Ant 57 <br>
        </fieldset> <br>
    </div>