a标签
a标签属性
- href属性：规定链接指向的页面的URL；href属性的值包括：网址，路径，伪协议和id（用户网页内跳转）
- target属性：规定在何处打开链接文档；taget属性的值包括：_self当前窗口(默认),_blank新开窗口, _top窗口嵌套时的最外层窗口, _parent窗口嵌套时的当前窗口外的最近一层窗口，自定义字符串，如果没有则新建，注意再次使用该字符串作为target属性时会在重新加载原网页
- download属性：规定被下载的超链接目标。
- rel=noppener属性；功能：target="_blank"会打开一个新tab，如果不加rel="noopener"，那么在新tab中会有一个window.opener对象，相当于可以控制打开这个tab的前一个页面，这样会导致安全问题。
a标签属性用法实例
href属性：
<a href="www.google.com">跳转到网址</a>
<a href="/folder/anotherfile.html">跳转到路径</a>
<a href="javascript:alert(1);">javascript伪协议，注意冒号和分号的用法</a>
<a href="javascript:;">使用该Javascript伪协议可以做到点击该链接不影响当前页面，使用#会让视窗显示页面第一屏</a>
target属性：
<a href="#" target="_self">在当前窗口打开链接</a>
<a href="#" target="_blank">在新开窗口打开链接</a>
<a href="#" target="_top">在窗口嵌套时的最外层窗口打开链接</a>
<a href="#" target="_parent">在窗口嵌套时的当前窗口外的最近一层窗口打开链接</a>
<a href="#" target="xxx">自定义字符串，如果没有则新建，注意再次使用该字符串作为target属性时会在重新加载原网页</a>
a标签功能
- 跳转到外部页面
- 跳转到内部锚点
- 跳转到邮箱或电话等
a标签功能实例
<a href="google.com">跳转到外部网页</a>
<a href="#idName">跳转到内部锚点</a>
<a href="mailto:test@testmail.com">发邮件</a>
img标签
img元素作用
发出get请求，展示一张图片
img元素属性
- alt属性：当图片加载失败时显示的提示文字内容
- height属性：展示在页面上图片的高度
- width属性：展示在页面上图片的宽度;图片高宽设置单位仅为像素，因此可以不标明单位；注意如果设置高宽与原图片比例不同，展示的图片会变形 4 src属性：展示在页面上图片的链接，包括网址、路径
img元素属性实例
<img src="./image/photo.jpg" width="100" height="100" alt="这是一张照片">
img元素事件
- onload：当图片加载成功时
- onerror：当图片加载失败时
img元素事件使用实例
<img src="./image/photo.jpg" id="idName">
<script>
idName.onload = function () {
console.log("图片加载成功");
}
idName.onerror = function () {
console.log("图片加载失败");
}
</script>
img的响应式设置
使用max-width属性为图片元素进行响应式设置以使其最大宽度不超过移动设置的屏幕宽度
table标签
table元素相关标签
- table：定义表格
- thead：包裹表格列头的行
- tbody：包裹表格内容的行
- tfoot：包裹表格各列的汇总行
- tr：定义表格的行
- td：定义表格单元格
- th：定义表格列头单元格
table元素使用实例
<table>
<thead>
<tr>
<td>表头列1</td>
<td>表头列2</td>
<td>表头列3</td>
</tr>
</thead>
<tbody>
<tr>
<td>内容行1列1</td>
<td>内容行1列2</td>
<td>内容行1列3</td>
</tr>
<tr>
<td>内容行2列1</td>
<td>内容行2列2</td>
<td>内容行2列3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>汇总列1</td>
<td>汇总列2</td>
<td>汇总列3</td>
</tr>
</tfoot>
</table>
table元素相关样式
- table-layout：定义了用于布局表格单元格，行和列的算法；属性值包括auto和fixed，分别表示单元格宽度随内容自适应或固定宽度；如果选择fixed需先指定表格table的width属性
- border-collapse：用来决定表格的边框是分开的还是合并的；属性值包括collapse和separate(默认)
- border-spacing：属性指定相邻单元格边框之间的距离(只适用于边框分离模式，即border-collapse属性的值为separate)；值可设置length, horizontal, vertical, inherit;当值为单值时仅设置length，即单元格的宽，当值为双值时设置hovizontal和vertical的值，即宽和高
form标签
form标签作用
发送get或post请求，然后刷新页面
form标签的属性
- action：处理表单提交的 URL，一般由后端提供
- autocomplete：用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的；值为off和on
- method：浏览器使用何种HTTP方式来提交表单，可能的值包括：post, get和dialog(提交时关闭对话框)
- target：表示在提交表单之后，在哪里显示响应信息；target的值与a标签相同，即_self(默认), _blank, _parent, _top
form元素使用实例
<form action="" autocomplete="on" method="POST" target="_blank"></form>
input标签
input标签作用
让用户输入内容
input标签的属性
- type：类型，包括text, radio, checkbox, submit, file, hidden等;注意一个form表单中必须有一个submit元素(或button元素(默认type为submit但可以改)才可以实现表单的提交)
- 其他属性：包括value, name(同组表单输出为数组), autofocus, checked, disabled, maxlength, placeholder等
input元素使用实例
<form action="" autocomplete="on" method="POST" target="_blank">
<input type="text" name="name" autofocus maxlength="20" placeholder="placeholder">
<input name="gender" type="radio">男
<input name="gender" type="radio">女
<input name="hobby" type="checkbox">唱
<input name="hobby" type="checkbox">跳
<input name="hobby" type="checkbox">rap
<input type="color">选颜色
<input type="file" multiple>
<input type="hidden">
</form>
input标签的事件
- onchange：当表单字段改变时
- onfocus：当光标聚焦时
- onblur：当光标失焦时
其他输入标签
其他输入标签
- select+option：下拉选择框
- textarea：文字输入区域；默认拖动框体右下角可改变区域大小，如果希望谷底大小可添加属性style="resize:none";
- label：表单标签，添加后点击标签则聚焦到表单元素
其他输入标签使用实例
<form action="" autocomplete="on" method="POST" target="_blank">
<select name="select" id="">
<option value="">-请选择-</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<textarea name="textarea" id="" cols="30" rows="10" style="resize: none"></textarea>
</form>
