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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,376评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,126评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,966评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,432评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,519评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,792评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,933评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,701评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,143评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,488评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,626评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,292评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,896评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,742评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,324评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,494评论 2 348

推荐阅读更多精彩内容

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