HTML常用标签

160 阅读4分钟

i. a标签的用法 属性 href 指定要跳转的页面 target 指定以哪种方式跳转,target=“_blank”新打开一个页面跳转 download 点击就下载网页 (不是所有浏览器都支持) rel=noopener 为了防止一个bug 作用 跳转外部页面跳转内部锚点 踢跳转到邮箱或电话等

a的href 的取值 网址 (三种写法)

     https://google.com

     http://google.com

     //google.com

 2. 路径

    相对路径和绝对路径:/a/b/c以及a/b/c index.html以及./index.html

3. 伪协议

   javascript:代码;

   mailto:邮箱

   tel:手机号

4.id

 id:#xxx

注意:

​点击a标签页面就会刷新

​ 点击a标签页面就会自动回答顶部,页面不会刷新

google.com 点击a标签页面就不会有任何反应

​ 点击a标签页面会跳转到id为xxx的地方开始显示

​会自动到达发邮件的地方

点击我会到打电话页面,电话号码会自动被获取

a的target 的取值 内置名字 _blank 在新的页面打开 _top 最顶层页面打开 _parent 当前链接页面的上一层打开

_self 在当前页面打开

程序员命名 window的name iframe的 name

注意:

以上两个a标签一起出现时,点击a标签就会新建一个叫xxx的窗口,target值一样,两个链接共用这个窗口,点击第二个a标签也不会新建窗口了!如要检测,控制台conse.log(window.name)即可看见结果。

ii.img标签 作用 发出get请求,展示一张图片

属性 src 用来链接图片地址 alt 图片显示不出来时代替图片显示的内容 height / width 设置宽,高会自适应;设置高,宽也会自适应
事件 onload / onerror

响应式 max-width: 100% 加上这个,图片就是响应式的,在手机上可以适配!

可替换元素,可以被替换 考试可能会问,被问概率30%

iii.tab标签 相关的标签 table thead 表头部分 tbody 表的身体部分 tfoot 表的尾部 th 表头 tr 一行 td 一列 表的内容、数据 相关的样式 table-layout

auto列宽度由单元格内容设定,哪列内容多哪列就宽 fixed列宽由表格宽度和列宽度设定 ,它会让每一列都一样宽 inherit:规定应该从父元素继承table-layout属性的值
border-collapse 控制border是否合并,默认时不合并的控制border是否合并,默认时不合并的

border-spacing 控制border是否合并,默认时不合并的

​ 例子1

表头1 表头2 一列 2列 注意:

当我们写 时,没有写时,浏览器会自动将 都放到里面去

iv.form表单 作用 发get 或post请求,然后刷新页面

属性 action 控制请求哪个页面,里面写什么,就会请求到什么 autocomplete 是否自动填充,在点击输入框会给出一些自动填充数据供你选择 method 控制请求的方法是用get还是post target 告诉浏览器我要提交到哪个页面进行刷新 事件 onsubmit

区别:input里不能再有其他内容(标签),只能有纯文本;buttom里面还可以有其他任何内容

注意:form里必须要有一个type=“submit”, 若type=“ ”是这样为空的,就默认它是type=“submit”

  1. input标签 作用
    让用户输入内容

    属性
    类型type: 输入框输入的数据类型

button 按钮

checkbox 多选 n个input标签的name相同,即多选内容就是一个分组

email 邮箱地址

file 文件类型 1.只能选一个文件 2. 可选多个文件

hidden 看不见的输入,这个一般是给js输入的

number 数字

password 密码

radio 单选 需要n个input标签的name相同

search 输入内容时右边会出现 x ,点击 x 会一键删除输入的内容

submit 提交按钮

tel 电话号码

text 文本

color 颜色

reset 重置按钮 重置按钮会清除表单中的所有数据

其他 : name / autofocus /checked / disabled /maxlength / pattern / value / placeholder

事件 onchange / onfocus / onblur

验证器 HTML5新增功能 注意:验证器例1

加上required就会验证,如果没有填写内容就提交不了

其他输入标签 标签

select + option 一个下拉菜单 里面嵌套option标签,表示下拉菜单中的每一项

textarea 可输入多行内容,用户界面可放大缩小输入框 加上style="resize:none"就不能放大缩小啦;可设置宽高

label

注意事项

一般不监听input的 click事件

form里面的input要有name

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