web学习之路—H5（三）

            华丽丽的周一啊，昨晚失眠，四点多才睡着，好困。今天来上班，公司真的好安静，好安静。老大没有布置任务，但是我已经预见未来几天我将要大显身手啦，哈哈，也就是一大波工作正在靠近。感觉学习马上就要被遏制了，毕竟要过年啦，介个嘛，当然是回家看朋友，看朋友。本来就是个渣学习当然不会多积极。但是为了这个那个我还是会坚持下去的。嘿嘿，今天学习任务简单，所以大家就先看看无聊的我的闲扯淡。说说单身的事吧。单了好久了，我也不丑，可惜就是被动。哈哈，2016，好多朋友都结婚各种花式虐狗，我呢倒不是太介意，毕竟觉得一个人蛮好的。恋爱要乘早，这是我总结的教训，哈哈。好啦，大家都是爱学习的人，我就不啰嗦啦！严肃起来，学习去。

今天就沿用以前的学习方法，看基础知识咯。这里只总结我就得大家需要注意的地方。

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

这里大家如果做一个页面里面内容布局排列很整齐就可以隐藏边框用表格。

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本

<caption>我的标题</caption>

<h4>表头：</h4>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>


<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

frame 属性

<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>


<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

列表

        列表分为有序列表和无序列表和定义列表，无序列表始于 <ul> 标签。每个列表项始于 <li>。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。自定义列表不仅仅是一列项目，而是项目及其注释的组合。
列表的样式用type来设置。并且列表可以相互嵌套。

块

 

标签	描述
<div>	定义文档中的分区或节（division/section）。
<span>	定义 span，用来组合文档中的行内元素。

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

本人认为<div>使用的几率还是蛮高的，所以大家还是就好好学习一下吧。

布局

可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

   

HTML 布局 - 有用的提示

提示：使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。

提示：由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

对于布局我就来说两句吧，android中的布局有好多中，html布局目前我学到的用的最多的就是用块去划分。布局我觉得还是不要太复杂，好看简单就行，毕竟复杂布局和标签的多层嵌套会对性能有所影响。

表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（<form>）定义。

表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义一个控制的标签
<fieldset>	定义域
<legend>	定义域的标题
<select>	定义一个选择列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个按钮
<isindex>	已废弃。由 <input> 代替。

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档很难打印整张页面

框架结构标签（<frameset>）


框架结构标签（<frameset>）定义如何将窗口分割为框架，每个 frameset 定义了一系列行或列，rows/columns 的值规定了每行或每列占据屏幕的面积


编者注：frameset 标签也被某些文章和书籍译为框架集。


框架标签（Frame）
Frame 标签定义了放置在每个框架中的 HTML 文档。


在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

基本的注意事项 - 有用的提示：

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

内联框架

标签	描述
<iframe>	定义内联的子窗口（框架）

<iframe src="URL"></iframe>

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.abc.com.cn" target="iframe_a">abc.com.cn</a></p>

背景（Backgrounds）

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

好啦，基础就这些啦，大家将就着看吧，不好意思年前写到年后了。写了一年啊，哈哈。