初学前端之HTML常用标签

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可以指到相对路径。

效果如下:


百度在名字为xxx的iframe内嵌窗口中打开

另有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编辑,导致代码放入不是很美观,所以另开一博客将代码放入,点击这里查看

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,406评论 1 41
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,172评论 0 0
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,613评论 1 19
  • 很快已经进入十一月中旬啦 沉甸甸的时光 十一月的坐标是吃土节 十二月的坐标是圣诞节 然后 就是元旦新年了 想想十一...
    不在的在阅读 228评论 0 1