HTML高级标签

HTML高级标签

• 一、表格标签

• 二、表单标签

• 三、容器标签

一、表格标签

  表格标签呈现一种嵌套关系，最外层是table标签，而我们的表格的内容是写在tbody标签内的。其中我们用tr标签创建行也就是tr标签内部的内容在同一行，后面的tr标签同理也是各占一行，依次排列下去。

  我们知道，表格都有一行用于说明该行或者该列是什么数据的内容，这部分我们成为表格头，用th标签将其分隔开。后面的每一行中的每一项我们用td标签来分开。默认效果中th标签内的字要比tr标签内的粗，或者说字重比较大。th和td标签都是用于区分行内的每一项。

  不过一个td标签页不一定只占一行，我们也可以通过修改td标签的rowspan标签来选择这个单元格要占几行。同理，rowspan可以改变这个单元格占几列。

  在table标签中的一些属性可以改变表格的一些样式

属性	描述
border	边框的粗细
cellspacing	单元格和单元格之间的空间
cellpadding	内边距，也就是单元格的里面内容与单元格边框的距离

<table border="1" cellspacing="2" cellpadding="2">
    <tbody>
        <tr><th>姓名</th><th>性别</th></tr>
        <tr><td>小明</td><td rowspan="2">男</td></tr>
        <tr><td>小红</td></tr>
    </tbody>
</table>

二、表单标签

  表单标签是一个要与服务器后台进行通讯的标签。在这里面有几个我们常用的属性

属性	描述
action	写提交到的后台地址
method	写请求方式
target	打开方式

  form标签也是需要和它里面的一些标签结合使用来实现一些我们想要的效果。我们常用的有input标签

  input标签有多种表现形式，这可以通过标签内的type属性的变化来实现。

type属性值	input表现
text	普通输入框，可以看到输入的具体内容
password	密码输入框，看不到输入的具体内容
submit	提交按钮，直接提交到action内的地址中
reset	重置按钮，会清空同一个表单内输入框内的内容
button	常结合css和js实现某种功能键

<form action="" method="" target="_blank">
    <input type="text" name="text">普通文本输入<br>
    <input type="password" name="password">密码输入<br>
    <input type="button" value="普通按钮">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>

  我们可以知道input输入的数据会被传入后台，那么当我们一次输入了复数的数据时，后台该怎么分辨这些数据呢？这是我们可以对input标签的name属性进行修改，后台可以根据name属性对数据进行区分。

  而对于input标签，由于它是自闭合标签，所以input元素内的文字我们一般是通过value属性给添加上的。

  而另一个标签，button标签，同样可以实现input的三个按钮类型，它也是通过type标签进行变化的

type属性值	button表现
button	普通按钮
submit	提交按钮
reset	重置按钮

<form action="" method="" target="_blank">
    <button type="button">普通按钮</button>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>

  那么当我们要实现按钮功能时，button和input标签都能实现相同的功能，那么我们到底该选择哪个呢？关于这点，我们一般选择button标签。这是因为要遵循标签的语义化，即标签的意思与功能相匹配。

  input标签还能用于选择，即单选选项与多选选项。

type值	描述
radio	单选选项
checkbox	多选选项

<form action="" method="" target="_blank">
    问题一：<input type="radio" name="1" id="11">1<input type="radio" name="1" id="12">2 <br>
    问题二：<input type="radio" name="2" id="21">1<input type="radio" name="2" id="22">2 <br>
    问题三：<input type="checkbox" name="1" id="111">111<input type="checkbox" name="1" id="222">2 <br>
</form>

  面对选项，新手容易出现选项冲突的问题，这在单选选项中表现尤为明显。

  什么叫选项冲突呢？就是可以同时选中多个单选选项。这一般都是由于没有明确地告诉后台那几个选项是属于同一道题。因此对于同一道题的选项，我们要统一name属性的值，并且对每个单选选项设置value的值，提交时该value值就会被赋给name的值。同理多选选项也是需要统一同一道题的选项的name值，每个选项确定一个value值。

  当你测试自己写的单选题和多选题时你可能会发现，只有在点击小灰点或者小灰块时才能选中。这时候你可以尝试将文字标签转移到lable标签中。并且为文字对应的选项的input标签设置一个独一无二的id，并使用lable标签的for属性指向它（也就是id和for的值相统一）

    问题一：<input type="radio" name="1" id="11"><label for="11">1</label>
    <input type="radio" name="1" id="12"><label for="12">2</label> <br>

  这下你就能实现你想要的效果了。

  关于表单内的标签，还有几个不怎么常用的标签，不过我希望你也能了解一下他们

标签	实现效果	描述
select	下拉选项卡	内含option标签，作为选项卡中的每一项
fieldset	表单边框标题标签	内含legend标签，作为框内的每一项
textarea	评论框	可多行输入，可在页面内自由变换大小，当内容超过边框时允许上下滑动
iframe	内联网页框架	可以在一块区域中引入其他网页

<select name="" id="">
        <option value="1">1</option>
        <option value="12">12</option>
        <option value="123">123</option>
</select>

<fieldset style="width: 500px">
    <legend>111</legend>
    <legend>111</legend>
    <legend>111</legend>
</fieldset>

<textarea name="" id="" cols="30" rows="10"></textarea>

<iframe src="http://redpoint.ke.qq.com/" frameborder="0" style="width: 500px;height: 600px;"></iframe>

三、容器标签

标签	描述
div	块容器（自己占一行）
span	内联容器（可以多个一行，知道超出父容器宽度）
nav	导航栏（h5新增标签，相当于给div添加一个“nav”类名）

  容器标签有一个我们比较常用的特点，那就是打包处理。

  当想要使多个标签同时实现一个效果时，我们可以把它们放到一个容器标签，比如div标签中，然后对div标签进行修改，那么div被添加的效果就会在div内的标签上表现出来。

  比如我们有这么几个p标签，我们想让它们的颜色都变成红色，是不是要给每一个标签都加上样式呢？

<p>句子1</p>
<p>句子2</p>
<p>句子3</p>

  这时我们可以将它们一起放进一个容器标签内，比如div中，那么我们就可以这样去修改它们。

<div style="color: red">
<p>句子1</p><p>句子2</p><p>句子3</p>
</div>

  但你尝试了许多标签后，你或许会发现有的标签一个占一行，而有的标签可以很多个标签占一行。关于标签的这些特性，我们可以再次进行分类

分类	描述
块元素	拥有完整的盒模型，可以随意地设置大小 独占一行
内联元素	没有完整的盒模型，不可以随意地设置大小 可以多个同一行和，直到超出父容器宽度
内联块元素	拥有完整的盒模型 可以多个占同一行