h5+c3 day2 表格要多练才能掌握的更好

 

 1 列表标签

        ul无序列表  ol有序列表  li为列表项内容          自定义列表为dl    dt dd为列表项 其中 dt可以作为小标题使用 因为dt不会缩进前两格               

2. div和span标签

 div：作用：划分区域；      特点：div是可以嵌套任何标签的；                        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​ span标签：文本节点           特点：没有任何效果；                                                                                div和span是典型的块元素和行内元素的代表 日后会分享这两个元素的区别

3.html的注释语句

作用：

        1、隐藏代码 2、提示作用                                          注意： 注释里面不能嵌套注释；                                     快捷键：ctrl+/  添加或删除注释 

4.图片标签（插入图片）

 

  语法：

        <img src="目标文件路径" alt="自定义的提示信息">

         属性：

        src=""  设置目标文件路径，是必须要有的属性；                          alt=""  起到优化的和提示信息的作用，提示用户，提示浏览器；   当图片没有正确加载出来的时候，显示在图片位置上的提示文本                                title="" 添加标题属性，是所有标签都可以添加的属性，起到提示作用；              width=""  设置图片宽度 height="" 设置图片高度

 5.路径 

         ./  表示 '当前文件所在的位置' ，默认时，就是在当前文件的位置；所有./可写可不写；        ../ 表示 '返回上一级'                                             ../../  返回两级

6.超链接（a 标签 我们常用的链接）

 （1）       语法：<a href=""></a>                                                              href=""  设置目标文件路径(url地址)，是超链接标签必不可少的属性；             download="下载文件的名称.扩展名"  （firefox/chrome支持）是h5新增属性；                                target="" 设置打开方式 

  属性值： _self  默认值，在当前窗口打开  _blank 在新窗口打开

        作用：

        1、实现页面和页面之间的跳转；

        2、实现同一个页面内不同位置的快速跳转(锚点连接)

（2）锚点链接（单页面使用的例如：返回顶部按钮）

                作用：实现在同一个页面内，不同位置之间的快速跳转；​​​​​​​

    使用方法：

     <a href="#box">box</a> href里面设置的就是目标元素的url地址；

      <div id="box">box</div>

        注：id属性具有唯一性，一个元素只能有一个唯一的id名字；

             每个标签都可以添加id属性；

   7.base标签                                                                                                                                                      <base target="" href="http://">   标签为页面上的所有链接规定默认地址或默认目标，使用方法，<base target="_blank"> 但是需要写入head内。其作用就是 所有的A标签都是打开新窗口。

8. iframe 内联框架(即行内框架)

         作用：会创建包含另外一个文档的内联框架

         语法：<iframe></iframe>

  属性：

    src=""  引入目标文件路径（有些网站拒绝引入）；

    name="" 添加name名字，自定义名字，该属性是所有元素都可以添加的属性；

    frameborder=""  设置是否显示边框 0 ：no不显示边框 1 ：yes 显示边框，默认值

   scrolling="" 是否显示滚动条： no不显示 yes显示 auto自由显示

9. 表格标签

    （1）    作用：展示数据

        语法：

   <table>

       <tr>

             <td>

             </td>

        </tr>

   </table>

 table  表格标签  tr     表格的行标签  td     单元格标签

                                                <th></th>

         注：写在tr标签内，和td是一个等级的；

             自带居中和加粗效果

table 是外面的大标签 每写一个tr就会多一列 td表示独立的一个单元格写在tr里面，垂直排列每写一个td就会垂直多一个单元格。

  表格标题标签：

            <caption></caption>

   注：要写在table里面的第一个子元素的位置上，且caption标签里可写h1-h6或p标签等        

   （2）表格的基本html属性：

       border=""  边框

     bordercolor="" 边框颜色

      cellspacing="" 设置单元格之间间距

      cellpadding="" 设置单元格和内容之间的间距

      注：以上属性添加给table标签

     bgcolor=""  背景属性，表格里的标签都可以添加

        ​​​​​​​          width=""  宽度 ,添加给table或者td

     height="" 高度(最小高度) ,添加给table或者td

（3）表格行分组标签：

            <thead></thead>  表格的头部区域，表头

            <tbody></tbody>  表格的主体区域，表体

            <tfoot></tfoot>  表格的尾部区域，表尾

作用：给表格的行进行分组；

    注：一个table里面，只能有一个thead和一个tfoot;可以出现多次tbody；

        当没有设置行分组时，浏览器会自动添加一个tbody；

其主要目的是用来给表格分组，日后也可以用div起名字代替。

（4）

 表格列分组标签：(了解)

   <colgroup span=""></colgroup>

   span="" 属性值为整数值，值为几，，就表示相邻的几列为一组；自左向右一次划分；

        <colgroup span="1" bgcolor="pink"></colgroup>

        <colgroup span="2" bgcolor="yellow"></colgroup>

        <colgroup span="1" bgcolor="tomato"></colgroup>4

效果展示：

 （5）表格的对齐属性：

水平对齐：

                align=""

                    left   左对齐（默认值）

                    center 居中对齐

                    right  右对齐

注：如果algin属性添加给table，改变的事整个table表格在水平方向中的对齐方式；而不是里面内容的对齐方式；

            垂直对齐：

          valign=""

              top    顶对齐

              middle 居中对齐，默认值

              bottom 底对齐

（6） 添加分割线属性：

            rules=""

                rows  行之间的分割线

                cols  列之间的分割线

                all   行和列之间的分割线

                none  没有分割线（默认值）

                groups 组之间的分割线

            注：要添加给table标签