HTML
HyperText Markup Language
超文本编标记语言是构成 Web 世界的一砖一瓦。它描述并定义了一个网页的内容和基本布局。
关于 HTML 标签
详见 MDN Web 文档
关于 <iframe> 标签
frameborder 属性
- frameborder 默认值为 1
- 实现 frame 无边框
<iframe frameborder="0">
name 属性
该名称可以用作 <a> 标签，<form> 标签的 target 属性值，或<input> 标签和 <button> 标签的 formtaget 属性值，实现在 iframe 里显示目标页面。
关于 <a> 标签
跳转页面时，发起的是 HTTP GET 请求。
href 属性
包含超链接指向的 URL 或 URL 片段。
关于 href="qq.com"
<a href="qq.com" >是否能打开 qq.com ？</a>
qq.com 是个相对地址，识别为文件路径，无法打开。
那应该怎么写？如下。
- 添加协议
<a href="http://qq.com" >qq.com</a>
<a href="https://qq.com" >qq.com</a>
- 利用
<a>的自动继承协议，结合http-sever工具或github pages预览来实现http://或https://协议
<a href="//qq.com" >qq.com</a>
关于路径
--index.html--- //地址为 127.0.0.1:8080
<a href="xxx.html" >点击会链接到何处？</a>
链接到 127.0.0.1:8080/xxx.html
关于 #锚点
观察浏览器地址栏
<a href="http://qq.com#123" >观察浏览器地址栏</a>
链接返回到页面顶部
<a href="http://qq.com#top" >链接返回到页面顶部</a>
<a href="http://qq.com#" >链接返回到页面顶部</a>
关于 ? 请求
<a href="http://qq.com?name=leown" >发起请求</a>
控制台查看请求与响应 name:leown
关于伪协议
弹出 alert 对话框 “1”
<a href="javascript:alter(1)" >伪协议弹出对话框 “1”</a>
实现空链接
<a href="javascript:;" >空链接</a>
target 属性
指定在何处显示链接的资源。
_self: 当前页面加载。
_blank: 新窗口打开。
_parent: 加载响应到当前框架父框架。如果没有parent框架此选项的行为方式相同_self。
_top:加载响应到顶层窗口，取消所有其它frame。
download 属性
此属性指示浏览器下载URL而不是导航到它
<a href="https://git-scm.com/download/win" download>Download Git</a>
注意添加 download 后的请求与响应，在 Response Headers 中，Content-Type 的值为 application/octet-stream
关于 <form> 标签
关于 target 属性
和 <a> 标签相同
请求
- 关于
<form>标签的请求，可通过开发者工具自行调试查看；
<!-- 一个简单的表单，这个表单会发送一个 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>
- 关于提交数据的查看
<form action="user">
username:<input name="username" type="text"> //填入 leown
password:<input name="password" type="password"> //填入 123123
<button>submit</button>
</form>
在控制台可以看到提交的数据 leown 和 123123。
注意
- 如果
method = "get"我们的提交的数据会出现在 HTTP GET 请求第二部分的查询参数中； - 如果
method = "post"我们的提交的数据会出现在 HTTP POST请求的第四部分中； - 我们可以通过在
action的值后面加上查询数据xxx=123， 使xxx=123出现在 HTTP POST 请求的第二部分的查询参数中； - 我们无法使 HTTP GET 请求拥有第四部分；
关于 <button> 标签 和 <input> 标签
详见 MDN Web 文档
注意
- 当一个
form表单中没有submit按钮，button没有写type值，则此button按钮自动升级为submit按钮；而如果写了type值，则不自动升级； - 点击表单文字即可选中
input标签的方法；
<label >user: <input type="text" ></label>
<label for="xxx">user: </label><input type="text" id="xxx" >
- 通过多个
radio标签有的name值相同来实现单选； -
select标签的multiple属性实现多选，option标签的disable属性实现不可选，selected属性实现默认选择； -
textarea属性用 CSS 来精确实现宽高
