zoukankan      html  css  js  c++  java
  • Head First HTML CSS XHTML笔记

    最近在看点前端的东西,看到了这本入门级的好书

    <head></head>中的title和style

    <q></q> inline元素 在<p>中

    <blockquote><blockquote> 块元素

    <br> 空元素

    <ol></ol> 有序(前面有1,2,3...)
    <li><li> 项列表,嵌入在ol或者ul中
    <ul></ul> 无序

    列表是一组项目,<li>元素用来确定每个项目,<ol>把它们组成一组
    所以<ol>和<li>必须一起用。

    使用<a>来跳转到链接页面的指定区域
    a.html:
    <html>
      <body>
        <h1>hihi</h1>
        <h2><a id="chai">Chai Tea</a></h2>
      </body>
    </html>

    b.html:
    <html>
      <body>
        <a href="a.html#chai">See Chai Tea</a>
      </body>
    </html>

    打开b后,点击链接,可以跳转到a页面的Chai Tea区域


    打开新窗口,添加target对象为_blank
    <html>
      <body>
        <a target="_blank" href="index.html#chai">See Chai Tea</a>
      </body>
    </html>


    img是内联元素

    如果图形没有显示,alt的文字用来代替图片
    <img src="url.gif" alt="no pages">

    标准,提示浏览器该页面符合协议
    <!DOCTYPE html PUBLIC ""...>
    去w3c检测自己的网页是否符合标准

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    head是放置title,meta,style元素的唯一地方

    内联和文本必须在块元素中才可以运行

    块元素不鞥呢内嵌在内联元素里

    xhtml是xml

    xhtml的空元素都以 /> 结尾

    css

    在head中,使用link,添加css文件
    <link type="text/css" rel="stylesheet" href="my.css" />
    type为类型
    rel为关系,即样式表

    p{
    color: red;
    }

    p.greentea{
    color: green;
    }

    <p class="greentea">...

    用图片做背景
    background-image: url(images/background.gif)

    p.specials{}选择specials class的段落
    .specials{}选择specials class的所有元素
    #footer{} 选择id为footer的任意元素
    p#footer{} 选择id为footer的<p>元素

    可以多样式表,多个link即可
    还能多样式表用于不同的设备,如打印机,在link添加media="print"

    div来进行逻辑分区

    选择子孙
    div h2{}
    #elixirs h2{}

    <span>用于创建一组内联字符和元素,用来对<p>进行设置
    因为不能用div,会引起换行


    链接也可以设置样式
    a.link{ color: green}
    a.visited{}
    a.hover{}
    a.focus{}
    a.active{}

    这就是伪类


    流,块是从上到下,内联是从左到右

    table,从上到下,从左到右
    <table summary="table's data"> 摘要
      <tr> 第一列
        <th></th> 表头
        <th></th>
        <th></th>
      </tr>
      <tr> 第二列
        <td></td> 第二行
        <td></td>
        <td></td>
      </tr>
      <tr> 第三列
        <td></td> 第三行
        <td></td>
        <td></td>
      </tr>
    </talbe>


    li table的样式设置
    li还可以自定义样式


    表单

    <form action="url" method="POST">
    <input type="submit">
    </form>

    w3c不建议使用框架<frame> <frameset>


    媒体元素<object>

  • 相关阅读:
    pt-tcp-model
    (转)从史上八大MySQL宕机事故中学到的经验
    pt-query-digest
    DNS生效时间
    Python之uuid模块
    一个IO的传奇一生
    Python之Queue模块
    利用freemarker 静态化网页
    FreeMarker教程
    模板引擎freemarker的简单使用教程
  • 原文地址:https://www.cnblogs.com/juandx/p/4974633.html
Copyright © 2011-2022 走看看