今天主要学习了一下几种标签的用法和区别:
<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 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。month： 用于输入年月的控件，不带时区。number:用于输入浮点数的控件。password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。range： 用于输入不精确值控件。如果未指定相应的属性，控件使用如下缺省值：min：0max：100value：min+ (max-min)/2，或当max小于min 时使用minstep：1reset：用于将表单所内容设置为缺省值的按钮。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>
网友评论