HTML学习（二）

首先，对于自己的学习热情投入，是十分不满意的，以至于从上次更新到现在，只继续学了不到四分之一的进度。也有朋友提醒我不要花过多的时间在html上，对于这些只需要能够看懂即可，目前有很多网页模版，可以很轻松地完成框架的构造。重点还是要多学习JavaScript以及与服务器交互完成数据显示的相关技术，确实很对，但是这不能成为自己懈怠的理由！

下面是我近期较为糟糕的学习进度：

对比HTML学习（一）中的进度，一言难尽

学习网站菜鸟教程

下面是学习笔记

①<img>图像标签是空标签 ，它只包括属性，且没有闭合标签
定义图像的语法是：
<img src="url" alt="some_text">

（1）（src)属性
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址，URL 指存储图像的位置。

例如：如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，
那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。

（2） HTML<img>标签中的alt属性
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

假设由于下列原因用户无法查看图像    
1.网速太慢
2.src 属性中的错误
3.浏览器禁用图像
4.用户使用的是屏幕阅读器
  alt 属性可以为图像提供替代的信息
<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

（3）height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:
例如：
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
（养成习惯，在插入图片的时候指定高度和宽度）

（4）border为图片的边框

（5）可引用CSS中的“float”属性来设置图片浮动在段落的位置
style="float:left"        是图片在文本左边
style="float:right"     是图片在文本右边
不设置时在文本中插入

（6）<map> 标签用于客户端图像映射，图像映射指带有可点击区域的一幅图像。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

注意：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

② <table>表格
表格由 <table> 标签来定义。
每个表格均有若干行（行由 <tr> 标签定义）
每行被分割为若干单元格（单元格由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

（1）<table>中的边框属性 border
使用边框属性来显示一个带有边框的表格
注意：如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

（2）表格的表头由<th>来定义，大多数的浏览器会把表头显示为粗体居中的文本
（3）表格的标题由<caption>来定义，<caption>标签必须直接放置到<table>之后，且每个表格只能定义一个标题

（4）colspan属性 定义了跨行或者跨列的单元格  一般用在单元格中

（5）<table>中的cellpadding属性    来创建单元格内容与其边框之间的空白大小，即调整单元格边距
（6）<table>中的cellspacing属性     来定义单元格与单元格之间的空白大小，即调整单元格间距

（7）<thead>定义表格的页眉  <tbody>定义表格的主体，<tfoot>定义表格的页脚。  可以分类管理，可以定义表格中的小表格，是一种创意想法

③列表
（1）无序列表使用 <ul> 标签，每个列表项始于 <li> 标签。
可以定义列表标点的类型  属性style
圆点列表style="list-style-type:disc"    圆圈列表style="list-style-type:circle"
正方形点列表style="list-style-type:square"

（2）有序列表使用<ol> 标签。每个列表项始于 <li> 标签。
有序列表中可以定义序号的属性 type 
大写字母序号type="A"   小写字母序号 type="a"
罗马数字序号type="I"     小写罗马数字序号type="i"

（3）自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个 自定义列表项 以 <dt> 开始。每个 自定列表项的描述 以 <dd> 开始。

简而言之，<div>是针对文档中的一个区域，区块元素，通常会以新行开始和结束     
<span>是针对文档中的一小段文本，内联元素，通常不会以新行开始

<div> 标签    定义HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于 组合块级元素  ，以便通过 CSS 来对这些元素进行格式化，经常与 CSS 一起使用，用来布局网页。

<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

网页布局对改善网站的外观非常重要，要慎重设计网页布局。
一般可以用<div>和<table>元素
但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
要学会将CSS灵活运用，才是灵魂所在！
CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板。

④HTML 表单 用于收集不同类型的用户输入。
表单使用<form>来设置

多数情况下被用到的表单标签是输入标签（<input>）。
<input>标签中的name属性规定了 input 元素的名称。
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
**注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

value 属性为 input 元素设定值，即初始值
<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
value 属性无法与 <input type="file"> 一同使用。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

1.文本域
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

2.密码字段
密码字段通过标签<input type="password"> 来定义
密码字段字符不会明文显示，而是以星号或圆点替代。

3.单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项
radio输入类型必须设置value属性

4.复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
checkbox输入类型必须设置value属性

5.提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。
表单的动作属性(action)定义了目的文件的文件名。
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
可以设置value来定义按钮的名字

6.重置按钮
<input type="reset">定义了重置按钮
点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值。

7.下拉列表
<select> 元素用来创建下拉列表。
<select> 元素是一种表单控件，可用于在表单中接受用户输入。
<select> 元素中的 <option> 标签定义了列表中的可用选项。
例如：
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
</select>

若要在设定预选下拉列表，即设定预选选项
则在其中一个一个选项后加一个 selected
例如：
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>

若要在下拉列表中再把相关的选项组合在一起
使用<optgroup>

例如：
<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

8.文本框
<textarea> 标签定义一个多行的文本输入控件。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，
不过更好的办法是使用 CSS 的 height 和 width 属性。
例如：<textarea rows="10" cols="30">

9.带边框的表单
<fieldset>定义一个边框
在范围内加<legend>是定义边框的标题
 

当我越学越枯燥的时候，正好遇到了HTML表单这一个知识点，让我又有了学习兴趣。因为表单这一块的学习忽然让我感受到了，网页开始接收来自用户的数据输入了，尽管只是浅层次的数据接收，但是这不就是网页设计的初衷之一么，给用户展现想要设计者想要表达的东西，根据用户的需求和选择来逐步完成操作，表单就是在开始在接受数据了，在展示和接收选项了。简而言之，这让我感觉到了，有很强的可玩性~

顺便说一句，CSDN的两种编辑器：Mrakdown编辑器和富文本，这两者的区别在我做html笔记的时候就开始发现了，Mrakdown本身就是一种标记语言，所以在写html代码时会将标记字符转化出来，第一次写的时候直接让我懵逼了，html的语言全部都给我编译出来了，所以对于介绍这种标记语言的博文最好使用富文本来写，富文本编辑器对一些文字或图片等处理后的效果直接显示在屏幕上，与打印出来的效果相同。

简而言之，Mrakdown用一套格式标记语言来对文档内容进行排版和格式显示，以CSDN为例，左边为编辑区，右边为预览区

富文本编辑器则是一个“所见即所得”编辑器

 

不要跟没有底线的人一般见识，他们或许会在不经意间送给你一块木桶里的短板。

圣人论迹不论心，论心无君子。