a 锚
属性
href:
hyper reference 超链接 文件路径，URL或伪协议。
URL:
建议使用//abc.com无协议，则自动选择协议。
伪协议：
javascript: Code
mailto: emailAddress
tel:number
e.g 空伪协议
<a href="javascript:;">空伪协议</a>
** id**:
e.g id = xxx <a href="#xxx"> </a>
target:
目标窗口。
_self：默认值，在当前窗口打开页面。
_blank: 在空白页打开。
_top: 在顶级窗口打开(e.g. 多层iframe)。
_parent: 在上一级窗口打开。
window name: 如果target="name"则打开一个以name命名的窗口，所有target为name的连接都将在该窗口打开。
target name: 连接将在指定iframe内打开。
download:
部分浏览器不支持该属性。 理论上download可以下载目标网页。
rel=noopener
iframe 内嵌窗口
不常见…
table 表格
<table>
<thead> // table head
<tr> // table row
<th>like table's header</th>
</tr>
</thead>
<tbody>
<tr>
<td>table data</td>
</tr>
<tr>
<td colspan="3" >表格合并列，合并3列</td>
<td rowspan="3">表格合并行，合并3行</td>
</tr>
</tbody>
<tfoot></tfoot> // 使用较少
</table>
colspan: 合并列
rowspan: 合并行
tips: http-server -c-1 启动HTTP Server
img 图片
发出GET request，获取图片
（永远不要让图片变形，改变图片比例）
属性：
<img src="" alt="">
src: 相对路径，URL
alt: 图片无法显示时的替代文本
height / width: 高与宽，只写一个另一个则会自适应。
事件：
onload: 加载成功调用
onerror: 加载失败调用
e.g.
<img id="testImg" src="testImg.jpg" alt="测试图片" />
<script>
// 当图片正常显示
testImg.onload = function(){
console.log("testImg Loading Succeed");
};
// 图片加载失败，使用404.jpg替代
testImg.onerror = function(){
testImg.src = "404.jpg";
};
</script>
响应式
<style>
/* 响应式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 图片大小适应屏幕 */
img {
max-width: 100%;
}
</style>
可替换元素
在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的 （from MDN)
img是一种可替换元素，其展示的图片由src决定，因此可被替换，而查看html并不能看到图片本身。
<img>、<input>、<textarea>、<select>、<object>都是可替换元素。这些元素往往没有实际的内容，即是一个空元素。
与此相对，<div>、<p>、<h1>到<h6>、<table>则为不可替换元素，其内容直接表现给用户端（例如浏览器）。
fom 表单
form可发送GET, POST请求，遂刷新页面
属性
action: 类似于source，form请求的目标页面
<form action="test.php">
autocomplete:
用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。 on为打开自动补全，off关闭自动补全。
method:
GET, POST
tips: <button>和<input type="submit">区别
button标签内还能再添加其他内容。只有当type="submit"时才能提交。（默认值也为submit）。type="button"无法被提交。
<button type="submit"><strong>我是一个加粗按钮</strong></button>
而input标签自关闭，不能再添加内容。
<input type="submit" value="提交" />
target:
表示在提交表单之后，在哪里显示响应信息。
- _self：默认值。在相同浏览上下文中加载。
- _blank：在新的未命名的浏览上下文中加载。
- _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
- _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。
此值可被<button>或拥有提交作用的<input>拥有的formtarget属性覆盖。
事件
onsubmit
input 输入
获取用户输入
属性：
MDN input element 属性真的太多了
text: 文本输入
password: 密码输入，自动用替代符号隐藏输入内容 *******
color: 可供选择的调色板
radio: 单选，选项input需要有相同的name
checkbox: 多选，选项input需要有相同的name
file: 提交文件，添加mutiple可选择多个文件 e.g. <input type="file" multiple />
hidden: 隐藏的输入框，一般用于自动提交id等服务于机器的功能。
<textarea>
多行输入框，用法近似input text
<textarea style="resize:none; width:50%; height:5%"></textarea>
resize:none 禁止输入框大小被拖拽改变
<select>
下拉式选择
<select>
<option value="1">Mon</option>
<option value="2">Tue</option>
</select>
option中间的值只显示，value内定义的值会被提交
事件
onchange: 用户输入改变
onfocus: 鼠标光标停留时
onblur: 鼠标光标离开时
验证器
HTML5自带验证器
<input type="text" required />
如果未填写该输入框即提交，页面出现提示。
网友评论