a 标签
属性:
- href (hyper reference)超链接
- target 在何处打开target的值(也就是网页
- download 可以引导下载
- rel = noopener
作用:
跳转外部页面,内部锚点,邮箱或电话
href 的取值
网址
-
http://taobao.com -
https://taobao.com -
//taobao.com(自动选择http或是https,最好用)
路径
- /a/b/c/v
- a/b/d
- index.html 、 login.html
伪协议
- javascript:代码; javascript:; 点击之后啥事都不会发生
- mailto:邮箱 发邮件
- tel:手机号 直接打电话 (手机上好用
id
- href = #ddd 跳转到指定的标签( id = "ddd" )
target
内置名字
- _blank 空白页面打开
- _top 在最顶层页面打开
- _parent 在父级窗口打开
- _self 在当前页面打开 (可以在iframe中打开
程序员命名
window 的 name xxx 可以在xxx页面重复进入多个页面,但是下一个会覆盖上一个
iframe 的name 在iframe打开页面
iframe标签
暂时不写很少用
table 标签
<table>
<thead>
<tr>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>null</td>
<td>N/A</td>
</tr>
</tfoot>
</table>
| 语文 | 数学 |
|---|---|
| 100 | 100 |
| null | N/A |
其中 tr 是 table row ,th 是 table head ,td 是 table data th 也可以写在tbody里面
样式
table-layout 行列宽度的算法
- auto 就自动计算,默认auto
- fixed 尽量平均每个表格的宽度
boder-collapse 有border的时候,每一个td都有一个border,不重合
- collapse 可以使得每个td的border重复多的border重合
border-spacing 表格之间的距离
img 标签
作用
发送get请求,展示图片
属性
alt 加载失败时候显示一段字
src 图片地址
height 高度
width 宽度
事件
onload img加载成功调用
onerror img加载失败调用
响应式
max-width:100%
对img进行优化当加载图片失败的时候,把他的src换成别的图片 可以在onerror 中写
form 标签
作用
发送get或者post请求,然后刷新页面
属性
action 提交表单到xxx页面
autocomplete 是否自动填充
- on 开启
- off 关闭
method 控制请求方法
- GET
- POST
target 指示提交表单后显示响应的位置即在何处打开action的页面
和a标签一样
input 标签
作用
让用户输入内容
属性(type)
button / checkbox / email / file / hidden / number
password / radio / search / submit / tel / text
其他的属性 name / autofocus / checked / disabled / maxlength
pattern / value / placeholder
事件
onchange 当 input 内容改变的时候
onfocus 当 input 被鼠标聚焦的时候
onblur 当 input 被鼠标离焦的时候
一些另外input的标签
textarea 标签
可大可小的input框,resize:none;就不会给用户拖动
select 标签
下面跟着option 标签 代表选择 哦~选择
注意
form中的input要有name,不然提交之后就不知道哪个搭哪个
form中一定要有一个type = submit才能提交submit事件