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

关键字：html的标签学习2

晨跑计划：

学习任务：

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

学习记录：

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>
```
- 列表标签：
- - <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样式汇总
- height：设置div的高度
- width：设置div的宽度
- margin：设置div的外延边距，也就是到父容器的距离
  - left、right、top、bottom
- padding：设置div的内边距
  - left、right、top、bottom
- position：设置div的定位方式
  - static、fixed、relative、absolute
- font：指定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只能加在表格的tr、th、td部分
给div命名有什么用？
- div的命名必须是字母或是下划线开头的，不能用数字命名，因为数字无法转换为变量名（或者对象名），也就可能导致在JS里访问对象时出现问题。
列表怎么实现横向排列？

posted @ 2016-07-08 20:59 桂 Views(192) Comments(0) 收藏举报

刷新页面返回顶部

桂

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

关键字：html的标签学习2

晨跑计划：

学习任务：

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

学习记录：

扩展阅读：

问题的记录与解决：

公告

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