HTML学习笔记3

Html链接:

创建HTML超链接:

  1. 使用href属性
  2. 使用name属性-创建文档内的书签

什么是超文本?

  • 标记语言的真正威力在于其收集能力,它可以将收集来的文档组合成一个完整的信息库,并且可以将文档库与世界上的其他文档集合链接起来。
  • 读者不仅可以完全控制文档在屏幕上的显示,还可以通过超链接来控制浏览信息的顺序。这就是 HTML 和 XHTML 中的 “HT” - 超文本(hypertext),就是它将整个 Web 网络连接起来。

&超文本的基础知识:

  1. 基本特征:可以超链接文档 
  2. 超链接:锚(anchor)

                 (1)创建热点,浏览器跳转页面

                 (2)创建标记,被超链接引用(跳转到文档的某个位置)

&链接标签的相关属性:

  1. href.   href 属性规定链接的目标。
  2. target.  使用 Target 属性,你可以定义被链接的文档在何处显示。
  3. name/id.  创建 HTML 页面中的书签,即设置命名锚。可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

创建指向该锚的链接:

           有用的提示

也可以在其他页面中创建指向该锚的链接:

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

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

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

Html图像:

  src源属性

“Big  alt替换文本属性

  • 在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。

&假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

【But:目前大多数页面几乎是由图片构成,如何解决的加载问题?】

定义图像地图

定义图像中可点击的区域

Html表格:

  • 表格由 标签来定义。
  • 标签定义表格的行
  • 每行被分割为若干单元格(由
  • 定义用于表格列的属性(居中,左,右)

    • 所有主流浏览器都支持
    标签。
  • Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。
  • 用于对表格中的列进行组合,以便对其进行格式化。
  • 只能在 table 元素中使用。
  • 具体请况可查询Html标签大全

    定义表格页眉

    定义表格页脚

    Html  列表:

    HTML 支持有序、无序和定义列表

    &无序列表:

    • 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。就像当前格式一样
    • 无序列表始于
        标签。每个列表项始于
      • 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

      &有序列表:

      1. 有序列表也是一列项目,列表项目使用数字进行标记。就像当前格式一样
      2. 有序列表始于
          标签。每个列表项始于
        1. 标签。
        2. 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

        &定义列表:(自定义)

        自定义列表不仅仅是一列项目,而是项目及其注释的组合。

        自定义列表以

        标签开始。每个自定义列表项以
        开始。每个自定义列表项的定义以
        开始。

        Coffee

        Black hot drink

        Milk

        White cold drink

        浏览器显示如下:

        Coffee

        Black hot drink

        Milk

        White cold drink

        Html块:

        可以通过

        将 HTML 元素组合起来。

        • 大多数 HTML 元素被定义为块级元素或内联元素。

        编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。

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

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

        • 当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。

        Html类:“通过class属性设置类”

        对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。

                     类名{

                               //css的样式设计代码           }

        为相同的类设置相同的样式,或者为不同的类设置不同的样式。

        1. 分类块级元素:
          中设置类
        2. 分类行内元素:中设置类

        Html布局:

        1. 使用
          元素的Html布局
        2. 使用Html5的网站布局
        •  HTML5 提供的新语义元素定义了网页的不同部分
        1. 使用表格的Html布局
    标签定义)。
  • 字母 td 指表格数据(table data),即数据单元格的内容。
  • 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
  • row 1, cell 1 row 1, cell 2
    row 2, cell 1 row 2, cell 2

    在浏览器显示如下:

    row 1, cell 1

    row 1, cell 2

    row 2, cell 1

    row 2, cell 2

    • 表格的表头使用
    标签进行定义。

    &表格中的空单元格:

    在一些浏览器中某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。为了避免这种情况,在空单元格中添加一个空格占位符( ),就可以将边框显示出来。

    &可能有用的表格标签:

    定义表格标题

    元素不是作为布局工具而设计的。
  • 元素的作用是显示表格化的数据。
  • 使用
  • 元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式

    你可能感兴趣的:(前端Web,HTML)