<a>
标签
<a>
标签的作用
- 跳转到外部页面。
- 跳转到内部锚点。
- 跳转到邮箱或电话。
<a>
标签的属性
href
包含超链接指向的 URL。
href
属性的取值有:
- 网址
-
https://baidu.com
-
http://baidu.com
-
//baidu.com
推荐使用 //baidu.com
这一种写法,它会自动选着使用哪种协议。
- 路径
-
/a/b/c 以及 a/b/c
-
index.html 以及 ./index.html
- 伪协议
(1)javascript:代码;
可以直接执行 JS 代码。可以通过执行代码 <a href="javascript:;"></a>
,使得点击 <a>
标签之后浏览器不进行任何操作。
需要注意的是:
<a href=""></a>
会让页面刷新;
<a href="#"></a>
会让页面跳转到顶部;
<a href=#xxx"></a>
会让页面跳转到 id=xxx
的元素。
(2)<a href="mailto:xxx@gmail.com"></a>
点击 <a>
标签会跳转到邮箱,然后给 xxx@gmail.com 发邮件。
(3)<a href="tel:123456789"></a>
点击 <a>
标签会拨号界面,自动填入号码。
target
target
属性指定在什么页面打开链接。
_self
:在当前页面打开,这是默认值。_blank
:在新窗口打开(点击后,浏览器会新建一个窗口,在该窗口打开链接,且新窗口没有名字)。_parent
在父级页面打开。_top
在顶层页面打开。target="xxx"
会在 xxx 窗口打开链接;若 xxx 窗口不存在,浏览器就新建一个名字为 xxx 窗口,在该窗口打开链接。
<iframe>
标签
<iframe>
标签用来在网页中内嵌其他网页。可以通过 width
和 height
属性来控制 <iframe>
的宽和高。<iframe>
标签现在已经很少使用。
<table>
标签
表格以行(row)和列(column)的形式展示数据。完整的 <table>
标签包含 <thead>
、<tbody>
和 <tfoot>
三个元素。
<table>
标签使用方式
表头使用 <th>
标签,数据使用 <td>
标签。
<table>
<thead>
<tr>
<th>姓名</th>
<th>籍贯</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>上海</td>
</tr>
<tr>
<td>王二</td>
<td>深圳</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
效果如下:
两个表头的表格实现
如下图表格
可用下面代码实现:
<table>
<thead>
<tr>
<th></th>
<th>张三</th>
<th>李四</th>
<th>王二</th>
</tr>
</thead>
<tbody>
<tr>
<th>语文</th>
<td>88</td>
<td>82</td>
<td>91</td>
</tr>
<tr>
<th>数学</th>
<td>94</td>
<td>89</td>
<td>86</td>
</tr>
<tr>
<th>英语</th>
<td>77</td>
<td>89</td>
<td>98</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td>259</td>
<td>260</td>
<td>275</td>
</tr>
</tfoot>
</table>
<table>
标签常用的样式
table-layout:auto;
:浏览器会根据表格内容长度自适应调节宽度。table-layout:fixed;
:表格的每一列会是等宽,宽度由该列第一行的单元格决定。border-collapse
:用来决定表格的边框是分开的还是合并的。值为separate
,每个单元格有独立边框,这是默认属性;值为collapse
,相邻单元格共用边框。border-spacing
:指定了相邻单元格边框之间的距离。
一般会设置 <table>
的默认样式为:
table {
table-layout: auto;
border-collapse: collapse;
border-spacing: 0;
}
<img>
标签
作用
发起GET请求,展示图片。
属性
src
:引入图片的地址。alt
:一般用来设定图片的文字说明,当图片无法展示时,图片位置上会显示该值。width
和height
:用来指定图片的宽和高,指定其中一项,另一个会自适应。
响应式
网页在不同的设备上,都可以进行良好的显示,叫做响应式设计。
在 <img>
标签的样式上加 max-width: 100%;
可以让图片自适应不同尺寸的屏幕。
<form>
标签
作用
发起 GET/POST 请求,然后刷新页面。
属性
action
:服务器接收请求的 URL。method
:提交请求的方法(GET/POST)。autocomplete
:是否进行自动填充。可取的值有off
(不自动填充)和on
(自动填充)。target
:指定提交后刷新的页面在哪个窗口展示。
<input>
标签
作用
<input>
标签的作用是让用户输入内容。
属性
type="text"
:用来输入纯文本。type="password"
:密码输入框,输入会被遮挡,输入字符会显示为*
或者·
。type="radio"
:单选框,用来选择其中一项。如下:
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
type="checkbox"
:复选框(需加相同的name
)。
<input type="checkbox" name="fruit">苹果
<input type="checkbox" name="fruit">橘子
<input type="checkbox" name="fruit">香蕉
<input type="checkbox" name="fruit">草莓
type="file"
:上传单个文件;type="file multiple"
:上传多个文件。
<input type="file">
<input type="file" multiple>
<textarea>
标签
用来输入多行文本。默认可以随意拖动,可以加样式 resize:none
来使其固定,然后可以在样式里通过 width
和 height
来指定宽高。
<textarea style="resize:none; width:500px; height:300px;"></textarea>
<select>
标签
用来生成下拉菜单。
option
注意事项
<input>
和<button>
的区别:<input>
里不能再有其他标签,<button>
里可以放任何东西。<form>
表单里<input>
有name
。- 一般不监听
input
的click
事件。 form
里必须有一个type=submit
的<input>
或者<button>
才能出发submit
事件。