HTML可以说是前端修炼中基础中之基础,个人认为即使被很多人觉得是最为简单的,也应该尽可能的去了解吃透,此博客总结一些个人近两天时间学到的HTML常用标签。
最重要的标签:html,head,body;
常见标签:a,form,input,button,h1~h6,p,ul,ol,small,strong,div,span,kbd,video,audio,svg等。
以上常见标签都可以在HTML5 标签列表中查到,需时时翻阅。
其中,还有空标签及可替换标签,这两者可以在MDN或是饥人谷_luoxin的博客里查阅。
今天,重点则是总结一下近两日学到的iframe,form,select,textarea,table,input以及input中type的使用。
iframe
iframe:嵌套一个网页在一个网页中(等同于在网页中开了一个窗口),它是个可替换标签。
iframe标签与a标签在一起时的用法:
<iframe name="xxx" src="#" frameborder="0"></iframe>
<a target="xxx" href="https://www.baidu.com">xx</a>
#代表当前页面,iframe的name表示指定窗口的名字为XXX,a的target表示网页将在名字为xxx的窗口打开网页,iframe的src可以指到相对路径。
效果如下:
另有a标签的两种属性:
target属性:_blank 在空页面打开 ;_self 在当前页面打开 ;_parent 在它的父级页面打开;_top 在顶层页面打开(用于三层结构页面)。
download属性:意思是我这个链接是用来下载的,不是用来展示的。
form
form标签一般是用于发起POST请求的,如果form表单里没有提交按钮,就无法提交这个form,除非使用JS。注:file协议不支持POST,form标签也可以使用target。
一段form代码:
<form action="users" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
name最终会被带到第四部分作为它的Key,我们还可以通过给URL直接加参数,让POST也有查询参数:action="users?zzz=3"
input
input的难点最主要在于type的使用,所以着重总结一下type的使用。
如果一个form里面只有一个按钮,它的type是button,那么它会自动升级为提交按钮。
submit是唯一能确定form表单能不能点击提交的按钮。
checkbox:用于多选,但要把同属同一个选项的给予同一个name,一般需要在checkbox的右边写一些文字用于提示,可以用<label>将文字勾选起来。
radio:用于单选,如果两个radio有一个共同的name的话,就只会有一个被选中。
select
下拉列表,空值可以Value直接为空,默认勾选可以在value后加上selected,不让勾选(选项为灰)可以在value后加上disabled。
加上multiple属性就可以按住Ctrl键进行多选。
textarea
如果需要用户选择很多行的东西就需要用到textarea。
由于它是可以随便拉伸的,可能会造成很多bug,所以一般希望固定它的大小,用CSS固定
列cols以及行rows不常用。
table
HTML规定:table里面只能有三个元素,thead、tbody、tfoot。
这三个元素里又可以有table row写作<tr>
<tr>里可以有table data写作<td>
如果是标题就不应该用<td>而是用<th>
table里可以加一个border
thead,tbody,tfoot的摆放位置不影响展示
添加colgroup,colgroup必须要跟col一起用,col主要表示width这一属性
PS:由于未使用MarkDown编辑,导致代码放入不是很美观,所以另开一博客将代码放入,点击这里查看。