HTML常用标签02

HTML重点标签介绍


a标签


1. 属性

· 1. href

取值:

a.网址

        https://google.com

        http://google.com

        //google.com

b.路径

     /a/b/c以及a/b/c

     index.html以及./index.html

c.伪协议

       i. javascript:代码;

       ii. mailto:邮箱

       iii.tel:手机号

       iiii.id

2. 作用:

a. 跳转外部页面

点击跳转Google

b. 跳转内部锚点



    
        
        
        超链接
    

    
        

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

点此跳转至17

c.跳转到邮箱或电话等

1.什么都不执行的伪代码:

点击,页面不进行任何操作

2.跳转到邮箱:

点击进入发邮件操作

3.跳转到电话:

点击进入电话操作

· 手机页面点击,跳转至拨号界面,直接可拨打电话

========================================================

· 2. target

取值:

a.内置名字

i. _blank --> 在新页面打开网址

新页面打开网站

ii. _top --> 在最顶级页面打开网址
新页面打开网站

iii. _parent--> 在所在页面(上一层级)直系父级页面打开网址

新页面打开网站

iiii. _self --> 在所在页面打开网址

新页面打开网站

· 注:"_top","_parent"一般出现在页面含有iframe框架的网页中

b.程序员命名

1.window的name

举例:

·效果:点击打开Google,页面将在名称为xxx的页面打开,若没有名称为xxx的页面,浏览器将自主创建名称为xxx的网页,这时点击打开Baidu,页面将在名称为xxx的页面打开。

1.打开Google

2.打开Baidu

html页面代码:

打开Google

打开Baidu

2.iframe的name

打开Google

打开Baidu


table标签


i.相关标签

ii.相关样式


示例:




  
  
  table测试



  
星期一 星期二 星期三 星期四 星期五
1 语文 数学 美术 英语 英语
2 体育 数学 美术 英语 体育

iframe 标签


i.嵌套页面(目前很少用,几年前经常使用)

 

a标签一起使用:

示例:

    
    QQ
    写代码啦"//target (面向...对象)

ii.和a标签一起使用:

示例:


QQ
写代码啦"
//target (面向...对象)

img 标签


a.作用: 发送GET请求,显示一张照片

b.属性:

  1. alt //当图片加载失败时,显示alt的内容

成功加载:

    一个风车

加载失败:

    一个风车
  1. height-->img图片的高
一个风车
  1. width -->img图片的宽
一个风车

注:不能同时设置宽和高

  1. src //图片地址
一个风车

c.事件:

  1. onload
    javascript代码:

  1. onerror
    javascript代码:

  • 图片响应式:max-width:100%;

form 标签


    1. 作用: 发getpost请求,然后刷新以页面
    1. 属性:

    a。 action--> action=""中写入什么,form表单就会向谁发起请求

    举例:

         
    // 输入框 //提交按钮

当点击提交按钮时,form表单向xxx.html发起请求

b。 autocomplete--> 控制form表单输入区是否自动填充

举例:

①:自动填充


    

②:非自动填充


    

c。method--> 控制form表单向xxx.html发起请求方式为getpost

举例:

  1. form表单向xxx.html发起请求方式为post
     
         



2. form表单向xxx.html发起请求方式为`get`
  ①:
   ```html
    
        
②: ```html

d。target-->控制浏览器数据提交至哪个页面或对刷新哪个页面
①。浏览器数据提交至新开页面


   

②。浏览器数据提交x,刷新name名为iframe的开页面


   
    1. form 标签里面一般会有输入框和按钮;

      form 标签一定要有type=“submit”,不然不能进行提交请求;

      form标签相关使事件
      1、onsubmit --> 在提交时触发此事件
      2、


input 标签


1. 作用:让用户输入内容

2. 属性:

a. text-->文本输入框


b. button-->按钮

 

c. checkbox-->复选框

· 注:"input type="checkbox"使用时若需区分是否同为一组,则理应保持inputname一致

d. file-->文件

i:单文件上传:


ii:多文件上传,添加multiple


e. password-->密码框


f. radio-->单选框

· 注:"input type="radio"使用时须保持inputname一致

······

3.事件:

onchange //当用户输入改变时触发事件

onfocus //当鼠标聚焦时触发

onblur //当鼠标从当前离开时触发事件

4.验证器:

HTML5新增功能,一些编辑器自带验证功能

举例:

如:required: input输入框

······


其他输入 标签


①.select>option-->下拉选项


    

②.textarea-->多行文本框


    

· !!!注意:

a。一般不监听input的click事件;

b。form里面的input要有name;

c。form里面要放一个type=submit才能触发submit事件。

你可能感兴趣的:(HTML常用标签02)