笔记 - HTML常用标签

a 锚

属性

href:

hyper reference 超链接文件路径，URL或伪协议。
URL:
建议使用//abc.com无协议，则自动选择协议。
伪协议：
javascript: Code
mailto: emailAddress
tel:number
e.g 空伪协议
空伪协议
** id**:
e.g id = xxx

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 head
             // table row
                 // 使用较少
    
        like table's header
            
        
        
            
                table data
            
       
            表格合并列，合并3列
            表格合并行，合并3行

like table's header
table data
表格合并列，合并3列	表格合并行，合并3行

colspan: 合并列
rowspan: 合并行
tips: http-server -c-1 启动HTTP Server

img 图片

发出GET request，获取图片
（永远不要让图片变形，改变图片比例）

属性：

src: 相对路径，URL
alt: 图片无法显示时的替代文本
height / width: 高与宽，只写一个另一个则会自适应。

事件：

onload: 加载成功调用
onerror: 加载失败调用
e.g.

响应式

可替换元素

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的（from MDN)
img是一种可替换元素，其展示的图片由src决定，因此可被替换，而查看html并不能看到图片本身。
、、、<select>、<object>都是<strong>可替换元素</strong>。这些元素往往没有实际的内容，即是一个空元素。<br> 与此相对，<div>、<p>、<h1>到<h6>、<table>则为<strong>不可替换元素</strong>，其内容直接表现给用户端（例如浏览器）。</p> <p><br></p> <h3>fom 表单</h3> <p>form可发送GET, POST请求，遂刷新页面</p> <h5>属性</h5> <p><strong>action</strong>: 类似于source，form请求的目标页面<br> <code><form action="test.php"></code></p> <p><strong>autocomplete</strong>:<br> 用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。 on为打开自动补全，off关闭自动补全。</p> <p><strong>method</strong>:<br> GET, POST</p> <p><em>tips: <button>和<input type="submit">区别</em><br> button标签内还能再添加其他内容。只有当type="submit"时才能提交。（默认值也为submit）。type="button"无法被提交。</p> <pre><code><button type="submit"><strong>我是一个加粗按钮</strong></button> </code></pre> <p>而input标签自关闭，不能再添加内容。</p> <pre><code><input type="submit" value="提交" /> </code></pre> <p><br></p> <p><strong>target</strong>:<br> 表示在提交表单之后，在哪里显示响应信息。</p> <ul> <li>_self：默认值。在相同浏览上下文中加载。</li> <li>_blank：在新的未命名的浏览上下文中加载。</li> <li>_parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。</li> <li>_top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。<br> 此值可被<button>或拥有提交作用的<input>拥有的formtarget属性覆盖。</li> </ul> <h5>事件</h5> <p>onsubmit</p> <h3>input 输入</h3> <p>获取用户输入</p> <h5>属性：</h5> <p>MDN input element 属性真的太多了<br> text: 文本输入<br> password: 密码输入，自动用替代符号隐藏输入内容 *******<br> color: 可供选择的调色板<br> radio: 单选，选项input需要有相同的name<br> checkbox: 多选，选项input需要有相同的name<br> file: 提交文件，添加mutiple可选择多个文件 e.g. <code><input type="file" multiple /></code><br> hidden: 隐藏的输入框，一般用于自动提交id等服务于机器的功能。</p> <p><strong><textarea></strong><br> 多行输入框，用法近似input text</p> <pre><code><textarea style="resize:none; width:50%; height:5%">

resize:none 禁止输入框大小被拖拽改变

option中间的值只显示，value内定义的值会被提交

事件

onchange: 用户输入改变
onfocus: 鼠标光标停留时
onblur: 鼠标光标离开时

验证器

HTML5自带验证器

如果未填写该输入框即提交，页面出现提示。