零基础学习web前端（一）之HTML标签3

Amy

零基础学习web前端（一）之HTML标签3



【零基础学习web前端】教程目录导航   http://www.sufeinet.com/thread-24027-1-1.html



系列文章导读：
零基础学习web前端（一）之HTML标签1，
零基础学习web前端（一）之HTML标签2  

14、图片标签

---

[HTML] 纯文本查看 复制代码

<img src="" alt="" title="" width="" height="">

• src        图片路径，必写
• alt         替换文本，当图片不显示的时候显示的文字
• title       提示文字，鼠标经过图片时显示的字
• width    图片宽度
• height   图片高度
  

只有“src”是必写属性，其他的都可以不定义，宽高没有定义时，图片按自动比例缩放

15、超链接

---

[HTML] 纯文本查看 复制代码

<a href="" title="" target="">我是一个超链接</a>

• href      超链接目标地址
• title      提示文字，鼠标经过图片时显示的字
• target  超链接打开方式
  

target="_self" 默认值，在自身页面打开（关闭自身页面，打开链接页面）
target="_blank"打开新的页面（自身页面不关闭，打开新链接页面）
超链接可以用来定位：
  1.先定义一个锚点

[HTML] 纯文本查看 复制代码

<p id="a">我是Amy </p>

  2.超链接到锚点

[HTML] 纯文本查看 复制代码

<a href="#a" title="" target="">回到Amy那里</a>

16、表单

---

• <form> 标签用于为用户输入创建 HTML 表单。
• 表单能够包含input元素、menus、textarea、fieldset、legend和lable元素。
• 表单用于服务器传输数据
  

[HTML] 纯文本查看 复制代码

<form action="" method=""></form>

• action     提交表单的目标地址
• method  提交表单的方式（post/get）
  

注：form元素是块级元素，前后会产生折行。

• 文本输入框
  

[HTML] 纯文本查看 复制代码

<input type="text" maxlength="" readonly="readonly" disabled="" name="username" value="">

• maxlength 文本输入框最大的输入
• readonly 是否为只读文本
• disable 控件是否生效
• name 控件的name属性，提交表单和值绑定在一起
• value 控件的值
  

• 密码输入框
  

[HTML] 纯文本查看 复制代码

<input type="password" name="pwd"/>

• 单选框
  

[HTML] 纯文本查看 复制代码

<input type="radio" name="gender" value=“nan” checked="checked" />男 <br/>
<input type="radio" name="gender" value="nv" />女

效果
      

• 只有当name一致时 才会有单选的效果。
• checked 表示是否默认选中
• 选中后 提交表单，提交的是被选中控件的name和值的键值对。
  

• 多选框
  

[HTML] 纯文本查看 复制代码

<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="basketball">打球

效果
     

• 表单提交
  

[HTML] 纯文本查看 复制代码

<input type="submit"/>

效果
     

• 文件上传
  

[HTML] 纯文本查看 复制代码

<input type="file" /> 

效果

• 按钮效果
  

[HTML] 纯文本查看 复制代码

<input type="button"/>

• 充值input控件按钮
  

[HTML] 纯文本查看 复制代码

<input type="reset"/>

效果

竹林风

强烈支持楼主ing……

站长苏飞

强烈支持楼主ing……

Amy

系列文章链接：
零基础学习web前端（一）之HTML标签1 http://www.sufeinet.com/thread-24013-1-1.html
零基础学习web前端（一）之HTML标签2 http://www.sufeinet.com/thread-24021-1-1.html

站长苏飞

[quote][url=forum.php?mod=redirect

惜

激动人心，无法言表！