饥人谷技术博客菜鸟朱茱霞的前端搬砖史

关于html标签的一些总结2

2018-03-14  本文已影响4人  朱珠霞
1. <iframe>标签

<iframe>表示嵌套页面,默认大小为50*100。可以修改属性height和width.但是iframe的宽度可以设置百分比,高度却不可以。

下面是 <iframe>的一些属性的使用。
src ,表示嵌套页面的URL地址。记得不要写成href。
name ,表示嵌套页面的名字,可以用于<a>``<form>的target属性,或者<input>``<button>的formtarget属性。
frameborder, <iframe>标签默认在浏览器表现出的样式会有一个边框,使用这个属性可以消除这个丑丑的边框:frameborder="0"

2. <a>标签

<a>是一个锚元素,创建一个超链接。

下面是 <a>的一些属性的使用。
target表示在哪里显示超链接的内容。这个跟 <iframe>结合使用理解。

①_blank //在空白页打开超链接
②_self //在当前页面打开
③_parent //在爸爸身上打开
④_top //在祖先身上打开
⑤name // <iframe>的name,在该<iframe>身上打开。

③④的使用还是结合 <iframe>理解,在一个html页面嵌入了 <iframe>(假设叫a),则html页面是a的爸爸,类推,在a身上再嵌入一个新的 <iframe>(假设叫b),则html页面就是b的祖先。


download 建立一个下载的超链接。例如:<a href="#" download="下载名字">下载</a>
另外还有一种下载方法,用http响应决定 content-Type:application/ocet-stream


href 表示a的超链接地址URL,他支持多种协议。以下是href的集中情况:

①http协议或https协议。这个很容易理解:
<a href="http://www.qq.com">打开腾讯首页</a>
所以呢,前面的"http://"不可以缺少!!!!

②无协议相对地址。例如:<a href="//qq.com">打不开腾讯首页</a>这种情况下是打不开腾讯首页的。因为此时他自动继承了当前页面的协议(一般是文件协议file://xxx),此时可以在当前目录搭建一个http-server,那么当前页面的协议会变成http协议,在这个环境下才可以打开腾讯首页。
所以!!使用这个路径的话,访问腾讯首页时,不能关闭了http-server。

下载并打开http-server:

sudo npm i -g http-server
cd  xxxx(当前网页的目录)
http-server -c-1

然后复制给出的路径,在浏览器中打开。


123.png

③特殊字符路径
<a href="?name=qqq">qq</a> 这种情况在点击之后会在当前页面发起?name=qqq的请求
<a href="#xxx">qq</a>这个点击之后不会发起请求,锚点在当前页面进行跳转
<a href="/xxx.html ">link</a> 点击后会浏览器会发起GET / HTTP/1.1的请求,路径还是/,因为/已经是根目录,无法再往上走一个。

④伪协议
使用伪协议可以满足一种需求:点击了<a>标签不会发生任何跳转。
<a href="javascript:;">我就不动</a>


3. <form>标签

<form><a>的区别是,<form>发起的HTTP请求是 POST (file协议不支持POST请求),而<a>发起的是一个HTTP GET请求。
关于GET请求与POST请求的区别有一点:

关于请求修改,可以使用属性method。而action属性指定了参数POST传送的地方。

<form action="users?name=xxx" method="post">
    <label>用户名<input type="text" name="username"></label> 
    <label>密码<input type="password" name="password"></label>
    <input type="submit" value="提交">
</form>

<form>标签的子标签有交互式控件,接受来自用户的数据。有<input>``<textarea>``<button>
注意!!,<form>标签内一定要有提交按钮。

4. <input>标签

<input>type属性:如果不指定type属性,则默认为 text 。
①text:表文本。//password:表密码。

//建立一个用户登录的界面
<form>
   <label><input type="text" name="username" >username</label>
   <br>//换行
   <label><input type="password" name="password" >password</label>
   <input type="submit" value="提交">
</form>

<label>标签可以将文本信息跟交互控件关联在一起。如下图,是以上代码显示出来的。点击username焦点会自动到输入框中。

② button:表示普通按钮。//submit:表示提交按钮。
ps 有一个标签是<button>,它也有type属性,不同的是,这个标签如果不指定type属性,则它会默认为提交按钮。 注意<button>不是空元素。

③ checkbox:表复选框。//radio:表单选框

在实际场景,通常会有某一个命题,需要用户做选择。此时单选框的name属性需一致,这样同一组的单选按钮才可以起到单选的作用。而value为提交数据到服务器的值。如下面,可以设置一致的value,以便后端区分。

<form action="save.php" method="post" >
    <label>性别:</label>
    <label>男
    <input type="radio" value="man"  name="gender" ></label>
    <label>女
    <input type="radio" value="woman"  name="gender" ></label>
    <input type="submit" value="提交">
</form>
5. <select>标签与<option>标签。
<form action="#" method="post" >
    <pl>爱好:</p>
    <select>
      <option value="reading">看书</option>
      <option value="travel">旅游</option>
      <option value="sport">运动</option>
      <option value="shopping">购物</option>
    </select>
<input type="submit" value="提交">
</form>

另外,<option>标签属性中,disable表示不可选,selected表示默认选项。
<select>中加入multiple属性可以进行多选,进行多选时按下<kbd>Ctrl</kbd>同时进行单击。

6. <textarea>标签

<textarea>标签默认样式大小是可以经用户在浏览器上自行调整的,这样带来的坑是 页面布局会受到影响,要用CSS 来固定宽高样式。

上一篇 下一篇

猜你喜欢

热点阅读