HTML续

作者: 巴塞哦 | 来源:发表于2018-04-27 21:42 被阅读0次

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

<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：0

max：100

value：min + (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>

HTML续

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

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

标签;

元素:

属性:

示例:

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

2.然后是<a>标签

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

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

举例:

4.然后是<input>标签:

举例:

例子

一个常见的表单用例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程