HTML个人学习笔记（day 3）

四、HTML标签学习(链接标签)

    4.4.1 链接标签 

     链接标签：< a href = " ./目标网页.html " > 超链接 </a>

     场景：点击之后,从一个页面跳转到另一个页面

     特点：1. 双标签,内部可以包裹内容

                2. 如果需要a标签点击之后去指定页面,需要设置a标签的href属性

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

     4.4.2 链接标签的target属性         

链接标签target属性: <a href="http://www.baidu.com/" target="_blank">跳转到百度</a>

target属性值:目标网页的打开形式


 取值                      效果
_self        默认值,在当前窗口中跳转(覆盖原网页)
_blank           在新窗口中跳转(保留原网页)

---

五、列表标签学习(列表标签)

     5.1.1 列表标签介绍

      列表标签的特点: 按照行的方式,整齐显示内容

      列表标签的种类: 无序列表、有序列表、自定义列表

      5.1.2 无序列表

无序列表: <ul>
               <li></li>
         </ul> 

       场景：在网页中表示一组无顺序之分的列表

       显示特点：

• 列表的每一项前默认显示圆点标识

       特点: 1. ul标签中只允许包含li标签

                 2. li标签可以包含任意内容

<ul>
       <li><strong>榴莲</strong></li>
       <li>香蕉</li>
       <li>苹果</li>
</ul>

      5.1.3 有序列表

有序列表: <ol>
              <li></li>
         </ol>

       场景：在网页中表示一组有顺序之分的列表

       显示特点：

• 列表的每一项前默认显示序号标识

        特点：1. ol标签中只允许包含li标签

                   2. li标签可以包含任意内容

<ol>
       <li>100分</li>
       <li>80分</li>
       <li>60分</li>
</ol>

       5.1.4 自定义列表

自定义列表: <dl>
                  <dt></dt>
                  <dd></dd>
           </dl>   

       场景：在网页的底部导航中通常会使用自定义列表实现

       显示特点：dd前会默认显示缩进效果

       特点：1. dl标签中只允许包含dt/dd标签

                  2. dt/dd标签可以包含任意内容

<dl>
      <dt>帮助中心</dt>
      <dd>账户管理</dd>
      <dd>购物指南</dd>
      <dd>订单操作</dd>
</dl>

---

六、表格标签学习(表格标签)

     6.1.1 表格的基本标签

      表格的基本标签：<table>

                                               <tr> <td>需要的内容</td> </tr>

                                  </table>

标签名              说明
table      表格整体,可用于包裹多个tr
 tr          表格每行,可用于包裹td
 td        表格单元格,可用于包裹内容

        注意点：

•  标签的嵌套关系：table > tr > td 

      6.1.2 表格的相关属性

       表格相关属性：

属性名    属性值       效果
border     数字      边框宽度
width      数字      表格宽度
height     数字      表格高度   

         场景：设置表格基本展示效果

         注意点：

•   实际开发时针对于样式效果推荐css设置

<table border="1" width="400px" height="300px">
          <tr>
              <td>姓名</td>
              <td>成绩</td>
              <td>评语</td>
          </tr>
</table>

        6.1.3 表格的标题和单元格标签

         表格的标题和单元格标签：<table>

                                                                      <caption>表示表格整体大标题</caption>

                                                                      <tr>

                                                                                <th>表示一列小标题</th>

                                                                                <td>需要的内容</td> 

                                                                      </tr>

                                                    </table>

           场景：在表格中表示整体大标题和一列小标题     

 标签名           名称                             说明
caption       表格大标题       表示表格整体大标题,默认在表格整体顶部居中位置显示
  th          表格单元格    表示一小列标题,通常用于表格一行,默认内部文字加粗并居中显示

            注意点：

•      caption标签书写在table标签内部

•      th标签写在tr标签内部(用于替换td标签) 

          6.1.4 表格的结构标签 (了解) 

 标签名          名称
 thead         表格头部
 tbody         表格主体      
 tfoot         表格底部

代码往后走按tab ，往前走按 shift+tab 
整理代码格式快捷键 : shift+alt+f

            注意点：

•      表格结构标签内部用于包裹tr标签

•      表格的结构标签可以省略

          6.1.5 表格的合并单元格 

 属性名           属性值                    说明
rowspan      合并单元格的个数     跨行合并,将多行的单元格垂直合并
colspan      合并单元格的个数     跨列合并,将多列的单元格水平合并

             场景：将水平或垂直多个单元格合并成一个单元格

             合并单元格步骤：

                                         1. 明确合并哪几个单元格

                                         2. 通过左上原则,确定保留谁删除谁

                                         •                上下合并->只保留最上的,删除其他

                                         •                左右合并->只保留最左的,删除其他

                                         3. 给保留的单元格位置：跨行合并(rowspan)或者跨列合并(colspan)

              注意点：

•        只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)

---

the end！