《HTML常用标签》a标签 a标签的作用跳转到外部页面跳转内部锚点跳转到邮箱或电话等属性 href 超级链接到哪

a标签

a标签的作用

跳转到外部页面
跳转内部锚点
跳转到邮箱或电话等

属性

href 超级链接到哪个地址<a href="//baidu.com>点我跳转</a>

here的取值：

网址

google.com
google.com
//google.com "//"的用法会继承当前协议自动补全

路径

绝对路径 /res/login.html "/"为开启http服务的根目录
相对路径 ./img/logo.png

伪代码

javascript:代码;<a href="javascript:;">点我执行</a>用于实现点击没有任何作用的a标签
"#" 点击会跳转到页面顶部
mailto:邮箱点击会拉起默认邮箱客户端
tel:手机号手机端会拉起拨号界面
id 跳转到指定锚点<a href="#app">点我跳转</a>

target 超级链接要在什么窗口打开<a target="_blank">点我跳转</a>

target的取值：

内置名字

_blank 在新的窗口打开
_top 结合iframe标签使用，在iframe的页面使用target="_top"，会在最顶层的层级窗口打开
_parent 结合iframe标签使用，在iframe的页面使用target="_top"，会在父级窗口打开
_self 默认值，在当前窗口打开

程序员的命名

iframe的name 在iframe标签对应name的窗口打开
window的name <a target="xxx">click me</a>在对应window.name===xxx 的窗口打开，没有则会新建一个窗口，存在则在已有窗口打开，可用window.name验证

download 下载网页，部分浏览器不支持<a download>点我跳转</a>
rel=noopener 后续补充

table标签

table标签里的标签

thead 表头
tbody 表内容
tfoot 表尾
th "table head" 表示表头
tr “table row” 表示一行
td “table data” 表示数据

<table>
    <thead>
        <tr>
            <th>content</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>content</td>
    </tbody>
    <tfoot>
        <tr>
            <td>content</td>
        </tr>
    </tfoot>
</table>

直接写tr/td不写tbody，浏览器会自动补全包裹在tbody标签里，tehad、tbody、tfoot的顺序不重要

img标签

作用是发出get请求，展示一张图片

属性

alt 如果图片加载失败则显示alt里的内容<img id="logo" src="12w1sqq1" alt="这是logo" />
height 这不是css样式，而是img标签的属性,只写高度或宽度，图片后自适应，同时写宽高如果不满足初始比例，则会变形
width 与height属性同理
src 图片的地址

事件

onload
onerror

    let logoImg = document.querySelector("#logo")
    logoImg.onload = () => console.log("加载成功") //加载成功会调用
    logoImg.onerror = () => console.log("加载失败") //加载失败会调用，使用场景可在图片加载失败时进行对应处理（如替换图片地址）

响应式怎么处理

添加样式 img{max-width：100%;}

form标签

<form action="/login" method="post" autocomplete="on" id="form">
    <input name="username" type="text">
    <input type="password">
    <input type="submit" value="点我提交"> //如果不写value值，则会有当前语言的默认值
    //<button type="submit">提交</button> 使用button作为提交按钮时，button如果不写type值则会默认为“submit”， button可在标签中添加其他标签
</form>

作用是发出get/post请求，然后刷新页面

属性

action 请求地址
autocomplete 是否自动填充，写在form标签上，取值为“on/off”，结合input的name属性使用
method 请求方法
target 与a标签的target类似

事件

onsubmit 表单提交后的处理事件

    let form = document.querySelector("#form")
    form.onsubmit = () => alert("你提交了")

input标签

文本输入框<input type="text" />
色彩选择器<input type="color" />
密码输入框，默认输入内容呈黑色小圆点样式<input type="password" />
单选框，实现多选一则需要将多个单选框设置相同的name

<input type="radio" name="city" value="Zhuhai" />
<input type="radio" name="city" value="Guangzhou" />

多选框，实现多个复选框视为同一组数据需要将多个复选框设置相同的name

<input type="checkbox" name="skills" value="javascript" />
<input type="checkbox" name="skills" value="lua" />

上传文件

<input type="file" multiple /> //添加multiple则课选择多个文件

看不见的输入<input type="hidden" />
多行文本输入，添加样式style="resize:none;"可禁用拖动变化大小<textarea style="resize:none;"></textarea>
下拉选择框，结合option标签使用

<select>
    <option value="">请选择城市</option>
    <option value="Zhuhai">珠海</option>
    <option value="Guangzhou">广州</option>
</select>

事件

onchange 当用户输入改变值的时候触发
onfocus 当用户选择控件获得焦点时触发
onblur 当用户选择控件失去焦点时触发

let userInput = document.querySelector("#userInput")
userInput.onchange = () => console.log("值改变了")
userInput.onfocus = () => console.log("我获得了焦点")
userInput.onblur = () => console.log("我失去了焦点")

一般不监听input的click事件