HTML常用标签,什么是空标签和可替换标签

空标签

含义:标签里面不能有内容。
在 HTML 中,通常在一个空元素上使用一个闭标签是无效的。
HTML中有以下空标签:
<area> <base> <br> <col>
<colgroup> when the <span> is present
<command> <embed> <hr> <img>
<input> <keygen> <link> <meta>
<param> <source> <track> <wbr>

可替换标签

含义:指标签会被替代,例如img标签会被下载的图片替代。
典型的可替换元素有 <img><object><video> 和 表单元素,如<textarea><input> 。 某些元素只在一些特殊情况下表现为可替换元素,例如 <audio><canvas>

常用的HTML标签

iframe

用途很少。它也是一个可替换标签。
作用:嵌套页面
所有属性:iframe
常用属性:

  • src:要打开的路径。
  • name:可以通过设置iframe里面a标签的target属性,然后设置一样的name属性值,就可以在iframe中访问a标签里面的链接。
    -iframeborder:设置iframe的边框,一般需要写iframeborder="0"

a

跳转页面(HTTP GET 请求)。
所有属性:a
常用属性:

  • href:跳转链接。
    内容可以为:
    • 无协议链接:直接写//就是无协议的绝对路径,浏览器会根据当前协议,补全无协议链接的协议。应该尽量不使用 file:// 协议预览网页,以免无协议链接出错。
    • javascript 伪协议:伪协议可以实现「点击之后没有任何动作的 a 标签」,满足一些奇葩需求。
    • 空(""):点击之后页面会刷新。
    • 查询字符串:如"?name=xxx"。
    • #:页面锚点变成#,页面滚动到顶部。不发起请求,别的都会发起请求。
  • target:该属性指定在何处显示链接的资源。 取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。
    以下关键字具有特殊的意义:
    • _self: 当前页面加载。此值是默认的,如果没有指定属性的话。
    • _blank: 新窗口打开。
    • _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。
    • _top: IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。
  • download:此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。(如果不想用此方法设置下载,也可以设置http响应的content-type:application/octet-stream)

form(表单)

跳转页面(HTTP POST 请求)。file协议不能post。也可以发送GET请求,一般发POST。
如果form里面没有提交按钮,就无法提交form。
所有属性:form
常用属性

  • action:一个处理这个form信息的程序所在的URL。
  • method:指定请求动词。只可以GET和POST,一般用POST。用GET时表单数据会附加在 action 属性的URI中,并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器。数据会暴露在URI里面。而POST表单数据会包含在表单体内然后发送给服务器,也就是请求的第四部分。
  • target:跟a标签的一样。
<form action="users" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>

如上面代码所示,此时如果输入用户名zql,密码123。
则post请求中的第二部分的Content-Type:application/x-www-form-urlencoded
根据这个类型,会把输入内容显示在第四部分。username=zql&password=123用&符号连接。如果输入的是中文,浏览器会把中文变成Unicode的UTF-8编码,两个字符一对,用%隔开。比如输入用户名你好,密码密码,第四部分会变为username=%E4%BD%A0%E5%A5%BD&password=%E5%AF%86%E7%A0%81。其中【你】的编码就为 E4 BD A0。

input

是一个空标签
所有属性:input
常见属性:

  • type:
    • button:按钮。
    • checkbox: 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。小技巧:用label标签把input包起来,可以关联文字。
    • radio:单选框。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中,所有单选按钮的name 属性使用同一个值; 一个单选按钮组中是,同一时间只有一个单选按钮可以被选择。
      在form中input的几种特殊情况
  1. 如果一个form里面只有一个按钮(<button>标签),它就会自动升级为提交(submit)按钮。
  2. input标签的type必须为submit,才能够提交,如果为button就是一个普通的按钮。
  3. 如果给button标签的type属性也设置为button,那么也只是一个普通的按钮。

select

创建选项菜单
所有属性:select

textarea

多行纯文本编辑控件。
所有属性:textarea

table

表示表格数据
所有属性:table
需要注意的一些点:

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

推荐阅读更多精彩内容