进击のpython

*****

前端学习——body标签

接下来的内容就比较多了，各位看官且听我慢慢道来... ...

使用a标签，链接到另一个页面

网页中<a>标签，全称：anchor、锚点的意思

它在html中称为超链接标签，可以说在网页中无处不在，只要有链接的地方，就有会这个标签

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

覆盖本身

我们做一个例子，点击百度一下就能跳转到百度：

  1. <body>
  2. <a href="http://www.baidu.com">百度一下！</a>
  3. </body>

这就是a标签的魅力！

给文本加入了a标签后，文字的颜色就会自动变为蓝色（被点击过后的文本颜色为紫色）

颜色很丑陋吧，不过没有关系后面我们学习了css样式就可以设置过来

但是，这个a标签把我原先的页面覆盖了，有没有别的方法，让他新建一个网页？

新建网页

  1. body>
  2. <a href="http://www.baidu.com" target="_blank">百度一下！</a>
  3. </body>

这样就新开了一个网页！

其实a标签不光可以在外面跳转，他也可以在浏览器里跳转

回到顶部

举个简单的例子，大家就明白了，比如我们在访问博客网页的的时候

通常都会有回到顶部或者向上的箭头，当用户浏览网页内容很长的时候

如果想跳转到顶部，那么可以点击向上的箭头，网页会快速的跳转到顶部区域

这个也是靠我们的<a>标签来实现的

1.在网页的最顶部编写一个空标签，并且设置该标签的属性name=‘top’

<div name='top'></div>其实这个标签的name属性值，相当于一个锚的名字

先不要纠结div是干什么的！！！！！

2.然后在网页的底部设置超链接，并且设置该<a>标签的href属性值一定为#top

表示点击a标签跳到锚名为top的指定的位置

3.好像还忘了一件事情，怎么然后网页滚动起来呢？

其实这个很简单，当我们的内容大于了浏览器的高度，浏览器就会自动出现滚动条

代码如下：

  1.   <div name='top'></div>
  2.   <p>my content</p>
  3.   <p>my content</p>
  4.   <p>my content</p>
  5.   ...中间省略30次
  6.   <p>my content</p>
  7.   <p>my content</p>
  8.   <a href="#top">跳转到顶部</a>

发送邮件

其实锚点还支持发送邮件

  1. <body>
  2. <a href="mailto:xxxxxxxx@xx.com">联系我们！</a>
  3. </body>

form表单

我们每天都在网上冲浪，如果没有表单，用户就无法输入自己的个人信息来买商品

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

我们就可以利用HTML表单form来实现

表单是可以把浏览器输入的数据发送给服务端

这样服务器端程序就可以处理表单传过来的数据

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

但是这其实还是没有完成一个用户交互的过程

text&password

当用户要在表单中输入字母、数字等内容时，就会用到输入框

针对平时的使用习惯，输入框一般是用户名式和密码式：

  1. <form>
  2.     <!--文本输入框-->
  3.    <input type="text" name="名称" value="文本" palceholder='请输入用户名'/>
  4.      <!--密码输入框-->
  5.    <input type="password" name="名称" value="密码" palceholder='请输入密码'/>
  6. </form>

  • type

    :

    • 当type为’text‘时，输入框为文本输入框
    • 当type为’password‘时，输入框为密码输入框

  • name:为文本框命名，后期用来给后台程序Java、PHP使用

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

  • placeholder：提示用户内容的输入格式

同时你也看到了，密码的提示框是隐藏起来的

radio&checked

这种单选框和复选框的操作也是通过input里面的type属性来实现的

  1. <form>
  2.     您的性别是？<br>
  3.     男:<input type="radio">
  4.     女:<input type="radio">
  5.     <hr>
  6.     您的爱好是？<br>
  7.     吃饭<input type="checkbox" >
  8.     睡觉<input type="checkbox" >
  9.     打豆豆<input type="checkbox">
  10. </form>

但是你可能会遇到这个问题：

你会发现，单选框也能多选，而且无法清除！！！

这是因为单选框复选框，你需要将框分组才可以，用什么分组呢？name属性！

  1. <form>
  2.     您的性别是？<br>
  3.     男:<input type="radio" name='sex'>
  4.     女:<input type="radio" name='sex'>
  5.     <hr>
  6.     您的爱好是？<br>
  7.     吃饭<input type="checkbox" name="hobby">
  8.     睡觉<input type="checkbox" name="hobby">
  9.     打豆豆<input type="checkbox" name="hobby">
  10. </form>

还有的网站，会默认选择男，选择睡觉，这个怎么做呢？checked属性！

  1. <form>
  2.     您的性别是？<br>
  3.     男:<input type="radio" name='sex' checked="checked">
  4.     女:<input type="radio" name='sex'>
  5.     <hr>
  6.     您的爱好是？<br>
  7.     吃饭<input type="checkbox" name="hobby" checked="checked">
  8.     睡觉<input type="checkbox" name="hobby">
  9.     打豆豆<input type="checkbox" name="hobby">
  10. </form>

这里多说一句，如果属性和属性值一致，比如checked="checked"，那么只写属性就行 checked！

select

很多时候我们也会遇到下拉框，让我们来选择相应的信息

比如会让我们选择居住的城市，那就会用到select

  1. <form>
  2.     您居住的城市?<br>
  3.     <select name="course">
  4.         <option value="beijing">北京</option>
  5.         <option value="jinan">济南</option>
  6.         <option value="changchun">长春</option>
  7.         <option value="xizang">西藏</option>
  8.     </select>
  9. </form>

select name ：下拉框的名字

value：服务器要知道选的是什么，所以当选择北京的时候，就会向服务器发送value中的值，即：beijing

​ 其实这个属性，单选复选框里也有的哦

那要是默认选择西藏呢？？selected='selected'，简写为：selected

当然，select下拉框也支持多选！在select标签中设置multiple="multiple"属性，就可以实现多选功能，

在windows操作系统中，进行多选时按下ctrl键同时进行单击,可以选择多个选项

submit&reset

那其实这都没有体现出表单的作用，表单的作用其实是为了将用户的交互信息进行打包整理

这样方便服务器对信息进行处理，更方便更高效！

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

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

  1. <input type='submit'>
  2. <input type="reset">

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

label

在表单中,label是一个关联控件,就像是一个锚点一样,一点就跳到相应位置

他是通过id进行的关联,有的时候用户点击文本"用户名"就直接跳到输入框

其实用的就是label标签：

  1. <form>
  2.     <label for="1">用户名：</label>
  3.     <input id="1" type="text" name="名称" palceholder='请输入用户名'/>
  5.     <label for="2">密码：</label>
  6.     <input id="2" type="password" name="名称" palceholder='请输入密码'/>
  8.     <input type='submit'>
  9.     <input type="reset">
  10. </form>

label标签标识用户项目中的标题

  • 它通常关联一个控件,label中的for属性，与某表单控件中的id对应。作为label元素的标签控件
  • 另外，当用户单击该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

textarea

像这篇博客后面一样，都是有评论的，那评论要怎么写呢？？？？

  1. <form>
  2.     <label for="1">用户名：</label>
  3.     <input id="1" type="text" name="名称" palceholder='请输入用户名'/>
  5.     <label for="2">密码：</label>
  6.     <input id="2" type="password" name="名称" palceholder='请输入密码'/>
  8.     <label for="3">评论：</label>
  9.     <textarea id="3"></textarea>
  11.     <input type='submit'>
  12.     <input type="reset">
  13. </form>

但是你发现了，这个评论框可以拖动！这是浏览器的问题，我们会在后面处理这个问题！

*****
*****

前端学习（五）：body标签（三）的更多相关文章

  1. 前端学习 之 CSS（三）

    九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...

  2. 前端学习(一) body标签(下)

    今日主要内容: 列表标签 <ul>.<ol>.<dl> 表格标签 <table> 表单标签 <fom> 一.列表标签 列表标签分为三种. 1 ...

  3. 前端学习(一) body标签(上)

    body标签中相关标签 主要内容: 字体标签:  h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...

  4. 前端学习（三）：body标签（一）

    进击のpython ***** 前端学习--body标签 body中的相关标签,因为是主要展现在页面的内容区域 所以相对来说内容多,杂,要背记的部分很多 当学完这节的内容之后,你可以试着写一片精致的文 ...

  5. 前端学习 第五弹： CSS （一）

    前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...

  6. 前端学习笔记之HTML body内常用标签

    阅读目录 一 HTML语义化 二 字符实体 三 h系列标签 四 p标签 五 img标签 六 a标签 七 列表标签 八 table标签 九 form标签 一 HTML语义化 body中的标签是会显示到浏 ...

  7. 前端学习（六）：body标签（四）

    进击のpython ***** 前端学习--body标签 关于前面的都是大部分的标签内容 但是就像衣服一样,除了要有,还要放到适当的位置 我们先来看看一下网页的布局: 就可以看出来,网页都是一块一块的 ...

  8. 前端学习 第三弹： JavaScript语言的特性与发展

    前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...

  9. java_web学习(五) JSTL标准标签库

    1.什么是JSTL JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. ...

随机推荐

  1. dart快速入门教程 （4）

    4.流程控制 4.1.分支结构 1.if语句 void main() { int score = 80; if (score >= 90) { print('优秀'); } else if (s ...

  2. jquery 获取页面和滚动条的高度

    1.获取浏览器显示区域的高度 : $(window).height(); 2.获取浏览器显示区域的宽度 : $(window).width(); 3.获取页面的文档高度 : $(document).h ...

  3. 基于4G Cat.1的内网穿透实例分享

    上一篇分享了:小熊派4G开发板初体验 这一篇继续BearPi-4G开发板实践:内网穿透实验. 基本TCP的socket通信测试 之前我们学习WiFi模块时,与PC进行TCP协议的socket通信测试我 ...

  4. Flv.js文档使用随记

    关键字:Flv.js | Flv js | Flv-js | HTML5 FLV Player | 0x001: 前言以下涉及到 flv.js 所有内容均是V1.5.0版本内的,如方法.属性.常量.监 ...

  5. 关于jwt6.0.0版本algorithms should be set报错的解决方案

    2020.7.7日jwt更新之后,安装的express-jwt模块会默认为6.0.0版本,我将之前的auth.js文件引入时控制台报错,提示algorithms should be set,中文译为应 ...

  6. 题解：2018级算法第六次上机 C6-不Nan的过河

    题目描述: 样例: 实现解释: 一道因为没排序做了一个小时没做出来的二分答案模板题(手动呲牙) 知识点: 二分答案,最大值最小化 坑点: 排序,judge(mid)函数内计数的实现 其实从最长一步的最 ...

  7. CTFHub_技能树_信息泄露

    常用备份文件名: www.zip bak文件 在使用vim时会创建临时缓存文件,关闭vim时缓存文件则会被删除,当vim异常退出后,因为未处理缓存文件,导致可以通过缓存文件恢复原始文件内容 以 ind ...

  8. MCU 51-4 独立按键&编码按键

    独立按键: 按键的按下与释放是通过机械触点的闭合与断开来实现的,因机械触点的弹性作用,在闭合与断开的瞬间均有一个抖动的过程,抖动必须清除. 按键按下一次,数码管数值加1: #include<re ...

  9. 数据可视化之DAX篇（十八）收藏 | DAX代码格式指南

    https://zhuanlan.zhihu.com/p/64422599 为什么要进行格式化? DAX 是一种函数式语言,正如我们已经学习的或者看到的,DAX 代码中总有一些函数带有几个参数,而参数 ...

  10. （6）webpack使用babel插件的使用

    为什么要使用babel插件? 首先要了解babel插件是干嘛的,随着js的语法规范发展,出现了越来越多的高级语法,但是使用webpack打包的时候,webpack并不能全部理解这些高级语法,需要我们使 ...