zoukankan      html  css  js  c++  java
  • HTML基本元素的运用

    段落相关标签<p><br><hr>

    格式化相关标签<small><sub><sup><pre>

    列表相关标签<ol><ul><li>

    图片相关标签<img>

    超链相关标签<a>

    本章重点:段落相关标签,超链标签

    本章难点:超链相关标签<a>

    一、  段落相关标签

    标题元素:

    标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素,<h6>定义了最小的。

    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    <h4>This is a heading</h4>
    <h5>This is a heading</h5>
    <h6>This is a heading</h6>

    HTML自动在一个标题元素前后各添加一个空行。

    段落:

    段落是用<p>标签定义的。

    <p>This is another paragraph</p>

    HTML自动在一个段落前后各添加一个空行。

    换行:

    当需要结束一行,并且不想开始新段落时,使用<br>标签。<br>标签不管放在什么位置,都能够强制换行。

    <p>This <br> is a para<br>graph with line breaks</p>

    <br>标签是一个空标签,它没有结束标记。

    二、   格式化相关标签

    格式化文字:

    <html>

    <body>

    <b>This text is bold</b><br>

    <strong>

    This text is strong

    </strong><br>

    <big>

    This text is big

    </big><br>

    <em>

    This text is emphasized

    </em><br>

    <i>

    This text is italic

    </i><br>

    <small>

    This text is small

    </small><br>

    This text contains

    <sub>

    subscript

    </sub><br>

    This text contains

    <sup>

    superscript

    </sup>

    </body>

    </html>

    这个例子说明了在HTML里面可以怎样格式化文本。

    三、   列表相关标签

    无序列表:

    无序列表是一个项目的序列。各项目前加有标记(通常是黑色的实心小圆圈)。
    无序列表以<ul>标签开始。每个列表项目以<li>开始。

    <ul>
    <li>Coffee</li>
    <li>Milk</li>

    </ul>

    无序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。

    有序列表:

    有序列表也是一个项目的序列。各项目前加有数字作标记。
    有序列表以<ol>标签开始。每个列表项目以<li>开始。

    <ol>
    <li>Coffee</li>
    <li>Milk</li>

    </ol>

    更多示例:

    有序列表的不同类型:

    <html>

    <body>

    <h4>Numbered list:</h4>

    <ol>

      <li>Apples</li>

      <li>Bananas</li>

      <li>Lemons</li>

      <li>Oranges</li>

    </ol>

    <h4>Letters list:</h4>

    <ol type="A">

      <li>Apples</li>

      <li>Bananas</li>

      <li>Lemons</li>

      <li>Oranges</li>

    </ol>

    <h4>Lowercase letters list:</h4>

    <ol type="a">

      <li>Apples</li>

      <li>Bananas</li>

      <li>Lemons</li>

      <li>Oranges</li>

    </ol>

    <h4>Roman numbers list:</h4>

    <ol type="I">

      <li>Apples</li>

      <li>Bananas</li>

      <li>Lemons</li>

      <li>Oranges</li>

    </ol>

    <h4>Lowercase Roman numbers list:</h4>

    <ol type="i">

      <li>Apples</li>

      <li>Bananas</li>

      <li>Lemons</li>

    <li>Oranges</li>

    </ol>

    </body>

    </html>

    这个例子显示了有序列表的不同类型。


    无序列表的不同类型:

    <html>

    <body>

    <h4>Disc bullets list:</h4>

    <ul type="disc">

      <li>Apples</li>

      <li>Bananas</li>

      <li>Lemons</li>

      <li>Oranges</li>

    </ul>

    <h4>Circle bullets list:</h4>

    <ul type="circle">

      <li>Apples</li>

      <li>Bananas</li>

      <li>Lemons</li>

      <li>Oranges</li>

    </ul>

    <h4>Square bullets list:</h4>

    <ul type="square">

      <li>Apples</li>

      <li>Bananas</li>

      <li>Lemons</li>

      <li>Oranges</li>

    </ul>

    </body>

    </html>

    这个例子显示了无序列表的不同类型。

    四、   图片相关标签

    Img标签和src属性:

    在HTML里面,图像是由<img>标签定义的。
    <img>是空标签,意思是说,它只拥有属性,而没有结束标签。
    想要在页面上显示一个图像,需要使用src属性。“src”表示“源”的意思。“src”属性的值是所要显示图像的URL。

    插入图像的语法:

    URL指向图像存储的地址。网站“www.w3schools.com”子目录“images”中的图像“boat.gif”的URL如下: “http://www.w3schools.com/images/boat.gif”。

    当浏览器在文档中遇到img标签时,就放置一个图像。如果把img标签放在两个段落之间,就会先显示一个段落,然后是这个图像,最后是另外一个段落。

    alt属性:

    alt属性用来给图像显示一个“交互文本”。alt属性的值是由用户定义的。

    “alt”属性在浏览器装载图像失败的时候告诉用户所丢失的信息,此时,浏览器显示这个“交互文本”来代替图像。给页面上的图像都加上alt属性是一个好习惯,它有助于更好地显示信息,而且,对纯文本浏览器很有用。


    基本注意点——有用的技巧:

    如果一个HTML文档包含10个图像,那么为了正确显示这个页面,需要加载11个文件。加载图像是需要时间的,所以请谨慎使用图像。

    更多示例:


    调整图像大小:

    <html>

    <body>

    <p>

    <img src="./images/hackanm.gif" width="20" height="20">

    </p>

    <p>

    <img src="./images/hackanm.gif" width="45" height="45">

    </p>

    <p>

    <img src="./images/hackanm.gif" width="70" height="70">

    </p>

    <p>

    You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag.

    </p>

    </body>

    </html>


    背景图像:

    <html>

    <body background="./images/background.jpg">

    <h3>Look: A background image!</h3>

    <p>Both gif and jpg files can be used as HTML backgrounds.</p>

    <p>If the image is smaller than the page, the image will repeat itself.</p>

    </body>

    </html>

    图像链接:

    <html>

    <body>

    <p>

    You can also use an image as a link:

    <a href="back.htm">

    <img border="0" src="./images/next.gif">

    </a>

    </p>

    </body>

    </html>

    五、   超链相关标签

    锚标签和href属性:

    HTML使用锚标签(<a>)来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。

    创建一个锚的语法:

    锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。

    标签<a>被用来创建一个链接指向的锚,href属性用来指定连接到的地址,在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。

    这个锚定义了一个到W3Schools的链接:

    上面这段代码在浏览器中显示的效果如下:

    target属性:


    使用target属性,你可以定义从什么地方打开链接地址。
    下面这段代码打开一个新的浏览器窗口来打开链接:

    锚标签和name属性

    name属性用来创建一个命名的锚。使用命名锚以后,可以让链接直接跳转到一个页面的某一章节,而不用用户打开那一页,再从上到下慢慢找。

    下面是命名锚的语法:

    你可以为锚随意指定名字,只要你愿意。下面这行代码定义了一个命名锚:

    你应该注意到了:命名锚的显示方式并没有什么与众不同的。

    想要直接链接到“tips”章节的话,在URL地址的后面加一个“#”和这个锚的名字,就像这样:

    一个链接到本页面中某章节的命名锚是这样写的:

    基本注意点——有用的技巧:


    尽量在子目录路径后面加一个左斜杠。假如你像下面这样写:href="http://www.w3schools.com/html",将会产生向服务器产生两个HTTP请求,因为服务器会在后面追加一个左斜杠,产生一个新的请求,就像这样:href="http://www.w3schools.com/html/"。

    命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚,到这些锚的链接被放在页面的顶端。

    如果浏览器无法找到指定的命名锚,它将转到这个页面的顶部,而不显示任何错误提示。

    更多示例:

    在新浏览器窗口中打开链接:

    <html>

    <body>

    <a href="lastpage.htm" target="_blank">Last Page</a>

    <p>

    If you set the target attribute of a link to "_blank",

    the link will open in a new window.

    </p>

    </body>

    </html>

    单击超连接,打开一个新窗口:

    链接到本页面的某个位置:

    <html>

    <body>

    <p>

    <a href="#C4">

    See also Chapter 4.

    </a>

    </p>

    <p>

    <h2>Chapter 1</h2>

    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 2</h2>

    <p>This chapter explains ba bla bla</p>

    <h2>Chapter 3</h2>

    <p>This chapter explains ba bla bla</p>

    <a name="C4"><h2>Chapter 4</h2></a>

    <p>This chapter explains ba bla bla</p>

    </body>

    </html>

    单击超连接

  • 相关阅读:
    leetcode教程系列——Binary Tree
    《Ranked List Loss for Deep Metric Learning》CVPR 2019
    《Domain Agnostic Learning with Disentangled Representations》ICML 2019
    Pytorch从0开始实现YOLO V3指南 part5——设计输入和输出的流程
    Pytorch从0开始实现YOLO V3指南 part4——置信度阈值和非极大值抑制
    Pytorch从0开始实现YOLO V3指南 part3——实现网络前向传播
    Pytorch从0开始实现YOLO V3指南 part2——搭建网络结构层
    Pytorch从0开始实现YOLO V3指南 part1——理解YOLO的工作
    让我佩服的人生 文章
    win8.1配置cordova+ionic等一系列东西
  • 原文地址:https://www.cnblogs.com/borter/p/9439650.html
Copyright © 2011-2022 走看看