HTML中表格和表单的简单构造和样式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/WiniceS/article/details/72930323

现在一般网页上都有表单,也有表格,但是少。

表格

在HTML网页上建立表格需要有<table>标签
<table>标签中有主要标签有<tr>表格行、<th>表格内标题、<td>表格内内容、<caption>表格标签

<table>
    <caption>表格标题</caption>
   <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
   </tr>
   <tr>
      <td rowspan="2">内容1</td>
      <td>内容2</td>
      <td>内容3</td>
   </tr>
   <tr>
      <td colspan="2">内容5</td>
   </tr>
    <tr>
      <td>内容7</td>
      <td>内容8</td>
      <td>内容9</td>
   </tr>
</table>

rowspancolspan是表格跨行跨列的属性,其中rowspan是跨行,colspan是跨列。
如上述代码所述,效果如下(加上了边框,看得清楚些):
表格样式1
表格标题的样式需要单独变更。
表格中缝隙很大,要变没有可以使用border-collapse:collapse;这个声明。
就像这样:
表格样式2
标题的位置也可以变化:在table中加入caption-side:bottom;声明,可以将标题的位置放到下面。
在对表格的样式有一些样式:
表格样式3

tr:nth-child(2n+1){
    background-color: #a0a0a0;
}
tr:nth-child(2n){
    background-color: #fff;
}
th{
    background-color: yellowgreen;
}

这个这快捷的方式就牵扯到伪类:
:nth-child(xx)这个伪类属性可以匹配xx状态的元素的样式状态,
比如
:nth-child(even)匹配个数编号为偶数的元素,也可以even改成2n;
:nth-child(odd)匹配个数编号为奇数的元素,也可以odd改成2n+1;
:nth-child(3n)匹配个数编号为3的倍数的元素。

当然还有其他伪类,常见的一些伪类是用在超链接上的,

a元素的伪类样式

a:link 未单击访问时的超链接样式的选择器
a:visited 单击访问后的超链接样式的选择器
a:hover鼠标悬浮在上面的超链接样式的选择器
a:active鼠标单机未释放的超链接样式的选择器
在设置属性的时候要按上面的顺序来进行设置样式。
a:focus 当a元素被作为焦点时,会采用的超链接样式的选择器
一般最常用的伪类有:hover这选择器

表单

表单在网上很常见,一般的网页上的注册啊什么的都是用表单来做的。

 <h1>我是標題</h1>
    <form action="处理程序路径" method="post">
        <div class="tableRow">
            <p>
                選擇吧:
            </p>
            <p>
                <select name="xuanze">
                     <option value="xuanze1">选择1</option>
                     <option value="xuanze2">选择2</option>
                     <option value="xuanze3">选择3</option>
                     <option value="xuanze4">选择4</option>
                </select>
            </p>
        </div>
        <div class="tableRow">
            <p>
                单选:
            </p>
            <p>
                <input type="radio" name="danxuan" value="danxuan1">单选1<br>
                <input type="radio" name="danxuan" value="danxuan2" checked>单选2
            </p>
        </div>
        <div class="tableRow">
            <p>数量:</p>
            <p><input type="number" name="shulaing" min="1" max="10"></p>
        </div>
        <div class="tableRow lable">
            <p>日期:</p>
            <p><input type="date" value="date"></p>
        </div>
        <div class="tableRow">
            <p>
                多选:</p>
            <p>
                <input type="checkbox" name="duoxuan[]" value="duoxuan1">多选1
                <br>
                <input type="checkbox" name="duoxuan[]" value="duoxuan2" checked>多选2
            </p>
        </div>
        <div class="tableRow">
            <p>
               文本:</p>
            <p><input type="text" name="wenben" placeholder="内部内容,可不写"></p>
        </div>

        <div class="tableRow">
            <p>
                密码:</p>
            <p><input type="password" name="mima"></p>
        </div>
        <div class="tableRow">
            <p>
                电话:</p>
            <p><input type="tel" name="phone" value=""></p>
        </div>
        <div class="tableRow">
            <p>文本框:</p>
            <p>
                <textarea name="wenbenkuang"></textarea>
            </p>
        </div>
        <div class="tableRow">
            <p></p>
            <p>
                <input type="submit">
                <input type="reset">
                <input type="button" value="自定义按钮">
            </p>
        </div>
    </form>

常见表单
其中基本包含了表单内容。
建立表单则需要<form>元素,这个元素主要有两个属性需要填写,
1:action属性是填写处理表单的服务器程序路径,比如什么xxx.php,有相对路径和绝对路径。
2:method属性是填写表单数据是如何提交到web服务器上,有两种方法可以选择。

  • get方式,表单的数据在链接地址中可以看到,数据不安全;而且提交的内容容量有限,适合相对少的数据传输。
  • post方式,表单的数据在链接地址中看不到,数据相对安全,而且提交的内容容量可以很大。

表单元素

<input>元素,其有很多类型,
第一个需要使用type属性,其中常用类型有:
1、text 一个文本框,提供文本输入;
2、password 一个密码框,提供密码输入,输入内容会不可见;
3、number 一个数字框,可以设置最大最小值;
4、submit 提交按钮;
5、reset 重置按钮;
6、button 自定义按钮;
7、date 一个日期选择框,可提供日期选择;
8、radio 选项单选,可以提供多个选项,每一个选项是一个<input>
9、checkbox 复选框,可以提交多个选择,每一个选项是一个<input>
10、file 提供一个上传文件的框。
第二个需要填的属性是name,就是将框里填的内容或者选的内容,赋值给name中。比如,type=“text” name=“mingzi” 就是将text文本框里填写的内容赋个mingzi,后台处理程序看到mingzi后就知道文本框输入什么内容了。
第三个可能需要填写的属性为value,这个的话用在按钮上就是按钮显示的值;用在单选和多选时,则表示所选内容是什么值,然后赋值与name属性。
HTML5中还提供了更多的类型。

下拉列表选项<select>,需要一个name属性,
每一个下拉列表选项需要一个<option>,每一个选项都需要一个value值,来给name属性赋值。选择项的内容则写在<option></option>中。

大型文本框<textarea>,需要一个name属性来储存文本域中的内容。

当然,表单元素还有很多,而且也还有很多元素属性和值,详见W3school的HTML的表单
比如required必填属性,placeholder文本框信息提示 ,checked已被选择等等。

有一种标签使说明和文本框紧密连接,就是<lable>标签,为 input 元素定义标注(标记),但是需要for和id绑定。

<form>
        <lable for="text">文本框输入</lable>
        <input type="text" name="name" id="text">
</form>

lable元素

还有一个比较骚气的标签<fieldset>,将一些表单归为一类汇总。

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

fieldset标签

本博客仅用于记录web前端学习情况

展开阅读全文

没有更多推荐了,返回首页