Html前端基础（form表单、img标签、a href标签、id的作用）

Html前端基础（form表单、img标签、a href标签、id的作用）

文章目录

​​一、img标签​​​​二、a标签（带href）​​​​三、form表单​​

本篇主要分析Html前端开发中的img图片标签、a href超链接标签、form表单标签，其中form是重点

一、img标签

1、标签嵌套的规则： 不能在内联标签内嵌套块标签

2、img下的属性： img标签： src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽 height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

3、示例：

"abcd" src="test.png" alt="截图" title="回旋梯" width="200px" height="200px">

二、a标签（带href）

1、href: 要连接的资源路径 格式如下: href=“_blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

2、示例：

3、name: 定义一个页面的书签.

4、三种列表：

无序列表
• 列表中的每一项
  有序列表
  1. :列表中的每一项.

     定义列表

     列表标题

     列表项

     5、id的作用： 每个id是一个页面中唯一的存在，不能重名

     顶部

     这样就是一个回到顶部的一个标签，使用id定位时必须带#号

     6、img和a标签练习代码：

     Top

     I have color!

     

     • 111
     • 222
     • 333

     1. 111
     2. 222
     3. 333

     chapter one

     section one

     section two

     section three

     Back Top

     三、form表单

     1、表单标签

     表单用于向服务器传输数据。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含textarea、select、fieldset和 label 元素。

     2、表单元素（1）基本元素

     text 文本输入框password 密码输入框checkbox 多选框，供用户勾选的radio 单选框，只能选一个

     （2）单选框设置为只能单选的原理：​​​Username:​​：将多选框中输入的内容组成一个键值对，键为user

     Sex: male female

     有两个键值对，键名都为gender,值有两个，但是只能选择一个一个值，键值对实际上只有一个，一个键对应一个值

     （3）示例：

     Username:

     Password:

     Hobby: game music

     Sex: male female

     （4）提交、按钮、上传文件、重置 submit 提交类型，是与服务端交互的类型​​​​​：将提交按钮文本改成register

     button 按钮

     表单：action后跟需要提交的服务端路径以上内容都放进form表单中才能够提交给服务端，让服务端获取用户提交的数据reset 重置表单，将输入的内容都清空placeholder 输入框内的属性，显示在输入框背景的文字file 上传文件

     3、表单属性 （1）概念： HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

     （2）action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如表单的提交方式 post/get 默认取值 就是 get（信封）

     get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制get/post是常见的两种请求方式.

     4、练习代码：

     Username:

     Password:

     Hobby: game music

     Sex: male female

     版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。