HTML常用标签

270 阅读2分钟

1.<a>

1.作用

     跳转外部页面

     跳转内部页面

     跳转到邮箱或电话等

2.属性

href属性给出链接指向的地址。它的值应该是一个URL或者锚点

target属性指定如何展示打开的链接,可以在指定窗口,也可以在里面打开

-self:当前窗口打开

_blank:新窗口打开

_parent :上层窗口打开,用于从父窗口打开的子窗口,或者里面的链接

_top:顶层窗口打开

3.伪协议

javascript:代码;

javascript:; 写一个a标签,点击之后什么都不做

a<href="javascript:alert(1);">

id href=#xxx

a标签+id 直接跳转到该链接

mailto:邮箱

tel:手机

2.<table>

内嵌窗口

1.相关标签

 <thead>  <tbody>  <tfoot>

<tr> table row 一行

<th> table head 标题单元格

<td> table data 数据单元格

2.相关的样式

table-layout

auto 根据内容预测有多宽 (小小红)

fixed 尽量平均

border-collapse

合并

border-spacing

间隔 空隙 一般设置为0

3.img

1.作用

发出get请求,展示一张图片(开发者工具)

2.属性

alt /height /width /src

1.alt属性用来设定图片的文字说明。图片不显示时(比如下载失败,或用户关闭图片加载),图片的位置上会显示该文本

<img src="1.jpg" alt="示例图片">

2.width属性与height属性可以指定图片显示时的宽度和高度

<img src="1.jpg" width="400" height="300">

3.事件

onload/onerror

 <img width="200" src="1.JPG" alt="自拍照">
 <body>  
   <img id="xxx" width="200" src="11.JPG" alt="自拍照">
   <script>     
     xxx.onload=function(){          
       console.log("图片加载成功")      
     }    
     xxx.onerror=function(){         
       console.log("图片加载失败")         
       xxx.src="/404.jpg"      
     } 
   </script>
 </body>

4.响应式

max-width:100% 

 <style>      
  *{            
      margin: 0%;        
      padding: 0%;        
      box-sizing: border-box;      
    }    
  img{          
  max-width: 100%;      
     }    
 </style>

4.form

1.作用

定义一个表单 发get或pos请求,然后刷新页面

2.属性

action autocomplete method target

action 是控制请求哪个页面 

method 控制用get还是post来请求

autocomplete 自动显示建议 可能值为onoff

target 提交的哪个页面 哪个页面应该刷新

name表单的名称,应该是网页中唯一的

3.事件

<input type="submit" value="添加">

<button type="submit"><strong>添加</strong></button>

两者的区别 :button里面还可以有标签

                        input里面不支持任何标签 只支持纯文本

不能使用button,使用submit才可以提交

5.<input>

1.作用

让用户输入内容,接受用户的输入

有很多类型 取决于type属性的值

2.类型

type="text" 普通文本输入框

type="search" 搜索的文本输入框

type="button" 没有默认行为的按钮 (不建议使用)

type="submit" 表单提交按钮

type="image" 将图片作为提交按钮

type="reset" 重置按钮

type="checkBox"复选框

type="radio" 单选框

注意:

一般不监听input的click事件

form 里面的input要有name

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

<input type="sumbit" value="提交">