HTML续

今天主要学习了一下几种标签的用法和区别:

<iframe>
<a>
<form>
<input>

等等我好像忘记了一些很重要的事情! 什么是HTML的标签?什么是HTML的元素?什么是HTML的属性?这些我想肯定很重要!

  • 标签;

标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象,绝大部分的标签都是成对出现的,如<table></talbe>、<form></form>。当然还有少部分不是成对出现的,如<br><hr>等。标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。

  • 元素:

HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。

  • 属性:

为HTML元素提供各种附加信息的就是HTML属性,它总是以"属性名=属性值"这种名值对的形式出现,而且属性总是在HTML元素的开始标签中进行定义。

示例:

<html> 
     <head> <title>示例标题</title> </head> 
     <body bgcolor="red"> 
             <p>这是示例页面</p> 
     </body> 
</html>

在这个示例中,<p>这是示例页面</p>就是HTML元素,其中“这是示例页面”就是元素的具体内容了。<head><title><body>等就是HTML标签,这是标签构成了HTML元素。<bodybgcolor="red">中的bgcolor="red"就是标签的属性,它定义了标签应该如何具体配置。
总之,元素和标签的区别也不必太在意,实际工作中我们都直接以标签统称。而属性就很容易明白了,它就是为HTML标签添加各种附加信息或者配置选项的参数。**

1.首先我们先来认识第一个标签<iframe>

  • <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中。
  • <iframe>可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文(没有父级)通常是浏览器窗口。
  • <iframe>通常跟<a>一起用,当然这里常常用"name"的属性来把它们结合一起用,例如:
<iframe name="XXX" src="#" frameborder="0"></iframe>
<a herf="#" target="XXX"></a>

"name":嵌入的浏览上下文(框架)的名称。该名称可以用作<a>标签,<form>标签的target属性值,或<input>标签和<button>标签和<button>标签的formtaget属性值

"src":嵌套页面的URL地址。使用遵守同源策略的来嵌套空白页。

2.然后是<a>标签

  • download属性:此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件.

  • herf属性:这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号(#),它指定一个内部目标在当前文档中的位置(ID)开头的名字。URL不限于网页(HTTP)的文件。URL可能使用浏览器所支持的任何协议。例如,文件,FTP,大多数用户代理mailto工作。

(注意: 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。)

  • target该属性指定在何处显示链接的资源。 取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。以下是集中特殊关键字的含义:

target="_self"时:当前页面加载,即当前的响应到同一HTML 4 frame(或HTML5浏览上下文)。此值是默认的,如果没有指定属性的话.

tage="_blank"时:新窗口打开,即到一个新的未命名的HTML4窗口或HTML5浏览器上下文

tage="_parent"时:加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。

tage="_top"时:IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self

注意:使用target时,考虑添加 rel="noopener norefferrer" 以防止针对 window.opener API 的恶意行为。

3.接下来是<form>标签:

  • HTML <form> 元素 表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息。

  • action属性: 一个处理这个form信息的程序所在的URL。这个值可以被 <button> 或者 <input> 元素中的 `` 属性重载(覆盖)。(为<form>元素提供一个提交对象的作用)

  • methon属性: 浏览器使用这种HTTP方式来提交 form. 可能的值有:

methon="post"时:表单数据会包含在表单体内然后发送给服务器.
methon="get"时:表单数据会附加在 action 属性的URI中,并以 '?' 作为分隔符, 然后这样得到的 URI 再发送给服务器. 当这样做(数据暴露在URI里面)没什么副作用,或者表单仅包含ASCII字符时,再使用这种方法吧。

举例:

<!-- 一个简单的表单,这个表单会发送一个 GET 请求 -->
<form action="">
  <label for="GET-name">Name:</label>
  <input id="GET-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- 一个简单的表单,发送 POST 请求 -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- 使用 fieldset, legend, and label 的表单 -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label>
  </fieldset>
</form>

4.然后是<input>标签:

  • HTML <input> 元素用于为基于Web的表单创建交互式控件,以便接受来自用户的数据。

  • 为了对每种类型的<input>表单的外形有个总体的印象,试着编辑下面示例中的type 属性值。你将看到你所输入的类型。最初的text值会产生一个基本的文本输入框,但你可以试着输入其他值,如number, color, checkbox, radio, date, file, month, password, range 和 time.

举例:

<input id="input1" type="text">
<input id="input2" type="text">
    
  • <type>控件类型的显示。如果这个属性没有指定,默认的类型是 text。可用的值包括:
  • button:无缺省行为按钮。
  • checkbox: 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态(大多数平台上,显示为一条穿过复选框的水平线)。
  • color:用于指定颜色的控件。
  • date: 用于输入日期的控件(年,月,日,不包括时间)。
  • datetime: 基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)。
  • datetime-local: 用于输入日期时间控件,不包含时区。
  • file:此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
  • hidden:不显示在页面上的控件,但它的值会被提交到服务器。
  • image:图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 heightwidth 属性以像素为单位定义图片的大小。
  • month: 用于输入年月的控件,不带时区。
  • number:用于输入浮点数的控件。
  • password:一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。
  • radio:单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中,所有单选按钮的 name 属性使用同一个值; 一个单选按钮组中是,同一时间只有一个单选按钮可以被选择。
  • range: 用于输入不精确值控件。如果未指定相应的属性,控件使用如下缺省值:
  • min:0
  • max:100
  • valuemin + (max-min)/2,或当 max 小于 min 时使用 min
  • step:1
  • reset:用于将表单所内容设置为缺省值的按钮。
  • search用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
  • submit:用于提交表单的按钮。
  • text:单行字段;换行会将自动从输入的值中移除。
  • time: 用于输入不含时区的时间控件。
  • url: 用于编辑URL的字段。 The user may enter a blank or invalid address. 换行会被自动从输入值中移队。可以使用如:
  • week:用于输入一个由星期-年组成的日期,日期不包括时区。

例子

一个简单的文本输入框

<input type="text" name="input" value="Type here">

一个常见的表单用例

一个常见的表单,包含了一些input元素

<form action="getform.php" method="get">
    First name: <input type="text" name="first_name" /><br />
     Last name: <input type="text" name="last_name" /><br />
        E-mail: <input type="email" name="user_email" /><br />
<input type="submit" value="Submit" />
</form>

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1 92
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,781评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,208评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • 不知怎么,老是觉得自己是一个缺乏安全感的人,我很想知道你们最放松最惬意的时候是什么时候。是放学回家的一碗还冒着热气...
    雏初鸣人阅读 326评论 0 0