zoukankan      html  css  js  c++  java
  • HTML要点札记

    引子:网页技术与标准

      1).静态网页技术:(相对于动态网页而言,是指没有后台数据库、不含程序和不可交互的网页)
        文档呈现语言:HTML/XHTML/XML/XForms/DHTML
        样式格式描述语言:CSS/XSL
        客户端脚本语言:JavaScript/JScript/VBScript/ECMAScript
      2).动态网页技术:ASP.NET/JSP/PHP/CGI/FastCGI/ColdFusion
      3).客户端交互技术:ActiveX/AJAX/Silverlight/ActionScript/Java Applet/JavaFX/Flex/AIR

      附:静态页面、动态页面与动态HTML。静态页面和动态页面区别重要标志:程序是否在服务器端运行。

      静态页面:
      以.htm、.html、.shtml等为后缀
      每个网页都是一个文件,有一个固定的URL。
      网页代码都在页面文件中,不用执行asp、php、jsp、.net等程序生成客户端代码。
      不能自主管理发布更新的页面,更新需要通过ftp把文件下载来修改。

      动态页面:
      以aspx、asp、jsp、php、perl、cgi等形式为后缀
      不是独立存在于服务器上的网页文件,而是当用户请求时服务器才返回一个完整的网页;动态网页URL中有一个标志性的符号——“?”,后面。
      通过执行asp、php、jsp、.net等程序生成客户端代码
      可以通过网站后台管理进行更新,发布。

      动态HTML:
      DHTML是Dynamic HTML的简称,就是动态html,是相对传统的静态的html而言的一种制作网页的概念。
      它是HTML、CSS和客户端脚本的一种集成,即一个页面中包括html+css+javascript(或其它客户端脚本),其中css和客户端脚本是直接在页面上写而不是链接上相关文件。

    1.HTML定义

      HTML(Hyper Text Markup Language):超文本标记语言。HTML文档就是网页,由浏览器解析、显示(浏览器解析是不严格的);

    2.HTML结构和特点

      (1)HTML结构
      标签:有始有终,小写规范。
      内容:body分工,内容其中。
      注释:跨行注释,不要嵌套。
      属性:键值双引,空格分列。
      <html>
      <head>
      </head>
      <body bgColor="red" text="yellow">
      <!--
      全都注释
      -->
      </body>
      </html>

      (2)HTML与XML比较
      相同点:都是标记语言,注释相同,可以通过DOM控制,可以通过CSS控制
      不同点:xml语法更加严格规范,xml主要存储数据,html注重展示数据。

      附:XHTML (eXtensible HypertTextMarkup Language) 符合xml语法规范的html
      DHTML (Dynamic HTML) 动态HTML(html+css+javascript+...)

    3.HTML标签

    3.1 文本标签

      (1)标题标签
      用"h+数字"表现描述
      <h1>标题测试</h1><h2>标题测试</h2>
      在两个标签中间显示的数据就是标题
      标题会自动的换行
       数字是有一定范围的(1~6)

      (2)物理字体标签
      加粗 <b>这是粗体</b> --boldface
      斜体 <i>意大利斜体</i>
      打字机字体 <tt>打字机字体</tt>
      下划线 <u>下划线效果</u>
      上下标 <sup></sup><sub></sub> 3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup> f<sub>n</sub>
      删除线 <s>增发密令</s>

      (3)逻辑字体标签--关键字的定位,利于js操作,利于SEO (搜索引擎抓取)
      <em>(强调文本-斜体)</em>
      <strong>(强调文本-粗体)</strong>
      <code>(计算机代码文本)</code>
      <cite> 定义引用 </cite>
      <small> 小号文本</small>
      <big> 大号文本</big>
      <kbd>(键盘文本)</kbd>
      <samp></samp>
      <var></var>
      <dfn></dfn>

      (4)客户端字体
      <font size="7" color="red" face="华文彩云">客户端</font> font常用三个

    3.2 格式标签

      段落 <p align="center"></p> 前后换行 在HTML4.01不推荐使用 --paragraph align="left"/align="right"
      换行 <br/> 单标签,实现功能 (成对标签 有一定的范围)
      居中 <center></center> 了解 基本不用了
      分割线 <hr size="5" color="pink" width="600" align="left" noshade="noshade"/> --noshade
      预格式化<pre></pre> 保留原始原样的格式
      <pre>
               锄禾日当午,
      汗 滴 禾 下 土。
                             谁知盘中餐,
         粒 粒 皆 辛 苦。
      </pre>
      空格
        -> 如果空格两边均有内容(文本),那么多个空格与换行视为一个空格
        -> 如果两边只要要有一边没有内容,就忽略空格
        -> 如果需要显示空格使用,"&nbsp;"表示一个空格
      尖括号
        "<" &lt less then
        ">" &gt greater then

    3.3 图片标签

      语法<img src="图片地址" alt="图片不存在" title="这是一张图片" border="2px solid red"/>
      属性:width 宽度 Height 高度 只设置其中一个则等比例缩放,若果设置了两个,则拉伸缩放;
      alt 必需的属性,它规定在图像无法显示时的替代文本;
      title 鼠标放上去显示
      border 边框

    3.4 超链接-a标签

      URI:Universal Resource Identifier 通用资源标识符 URL是URI的一种形式
      URL:Uniform Resource Locator 统一资源定位符
      URL由三部分组成:协议类型,主机名和路径及文件名。本机或局域网的协议类型为file
      <a href="url">连接显示的内容</a>

      简单示例:<a href="http://www.baidu.com">百度一下</a>
      说明:
      (1)target属性
      <a href="http://www.tudou.com" target="_blank">土豆</a>
      (2)name属性
      <a name="md">这是一个锚定</a>
      <a href="#md">跳到锚定</a>
      (3)a标签中可以有图片
      <a href="http://www.baidu.com"><img src=".\baidu.gif" /></a>
      <a href=".\girl.jpg" target="_blank"><img src=".\small\girl.jpg" /></a>
      <a href="mailto:kinglong1984@126.com?subject=mailTitle&body=mailbody" >发送邮件</a>

    3.5 HTML结构标签

    3.5.1 body标签的属性

      bgcolor 背景颜色
      text属性 文本颜色 ---内容中<font color="#ffffff">fjaljfklad</font> 的范围则使用该标签元素的颜色
      link 点之前的颜色
      alink 点的时候颜色
      vlink 点过之后颜色
      <body text="#ffffff" bgcolor="red" background=".\source\bg.jpg" ></body> ---bgcolor="red"被覆盖掉了

    4.HTML控件标签

    4.1 HTML列表 List

      4.1.1 无序列表(unorder list)

      项--list item

      <ul Type="square">
        <li>每一项</li>
        <li>每一项</li>
        <li>每一项</li>
      </ul>
      -> 使用type设置其引导的标记
      cricle 小圆圈
      disk 小黑点(默认)
      square 小方框

      4.1.2 有序列表(order list)

      <ol type="a">
        <li>每一项</li>
        <li>每一项</li>
        <li>每一项</li>
      </ol>
      -> 使用type设置其引导的标记
      "1" 数字
      "a" 字母
      "i" 罗马

      4.1.3  自定义列表(defined list) --美术馆评论列表中用了

      <dl>
        <dt>编程<dt>
          <dd>C#编程<dd>
          <dd>JAVA编程<dd>

      </dl>

    4.2 HTML表格Table标签

       以前及内网中用到 --- 现在多使用div+ul
      <table bordercolor="red" border="1" width="600" height="300">
        <tr>
          <td align="right" valign="bottom">第一行第一列</td>
          <td align="left" valign="bottom">第一行第二列</td>
        </tr>
        <tr>
          <td align="right" valign="top">第二行第一列</td>
          <td align="left" valign="top">第二行第二列</td>
        </tr>
      </table>

      <table border="1" bordercolor="red">
        <tr>
          <td rowspan="2">1234567890</td>
          <td>1234567890</td>
        </tr>
        <tr>
          <td>1234567890</td>
        </tr>
        <tr>
          <td colspan="2">1234567890</td>
        </tr>
        <tr>
          <td>1234567890</td>
          <td>1234567890</td>
        </tr>
      </table>

    4.3 表单标签

      <form>
        <input type="text" />
        <input type="submit" />

      </form>

      4.3.1 表单元素--非单值

        单选按钮 radio
          <input id = "m" type = "radio" name = "sex" checked = "checked"/><label for = "m">男<label>
          <input id ="fm" type = "radio" name = "sex" /><label for = "fm" >女</label><br/><br/>
        复选按钮 checkbox
          <label>爱好:</label>&nbsp&nbsp
          <input id = "c1" type = "checkbox" name = "ds" value = "1"/><label for = "c1">登山</label>
          <input id = "c2" type = "checkbox" name = "yy" value = "2"/><label for = "c2">游泳</label>
          <input id = "c3" type = "checkbox" name = "dq" value = "3"/><label for = "c3">打球</label>
          <input id = "c4" type = "checkbox" name = "dq" value = "4"/><label for = "c4">打豆豆</label>

        将文字放在label标签中,绑定一个控件的id号,点击label标签中的内容与点击控件效果一样
        <input type="checkbox" id="ck" /><label for="ck">我是文本</label>

      4.3.2 表单元素--select

        设置size属性
        -> size默认为1,就是ComboBox,只将选中的项显示出来,其他项在下拉列表中
        -> 设置size为n,表示显示n行的ListBox 一次性显示n项,大于n项时可通过滚动条来查看。
        -> 默认情况是单选,在select中添加multiple属性即可多选(ctl)
        <select id = "s1" name = "domain">
          <option value = "1">@126.com</option>
          <option value = "2" selected = "selected">@qq.com</option>
          <option value = "3">@163.com</option>
        </select>

    5. 帧标签

      <frameset>
      </frameset>
        -> 一个html中直接写上frameset,不需要提供<html>、<body>等标签
        -> 在frameset中可以添加frame标签,默认就是一个页面,用src写地址
        -> 在frameset标签中有两个常见的属性
        -> rows 行分大小 rows="30%,40%,*"
        -> cols 列分大小
        -> frame标签中有个属性表示noresize="noresize",使得页面不能调整大小
        -> 并非所有浏览器都兼容frameset,那么如果有不兼容的时候,可以提供
      <noframes><body></body></noframes>
      在不兼容的情况下,显示body中的内容

      示例:

      <html>
        <frameset rows =30%,*>
          <frame src="top.html">
          <frameset cols =30%,*>
            <frame src="left.html">
            <frame src="right.html">
          </frameset>
        </frameset>
      </html>

  • 相关阅读:
    用Python完成一个汇率转换器
    鸿蒙如何用JS开发智能手表App
    鸿蒙如何用JS开发智能手表App
    SAP Spartacus SplitViewComponent Migration 的一个具体例子
    SAP Spartacus B2B 页面 Popover Component 的条件显示逻辑
    SAP Spartacus 升级时关于 schematics 的更新
    SAP Spartacus B2B 页面 Disable 按钮的显示原理
    SAP Spartacus B2B 页面 Disable Confirmation 对话框的显示原理
    通过 Feature Level 动态控制 SAP Spartacus 的页面显示
    SAP Commerce Cloud Build Manifest Components
  • 原文地址:https://www.cnblogs.com/Extreme/p/2923360.html
Copyright © 2011-2022 走看看