第四天学习：html的标签学习2

标签：

关键字：html的标签学习2

晨跑计划：

学习任务：

1. 第3章 认识标签(第二部分)

   • 3-1 使用ul，添加新闻信息列表
   • 3-2 使用ol，添加图书销售排行榜
   • 3-3 认识div在排版中的作用
   • 3-4 给div命名，使逻辑更加清晰
   • 3-5 table标签，认识网页上的表格
   • 3-6 用css样式，为表格加入边框
   • 3-7 caption标签，为表格添加标题和摘要

学习记录：

• 3-1、3-2 列表标签的学习与使用
  • 无序列表
    • 无序列表是一个项目的列表，使用粗体圆圈进行标记
    • 无序列表始于<ul>标签，每个列表始于<li>
    • 列表项内部可以使用段落。换行符、图片、链接以及其他列表等等。
    • 代码如下：

      <ul>
      <li>Coffee</li>
      <li>Milk</li>
      </ul>

  • 有序列表
    • 也是一列项目，使用数字进行标记
    • 有序列表始于<ol>标签，每个列表始于<li>标签。
    • 代码如下：

      <ol>
      <li>Coffee</li>
      <li>Milk</li>
      </ol>注释：利用<pre></pre>表示引用代码，其中<用&lt;表示，>用&gt表示

  • 定义列表
    • 自定义列表不仅仅是一列项目，二十项目及其注释的结合
    • 自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始。
    • 代码如下：

      <dl>
      <dt>Coffee</dt>
      <dd>Black hot drink</dd>
      <dt>Milk</dt>
      <dd>White cold drink</dd>
      </dl>

  • 列表标签：
  • <ul>定义无序列表
    • 属性：
      • compact和type (不赞成使用，建议用css代替)
  • • <ol>定义有序列表
      • 属性：
        • reversed：规定列表顺序为降序
        • start：规定有序列表的起始值start="number"
        • type：规定列表中使用的标记类型。值有“1 A a I i”
    • <li>定义列表项目
      • <li>可用在有序列表和无序列表中
      • 请用CSS来定义列表和列表项目的类型
    • <dl>自定义列表
    • <dt>自定义定义项目
    • <dd>自定义定义的描述
      • 演示代码：

        <dl>
           <dt>计算机</dt>
           <dd>用来计算的仪器 ... ...</dd>
           <dt>显示器</dt>
           <dd>以视觉方式显示信息的装置 ... ...</dd>
        </dl>

• 3-3认识div在排版中的作用
  • 在网页制作过程中，可以把一些独立的逻辑部分分划出来，发在一个div标签中，这个div标签的作用就相当于一个容器
  • <div>可定义文档中的分区或节
  • <div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记<div>，那么该标签的作用会变得更加有效
  • 语法：<div></div>
  • 可用的属性：align
    • 值：left、right、center、justify
• 3-5 table标签，认识网页上的表格
  • 创建表格的元素：table、tbody、tr、th、td
    • <table>...</table>：整个表格以<table>标记开始、</table>标记结束
      • 属性：broder：规定表格边框的宽度
      • align：规定表格相对周围元素的对齐方式
      • width：规定表格宽度 
      • cellpadding：规定单元边沿与其内容之间的空白
      • cellspacing：规定单元格之间的空白
      • frame：规定外侧边框的哪个部分是可见的
        • 值：void、above、below、hsides、lhs、rhs、vsides、box、border
      • bgcolor="颜色值"设定单元格的背景颜色
      • rules：规定内侧边框的哪个部分是可见的
        • 值：none、groups、rows、cols、all
    • <tbody>...</tbody>：定义表格主体，当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。<thead>...<thead><tfoot><tfoot>
    • <tr>...</tr>：表格的一行，有几对tr表格就有几行。
      • 属性：align：定义表格行的内容对齐方式
        • 值：right、left、center、justify、char（根据哪个字符进行文本对齐）
    • <td>...</td>：表格的一个单元格，一行中包含几对<td>就说明有几列
      • 属性：align：定义表格行的内容对齐方式
        • 值：right、left、center、justify、char（根据哪个字符进行文本对齐）
      • rowspan：单元格跨越的列数
      • colspan：单元格跨越的行数
    • <th>...</th>表头，表格的头部的一个单元格，th元素内部的文本通常会呈现为居中的粗体文本
    • <table summary="表格介绍文本">
    • <caption>表格标题文本</caption>

扩展阅读：

• 浅谈网页设计中的逻辑：
  • 逻辑就是思维的规律，设计中的逻辑，是常规常识下有规范有顺序，有理有据，小到一个符号也能说明和画面的关系以及他存在的意义。
  • 介绍了5种设计中的逻辑推论
    • 阅读逻辑---古腾堡图表
      • 人在浏览画面或者布局的时候，视线往往从左上角移到右下角
    • 直线式逻辑
      • 自上而下如同权利分配的等级制度，一环扣一环，每个环节都是紧密相连前后有序，严谨合理。
      • 直线式逻辑思路明确，针对性强，容易看懂，引导用户顺着逻辑看设计
    • 金字塔式逻辑
      • 结构中的各种分类以仅有的几种逻辑方式相互联系（向上、向下、横向），构成了相互联系紧密且通畅的逻辑思路。
    • 曲线式逻辑
      • 设计或产品独一无二的领先性与用户非理性思维的消费模式
    • 网格
      • 网格是用竖直或者水平分割线将布局进行分块，把边界，空白和栏包括在内，以提供组织内容的框架的辅助性工具
      • 网格可以使页面布局显得紧凑而且稳定，为设计师在设计站点时提供一个逻辑严谨的模块。
• 谈谈页面流程图：
  • 页面流程图简要
    • 页面=操作+内容，操作是需要用户触发的，包含连接、按钮、表单等等。用户通过这些操作，看到同一个页面上不同的内容，或者跳转到其他的页面
    • 页面流程图目标：表现用户的不同操作指令下不同页面的流转关系。
    • 页面流程图元素：页面、操作或者状态、连接线
    • 页面也有分类：注意有些操作可能不会给你一个实际的页面，而是有可能发个短信、发个邮件等，这些也需要被表现出来。
• div与table的区别：
  • 加载方式的区别：
    • div的加载方式是即读即加载，遇到<div>没有遇到</div>的时候一样加载div中的内容，读多少加载多少；
    • table的加载方式是完成后加载，遇到<table>后，在读到</table>之前，table中的内容不加载。
  • 在网页应用中的差别
    • 如果页面首尾加table，那么必须等到页面读完才加载
    • 页面首尾家div无任何影响
• div样式汇总

问题的记录与解决：

• 什么是逻辑部分？

• 代码如下：

  <div id="learming" align="center">
  
  <h2>web前端学习导学课</h2>
  <ul>
  <li>网页专业名词大扫盲</li>
  <li>网站职位定位指南</li>
  <li>解密yahho网站制作</li>
  </ul>
  </div>

   

  • 

• GIT错误：fatal: Not a git repository (or any of the parent directories): .git

  • 提示说没有.git这样一个目录，解决方法如下:git init就可以了
• div里面加入表格，或者表格里面加入div？
• 给div命名有什么用？
• 列表怎么实现横向排列？

第四天学习：html的标签学习2

标签：

原文地址：http://www.cnblogs.com/zhangguihong/p/5654572.html