• HTML零基础入门（中）

    1、链接

    格式:

    <a href="http:// www.baidu.com ">百度a>

    本例是个外部链接，

    href为用于指定链接目标的url的地址，我们还可以往a标签里面加target属性

    target属性分为两种：self 和 blank

    self是指在点击链接后，在当前页面打开新页面，而不是重新打开一个页面去显示

    而blank是再建立一个页面去显示新页面

    当链接地址未知时，我们可以使用“#”号来代表空链接

    链接分类：

    1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
    2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 。
    3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 。
    4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
    5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
    6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

    锚点链接

    指的是在同一张页面上，通过点击关键词跳转到该关键词的相关位置

    比如：

    1. <a href="#two">第2集 a>
    2.  
    3. <h3 id="two">第2集介绍h3>

    第一行是一个标识，通过点击该标识，跳转到id相同的地方，即第二个地方，在本例中是跳转到h3标签中

    2、表格

    基本使用方法

    主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理

    表格最初只是拥有三个标签，table、tr和td标签

    table：是用来标识这里是表格标签

    tr：是一行的内容，相当于一整行为单位，是一个大盒子

    td：是一行中具体的内容，

    1.          <table>
    2.             <tr>
    3.                 <td>单元格内的文字td>
    4.                 ...
    5.             tr>
    6.             ...
    7.         table>

      1.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. 标签表示 HTML 表格的表头部分(table head 的缩写)

    2.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示. 标签表示 HTML 表格的表头部分(table head 的缩写)

    3.表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>表格标签title>
    8. head>
    9. <body>
    10.     <table>
    11.         <tr>
    12.             <th>专业th>
    13.             <th>班级th>
    14.             <th>姓名th>
    15.             <th>性别th>
    16.             <th>成绩th>
    17.         tr>
    18.  
    19.         <tr>
    20.             <td>计科td>
    21.             <td>2101td>
    22.             <td>张三td>
    23.             <td>男td>
    24.             <td>98td>
    25.         tr>
    26.  
    27.         <tr>
    28.             <td>计科td>
    29.             <td>2101td>
    30.             <td>张三td>
    31.             <td>男td>
    32.             <td>98td>
    33.         tr>
    34.  
    35.         <tr>
    36.             <td>计科td>
    37.             <td>2101td>
    38.             <td>张三td>
    39.             <td>男td>
    40.             <td>98td>
    41.         tr>
    42.  
    43.         <tr>
    44.             <td>计科td>
    45.             <td>2101td>
    46.             <td>张三td>
    47.             <td>男td>
    48.             <td>98td>
    49.         tr>
    50.     table>
    51. body>
    52. html>

    我们可以给这个表格添加相关的属性，让它变得更规整些

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>表格标签title>
    8. head>
    9. <body>
    10.     <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
    11.         <tr>
    12.             <th>专业th>
    13.             <th>班级th>
    14.             <th>姓名th>
    15.             <th>性别th>
    16.             <th>成绩th>
    17.         tr>
    18.  
    19.         <tr>
    20.             <td>计科td>
    21.             <td>2101td>
    22.             <td>张三td>
    23.             <td>男td>
    24.             <td>98td>
    25.         tr>
    26.  
    27.         <tr>
    28.             <td>计科td>
    29.             <td>2101td>
    30.             <td>张三td>
    31.             <td>男td>
    32.             <td>98td>
    33.         tr>
    34.  
    35.         <tr>
    36.             <td>计科td>
    37.             <td>2101td>
    38.             <td>张三td>
    39.             <td>男td>
    40.             <td>98td>
    41.         tr>
    42.  
    43.         <tr>
    44.             <td>计科td>
    45.             <td>2101td>
    46.             <td>张三td>
    47.             <td>男td>
    48.             <td>98td>
    49.         tr>
    50.     table>
    51. body>
    52. html>

     合并单元格

    合并单元格方式：

    跨行合并：rowspan="合并单元格的个数"

    最上侧单元格为目标单元格, 写合并代码

    跨列合并：colspan="合并单元格的个数"

    最左侧单元格为目标单元格, 写合并代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>合并单元格title>
    8. head>
    9. <body>
    10.     <table width="500" height="249" border="1" cellspacing="0">
    11.         <tr>
    12.             <td>td>
    13.             <td colspan="2">td>
    14.            
    15.         tr>
    16.         <tr>
    17.             <td rowspan="2">td>
    18.             <td>td>
    19.             <td>td>
    20.         tr>
    21.         <tr>
    22.            
    23.             <td>td>
    24.             <td>td>
    25.         tr>
    26.     
    27.     table>
    28. body>
    29. html>

     

    同时为了更好的标识表头个其他元素，我们可以再添加两个元素thead和tbody元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>表格标签title>
    8. head>
    9. <body>
    10.     <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
    11.  
    12.         <thead>
    13.             <tr>
    14.                 <th>专业th>
    15.                 <th>班级th>
    16.                 <th>姓名th>
    17.                 <th>性别th>
    18.                 <th>成绩th>
    19.             tr>
    20.         thead>
    21.  
    22.         <tbody>
    23.             <tr>
    24.                 <td>计科td>
    25.                 <td>2101td>
    26.                 <td>张三td>
    27.                 <td>男td>
    28.                 <td>98td>
    29.             tr>
    30.     
    31.             <tr>
    32.                 <td>计科td>
    33.                 <td>2101td>
    34.                 <td>张三td>
    35.                 <td>男td>
    36.                 <td>98td>
    37.             tr>
    38.     
    39.             <tr>
    40.                 <td>计科td>
    41.                 <td>2101td>
    42.                 <td>张三td>
    43.                 <td>男td>
    44.                 <td>98td>
    45.             tr>
    46.     
    47.             <tr>
    48.                 <td>计科td>
    49.                 <td>2101td>
    50.                 <td>张三td>
    51.                 <td>男td>
    52.                 <td>98td>
    53.             tr>
    54.         tbody>
    55.     table>
    56. body>
    57. html>

  • 相关阅读:
    Spring Boot 框架知识汇总
    离线安装python
    Java格式化类Format
    MongoDB安装教程
    (done) 什么是词嵌入技术？word embedding ?（这里没有介绍词嵌入算法）（没有提到嵌入矩阵如何得到）
    如何系统地去学python
    Java 诊断工具之 Arthas
    Mac系列之：Mac安装tesseract和python使用pytesseract、pillow包提取图片中中文
    qt中的信号与槽
    Python安装第三方库（pip/conda、easy_install、setup.py）
  • 原文地址：https://blog.csdn.net/wujianrenn/article/details/127462206