web 课程

格式

<br /> <br/>  #换行

图片

<img> 标签是用于在网页中嵌入图像的 HTML 标签，它有一些属性可以用来控制图像的加载、显示和交互。以下是对 <img> 标签常用属性的详细介绍：

1. src：

   • 这是最重要的属性，指定图像文件的 URL。必须指定，否则图像无法显示。
   • 示例：<img src="example.jpg">

2. alt：

   • 提供图像的替代文本，当图像无法加载时或者用户使用屏幕阅读器时显示。也有利于SEO。
   • 示例：<img src="example.jpg" alt="Example Image">

3. width：

   • 设置图像的宽度，单位可以是像素或者百分比。如果未指定高度，图像会按比例缩放。
   • 示例：<img src="example.jpg" width="200"> 或 <img src="example.jpg" width="50%">

4. height：

   • 设置图像的高度，单位可以是像素或者百分比。如果未指定宽度，图像会按比例缩放。
   • 示例：<img src="example.jpg" height="200"> 或 <img src="example.jpg" height="50%">

5. title：

   • 提供了一个关于图像的额外信息，通常会在用户鼠标悬停在图像上时显示。
   • 示例：<img src="example.jpg" title="This is an example image">

超链接

超链接（Hyperlink）是指在网页上可点击的文本、图片或其他元素，点击后会跳转到另一个页面或资源。超链接使用HTML的 <a>（anchor）标签创建。以下是超链接的详细格式：

<a href="目标URL" target="目标窗口或框架名称" rel="关系属性">链接文本或嵌入的内容</a>

下面是对超链接标签 <a> 的属性和参数的详细说明：

1. href：

   • 必需的属性，指定链接目标的URL（Uniform Resource Locator）。可以是相对路径或绝对路径。
   • 示例：<a href="https://www.example.com">链接到示例网站</a>

2. target：

   • 指定链接在何处打开的属性。常见的取值包括：
     • _self：在当前窗口打开链接（默认值）。
     • _blank：在新窗口打开链接。
     • _parent：在父窗口中打开链接（如果存在框架）。
     • _top：在顶层窗口中打开链接（如果存在框架）。
     • 自定义框架名称：在具有相同名称的框架中打开链接。
   • 示例：<a href="https://www.example.com" target="_blank">在新窗口打开示例网站</a>

3. rel：

   • 指定链接与目标之间的关系。常见的取值包括：
     • noopener：防止被链接的页面使用 window.opener API 访问当前页面。
     • noreferrer：防止发送 HTTP Referrer 头部信息。
     • nofollow：通知搜索引擎不要跟踪此链接。
   • 示例：<a href="https://www.example.com" rel="noopener noreferrer">链接到示例网站</a>

4. 链接文本或嵌入的内容：

   • 这是超链接在网页上显示的内容。可以是文本、图片或其他HTML元素。
   • 示例：<a href="https://www.example.com">点击这里</a> 或 <a href="https://www.example.com"><img src="example.jpg" alt="示例图像"></a>

超链接的使用是Web开发中非常常见的技术，它可以实现网页之间的跳转、下载资源、打开新窗口等功能。

书签链接

书签链接（Bookmark Link）通常指的是网页中的锚点链接，它允许用户在同一页面内快速跳转到页面内的特定位置。书签链接在 HTML 中使用锚点（anchor）标签 <a> 来创建，结合 href 属性指向页面内的锚点位置。

下面是书签链接的详细格式：

<a href="#锚点名称">链接文本</a>

在这个格式中，#锚点名称 指向页面内的特定位置，即页面中的锚点。锚点名称可以是任何你希望跳转到的页面内元素的 id 属性值。

下面是对书签链接的各个部分的详细解释：

1. href：

   • 必需的属性，指定链接目标的URL。对于书签链接，URL 使用 # 符号加上锚点名称，用来指向页面内的特定位置。
   • 示例：<a href="#section1">跳转到第一节</a>

2. 锚点名称：

   • 页面内的标记或元素的 id 属性值。这个值会在页面内唯一标识一个元素。
   • 示例：<h2 id="section1">第一节</h2>

3. 链接文本：

   • 这是书签链接在网页上显示的文本内容，用户点击该文本时触发跳转。
   • 示例：<a href="#section1">跳转到第一节</a>

书签链接常用于长页面中的导航，帮助用户快速定位到页面中的特定部分。在单页应用和滚动页面中尤其有用，可以提供更好的用户体验。

表格

表格（Table）是网页中一种常见的用来展示结构化数据的HTML元素。它由行（<tr>）和列（<td>、<th>）组成，可以根据需要包含标题（<caption>）、表头（<thead>）、表体（<tbody>）、表尾（<tfoot>）等部分。以下是表格的详细介绍：

1. 基本结构：

   • 表格由 <table> 标签定义，其内部可以包含多个行（<tr>）和列（<td> 或 <th>）。
   • 示例：

     <table><tr><td>行1列1</td><td>行1列2</td></tr><tr><td>行2列1</td><td>行2列2</td></tr>
     </table>
     

2. 表头和表体：

   • 表头使用 <thead> 标签定义，表体使用 <tbody> 标签定义。
   • 示例：

     <table><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr></tbody>
     </table>
     

3. 表格标题：

   • 使用 <caption> 标签定义表格标题，通常显示在表格上方。
   • 示例：

     <table><caption>学生信息</caption><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr>
     </table>
     

4. 单元格合并：

   • 使用 colspan 和 rowspan 属性合并单元格，使单元格跨越多行或多列。
   • 示例：

     <table><tr><td colspan="2">合并两列</td></tr><tr><td rowspan="2">合并两行</td><td>行1列2</td></tr><tr><td>行2列2</td></tr>
     </table>
     

5. 表格样式：

   • 可以使用 CSS 样式来美化表格，包括调整边框、背景色、字体等。
   • 示例：

     <style>table {border-collapse: collapse;}th, td {border: 1px solid black;padding: 8px;text-align: center;}
     </style>
     

6. 其他属性：

   • 其他属性还包括 border（表格边框宽度）、align（对齐方式）、bgcolor（背景色）等，但这些属性在 HTML5 中已经不推荐使用，建议使用 CSS 来控制样式。

表格在网页设计中是非常常见的，用来呈现各种类型的数据，包括数据报表、排行榜、产品比较等。通过合理的结构和样式，可以使表格更具可读性和吸引力。

例子

align = “left” “center” “right” 分别表示水平左中右
valign = “top” “middle”

height 高度 width 宽度 要想整齐的话，就定义第一行和列就可以

横跨

• colspan=" "
  

束跨