zoukankan      html  css  js  c++  java
  • HTML学习笔记2

    HTML计算机代码元素

    HTML显示计算机代码时不适用可变的字母尺寸和间距,<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

    HTML键盘格式

    <kbd>定义键盘输入。

    HTML 样本格式

    HTML <samp> 元素定义计算机输出示例。

    HTML 代码格式

    HTML <code> 元素定义编程代码示例。<code>不保留多余的空格和折行。如果想要保留空格和折行,可增加<pre>

    <code>
    <pre>
    var person = {
        firstName:"Bill",
        lastName:"Gates",
        age:50,
        eyeColor:"blue"
    }
    </pre>
    </code>

    这样输出的将保留文本格式。

    HTML 变量格式化

    HTML <var> 元素定义数学变量:

    <p>爱因斯坦公式:</p>
    <p><var>E</var>=<var>m</var><var>c</var><sup>2</sup>

    HTML 计算机代码元素

    标签描述
    <code> 定义计算机代码文本
    <kbd> 定义键盘文本
    <samp> 定义计算机代码示例
    <var> 定义变量
    <pre> 定义预格式化文本

    HTML 注释

    HTML使用<!--注释-->来添加注释。浏览器不会显示注释内容。注释可以折行使用,可将一整句HTML语句注释掉。

    条件注释:

    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->

    条件注释定义只有 Internet Explorer 执行的 HTML 标签。

    软件程序标签

    各种 HTML 软件程序也能够生成 HTML 注释。

    例如 <!--webbot bot--> 标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。

    作为一项规则,这些标签的存在,有助于对创建这些标签的软件的支持。

    HTML CSS

    例1:本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

    <html>
    <head>
    <style type="text/css">
    h1{color:red}
    p{color:blue}
    </style>
    </head>
    
    <body>
    <h1>header1</h1>
    <p>A paragraph.</p>
    </body>
    
    </html>

    效果如下:

    例2:不带下划线的链接

    <html>
    <body>
    <a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接!</a>
    </body>
    </html>

    这将产生一个没有横线的链接

    例3:本例演示如何 <link> 标签链接到一个外部样式表。

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/html/csstest1.css">
    </head>
    
    <body>
    <h1>我通过外部样式表进行格式化。</h1>
    <p>我也一样!</p>
    </body>
    </html>

    其结果如下:

    当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

    外部样式表

    如例3所示,这样的插入方式可以通过改变样式表中的值来改变整个站点的外观。

    内部样式表

    当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。如例1所示。

    内联样式

    当要对个别元素进行格式设置时,可使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

    <p style="color:red;margin-left:20px">
    A paragraph.
    </p>

    上述代码改变了段落的颜色和左页边距。

    标签描述
    <style> 定义样式定义。
    <link> 定义资源引用。
    <div> 定义文档中的节或区域(块级)。
    <span> 定义文档中的行内的小块或区域。
    <font> 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
    <basefont> 定义基准字体。不赞成使用。请使用样式。
    <center> 对文本进行水平居中。不赞成使用。请使用样式。

    多重样式

    如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

    如,当外部样式表对标题的定义如下:

    h3 {
      color: red;
      text-align: left;
      font-size: 8pt;
      }

    内部样式表的定义为:

    h3 {
      text-align: right; 
      font-size: 20pt;
      }

    假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

    color: red; 
    text-align: right; 
    font-size: 20pt;

    颜色属性继承与外部样式表,文字属性和排列属性仍然为内部样式表。

    HTML链接

    HTML用<a>来添加超链接,

    有两种使用 <a> 标签的方式:

    1. 通过使用 href 属性 - 创建指向另一个文档的链接
    2. 通过使用 name 属性 - 创建文档内的书签

    超链接形式可以为文字,也可以为图片。以下是使用图片作为链接的例子:

    <p><a href="/example/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a></p>

    超链接内容为文字则直接将定义图片的部分改成文字即可。

    target属性

    使用target属性设置超链接文本的显示位置,如设置target为_blank,超链接将会在新窗口打开文本:

    <p><a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a></p>

    HTML链接-name属性

    name 属性规定锚(anchor)的名称。

    使用 name 属性创建 HTML 页面中的书签。

    书签不会以任何特殊方式显示,它对读者是不可见的。

    当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

    锚的命名方式:

    <a name="label">锚(要显示在页面上的文本)</a>

    示例如下:

    首先使用name属性创建命名锚:

    <a name="tips">基本的注意事项 - 有用的提示</a>

    然后在同一文档中创建对锚的链接

    <a href="#tips">有用的提示</a>

    也可在其他页面中创建指向该锚的链接,只要在URL末尾加上#锚名称即可直接链接到这个命名锚:

    <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

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

    提示:命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。

    提示:假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

    创建电子邮件链接

    <p>这是邮件链接:<a href="mailto:somebody@microsoft.com?subject=Hello%20again">发送邮件</a></p>

    结果为:这是邮件链接: 发送邮件

    注意:应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。

    另一个创建电子链接的方式:

    <p>这是另一个邮件链接<a href="mailto:somebody@microsoft.com?cc=someoneelse@microsoft.com&bcc=someoneelse2@microsoft.com
    &subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!"
    >发送邮件!</a></p>
  • 相关阅读:
    Cesium 中的图形变换:局部平移、缩放、旋转思路及代码实现
    Cesium中的图形技术:Fabric —— 材质JSON规范
    【Cesium 历史博客】多视锥体优化:使用对数深度缓存
    Cesium中的图形技术:Primitive API 高级
    Cesium中的图形技术:Primitive API 简介
    【Cesium 历史博客】Cesium 中的图形技术:顶点压缩
    【Cesium 历史博客】Cesium 中的图形技术:图形结构
    【Cesium 历史博客】Cesium 中的图形技术:渲染体系结构
    Excel筛选后复制单元格提示无法对合并单元格执行操作解决方法
    plsql导入sql脚本时提示逗号等字符错误或遗失不匹配问题处理方法
  • 原文地址:https://www.cnblogs.com/cff2121/p/9270307.html
Copyright © 2011-2022 走看看