a标签——跳转到指定内容
- href属性值
<a href="#id">
<!--跳转到网页，推荐第三种，原理是自动会补齐协议，找到适合的协议-->
<a href="https//google.com">
<a href="http//google.com">
<a href="//google.com">
<!--绝对路径和相对路径-->
<a href="/a/b/c">
<a hred="a/b/c">
<!--伪协议-->
<a href="javascript:代码;">
<a href="mailto:邮箱">
<a href="tel:手机号">
- target属性值——什么方式打开新页面
<!--在新页面打开-->
<a href="#" target="_blank">
<!--在自身页面打开-->
<a href="#" target="_self">
<!--多个页面嵌套打开时，在第一个页面打开-->
<a href="#" target="_top">
<!--在a标签所在的页面的父级页面打开-->
<a href="#" target="_parent">
<!--window的name和iframe的name-->
<hr/>
<a href="//baidu.com" target="xxx"><!--意为在叫xxx的窗口打开百度，控制台window.name="xxx"-->
<!--iframe是一个内联框架标签，可以将一个HTML页面嵌套在当前页面，已经很少使用-->
<iframe src="" name="xxx"></iframe><!--百度页面会在名为xxx的iframe框架中打开-->
- download属性值——是用来下载页面，兼容性不太好，手机浏览器不支持
table标签——表格
<table><!--thead/tbody/tfood可更改位置，显示顺序不会改变-->
<thead>
<tr><!--text row-->
<th>表头，默认加粗居中效果</th>
<td>text data,只能嵌套在tr里</td>
</tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<tfood>
<tr><td></td></tr>
</tfood>
</table>
table{
table-layout:auto/fixed;/*auto表示根据内容算行列宽高，fixed平均行列宽高*/
border-collapse:collapse;/*将单元格的边合并*/
border-spacing:0;/*设置单元格的间距*/
}
td,
th{
border:1px soild red;
}
img标签——image图片
发送get请求，展示一张图片
<img id="xxx" src="图片地址" width="图片宽度" height="图片高度" alt="图片显示失败提示内容"/>
/*图片最大宽度由显示页面最大宽度决定*/
img{
max-width:100%;
}
js事件
//图片加载成功时，在控制台显示输出内容
xxx.onload=function(){
console.log("图片加载成功");
}
//图片加载失败时，在控制台显示输出内容
xxx.onerror=function(){
console.log=("图片加载失败");
}
form标签——表单
发出get和post请求，然后刷新页面——两个请求什么意思，后面补充
<!--autocomplete属性会自动填充，即名为username的文本框会给出你用过的名字建议-->
<form action="请求到达的页面" method="GET/POST" autocomplete="on/off" target="以哪种方式打开到达的页面">
<input name="username" type="text"/>
<!--input submit和button的区别，前者不能添加其他内容，button可以添加内容和标签；form表单必须有一个type="submit"的标签，需要提交和触发onsubmit事件，button默认type="submit"-->
<input type="submit" value="按钮名字"/>
<button type="submint/button">按钮名字</button>
<!--颜色-->
<input type="color"/>
<!--密码，默认隐藏-->
<input type="password"/>
<!--单选框，name相同-->
<input name="gender" type="radio"/>男
<input name="gender" type="radio"/>女
<!--多选框，checked表明默认勾选，name相同为一组-->
<input name="sz"type="checkbox" checked/>一
<input name="sz"type="checkbox"/>二
<!--可选择文件,multiple表示可多选文件-->
<input type="file" multiple/>
<!--隐藏input，作用后面补充-->
<input type="hidden"/>
<!--多行文本框，默认可拖动改变高宽，resize:none;表禁止拖动-->
<textarea style="resize:none;"></textarea>
<!--选择列表-->
<select>
<option value="fruit">水果<option/>
<option value="pg">苹果<option/>
<option vavlue="xj">香蕉<option/>
<select/>
</form>
- input触发的事件，onchange——当输入框内容发生改变，onfocus——鼠标聚焦在输入框时，onblur——鼠标从输入框出来时
- 注意事项
- 一般不监听input的click事件
- form里的input要有name
- form里要有一个type="submit",才能触发submit事件
