• HTML & CSS 小总结


    1. web 主机代理商 web hosting company, 让他们的服务器为你的页面服务
    2. 选择网站名字 例如: www.1234.com
    3. 寻找 把文件从电脑传到主机的途径
    4. 把新网站告诉朋友

    域名:用来定位你的网站的独一无二的名字 1234.com

    网站名:www.1234.com

    http://www.1234.com/index.html ( 其中后面的 / 就是服务器根目录, index.html是页面文件 )
    http://, 输入的地址是URL, 统一资源定位符, http://是传输协议
    目标锚: 主要目的是链接到比较长的页面中的特定位置, 以便浏览者不用滚动页面来找
    <a href="index.html#chai">See Chai Tea</a>  加目标锚的方法:网页后边加#号定位
    这里的 chai 是html元素的id ( 这个目标锚可以实现本网页内的快速定位, 而非查找其他网页 )

    w3c 校验器, 检查你的网页是否符合标准 http://validator.w3.org

    div 用于逻辑划分块
    span 只一样内 某些内容的组合, 以便有统一的式样, 比如一个表里的某一行
    关于元素 a
    一个链接可以处于多种不同状态, 未访问过, 已访问过, 鼠标停留 等等 使用伪类
    a:link {
        color: green;
    }
    一般认为合理的顺序是: link, visited, focus, hover, active
    -- css
    css 中的类可以定义多个元素一起, 表示他们在一个类里, 具体办法是
    p.greentea {}   这样, 只定义段落中是 greentea 的类得式样
    .greentea  这样, 就定义所有的类为 greentea 的元素的式样
    一个元素可以在多个类中, <p class="greentea raspberry blueberry">
    http://jigsaw.w3.org/css-validator/   css 校验器

    css 属性
    color: 用来设置文本元素的字体颜色
        16进制:最常用, 每两位数字代表 红色, 绿色, 蓝色, #cc6600 #代表是16进制数,
        可以使用在线颜色表查找对应颜色
        红,绿,蓝: rgb(80%, 40%, 0% ) 或 rgb(255, 255, 0);
        颜色名字 ( 名字很少, 只有17种 ) yellow
    font-weight: 控制文本的粗细(bold, normal)
    left: 元素如何放置它的左侧
    line-height: 文本之间的行间距
    top: 控制元素顶部位置
    background-color: 背景颜色
    border: 元素周围边框
    margin: 想在元素边缘和内容之间有一些空间, 边界
    font-size: 把文本变大变小
        定义大小可以用像素 : font-size: 14px;
        定义大小可以用百分数 : font-size: 150%; ( 相对于父元素 )
        定义大小可以用倍数: font-size: 1.2em; ( 表明放大父元素1.2倍 )
        定义大小可以用关键字 : font-size: small; ( xx-small, x-small 等等, 基本上不同级别相差20% )
        技巧:    选择一个关键字(推荐用small或medium)定义body字体大小, 也就是默认网页字体
                用em或百分比把别的元素的字体大小指定为参照body字体大小的尺寸
                这个技巧的好处是, 当需要修改字体时, 只需要修改默认字体就可以达到全部都变的作用.
    font-style: italic;  斜体 not italic

    text-align: 本文对齐样式
    font-family: 字体系, 例如 Verdana 等(用于不一样的场合, 如报纸印刷 等等 )
        1. sans-serif family : 可读性好
        2. serif family: 报纸印刷
        3. monospace family:   等宽字体
        4. Cursive family: 比较有趣
        5. Fantasy Family: 比较有趣
    text-decoration: 给文本添加更多样式,下划线等 ( underline, overline, line-through, none )

    盒子: 由里到外
        内容区 -> 补白 -> 边框 -> 边界 ( 有点类似夹心, 共3层 )
        除了大小之外, 不能编辑补白和边界的其他方面.

       
    可以指定多个式样表,顺序很重要, 一个式样表会覆盖在它之前链接式样表中的式样, 最下边的优先权最高

    块元素是从头流到尾, 每两个元素之间有换行( 默认占满屏幕整个宽度 )
    内联元素在水平方向上一个接一个地流, 从左上方到右下方( 宽度不够时, 就会向下 )

    当浏览器并排放置两个内联元素, 这两个元素之间的空间是两个内联元素边界之和
    当浏览器并列放置两个块元素,这两个元素之间(上下) 是两个块元素中较大的边界值
    float 属性让一个元素尽可能靠左或靠右, 然后让它后面的元素流到这个元素的周围.
    飘移元素会放在正常元素之上, 就感觉它飘起来一样, 因为飘移元素不再是正常流的一部分

    ====================流动布局========= important ==================================
    flow: 网页正常的布局流, 块元素从上到下, 会有换行, 内联元素从左上到右下, 当碰到
    float时, 理解 float的元素为漂移, 即飘到整个网页之上, 但是 float最好是放置在块级别上,
    例如<p>, 那么 这段文件会飘在网页上, 它下边的html元素会向上跟它高度对齐, 并且会“围绕”
    着它,将自己的内容显示出来.
    无论飘移元素是左还是右, 都不会影响它后边的元素正常的流布局, 即 后边元素的高度和“围绕”

    做布局时, 跟编程一样, 先从大的逻辑环境着手, 比如先分2块地方, 2块地方再继续分别跟多
    要有逻辑层次

    左右分栏问题:
    例如:当你需要左右分两边时, 由于float是漂浮, 比如右边设置的是漂浮, 那么你可以把左边部分
          的边界设置的比右边漂浮部分的宽度宽一些, 这样其实漂浮内容是覆盖在左边内容上, 但是由于左边
          边界很宽, 所以看起来像是分了左右部分, 例如漂浮部分宽度是 280, 左边部分边界就可以设置为330
    左边或右边, 只能固定一遍宽度, 一般固定漂浮宽度, 然后让别人“围绕”,如果两边都设置宽度, 当浏览器宽度
    变更时, 就会出现两边谁也不管谁, 出现重叠或大缺口现象

    clear 属性, 不准许漂浮元素出现在它的左,右. 例如 clear: right; 在页脚中使用可以防止页脚上移
    因为 页脚元素不准许漂浮出现在它的左右.


    =================凝胶布局========== important ====================================
    介于冻结布局和流动布局之间
    内容区的宽度是固定的,单边界随着浏览器窗口扩大或缩小
    凝胶物布局锁定了页面中内容区得宽度,单把它放到浏览器中央.
    把元素的左右边界设置为 aoto, margin-left: auto;  margin-right: auto


    =================绝对布局========== important ====================================
    绝对布局来分栏
    position: absolute; ( static, absolute, fixed, relative )
    top: 100px;
    right: 200px;
    280px;
    绝对布局也在流布局以外
    流元素中的内容根本不知道绝对布局的存在

    设置表格边框的间距
    border-spacing: 10px30px;
    border-collapse: collapse;    // 压缩表格边框为一个边框
    可以将表格中的单元格扩展为多行多列
    <td rowspan="2" colspan="2">  // 扩展为 2 行, 2 列
    table 可以嵌入<td> 标签中嵌入 <table>

    table table th {        // 嵌套表格的式样
        background-color: white;
    }
    <ul>
        <li>
    </ul>

    li {
        list-style-type: disc;
        list-style-image:    url(images/backpack.gif);
    }


    xhtml 头文件
    <!DOCTYPE html PUBLIC "-//W3C//DTD/ XHTML 1.0 Strict// EN"
    "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type"
                  content="text/html; charset=ISO-8895-1" />
                 
    表单内的提交元素只要掌握 3 个就够了
    <input>  // radio 这个选项的name属性是一样的, 比如你有一系列值为“red” "green" "blue" 而名字为 "color"的单选按钮
                这些按钮名都是color, 不过某一时间只能选择一个按钮, 所以这一组的安牛逼命名为一个名字才有意义.
    <select>
    <textarea>
    表单通信方式
    post: 把表单变量打包后隐藏在后台发送给服务器
    get: 把表单变量打包后, 不过在它想浏览器发送请求之前, 附加在URL末端, 例如 baidu
    什么时候需要使用GET方式呢?当你的WEB应用程序返回一个搜索结果列表时,你可能希望用户能够标记返回的结果,
    这样用户不用再填满表单就能看到结果了.
    get 是用来从服务器上获得数据, 而post是用来向服务器上传递数据
    get 传输数据量下, 主要受URL长度限制
    get 以 URL 字串本身传递数据参数, 在服务器端可以从"QUERY_STRING"这个变量中直接读取, 效率高, 但缺乏安全性,
    也无法用来处理复杂数据
    Post 传输方式会打包在数据报中传输, 从CONTENT_LENGTH 这个环境变量中读取, 便于传送较大一些数据, 安全性高, 不会暴露数据在浏览器地址中,
    效率相对会受到影响


    表单中, name属性十分重要, 当单击提交按钮时, 浏览器提取所有的名字连同它们的值一起
    发送到服务器。

    表单使用表格布局比较方便

    另外 filedset 和 legend 也可用于表单中, 组别内容时
    label 也可以用于表单中, 这样只要点到这个字, radio就会跟着变

    文件传输
    <input type="file" name="doc" />

    为了提高网页排序并告知搜索引擎网页相关内容, 需要<head>添加两个<meta>标签,一个列举关键字, 另一个提供内容描述
    <meta name=“description” content="This would be your description of what is on your page">
    <meta name="keywords" content="keyword 1, keyword 2" />


    例子

    -HTML

       1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       2:      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
       3:  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
       4:      <head>
       5:          <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
       6:          <title>Head First Lounge</title>
       7:          <link type="text/css" href="CoffeeRomm.css" rel="stylesheet" />
       8:      </head>
       9:      <body>
      10:          <h2>Weekly Elixir Specials</h2>
      11:          <p id="amazing">
      12:              <img src="images/1.jpg" alt="Coffee pic" />
      13:          </p>
      14:          <p>
      15:              <img src="images/3.jpg"/ alt="Coffee logo" />
      16:          </p>
      17:          <h3>Lemon Coffee</h3>
      18:          <p class="guarantee">
      19:              The ultimate healthy drink, this elixir combines
      20:              herbal botanicals, minerals, and vitamins with
      21:              a twist of lemon into a smooth citrus wonder
      22:              that will keep your immune system going all
      23:              day and all night.
      24:          </p>
      25:          
      26:   
      27:          <div id="cats">
      28:              <h3>Chai Chiller</h3>
      29:              <p>
      30:                  Not your traditional chai, this elixir mixes mat&eacute;
      31:                  With chai spices and adds an extra chocolate kick for
      32:                  a caffeinated taste sensation on ice.
      33:                  haha<br />    
      34:              </p>
      35:          </div>
      36:          <p>
      37:              
      38:                  <img id="floatt" src="images/2.jpg" alt="Coffee pic"/>
      39:                  fdafodalfdkasfdlasfjdklasfjkldasjlkfdajklsfjdklasjfkdajkflkjdajkfldjaklfdjffffffff
      40:                  fdjlakfdjaklfdjasklfdasjklfffffffffffffffffffffffffffffffffffffffffffffffffffff
      41:                  ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
      42:              
      43:          </p>
      44:          <h3>Black Brain Brew</h3>
      45:          <p id="cle">
      46:              Want to boost your memory ? Try our Black Brain Brew
      47:              elixir, made with black oolong tea and just a touch
      48:              of espresso. Your brain will thank you for the boost.
      49:          </p>
      50:          <p>
      51:              Join us any evening for these and all our
      52:              other wonderful
      53:              <a href="aaa/aaa.html" title="Head First Lounge Elixirs">elixirs</a>
      54:          </p>
      55:          p>
      56:              Want to boost your memory ? Try our Black Brain Brew
      57:              elixir, made with black oolong tea and just a touch
      58:              of espresso. Your brain will thank you for the boost.
      59:          </p>
      60:          <p>
      61:              Join us any evening for these and all our
      62:              other wonderful
      63:              <a href="aaa/aaa.html" title="Head First Lounge Elixirs">elixirs</a>
      64:          </p>
      65:          <form action="http://www.nihao.com" method="POST"> 
      66:              <p>Just type in your name (and click Submit) to
      67:                  enter the contest:<br />
      68:                  First name: <input type="text" name="firstname" value="" /><br />
      69:                  Last name : <input type="text" name="lastname" value="" /><br />
      70:                  Sex : <input type="radio" name="sex" value="" /><br />
      71:                  <input type="submit" value="OK"/>
      72:                  <textarea name="comments" rows="10" cols="48"></textarea>
      73:                  <select name="characters" multiple="multiple">
      74:                      <option value="Buckaroo">Buckaroo Banzai</option>
      75:                      <option value="Tommy">Perfect Tommy</option>
      76:                  </select>
      77:              </p>
      78:              <p>Extras: <br />
      79:                  <input type="checkbox" name="extras[]" value="gifwarp"/> Gift warp<br />
      80:                  <input type="checkbox" name="extras[]" value="catalog" checked="checked" />Include
      81:                  <input type="file" name="doc" />
      82:              </p>
      83:          </form>
      84:          
      85:      </body>
      86:   
      87:  </html>

    - CSS

    - PICTURE

    image

    image

    image

  • 相关阅读:
    nyoj--76--超级台阶
    nyoj--17--单调递增最长子序列
    poj-2406-Power Strings(KMP)
    poj-1611-The Suspects(并查集)
    poj 2031--Building a Space Station(prim)
    poj 3259-- Wormholes(SPFA)
    nyoj 21--三个水杯(隐式图bfs)
    HDU
    HDU
    CodeForces
  • 原文地址:https://www.cnblogs.com/moveofgod/p/3371713.html
Copyright © 2020-2023  润新知