🔒 html知识点补充

发表于 | 分类于

html知识点补充，查漏补缺，比较零碎

iframe 标签

嵌套页面

1
2
<iframe src="https://www.baidu.com" name="qqqqq" width=100% height=200 ></iframe>
<a href="https://www.qq.com" name="qqqqq">在name=qqqqq的iframe中打开</a>

a 标签

跳转页面（HTTP GET 请求）

download属性

1
2
3
4
5
6
<a href="xxxx" download>下载链接</a>
<a href="http://www.xxx.com/3.png" download="3.png">下载图片3.png</a>
加上download属性，就会下载下来
否则就是用浏览器打开预览文件
download="文件名"
用js可以操作文件名，比如a.download = imgName + '.png';

target属性

1
2
3
4
5
<a target="_blank|_self|_parent|_top|framename">
_blank 在新窗口中打开
_self 在a标签所在的页面中打开
_parent 在a标签所在页面的父级窗口中打开
_top 如果嵌套iframe,就在最顶层（也就是当前页面）中打开

href属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
绝对路径
<a href="www.qq.com">错误！！！！漏了协议</a>
<a href="https://www.qq.com">正确，https协议</a>
<a href="//www.qq.com">正确,自定义协议</a>
相对路径
<a href="./xxx.html"></a>
结果打开127.0.0.1:8080/xxx.html
<a href="#锚点"></a>
结果打开127.0.0.1:8080/index.html#锚点，锚点不发起请求
<a href="?name=stage"></a>
结果打开127.0.0.1:8080/index.html?name=stage,自动发起 ?name=stage 的GET请求
<a href="javascript:;"></a>
点击之后什么都不发生
<a href="#"></a>
点击之后不刷新，锚点变成#，滚回到顶部
<a href=""></a>
点击之后刷新当前页面
移动端点击拨打电话
<a href="tel:10086">10086</a>

form

1
2
3
4
5
6
7
8
<form action="index2.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>
将fname=xxx&lname=xxx提交到index2.php
中文会转码

method属性

  • GET时，如果有提交的数据，数据会作为查询参数出现在地址栏
    127.0.0.1::8080/index.html?fname=xxx&lname=xxx

  • POST时，用Chrome开发者工具可以看到，数据在Form Data里

重点

如果一个表单中没有input-submit时

如果有<button>没有写type的按钮</button>，该button自动升级为type=submit，可以提交表单

如果写了type=button，则无法提交表单

label 标签

1
2
3
4
5
6
7
8
9
10
11
<label for="male">文字</label>
<input type="checkbox" name="male" id="male">
这样点击文字也能选中复选框，请将label的for与input的id名对应
---------------------
简便写法：label把input包起来
<label>文字
<input type="checkbox" name="male">
</label>
这样就不用for和id名了

select 标签

1
2
3
4
5
6
7
<select name="choose" multiple>
	<option value=""> - </option>
	<option value="1" selected>默认</option>
	<option value="2" disabled>禁选</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>

multiple属性

该属性允许多选
对于 windows：按住Ctrl按钮来选择多个选项

table 标签

可以用colgroup>col控制表格的样式，第一个col控制第一竖列，第二个col控制第2竖列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table border="1">
<colgroup>
  <col width=200>
  <col bgcolor=red>
</colgroup>
  <thead>
    <tr>
      <th>姓名</th><th>得分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td>小明</td><td>100</td>
    </tr>
    <tr>
    	<td>小红</td><td>80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>所有人</td>
      <td>180</td>
    </tr>
  </tfoot>
</table>

pre和code 标签

<pre>标签，保留多个空格和回车换行,<pre>显示多行代码，<code>显示一行代码，<pre>可以替代<code>

details 标签

默认是个三角形▼

1
2
3
4
5
6
<details>
  <summary>点我</summary>
  <p>loremxxxxxxxxxx</p>
  <p>loremxxxxxxxxxx</p>
  <p>loremxxxxxxxxxx</p>
</details>

设置open属性<details open>则默认展开

hidden 属性

1
2
3
<p hidden>这是一段隐藏的文字</p>
js用getAttribute('hidden')/setAttribute()/removeAttribute()操作

progress标签

html5:progress标签

用于进度条、技能条等的显示

1
<progress value="22" max="100"></progress>

figure标签 头像

1
2
3
4
<figure>
  <img src="avatar.jpg" width="60" height="60">
  <figcaption>昵称</figcaption>
</figure>

上传限制格式

通过accept可以限制上传的格式

1
<input type="file" accept="image/*" />

-------------本文结束感谢您的阅读-------------