码迷,mamicode.com
首页 > Web开发 > 详细

HTML+CSS基础学习笔记(2)

时间:2016-10-11 14:13:58      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:

一、无序列表标签ul

<ul>

<li>信息</li>

<li>信息</li>

  ......

</ul>

代码解释:每项<li>前为一个黑点

二、有序列表标签ol

<ol>

<li>信息</li>

<li>信息</li>

  ......

</ol>

代码解释:每项<li>前为都自带一个序号,序号默认从1开始

 

三、<a>标签

1、<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

2、在新建浏览器窗口中打开链接

<a href="目标网址"  target="_blank">click here!</a>

3、邮件链接

 <a href="技术分享mailto:yy@imooc.com?subject=主题&body=邮件内容">加入邮件链接</a>

代码解释:mailto后面同时有多个参数,第一个参数必须以"?"开头,后面的参数都以"&"分隔。

 

四、表格标签<table>

<table summary="表格文本简介,增加表格可读性,不会在浏览器显示出">
<caption>标题文本</caption>
<tr>
<td>列一</td>
<td>列二</td>
</tr>
</table>
 
五、<img>插入图片标签
<img src="图片地址" alt="下载失败时的替换文本" title="提示文本" />
代码解释:
1、src:标识图像位置
2、alt:指定图像的描述性文本,当图像不可见时可看到
3、title:鼠标滑过图片时显示的文本
4、图像可以是GIF, PNG, JPEG格式的图像文件

 

六、表单标签,与用户交互

<form method="传送方式" action="服务器文件"></form>

代码解释:

1、<from>:<form>标签成对出现,以<from>开始,以</from>结束

2、action:浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)

3、method:数据传送的方式(get/post)

注:

1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间,否者用户输入的信息可能提交不到服务器。

2、method:post/get的区别这一部分属于后端考虑的问题。

 

七、文本输入框、密码输入框

<form>

<input type="text/password" name="名称" value="文本" />

</form>

代码解释:

1、type:

当type="text"时,输入框为文本输入框

当type="password"时,输入框为密码输入框

2、name:为文本框命名,以备后台程序ASP、PHP使用。

3、value:为文本输入设置默认值。(一般起提示作用)

举例:

<form>

  姓名:

  <input type="text" name="myName">

  <br />

  <input type="password" name="pass">

</form>

 

八、文本域<textarea>

 <textarea rows="行数" cols="列数">文本</textarea>

例:

<form method="post" action="save.php">

  <lable>联系我们</lable>

  <textarea rows="10" cols="50">在这里输入内容....</textarea>

</form>

 

九、单选框、复选框、下拉框

<input type="radio/checkbox" value="值" name="名称" checked="checked" />

代码解释:

1、type="radio"   单选框

   type="checkbox"   复选框

2、value:提交数据到服务器的值(后台程序PHP使用)

3、name:为控件命名,以备后台程序ASP、PHP使用

4、checked:当设置checked="checked"时,该选项被默认选中。

例1(单/复选框):

技术分享

 技术分享

注意:同一组的单选按钮,name取值一定要一致,比如例1为同一个名称"radioLove",这样同一组的单选按钮才可以起到单选的作用。

 

例2(下拉框):

技术分享

 

技术分享

 代码解释:

1、<option value="提交值">选项</option >

2、设置selected="selected"属性,则该选项就被默认选中

 

HTML+CSS基础学习笔记(2)

标签:

原文地址:http://www.cnblogs.com/shiy/p/5929665.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!