zoukankan      html  css  js  c++  java
  • 学写网页 #04# w3school

    索引:

    WHO 成立于 1948 年。

    对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

      

    code 元素不保留多余的空格和折行:

    如需解决该问题,您必须在 pre 元素中包围代码:

    var person = {
        firstName:"Bill",
        lastName:"Gates",
        age:50,
        eyeColor:"blue"
    }
    

    爱因斯坦的公式:

    E = m c2

    通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。

    样式表分为三种,一种是把 CSS 放在单独的一个文件,叫做“外部样式表”,另外一种是把 CSS 放在 <head></head> 里面,叫做“内部样式表”,最后一种比较少用,类似于下面这样,叫做“内联样式”。

    <p style="color: red; margin-left: 20px">
    This is a paragraph
    </p>

    超链接

    注释:请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"。

    HTML 图片

    比较少用到的应该就是创建图像映射

    HTML <div> 和 <span>

    块级元素在浏览器显示时,通常会以新行来开始(和结束)。

    例子:<h1>, <p>, <ul>, <table>

    内联元素在显示时通常不会以新行开始。

    例子:<b>, <td>, <a>, <img>

    <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

    HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

    HTML <span> 元素是行内元素,能够用作文本的容器。

    设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。

    HTML 响应式 Web 设计

    一种方法是自己写,例如说:

    .city {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    } 

    另一种方法是用 Bootstrap ,好像本质上差不多。(引用外部样式表,遵循命名规定)

    HTML 框架

    导航框架  跳转至框架内的一个指定的节

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

    <frameset cols="25%,50%,25%">
      <frame src="/example/html/frame_a.html">
      <frame src="/example/html/frame_b.html">
      <frame src="/example/html/frame_c.html">
    
    <noframes>
    <body>您的浏览器无法处理框架!</body>
    </noframes>
    
    </frameset>

    - iframe 用于在网页内显示网页。

    HTML script 元素

    - <noscript> 标签

    <script type="text/javascript">
    document.write("Hello World!")
    </script>
    <noscript>Your browser does not support JavaScript!</noscript>

    - 如何应付老式的浏览器

    <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
    </script>

    HTML 头部元素

    元数据(metadata)是关于数据的信息。

    <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。

    典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

    <meta> 标签始终位于 head 元素中。

    元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

    一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

    <meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
    <meta name="keywords" content="HTML, CSS, XML" />

    URL 编码会将字符转换为可通过因特网传输的格式。

    HTML 颜色名

    选色可以参照 w3school 的颜色表

    HTML 表单

    <input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。

    表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

    表单处理程序在表单的 action 属性中指定,如果省略 action 属性,则 action 会被设置为当前页面。

    method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)

    当您使用 GET 时,表单数据在页面地址栏中是可见的 - 如果是 GET 的话可以直接编辑地址 然后回车, 而不用 在页面提交。

    HTML 输入类型

     <input type="button> 定义按钮。

    <input type="button" onclick="alert('Hello World!')" value="Click Me!">

    <input type="number"> 用于应该包含数字值的输入字段。

    您能够对数字做出限制。

    根据浏览器支持,限制可应用到输入字段。

    Quantity (between 1 and 5):
    Birthday:

    Select your favorite color:

    Birthday (month and year):
    Select a week:
    Select a time:
    Birthday (date and time):
    Birthday (date and time):
    E-mail:
    Search Google:
    Telephone:

    Add your homepage:

    掌握 input 元素的各种属性也是非常必要的。随便 COPY 几个:

    First name:
    Last name:
    First name:
    (仍然属于上面那个 Submit)Last name:
    First name:
    Last name:

    First name:
    Last name:

    Enter a date before 1980-01-01: Enter a date after 2000-01-01:

    Select images:

    (正则表达式)Country code:

    XHTML - 属性

    XHTML 是更严格更纯净的 HTML 版本

    例如它 禁止属性简写, 这是错误的:

    <input checked>
    <input readonly>
    <input disabled>
    <option selected>

    这是正确的:

    <input checked="checked" />
    <input readonly="readonly" />
    <input disabled="disabled" />
    <option selected="selected" />

    HTML5

    HTML5 是最新的 HTML 标准。

    HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件。

    HTML5 拥有新的语义、图形以及多媒体元素

    HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

    HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。

    canvas 和 svg 是 HTML5 的,vidio 和 audio 也是。

    新的语义/结构元素

    footer header 等块级元素也是。

    语义元素清楚地向浏览器和开发者描述其意义。

    非语义元素的例子:<div> 和 <span> - 无法提供关于其内容的信息。

    语义元素的例子:<form>、<table> 以及 <img> - 清晰地定义其内容。

    HTML5 样式指南和代码约定

    !详细从 w3school 页面中部开始读起。

  • 相关阅读:
    原创:Qt自定义拖放
    看下最近公司的招聘需求
    leveldb阅读心得
    Relationship between the FIX Protocol's OrdID, ClOrdID, OrigClOrdID?
    Wait Functions
    全局变量与单例模式
    Asynchronous I/O
    QuickFix MsgHandler
    第一个Java程序
    (原創) Function Pointer、Delegate和Function Object (C/C++) (template) (.NET) (C#)
  • 原文地址:https://www.cnblogs.com/xkxf/p/8612107.html
Copyright © 2011-2022 走看看