零基础小白前端学习之HTML（七）

前端开发小马哥
710 阅读8分钟

本节主要讲解超链接标签，链接地址及图片标签，学习完这一章节我们可以把分散的独立的网页用超链接<a>标签有效的链接起来，达到网页之间的相互跳转的作用。

1.使用<a>标签，链接到另一个页面

网页中<a>标签，全称：anchor、锚点的意思。它在html中称为超链接标签，可以说它在网页中是无处不在的，只要有链接的地方，就有会这个标签。

语法：

<a href='目标地址' title='鼠标滑过显示的文本'>链接显示的文本</a>

举个栗子:

比如我们我们做个效果。点击百度一下,会跳转到百度的首页。

代码如下：

<a href="http://www.baidu.com" title='点击进入百度'>百度一下</a>
  1. href指的是链接指向的页面的地址
  2. title属性的作用，鼠标滑过链接文本时会显示这个属性的文本内容。这个属性在实际网页中开发中作用不大，主要方便搜索引擎了解链接地址的内容

注意：主要给文本加入了a标签后，文字的颜色就会自动变为蓝色（被点击过后的文本颜色为紫色），颜色很丑陋吧，不过没有关系后面我们学习了css样式就可以设置过来。后面讲解。

2.在新建浏览器窗口打开新的链接

<a>标签在默认情况下，链接的网页是在当前浏览器窗口打开的，有时候我们需要在新的浏览器窗口打开。

语法：

<a href='目标地址' target='_blank'>点我！</a>

举个栗子：

代码如下

<p>
    比尔·盖茨 [1]  （Bill Gates），全名威廉·亨利·盖茨三世，简称比尔或盖茨。1955年10月28日出生于<a href="https://baike.baidu.com/item/%E5%8D%8E%E7%9B%9B%E9%A1%BF%E5%B7%9E" target="_blank">美国华盛顿州西雅图</a>，企业家、软件工程师、慈善家、微软公司创始人。曾任微软董事长、CEO和首席软件设计师
</p>

3.在当前浏览器中进行跳转

举个简单的例子，大家就明白了，比如我们在访问博客网页的的时候，通常都会有回到顶部或者向上的箭头，当用户浏览网页内容很长的时候，如果想跳转到顶部，那么可以点击向上的箭头，网页会快速的跳转到顶部区域。这个也是靠我们的<a>标签来实现的。

如果想实现上述描述的效果。

1.现在网页的最顶部编写一个空标签，并且设置该标签的属性name=‘top’,<div name='top'></div>其实这个标签的name属性值，相当于一个锚的名字

2.然后在网页的底部设置超链接，并且设置该<a>标签的href属性值一定为#top。表示点击a标签跳到锚名为top的指定的位置。

3.好像还忘了一件事情，怎么然后网页滚动起来呢？其实这个很简单，当我们的内容大于了浏览器的高度，浏览器就会自动出现滚动条。

代码如下：

  <div name='top'></div>
  <p>my content</p>
  <p>my content</p>
  <p>my content</p>
  ...中间省略30次
  <p>my content</p>
  <p>my content</p>
  <a href="#top">跳转到顶部</a>
4.给<a>标签添加mailto属性，实现邮件链接

代码举例：

<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

效果如下：

5.学习<img>标签，为网页插入美丽的图片

在网页制作中为使网页绚丽美观，尤其是购物商城网站，比如京东、淘宝、小米等，肯定是少不了图片的，那么我们可以使用img标签来插入图片。

语法:

<img src="图片地址" alt="下载失败时的替换文本" title='提示文本'>

举个栗子：

<img src="15026793366951.gif" alt="一个耿直的微笑" title='瞅你的损色'>

效果展示：

  1. src:图片的位置
  2. alt:指定图像的描述性文本，当图像不见时(下载不成功时)，可看到该属性指定的文本。
  3. title:鼠标滑过图片时显示的文本
  4. 图像可视GIF,PNG,JPEG格式的图像文件

我们每天都在网上冲浪，如果没有表单，用户就无法输入自己的个人信息来买商品，本节主要从表单的作用、表单元素讲起，学习完本章节，可以制作出简单的用户登录、注册页面。

1.使用form表单标签，与用户交互

在网站上，怎样与用户进行交互呢？比如小米商城的登录页面

我们可以使用HTML表单(form)来实现。表单是可以把浏览器输入的数据发送给服务器端，这样服务器端程序就可以处理表单传过来的数据。

语法：

<form   method="传送方式"   action="服务器文件">
  1. <form>：form标签是成对存在的，以<form>开始，以</form>结束。
  2. action:浏览器输入的数据被传送到的地方，比如一个PHP页面(action.php)
  3. method:数据传送的方式(get(默认)/post)。

举个例子：

  <form action="action.php" method="get">
    
  </form>

咦...大家是否发现，虽然我们有了form标签，但是用户要想输入内容在哪里呢？请看下节

2.文本输入框、密码输入框

当用户要在表单中输入字母、数字等内容时，就会用到文本输入框和密码输入框。

语法：

<form>
    <!--文本输入框-->
   <input type="text" name="名称" value="文本" palceholder='请输入用户名'/>
     <!--密码输入框-->
   <input type="password" name="名称" value="密码" palceholder='请输入密码'/>
</form>
  • type:
    • 当type为’text‘时，输入框为文本输入框
    • 当type为’password‘时，输入框为密码输入框
  • **name:**为文本框命名，后期用来给后台程序Java、PHP使用
  • **value:**为文本输入框设置默认值。(一般起到提示作用)
  • placeholder：提示用户内容的输入格式

代码如下：

<form action="action.php" method="get">
    <input type="text" name="username"  placeholder="请输入用户名">
    <br>
    <input type="password" name="pwd"  placeholder="请输入密码">
</form>

效果展示：

注意：当输入框获取焦点时，提示用户的文本会消失掉

3.文本域，支持多行文本输入

当用户需要在表单中输入大段文字时，需要用到文本输入域。

语法：

  <textarea name="desc" rows="行数" cols="列数">文本</textarea>
  • textarea标签是成对存在。
  • cols:多行输入域的列数，列数可以控制该控件的宽度
  • rows:多行输入域的行数，行数可以控制该控件的高度
  • 在<textarea></textarea>标签之间可以输入默认值

举个栗子：

<textarea name="desc" rows="5" cols="30" placeholder="请输入个人描述..."></textarea>

效果展示：

4.使用多选框、复选框、让用户选择

在制作表单设计中，为了减少用户的操作，使用选择框是一个不错的想法，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项，用户只能选择其一，而复选框中用户可以任意选择多个，甚至全选。好比我们做单选题和多选题一样。请看下面的例子：

语法：

单选框：
<input type="radio" value="值"  name="名称" checked='checked'/>
多选框：
<input type="checkbox" value="值"  name="名称" checked='checked'/>
  • type
    • 当type='radio'时，控件为单选框
    • 当type='checkbox'时，控件为复选框
  • value:提交数据到服务器的值
  • name：为控件命名，为后面后台程序使用
  • checked:当设置checked=‘checked’时，该选项被默认选中

示例代码：

<form>
    您的性别是？<br>
    男:<input type="radio" name="sex" value='0' checked='checked'>
    女:<input type="radio" name="sex" value='1'>
    <hr>
    您的爱好是？<br>
    吃饭<input type="checkbox" name="hobby" value="eat" checked='checked'>
    睡觉<input type="checkbox" name="hobby" value="sleep" checked='checked'>
    打豆豆<input type="checkbox" name="hobby" value="love">
</form>

效果展示：

注意：同一组的单选按钮，name的值一定要一致，比如上面的例子为同一个名称'sex'，这样同一组的单选按钮才可以起到单选的作用。

5.使用下拉列表框，节省空间

下拉列表在网页中也时常用到，它可以有效的节省网页空间。既可以单选、又可以多选。

代码如下：

<form>
    您要报名的课程?<br>
    <select name="course">
        <option value="python">python中级</option>
        <option value="go">go精讲</option>
        <option value="web" selected='selected'>web全栈</option>
        <option value="linux">linux深入挖掘</option>
    </select>
</form>

  • select标签是下拉列表框标签

    • name：下拉列表的名字
    • value

效果展示：

6.下拉列表进行多选

下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在windows操作系统中，进行多选时按下ctrl键同时进行单击(在Mac下使用Command+单击),可以选择多个选项。

上节课案例修改：

<form>
    您要报名的课程?<br>
    <select name="course" multiple='multiple'>
        <option value="python">python中级</option>
        <option value="go">go精讲</option>
        <option value="web" selected='selected'>web全栈</option>
        <option value="linux">linux深入挖掘</option>
    </select>
</form>

效果展示：

注意：如果选项内容一多，会出现默认的滚动条

7.使用提交按钮，提交数据

在表单中有两种按钮可以使用，分别为：提交按钮(submit)和重置按钮(reset)。

当用户需要提交表单信息到服务器时，需要用到提交按钮。

语法：

<input type='submit' value='提交'>
  • type:只有当type值设置为submit时，按钮才会有提交作用
  • value:按钮上显示的文字

例子：

<form method="post" action="active.php">
    <label for='myName'>姓名:</label>
    <input type="text" value="" id='myName'  name="myName">
    <input type="submit" value="提交">
</form>
  • label标签标识用户项目中的标题
    • 它通常关联一个控件,label中的for属性，与某表单控件中的id对应。作为label元素的标签控件。
    • 另外，当用户单击该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

效果展示：

注意：label标签的for属性中的值一定与相关标签的id属性值要相同

重置按钮也非常简单，当用户在填写表单信息时，发现书写错误，可以使用重置按钮使输入框回到初始化状态。我们只需要把type设置为reset即可。

语法：

<input type='reset' value='重置'>
avatar
文章
阅读
粉丝