阶段复习之html基础(二)——重点标签详解
##img标签:图片标签的属性 ##
1.src:图像文件的地址
2.width:图像的宽度
3.height:图像的高度
4.alt: 图片找不到时,显示的文字
5.title:鼠标放到图片上,显示的文字
6.border: 图片边框粗细
- 代码示例
<img src="cycle/img/100001.jpg" width="300dp" height="300dp"
border="1dp" alt="好图" title="好图">
-
效果
##a 标签:超链接表标签的属性 ##
1.href:超链接文件的地址
2.target:链接文件显示的位置
超链接标签target属性的值
1._blank:超链接文件在新窗口显示
2._parent:超链接文件在当前窗口的父窗口显示
3._top:超链接文件在当前窗口的根窗口显示
4.name:名称为frame的值,超链接文件在相同名称的窗口显示,若不存在该窗口,就打开一个新窗口 -
代码示例
<a href="http://www.baidu.com" target="_parent">百度一下</a>
table标签:表格标签
3个子标签:1.表头 2.行 3.列
3个属性:1.colspan跨列 2.rowspan跨行 3.align对齐方式left,right,center(align属性适合很多标签)
- 代码示例
<table bgcolor="#a9a9a9" border="1dp" width="300" >
<tr><!--表行-->
<th rowspan="2">文本加粗</th>
<td colspan="2">表格子</td>
</tr>
<tr><!--表行-->
<td align="left">表格子</td>
<td align="center">表格子</td>
</tr>
<tr><!--表行-->
<th>文本加粗</th>
<td>表格子</td>
<td>表格子</td>
</tr>
</table>
- 效果
form表单
也是一个标签: 标签
3个属性:
1.name :表单的名称
2.action :当表单输入完成后,把它的内容传送到哪里,一个路径
3.method :传送方式
1.get方式:
1.url?后面加上传送字符串 2.传送资料会显示在浏览器地址栏 3.会有安全问题 4.传送资料量不可太大
2.post方式:
传送的表单信息作为HttpRequest的一部分,资料不会显示在浏览器的地址栏上,传送字节量可以很大
要求1.安全性高 2.大段文本 3.file表单域,用post传送方式
form表单域
1.文本框:input type=“text” id=“wbk”
2.密码框:input type=“password”
3.单选按钮:input type=“radio” name=“1”>
4.复选框:input type=“checkbox” id=“cb1”
5.隐藏域:input type=“hidden”
6.文本域:textarea rows=“3” cols=“20"该文本域占3行20列
7.普通按钮:input type=“button” id=“button1” name=“button1” value=“普通按钮”
8.提交按钮:input type=“submit” id=“submit1” name=“submit1” value=“提交按钮”
提交按钮用来提交表单,当点击提交按钮时,把表单域有name属性的表单域的name值和value值传给action值所在的地方
9.重置按钮:input type=“reset” id=“reset1” name=“reset1” value=“重置按钮”
重置按钮用来清空以填好了的表单域
10.图片域:input type=“image” id=“image1” name=“image1” src=”"
- 注意:图片上传from的属性中要求 method=“post” enctype=“multipart/form-data”
- 代码示例
<form action="test.action" method="post" enctype="multipart/form-data">
<!-- 注意readonly disabled的区别 -->
账号: <input id="username" name="username" type="text" width="200dp" value="账号" readonly disabled><br>
密码: <input id="password" name="password" type="password" width="200dp" >
<br>
性别: <input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br>
爱好:<input type="checkbox" name="boby" value="吃饭">吃饭
<input type="checkbox" name="boby" value="喝酒">喝酒
<input type="checkbox" name="boby" value="抽烟">抽烟
<input type="hidden" id="hidden" name="hidden" value="web用户">
<br>
学历:<select>
<option >小学</option>
<option>初中</option>
<option>高中</option>
<option selected="selected">大学</option>
</select>
<br>
上传头像:<input type="file">
<br>
个人简介:<textarea rows="4" cols="20" ></textarea>
<br>
<input id="cancel" type="button" value="取消">
<input id="submit" type="submit" name="提交">
</form>
- 效果
上一篇: html初级入门01
下一篇: 35. 搜索插入位置