详细介绍HTML的a,img,table和form标签
一 a标签
a标签属性:href,taiget,download,rel=noopener。
a标签作用:主要是用来跳转到外部页面,内部页面或者电话邮箱等等。
代码类似这样<a href=""></a>
i
1 href
- 注意:永远也不要双击打开html,用户都是输入网址进去,我们要像用户一样使用网页输入打开。
- 用输入网址打开,方法一:终端输入安装
yarn gloal add http-server
安装好后输入http-server . -c-1
这里"."可忽略,-c是缓存,-1是不要缓存。推荐用yarn。
然后会出现几个地址,复制地址或直接打开后在地址栏接上要打开的文件。- 方法二:终端输入安装
yarn global add parcel
安装好后直接parcel xxx.html
xxx是打开文件名称
1.1 网址
href可输入网址,取值例如:
- https://baidu.com
- http://baidu.com
- //baidu.com
注意:最好选用//baidu.com,即无协议网址,点击链接时,会自动跳转选择适用http还是https,防止选错http,还是https而出错。
查看具体怎么传的可以打开网页开发工具(F12)在netwok里选中Preserve log进行查看
1.2 路径
href可输入路径,例如:
- /a/b/c
- a/b/c
注意:/a/b/c,"/"难道不是根目录吗?
答:当我们使用http后就不再是文件了,在哪里开的服务,哪里就是根目录。
开发时,如果双击打开链接页面的话,是以文件形式,会在file根目录下寻找,链接失效,绝对路径就错了。要用网页形式打开
1.3 伪协议
什么是伪协议呢,是点击a标签就会执行href里的代码,叫JavaScript伪协议。
<a href="javascript:alert(1);">javascript伪协议</a>
1.4 id锚点
可以通过点击a标签内容实现页内跳转
<p id="xxx">你点击了查看</p>
<a href="">查看(页面会刷新)</a>
<a href="#">查看(页面不会刷新,会跳到页面顶部)</a>
<a href="#xxx">查看(通过id跳转到指定的标签,锚点)</a>
<a href="javascript:;">查看(这才是什么也不会做的a标签)</a>
1.5 邮箱等
- 跳转邮箱
<a href="mailto:dwwei0527@gmail.com">发邮件给我</a>
效果:发邮件给我
- 跳转电话
<a href="tel:13258378250">请打电话给我</a>
效果:请打电话给我
2 a的 target 属性
target是"目标"的意思。target有以下几种常用取值:
2.1 _blank
新打开个窗口打开
2.2 _top
有多个网页嵌套的情况下,会在最顶层上的窗口打开。可以用
iframe嵌套网站。
2.3 _parent
在当前链接的上一层打开
2.4 _self
在自己这一层打开
2.5 xxx
注释:xxx是taiget="xxx"时,xxx是id,可以随便取,有xxx时就打开,没有xxx时就创建一个窗口,把它叫做xxx。
注意:有两个链接都叫xxx时,点击相同xxx不同链接,每一次点击都会在xxx窗口执行点击的链接。
二 img标签
img标签的作用:发出get请求,展示一张图片。
属性有:alt / height / width / src
事件:onload / onerror
响应式:max-width: 100%;
可替换元素
1 属性
1.1 alt
alt是图片加载失败时,显示alt内容的文字来提示用户
1.2. height和width
图片高宽。只写宽或高,图片的高或宽就会自适应,宽高一起写会让图片变形。
注意:永远不能让图片变形
1.3. src
英文source,来源。图片地址。
2 事件
onload和onerror
用来监听图片是否加载成功 ,成功就执行onload,失败就执行onerror。是一种用户补救措施。
<body>
<img id="xxx" width="400" src="1.gif" alt="加油动图" />
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/图片加载失败.png";
};
// id测试时用,平时别用
</script>
</body>
成功效果如下:
失败效果如下:
3 响应式
响应式添加一下 图片的 max-width: 100%;
样式图片就可以适应手机了
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>
三 table标签
1 属性值
table标签里能用的只有三个标签,分别是thead
,tbody
和tfoot
,三者写的顺序无关,排列只会是头,身体和脚。三者里又可以写tr
(table row,表示table里的一行),td
(内容数据),th
(表示表头).
话不多说看代码
<body>
<table>
<thead>
<tr>
<th>英语</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>超级</td>
</tr>
<tr>
<td>target</td>
<td>目标</td>
</tr>
<tr>
<td>reference</td>
<td>引用</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
</body>
效果如图:
2 相关样式
相关样式:table-layout
,table-collapse
,border-spacing
。一般用来清楚table样式。
<style>
table {
table-layout: auto; /*计算每行宽高,由内容大小决定宽高*/
/* table-layout: fixed;尽量每一行平均 */
border-collapse: collapse;
/* collapse合并边框 */
border-spacing: 0;
/* border和border之间的距离 */
}
</style>
四 form表单
作用:发送get或者post请求,然后刷新页面。
属性:action / autocomolete / method / target
事件:onsubmit
注意:一个form表单必须要含有type等于"submit"才可以提交,如果写了按钮不写submit,默认就是submit。
如果type=“button”,则提交不了。input每一个都要有name。
1 input属性
1.1 action
相当于img的src,是请求往哪发。用来控制到哪个页面,action里面写什么,请求就到哪个页面。
<body>
<form action="/xxx">
<input name="username" type="text" />
<input type="submit"/>
</form>
</boody>
type="text"类型是一个文本框,type="submit"是个提交。
1.2 method
用来控制请求是post还是get。
<form action="/xxx" method="POST"></form>
1.3 autocomplete
自动填充。鼠标移入后会有历史输入提示。
<form action="/xxx" method="POST" autocomplete="on">
<!-- on是打开提示,off是关闭提示 -->
<input name="username" type="text" />
<input type="submit" />
效果如下:
1.4 target
提交到哪个页面,哪个页面就会刷新。
type属性有很多,type=color(改变颜色),password(输入为*号的输入框),checkbox和raido(多选框和单选框,要让拥有同一个name的表示一组),file(可加multipe表示可以选择多个文件),hidden(隐藏)
2 textarea
<textarea style="resize: none; width: 50%; height: 300px"></textarea>
可以不加样式,可自由拉动。
3 select
<select>
<option value="">-请选择-</option>
<option value="1">一</option>
<option value="2">二</option>
<hr />
<input type="text" required />
</select>
选择框,value是真正的值。一,二是给用户看的值
效果如下:
4 属性
- onchange 当用户输入改变时触发
- onfocus 当用户把鼠标集中在这时触发
- onblur 用鼠标出来就onblur
5 验证器
HTML 5新功能
<input type="text" required />
当输入框里没有东西就提交的话,不允系提交,自带验证。
效果如下
6 注意事项:
一般不监听input的click事件。
form里的input要有name,没有就错了。
form里放一个 type="submit"才能触发submit事件。
表单提交和按钮提交有什么区别?
<form action="/xxx" method="POST" autocomplete="off" target="a">
<input name="username" type="text" />
<input type="submit" value="<strong>搞起</strong>" />
<button type="submit"><strong>搞起</strong> <img src="1.gif" />
</button>
</form>
input里面不支持其他标签,只能纯文本,button里面可以加任何东西。
7 其他标签:
- video 视频
- audio 音频
- anvas 画画
- svg 矢量化
一般兼容存在问题,这些标签兼容性一定要看文档!
学习前端从入门到入土,我正在路上。您的每一次浏览点赞留言收藏,就是对我学习路上最大的鼓励,一起努力吧!
欢迎留下您宝贵的意见。
最后
领域展开 无量空处