全栈者角度--常用HTML标签整理

常用HTML标签整理

题记：虽然html标签的讲解网路上有很多，但是我自己总结自己经常碰到到，并且进行分类，这样能够加深记忆并且快速的相应。
   近年来经常提倡的全栈，全栈其实首先要保证自己程序的健壮的不出错，其实对于前端对于全栈者来说可能处于是信息展示部分，涉及到页面的交互部分则就更加偏向前端了。

前言：前端是一个展示和接收数据的地方，同时HTML骨骼，css是肌肉和皮肤，js让前端动起来。从数据接收和展示的角度来进行数据的总结，更加贴近后台数据的展示。

提纲：

1. 携带数据标签
2. 展示数据标签
3. 总结

一 携带数据的标签

（1）form

   form有个特性是在提交完数据之后就进行页面的刷新操作。解决该问题的方法稍后专门有一篇文章。

    <!-- form标签把相应的数据已key-val的形式送到相应的server端 -->
        <form action="recive.action" method="get/post">
            <label for="name">姓名:</label>
            <input type="text" name="name" id="name">

            <label for="age">年龄</label>
            <input type="text" name="age" id="age">
            <input type="submit" value="save">
        </form>
        <!-- label的作用是改善交互的体验，for的内容需要跟对应表亲啊的id相同 -->

（2）input

<!-- input是很常用的表单输入方式 -->
<!-- input的type{text, submit, button, image, radio, reset, password, checkbox, file}, 每一个标签都很有意思 -->
<label for="in"></label>
<input type="text" name="in" id="in">

（3）select

<!-- select 也是form标签中常用的元素，需要注意其selected属性 -->
        <label for="sex">性别</label>
        <select name="sex" id="sex">
            <option value="1" selected="selected">male</option>
            <option value="0">female</option>
        </select>

（4）textarea

<!-- 用css的height， width更好 -->
<label for="mark">备注</label>
        <textarea name="mark" id="mark" cols="30" rows="10"></textarea>

（5）常用的form形式

   表单的比较常见准备单独用一篇来写表单的生成，包括时间的加入。

二 展示数据的标签

   按照数据展示的样式来分HTML的标签可以分为块元素（display:block），行内元素（inline），行内块元素（inline-block）

1 常用的块级标签

（1）div

<!-- 套用MDN上div的定义；div是流内容常用的容器，并且div并不继承任何属性。用div可以把想要组织的元素组织在一起 -->
<div></div>

（2）p

（3）h1–h6

（4）ol

<!-- 有序列表 type{1（default）, i, I, a, A} -->
<ol type="i">
  <li>foo</li>
  <li>bar</li>
  <li>spam</li>
</ol>

（5）ul

（6）table

   table标签包含tr，td，th等
tr： table raw 表格的一行。
td：table data 表格的一个单元格
属性： rawspan：跨行数
clon

<!-- 通常需要设置rawspan和colspan来组织单元格的格式 -->
<table border="1" width="300">
    <tr>
        <td colspan=3>合并第一行的三列</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
</br>
<table border="1" width="300">
    <tr>
        <td rowspan="2">合并第一列的两行</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

（7）form

2 行内标签

（1）a

<!-- a标签有个属性叫target{_blank, _self, _parent, _top} -->
<a href="https://www.mozilla.com/">
External Link
</a>
<!--用图片做连接的描述 -->
<a href="https://developer.mozilla.org/en-US/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
       alt="MDN logo" />
</a>

（2）span

（3）br

3 行内块标签

（1）img

<!-- img标签对应的，还有个自嘲的工作叫切图仔。通常有链接或者base64来代表一个图片。并且日常用js来操作图片变幻也很多。 对于img的展示部分将放在css文件中讲述 -->
<img src="www.baidu.com" alt="picture">

<img src="data:image/jpg;base64," alt="picture">

（2）input

三 总结

   在全栈的开发中，前端是一个数据交互及数据展示的地方。要确保程序的健壮的准确。前端的标签不是很多也不麻烦。