阅读 103

HTML常用标签

a标签

<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像

单词anchor的缩写,意为:锚

属性作用
hrefhyper reference 用于指定链接目标的url地址(必须属性)
target指定链接页面打开方式其中_self为默认值,_blank在新窗口中打开;_top在顶层窗口打开;_parent上一级窗口打开
download用于下载,但很多浏览器不支持
rel=noopener该属性指定了目标对象到链接对象的关系。该值是空格分隔的列表类型值。

<a> href的取值

  • 网址:

gooogle.com

google.com

//google.com ——这个//会自动选择http还是https(建议使用)

  • 路径

/a/b/c及a/b/c ——都是相对路径,虽以/开头,但不同于文件目录

index.html及./index.html

  • 伪协议

javascript:代码; ——为了直接执行js。现在基本不用,但可以用

 <a href="javascript:;">查看</a>

这行代码使链接为空,点击无动作,不刷新页面也不跳转。

若href值为空会刷新页面;若值为#会跳转到页面顶部。

maito:邮箱 ——点击发邮件到填写的邮箱

tel:手机号 ——点击呼起电话

  • id

跳转到页面某个位置(使用唯一id)

<p id="xxx">跳转到这里</p>
<a href="#xxx">查看</a>
复制代码

iframe标签

内嵌标签 可设置; 使用较少,不必过多关注

img的用法

  • 作用:

发出get请求,展示一张图片

  • 属性:

src:文件路径地址属性

alt:替换文字属性,是图像的描述内容

height/width:只写一个,另一个会自适应;不建议都写,可能变形。

  • 事件:

onload/onerror

用来监听是否加载成功 一般用于测试

<img id="xxx" src="pics.png" alt="这里有张图">

<script>
   xxx.onload = function () {
         console.log("图片加载成功");
   };
   xxx.onerror = function () {
         console.log("图片加载失败");
         xxx.src = "/404.png";
   };
 </script>
复制代码

如果成功则显示pics.png图片;失败则显示404.png图片

响应式:

img {
       max-width: 100%;
     }
复制代码

——手机上图片会自适应

table标签

  • table
  • thead ——可以没有
  • tbody
  • tfoot ——可以没有
  • tr ——table row
  • td ——table data
  • th ——table head表头(默认会加粗)

注意 如果不写thead、tbody、tfoot,html会自动纠错帮你把tr、td、th的内容放入tbody中,而thead、tbody、tfoot代码不按顺序摆放也会被html纠正回来。

相关样式

table-layout

   table-layout:auto; (自动以内容计算其长宽)
   table-layout: fixed; (自动计算,但长宽相对平均)
复制代码

border-collapse及border-spacing ——建议初始设置如下

   border-collapse: collapse;  (border是否合并)
   border-spacing: 0px;  (border间距)
复制代码

form标签

  • 作用:

发get或post请求,然后刷新页面

  • 属性:

action ——类似图片的src,后台会给一个地址,直接调用

method ——控制get/post

autocomplete ——是否自动填充

target ——提交到哪个页面,哪个页面刷新

  • 事件:

form必须有个type=submit的按钮;

不写会默认;否则不能提交表单

input&button——button内还可以有其他标签,而input不可以!

<input type="submit" value="input标签">
<button type="submit"><strong>点我! 
</strong><img src="404.png" alt=""></button>
复制代码

input标签

  • 作用:

让用户输入内容

  • 属性:

类型type: button(按钮) / radio(选择) / checkbox(多选) / email / file(选择文件) / hidden(人看不见,一般给电脑看的) / number / password(密码) / search(搜索) / submit(提交) / tel / text(文本) / week / data(日期) / range(范围) / color(颜色) / reset(重置)

其他:name(选择时 可以使用name分组) / autofocus / checker / disabled / maxlength / pattern / value / placeholder

  • 事件:

onchange / onfocus / onblur

  • 验证:

required(html5自带验证。如果设置required,不填表单就无法提交)

其他标签

其他输入标签

textarea标签

label标签

select+option标签

<select name="location" id="">
        <option value=""> - 请选择 - </option>
        <option value="1">成都</option>
        <option value="2">重庆</option>
</select>
复制代码

多媒体等(注意兼容性)

video ——视频

audio ——音频

canvas ——图像

svg ——矢量化

Tips

  •  一般不监听input的click时间,focus可能会
  •  form里面的input要有name
  •  form里面必须要放一个type=submit才会触发submit事件
文章分类
前端
文章标签