今天学习HTML更加复杂的标签,应该做一篇blog记录一下。
重点标签
今天要分享的标签大概如下。
<a href=""></a>
<table></table>
<img src="" alt="">
<form action=""></form>
<a href=""></a>
先来分享a标签,平时可以通过这个用来附上一些链接,但是一般都是在原网页打开,那怎么可以在新网页打开?
<a href="" target="-blank"></a>
这样即可。
a标签的路径
网址
- https://
- http://
- //
注意这个是无协议网址,容错率最高,也就是无论是www还是https什么形式都可以打开,非常舒服。
路径
- /a/b/c
这里虽然是绝对路径,但是html默认你这种路径的根目录都是打开的那个文件夹,比如我在名字为demo的文件夹打开的html,那么这个demo的文件夹就是根目录。 - a/b/c
伪协议
- JavaScript
<a href="Javascript:;"></a>
这样可以整个空的,用于设置这样的效果:在网页中点了,网页无反应的情况。 - tel
<a href="tel:1374589125"></a>
就会自动拨号。打电话给你。
<a href="#xxx"></a>
就会自动寻找id为xxx的。并且网址会从http://127.0.0.1:8080/a-herf.html变成http://127.0.0.1:8080/a-herf.html#xxx。
Tips:
- 只有#和id有用,class和与之对应的.xxx或者[xxx]都不可有这个功能。
- mailto
<a href="mailto:123456@qq.com"></a>
就会自动发邮件。
target的类型
- -self
<a href="" target="-self"></a>
当前页面打开。
c中打开-self,网页会在c页面打开。 - -blank
新开一个页面打开。 - -top
在这里的顶级页面打开。c中打开top会在a中打开网页。 - -parent
父级页面打开。c中打开parent会在b中打开。 - name
<a href="" target="xxx"></a>
会新开一个名字是xxx的窗口,如果已经有了这个为名字的窗口,则网页会覆盖这个窗口的页面。
table
主体构成
1. thead
表头
2. tbody
表身
3. tfoot
表尾
- tr
表的一行 - th
一行表的开头 - td
表的数据。
Tips:
- 样式一般会有
<style>
table {
table-layout: auto;
}
</style>
auto就是自动调节表格每个格子的宽度,随字数变化而变大变小,fixed就是固定的。
border-collapse: collapse;
border-spacing: 0ch;
通过这个消除格子的间距,让他产生如下变化。
img
发送一个get请求展示图片。
属性
-
alt
就是让他失败加载不出来的时候出现的话。
- width/height
宽高,一般来说只会设置其中一个防止他比例扭曲。
手机页面的时候让他相应放大缩小只需要
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>
就可了。
form
发一个get/post请求后刷新页面。
<form action="" method="POST"></form>
在这里面用method设置是post还是get。
action
设置路径。就是form往哪里发起这个input。
target
和a中用法相同,这里是看看是不是在新页面进行form的发起。
input
input是输入,里面一般要设置input type
input type
- submit
自动可以把input识别成我们的文字。 - text
文本框 - color
- password
会像密码框一样遮挡你的内容。 - checkbox
多选,要表示他们是同一组checkbox,让他们名字相同。 - file
文件,需要多选文件就<input type="file" multiple />
- hidden
给机器输的,而非人类,可以自动获取所需要的东西。 - radio
单选,但是如果有两个框,需要name一样才可以单选其中一个。 - textarea
多行文字编辑,但是框框可以拖动大小,如果不想他被拖动就
<input type="textarea" style="resize: none">
input其他一些属性
- value
给input那个东西改名字,比如你不想让他叫提交就可以这样改名字
<input type="text" value="上个屁" />
就可。 - autocomplete
<input type="text" value="上个屁" autocomplete="on" inputmode="email"/>
这样就是打开这个提示输入的属性,提示输入的是emai。 - botton
botton中间可以加入其他来修饰bottom,input不可以。
<button>
<strong></strong>
</button>
这样可以修饰button。
- select
<select>
<option value="111">周一</option>
</select>
这样就是实际上选择了111,但是用户看只能看到周一。
这次分享就这么多,希望可以继续努力学习继续分享。