常用标签

今天主要想说的是以下几个标签

</code></li> 
  <li><code><form></code></li> 
  <li> <code><input></code> && <code><button></code> </li> 
  <li><code><table></code></li> 
 </ul> 
 <ol> 
  <li> <code><a></code> 标签</li> 
 </ol> 
 <ul> 
  <li>全称：<code>anchor</code> ：锚点</li> 
  <li>常见用法一：<code><a href=" http://www.xxx.com" target="_blank" > hello</a></code> </li> 
 </ul> 
 <p>属性理解1：target ：目标，把什么作为目标</p> 
 <blockquote> 
  <p>(1) <code>_blank</code> : 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文<br> <code>例子：<a href=" http://www.xxx.com" target="_blank" > hello</a></code></p> 
  <p>(2) <code>_self</code> ： 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。<br> <code>例子：<a href=" http://www.xxx.com" target="_self" > hello</a></code></p> 
  <p>(3) <code>_top</code> ： IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self<br> <code>例子：<a href=" http://www.xxx.com" target="_top" > hello</a></code></p> 
  <p>(4) <code>_parent</code> ：加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self。<br> <code>例子:<a href=" http://www.xxx.com" target="_parent" > hello</a></code></p> 
 </blockquote> 
 <p>属性理解2：href ：超链接</p> 
 <blockquote> 
  <p>(1) 链接到外部地址：<code>http://xxx.com</code><br> <code>例子：<a href ="http://www.qq.com" >QQ</a></code></p> 
  <p>(2) 链接到本页的某个部分：<code>#属性</code><br> <code>例子：<a href ="#attribute" >xxx</a></code></p> 
  <p>(3) 打开某个文件：<br> <code>使用file协议</code>:<code>file:///C:/Users/Administrator/Desktop/homework/vsCode/Html/Untitled-1.html</code><br> <code>例子：<a href ="file:///users/html/index.html" >demo</a></code></p> 
  <p>(4) 创建一个可点击的图片：<code>http://www.qq.com/imgs/1.png</code><br> <code>例子：<a href ="http://www.qq.com/imgs/1.png" >pic</a></code></p> 
  <p>(5) 创建一个email链接：<code>mailto:123@qq.com</code><br> <code>例子：<a href ="mailto:123@qq.com" >QQemail</a></code></p> 
  <p>(6) 创建电话链接：<code>tel:+1356789456</code><br> <code>例子：<a href ="tel:+1356789456" >+1356789456</a></code></p> 
  <p>(7) 查询参数：<code>?name=Tom</code><br> <code>例子：<a href ="http://www.user.com/?name=Tom" >Tom</a></code></p> 
  <p>(8) 伪协议：<code>javascript:;</code>或<code>javascript:void(0);</code><br> <code>例子：<a href ="javascript:;" >点击无响应</a></code><br> 注：<strong><em>以上参数中，只有（7）是会发起请求的，其他的都不会向服务器发起请求</em></strong><br> 示例代码：</p> 
 </blockquote> 
 <pre><code><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="ohter.html?name=hello">hello</a>
</body>
</html>
</code></pre> 
 <p>点击 超链接 hello 后的效果，打开控制台查看请求为<br> </p> 
 <div class="image-package"> 
  <div class="image-container" style="max-width: 700px; max-height: 634px;"> 
   <div class="image-view"> 
    <a href="http://img.e-com-net.com/image/info10/823e9c4bd5df4d199604b5d17587c2b1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/823e9c4bd5df4d199604b5d17587c2b1.jpg" width="650" height="217" alt="常用标签_第1张图片" style="border:1px solid black;"></a> 
   </div> 
  </div> 
  <div class="image-caption">
    查询参数 
  </div> 
 </div> 
 <p></p> 
 <ul> 
  <li>常见用法二：<code><a href="www.xxx.com" download>hello</a></code> </li> 
 </ul> 
 <p>属性理解:1:download:下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。</p> 
 <ul> 
  <li>注：仅在HTML中，下载URL只有2种方式，一种是上面的<code>download</code>属性，另一种为HTTP响应中<code>conten-type</code>的参数为<code>application/octet-stream</code>时，浏览器会下载文件</li> 
 </ul> 
 <p>2.<iframe>标签</p> 
 <ul> 
  <li>名称：框架</li> 
  <li>常见用法：主要在页面嵌套页面，经常和<code><a></code>标签一起使用；</li> 
 </ul> 
 <pre><code><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <iframe name=xxx src="#" frameborder="0">

QQ
    123

效果为：

iframe

属性分析一：
属性：name=xxx,src=#
分析:在标签中，分别对应不同的超链接，但是目标都指向iframe，以第一个QQ超链接为例，即表示在iframe打开链接为http://www.qq.com窗口，第二个123链接同理

属性分析二：
属性：src=#
分析：除了上面所示参数可以为绝对路径以外，也可以放置相对路径，即在本地新建一个index.html，上面src="index.html"，即下面QQ在index.html打开

标签

form：表单
常见用法：




    
    Document

post

属性分析一：action
解释：类似123 中的href一样，跳转链接，主要服务于后面submit所要提交到的位置
属性分析二：method
解释1：在
中，若不申明method的传输方式，则默认为 get；只有声明为method="pos"t 时，才是post，并且，HTTP协议会有第四部分即(Form Data)的内容；如果有查询参数出现，也是出现在Form Data中，而不是像get一样出现在搜索框中。

method="post"

说明：当在表单输入账号密码时，因为使用的不是HTTPS协议，所以密码在最后一部分以明文的方式进行传输，存储方式为上一部分Content-Type:application/x-www-form-urlencoded，若要是中间有人进行监听，那么密码就泄露了，这就是为什么HTTP协议不安全所在之处。

解释2：上图中，我们看到，当method="post"时，可以上传数据，那么，想问：当method=post时，是否可以像method="get"一样查询呢？
答案：可以的，需要修改1个地方，即：action=user?xxx=3 (其中=号两边为任意参数)

属性分析三：target
和标签一样，可以跳转到其他的链接，不同的是，前者是 get 一个页面， form 是 post 一个页面。

属性分析四：submit
解释：在中，如果没有这个 提交 按钮，就无法提交内的数据，除非使用JS。

4.标签

input 输入
常见参数一： type="text",type="password",type="button"......
说明：在页面效果上和是一样的，那么它们有什么区别呢？
区别：
当中只有一个 == 二者等价。
当的说明了type类型为 button 那么此按钮也仅仅是一个按钮，不具有提交功能。
常见参数二：
看如下代码：

 男
男

当我们选择多选框时，通常只有点击多选框才能勾选其内容，显然，这不太人性化；需求是，我们只要点击和多选框对应的文字，那么就可以选中该多选框，实现方式有2种，使用标签实现，如上代码。

常见参数三：单选框如何做到只会选中一个？


水果

效果：

水果

方法：使用 name ，当单选框中name取的参数值相同时，就是二者或是多者选一；

常见参数三：下拉框

分组

标签





JS Bin

班级	姓名	分数
1班	张三	李四
2班	赵六	刘七

效果图

tr == table row
td ==table data
th ==theader

说明一：标签的使用，自上而下的分别设置第一列，第二列...的属性
说明二：如果改变的顺序，将其放置在前面，那么效果如何？
答案是：不会改变，浏览器会自动排列顺序。
说明三：属性border-collapse:collapse;
设置合并边框

(完)

常用标签

你可能感兴趣的:(常用标签)