HTML学习（二）

HTML标签
上一篇讲说了HTML的主要的应用，也知道大致是用来做什么的了，在页面的主要作用。也讲到了标签，那么就说一下标签，到底是用来做什么的吧。
介绍标签

• html中的标签数量是很多的，据人统计大概有300个左右，并且每年都会以20-30个的速度增加着，但是这么多的标签我们不必都去记住，因为很多标签都是不常用的或者可以用基础的标签搭配组合，实际上我们需要掌握的大概在30个左右。自己在使用时，最常用的也就那么十几个，什么重要，自己在使用时应该就了解了。像div、span、ul、li、button、em等等

• 一般情况下自己在写页面是，页面的一些骨架，标签用的越简单越好，这样大家都能看得懂。也方便以后大家进行维护，代码不需要多华丽，只要易读，性能高就是好的代码。

• 不同标签会有不同的效果，也是为了方便更好的制作页面，才会引入了不同的标签。当然，不同的标签功能也是不同的。

接下来介绍一下讲了这么长时间的标签：

第一部分
- < div>< /div>标签，这是一个最基础的标签，在页面中占的比例也比较高。它的作用就是定义标签里面的一个数。
页面显示为==>

• < p>< /p>标签,这是一个段落标签，里面的内容独占一行。是段落，中间还会自动生成间隔。
  

  
  在页面中显示：
  

• < ul>< li>< /li>< /ul>标签，这是一对父子标签（无序列表），都是结合起来使用的。它俩结合起来的作用比较明显，页面编辑列表的时候最为实用。下面的例子就是用这对父子标签完成的：
  
  但是它会有默认的属性，需要css进行去掉默认的属性{list-style：none}，后面css中会讲到。
  - < ol>< li>< /li>< /ol>标签，这也是一对父子标签（有序列表）。ol是外面的列表框，li是里面的子项，并且每一个li子项的前面都会带有序号。

• ol标签里有type属性，默认对的是数字。
  

  

• 若type = “A”，则列表会发生变化。
  

  

  type属性中还可以添加 i—>按照i的个数来排序（罗马数字）；I—>大写I的个数来排序，除此之外，设置成其他的属性都是错误的，而错误的情况下ol会按照默认的数字来排序，2和b等都算是错误的值。

• < table>< /table>标签，< table>< /table>是一个三级结构标签，它要搭配< tr>< td>< /td>< /tr>这两个标签一起使用才可以。table是表格的意思，< table>< /table>这个标签就是设置外层的表格，然后tr是表格的行，td是表格的数据单元，我们可以理解为列。
  

  

  这是两行两列的一个表格。
  table标签的大概结构是这个样子的，同时td还有几个属性。

1.cellpadding内边距属性，我们可以为每一个单元格都设置内边距 cellpadding=”10px”;

2.cellspacing 属性，这个属性的作用规定单元格之间的空间。这个属性是为了让单元格变得更加的好看。设置cellspacing=”1px”,之间间隔是1px,配合border = ‘1’,这样会让其显得更加的像Excel表格。
3.colspan属性，这个属性规定了这一个td占了几个单位，默认的一个td占一个单位，类似于excel中的合并单元格的作用。

我们现在一般都不用table标签了，这是一个结构化标签，以前用这个标签来给页面进行布局，但是现在我们直接用div + css来对页面进行布局，这个方法也比较方便。
为什么不用这个标签了呢？
不用这个标签是有原因的，它肯定有不好的地方，以至于才被取代。说到这个地方一定要说一下异步和同步操作了，这个概念特别的重要。
那么就大致讲一下这异步和同步操作吧，电脑中的异步和同步和生活中的是不一样的。生活中同步是读书和写字同时进行，异步是读完书然后再去写字。但是电脑不同，电脑中的异步是两个方式同时进行，同步是这个操作完成之后，再去完成其他的操作。
table的缺点在于服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是table标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。以前的手机网速慢，厂家重视内容的展现而不是样式的展现，所以那个时候用table，而现在网速很快，大家都重视用户体验，当我们浏览淘宝店铺的时候，如果要等到所有的图片全都加载完之后才显示出来的话那也太蠢了，所以table标签现在我们基本放弃使用了。

• < address>< /address>标签，它会将里面的内容变成斜体并且独占一行。
  还有好多的标签，需要自己去慢慢的体会。

• < form>< /form>标签,这个元素可以让我们实现前端和后台的数据交互。

  我们先介绍一下form表单元素拥有的属性：

1.action属性 填写服务器地址，这个属性的意思是我们把数据传递到那个服务器。

2.method属性 传输方法，我们在这里填写通过什么方式来传输数据，一般填写的都是POST/GET这两种中的一个，虽然有其他的方式但是用的韩少，而post和get的区别我们在网络篇会有介绍，这里我们暂时都先写get方法吧。
介绍完属性之后，我们再介绍一下表单拥有的子元素：

• input标签 这个标签是一个单标签，不需要闭合。

这个标签有一个type属性，而这个属性的值决定了这个input标签的类型是什么。

1.text 如果type=”text”的话，这个input标签就是一个输入框，我们可以在里面输入文字信息。

2.password 如果type=”password “的话，这个input标签就是一个密码框，我们在里面输入的文字信息都会以隐藏的形式展现出来。

3.submit 如果type=”submit “的话，这个input标签就是一个提交按钮，我们点击这个提交按钮之后就会把整个表单的数据发送到后台服务器上了。

浏览器显示：

当我们随便写一个用户名和密码之后点击提交按钮，我们会发现我们的网页地址上后面出现了我们所传递的数据的信息。后面用?username=123&password=123拼接起来的， 这里我们很容易就可以看出来数据的名字和数据的内容了。这是用GET传送的数据，在URL中引入的。

第二部分

• < span>< /span>标签，里面多数情况下盛放文字或者小icon之类的小物件。
• < strong>< /strong>标签，这个标签的作用是为了加粗字体来使用的。
• < em>< /em>标签，让字体变成斜体文字。
• < img>< /img>标签,标签是image图片的意思，它有一个必备的属性叫做src –->source，这个src属性的值就是我们的图片的地址。一般来说我们给src填写两种值：
  1.网上的链接
  2.本地的链接

同时这个图片标签还有两个属性:

1.alt属性。这个属性是为其设置图片占位符，也就是说当图片因为网速或者链接错误等原因加载不出来的时候，就会显示alt里面我们设置的值。

2.title属性。图片提示符。当我们鼠标移入图片的时候，在鼠标旁边会出现一个黄色的小方块来显示这个title属性里面设置的值。

• < input>标签，这是一个单标签，这个标签页经常使用，前面所讲的form表单中，里面的输入文字和密码就是利用这个input标签，这个标签是十分好用的，在平常编辑页面中也经常使用。这是一个比较重要的标签。
  input标签里面有一些属性，type属性就是这个比较重要的属性了。
  type=”radio”,这是一个单选框，只有里面的name属性值相同时，这样才会只能选择一个，因为两个name属性是不能相同的。

这样的话，这才是真正的单选框了，这个问题只能选一个，不可能同时选的。当然，当你登录一些网站的的时候，可能有一些不需要你自己选而是自动默认好了，反正你登录的时候，不是男的就是女的，自然概率占50%，这样会很大的提高用户的体验的。所以里面有一个这样的属性，checked=”checked”,当属性名与属性值相同时，这样可以单写一个属性就行了。上面的直接写成checked就行了。

type=”checkbox”，这个属性是一个复选框，可以同时选好几个标签，可能让你选择你喜欢的颜色，你可能喜欢的不止一种。这样你就可以同时选择好几个答案，这样就很方便了。如下：

• 讲到单选框和复选框之后，自然而然的就想到了，下拉列表了，< select>< /select>
  

如果我们要改变默认选项的话，要添加的属性是selected=”selected”而不是上面的checked。

总结

之前为什么要讲两部分呢？相信之前也也听说过行级元素和块级元素了，这两部分也就是行级元素（inline）和块级元素（block）了，介绍了这么多应该也知道他们的特点了吧。
说一下他们的区别了：
1.块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。
2.块级元素可以设置weith和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。
3.块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果。
其实还有一种元素就行级块元素（inline-block），这种元素可以改变宽高，又不独占一行。img标签就是一个例子。
如果想将块级元素与行级元素相互转换，该怎么办呢？

　　 可以在css样式中用display:inline将块级元素设为行级元素

　　同样，也可以用display:block将行级元素设为块级元素

从这可以看出，行级元素和块级元素是可以相互转化的，也就是任何一个元素，我们都可以让它变成我们自己想要的元素类型。
但是还得记住之前的行级元素和块级元素，这样方便你在设计页面的时候给你带来很大的方便的。