html学习笔记2

1、链接 - 锚点
   1、作用
      锚点：负责在页面中做记号，允许用户通过超链接随时随地跳转到这个记号上来。
   2、使用方式
      1、定义锚点 - 在页面上做记号
         1、<a>标记 name 属性
    <a name="锚点名称">内容</a>
2、任何一个标记的id属性
    <div id="锚点名称">内容</div>
      2、链接到锚点 - 跳转到记号上
         本页面锚点跳转：
         <a href="#锚点名称"></a>
其他页面锚点跳转：
<a href="页面url#锚点名称"></a>
2、表格
   1、表格的作用
      表格是按照一定的格式来显示数据
      表格是由一些“单元格”按照 从左到右，从上到下的方式进行排列的
   2、使用表格
      1、创建表格
         1、定义表格
    <table></table>
2、创建 表格 行
    <tr></tr>
3、创建 列(单元格)
    <td></td>
    所有的数据内容必须存放在 td 中
注意：在html中，默认情况下，每行的td的数量都是统一化的。
      2、表格常用属性
         1、table 元素
   1、width
      宽度，默认以px为单位
   2、height
      高度，默认以px为单位
   3、align
      设置表格的水平对齐方式
      表格在其父层容器中的水平对齐方式
      取值：
        left，center，right
   4、border
      设置边框宽度，0为无边框
   5、cellpadding
      内边距：td中的内容与td之间的距离
   6、cellspacing 
      外边距：td与td之间的距离
      取值为0，则无外边距
   7、bgcolor
      表格的背景颜色
2、tr 元素
   1、align
      设置 一行数据的 水平对齐方式
   2、valign
      设置 一行数据的 垂直对齐方式
      取值：
        top : 上对齐
middle : 居中对齐
bottom : 下对齐
   3、bgcolor
      背景颜色
3、td 元素
   1、width ：宽度
      注意：设置好宽度后，那么每行该列的宽度，都与设置的值相等
   2、height ：高度
      注意：设置高高度后，那么该行的所有列的高度，都与设置的值相等
   3、align
   4、valign
   5、colspan
      跨列
   6、rowspan
      跨行
   3、表格标题
      作用：定义表格标题，显示在表格内容区域之外，并且水平居中
      标记：<caption>标题内容</caption>
   4、行/列 标题
      <th></th>
      使用 方式 与 td 相同
   5、表格的复杂应用
      1、行分组
         1、表头
    <thead></thead>
2、表主体
    <tbody></tbody>
3、表尾
    <tfoot></tfoot>


注意：默认情况下，表格中所有的 tr 都会放在一个tbody 中
      2、不规则表格
         通过 td 的两个属性 完成不规则表格的实现
1、colspan
    跨列：从指定单元格开始，横向向右 合并掉几个单元格(包含自己)
2、rowspan
    跨行：从指定单元格开始，纵向想下 合并掉几个单元格(包含自己)
      3、表格嵌套
         被嵌套的表格必须放在td中
      4、注意
         table:
   display:table
不是块级(block)，也不是行内(inline)
特点：
   1、前后自动换行(独占一行)
   2、宽度自适应(由内容决定)


块级：
   display:block
   特点：
     1、独占一行
     2、宽度  100%
     3、高度 自适应
行内：
   display:inline
   特点：  
     1、一行内显示多个
     2、宽度高度 自适应
     3、对 align 无效
3、列表
   1、作用
      将 具有相似特征或前后顺序的元素，按照从上到下(从左到右)的顺序依次排列
   2、使用列表
      1、分类
         1、有序列表
2、无序列表
      2、语法
         列表类型：
   无序：<ul></ul> --> Unorder List
   有序：<ol></ol> --> Order List
列表项：
   <li></li> --> List Item
eg:
   <ul>
<li>黑猫警长</li>
<li>大力水手</li>
   </ul>
      3、有序列表
         1、语法
    <ol>
      <li></li>
      <li></li>
      ...
    </ol>
2、属性
    1、type
       有序列表的类型
       取值：
         1 ：数字（默认）
a ：小写英文字符
A ：大写英文字符
i ：小写罗马数字
I ：大写罗马数字
            2、start
       起始编号
      4、无序列表
         语法：
   <ul>
<li></li>
...
   </ul>


属性：
   type
     取值：
       disc : 实心圆
       circle : 空心圆
       square : 实心方块
       none : 不显示标识
      5、列表嵌套
         列表项中 嵌套 一个列表
   3、定义列表
      1、作用
         给出一类事物的定义的情形


html5
     html5是html中的最新版本
      2、语法
         <dl></dl> : 声明一个定义列表
   <dt></dt>:定义要描述的名词/事物
   <dd></dd>:对上述名词或事物的一个解释
      3、使用场合
         图文并茂
4、结构标记
   1、什么是结构标记
      w3c所提出的 新的用来表示布局的标记
      可以通过 结构标记 取代div的布局作用
   2、结构标记
      1、<header>元素
         语法：<header></header>
作用：定义整个文档或者某内容区域的"页眉"。定义页面顶部信息（最上方显示的内容）
特点：允许出现多次
取代：<div id="header"></div>
      2、<nav>元素
         语法：<nav></nav>
作用：表示页面的导航内容
取代：<div id="nav"></div>
      3、<section>元素
         语法：<section></section>
作用：表示页面主体内容
取代：<div id="main"></div>
      4、<article>元素
         语法：<article></article>
作用：表示 论坛中的一个帖子、报纸中的一篇文章、博客条目、微博条目、用户评论等
      5、<footer>元素
         语法：<footer></footer>
作用：表示页面中偏底部信息比如：网站备案号、解释说明
取代：<div id="footer"></div>
      6、<aside>元素  
         语法：<aside></aside>
作用：表示网页中任何一个位置的边栏。
取代：<div id="left_side">
      注意：如果有的内容无法使用结构标记进行展示的话，那么就是用 <div></div>