现在一般网页上都有表单,也有表格,但是少。
表格
在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>
rowspan和colspan是表格跨行跨列的属性,其中rowspan是跨行,colspan是跨列。
如上述代码所述,效果如下(加上了边框,看得清楚些):
表格标题的样式需要单独变更。
表格中缝隙很大,要变没有可以使用border-collapse:collapse;
这个声明。
就像这样:
标题的位置也可以变化:在table中加入caption-side:bottom;
声明,可以将标题的位置放到下面。
在对表格的样式有一些样式:
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>
还有一个比较骚气的标签<fieldset>
,将一些表单归为一类汇总。
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
本博客仅用于记录web前端学习情况