单词列表
单词 | 翻译 | 单词 | 翻译 |
---|---|---|---|
hyper | 超级 | blank | 空白 |
target | 目标 | parent | 父母之一 |
reference | 引用 | self | 自己 |
frame | 框架 | load | 加载 |
error | 错误 | canvas | 画布 |
a标签 (anchor锚)
属性:
- href
- target
- download
作用:
- 跳转外部页面
- 跳转内部锚点
- 跳转到邮箱或者电话
href的取值
网址
- google.com
- google.com
- //google.com 优先使用这种,可以自适应选择http和https
路径
- /a/b/c.html和a/b/c.html 浏览器会将当前目录作为根目录,所以前面两种路径相同。==不能直接双击打开HTML文件,因为会导致路径问题。==
- index.html和./index.html
伪协议
- javascript:代码;
<a href="#">跳转到顶部</a>
<a href="">刷新页面</a>
<a href="javascript:void(0);">无任何操作</a>
- mailto:邮箱
<a href="mailto:1441408055yb@gmail.com">发送邮件</a>
- tel:手机号
<a href="tel:144XXXX0551">拨打电话</a>
id
<a href="#xxx">跳转到锚点xxx</a>
target的取值
内置名字
- _blank 在新窗口打开
- _self 在当前页面打开
- _top 配合iframe标签使用,在顶级iframe打开
- _parent 配合iframe标签使用,在上一级iframe打开
自定义名字
- window的name 在指定name的窗口打开,没有则新建窗口打开
- iframe的name 在指定name的iframe打开
<a href="//baidu.com" target="xxx">打开百度</a>
<iframe name="xxx" style="width: 500px;height: 500px"></iframe>
table标签 表格
相关标签
- table 整个表格
- thead 头部区域
- tbody 主体区域
- tfoot 底部区域
- tr 定义行
- th 定义表头
- td 定义单元格
相关样式
- table-layout 表格样式
table-layout: auto; /*默认,列宽度由单元格内容设定*/
table-layout: fixed; /*列宽由表格宽度和列宽度设定*/
table-layout: inherit; /*从父元素继承 table-layout 属性的值*/
- border-collapse 为表格设置合并边框模型
- border-spacing 设置单元格间距
img标签 图片
作用
- 发送一个get请求,显示一张图片
属性
- src 图片路径 source
- alt 图片加载失败的展示内容
- width 图片展示宽度
- height 图片展示高度
事件
- onload 图片加载完成后的操作
- onerror 图片加载失败后的操作
响应式
- 样式max-width: 100% 使图片自适应各种屏幕,不产生变形
可替换元素
form标签 表单
作用
- 发送get或者post请求,然后刷新页面。
属性
- action 请求的地址
- autocomplete 给用户进行输入建议
<form action="/aaa" method="get" autocomplete="on">
<input name="username"/>
</form>
- method 请求方式 主要是post和get,其他方式存在兼容性问题
- target 参见a标签
事件
- onsubmit
<!--注意,form标签至少有一个submit类型的标签,否则无法请求。当form中只有一个button且不指定类型时,默认类型为submit-->
<!--区分-->
<input type="submit" value="提交1"/> <!--不能包含其他内容-->
<button type="button"> <!--可以包含其他内容-->
<strong>提交2</strong>
</button>
input标签 输入
作用
- 让用户输入内容
属性
- 类型type
- button 按钮
- checkbox 勾选框
- email 邮箱
- file 上传单个文件 添加属性multiple可以上传多个文件
- hidden 隐藏标签 不是给用户使用,给机器使用
- number 输入仅限数字
- password 密码框
- radio 选择框 当多个input属性name值相同可以实现单项
<input type="radio" name="gender" value="1"/>男 <input type="radio" name="gender" value="0"/>女
- search 搜索框
- submit 提交按钮
- tel 电话
- text 文本框 默认
- textarea 文本区域
事件
- onchange 当值改变时
- onfocus 当获得焦点时
- onblur 当失去焦点时
验证器
- HTML5的新增功能