HTML常用标签

hlccare
324 阅读7分钟

[toc]

a标签

a标签，a为anchor，指锚点，用于创建超链接，可指向其他网页、文件、同一页面的其他位置（网页的内部锚点）、电子邮件地址或其他URL。常用属性有：href、target、download、rel。其中download用于表示直接下载所一项的网页而非导航，rel用于标识目标对象与链接对象的关系。

a标签的href属性取值

  • 网址 形如<a href='https://baidu.com'>超链接</a>,在前端页面点击超链接会跳转至百度页面，网址可写成三种形式：https://baidu.com、http://baidu,com、//baidu.com。

当使用第三种无协议网址时，点击跳转时，浏览器返回的响应头会给一个location继续跳转参数，此时浏览器会继续跳转到location地址。无协议地址的好处是自动匹配所使用的协议，以防止协议不同而出错。

  • 路径 形如<a href='/a/b/c.html'>超链接</a>，为文件路径，可以是绝对路径或相对路径a/b/c.html、./a/b/c.html。

使用绝对路径的风险点：在使用双击打开html文档时，该绝对路径会基于系统根目录，而非http服务的运行的根目录，这会导致url与预期不符。

为避免以上情况，应使用相对路径或坚决不要双击打开html文件进行调试，而应该使用http服务打开页面。安装http-server，yarn\npm global add http-server，再使用http-server -c-1在本地开启http服务，注意应加上html的路径，或者安装parcelyarn\npm global add parcel,使用parcel 文件名的方式打开。

  • 伪协议 形如<a href='javascript:;>超链接</a>，点击此超链接后页面不会执行任何动作，若其中有添加js代码，则代码会被执行。 上述写法与href='#'、href=''的区别是上述写法不会执行任何动作，而使用#号是，页面会跳转至页面顶部，href值为空会刷新页面。
  • id 形如<a href='#xxx'>超链接</a>，点击此超链接后页面会跳转至id为xxx的元素位置。
  • 邮箱/电话 形如<a href='mailto:xxx@gmail.com'>超链接</a>，<a href='tel:10086'>超链接</a>。

a标签的target属性取值

  • _blank 形如<a href='https://baidu.com' target='_blank'>超链接</a>，点击后，会在新标签页打开链接。
  • _self 形如<a href='https://baidu.com' target-'_self'>超链接</a>，点击后，会在当前页面打开链接。
  • _top 在页面内嵌了iframe的情况下，iframe所指向的页面中含有<a href='https://baidu.com' target='_top'>超链接</a>，点击该超链接，会在最顶层的窗口打开链接。
  • _parent 在页面内嵌了iframe的情况下，iframe所指向的页面中含有<a href='https://baidu.com' target='_top'>超链接</a>，点击该超链接，会在上传的窗口打开链接。
  • 自命名窗口 形如<a href='https://baidu.com' target='xxx'>超链接</a>，点击后，会在新标签页打开链接，此时该标签页窗口的名称为xxx，可通过在该窗口的控制台中使用window.name进行查看。
  • iframe名称 为iframe添加name属性，a标签target可指定点击后在指定iframe打开链接
<a href="https://google.com" target="xxx">google</a>    <!--点击后会在第一个iframe窗口打开google-->
<a href="https://baidu.com" target="yyy">baidu</a>    <!--点击后会在第二个iframe窗口打开baidu-->
<iframe src=""name="xxx"></iframe>
<iframe src=""name="yyy"></iframe>

img标签

HTML 中的 img 标签主要是将一份图像嵌入文档。它有以下几个常用属性：alt、height、width、src，以及常用的onload、onerror事件。

img标签常用属性

  • alt alt表示alternative，作为图片加载失败时的展示信息。
  • src src表示source，可以为网络地址、相对路径或绝对路径。页面加载时会发出一条get请求来获取图片。
  • width / height 分别表示宽度/高度。推荐只设置其中一个，用以保持图片原有比例，若同时指定可能会对图片进行缩放。
  • 响应式 此处仅指图片在移动端的正常展示，可以通过为img设置style样式max-width: 100%.

img标签常用时间

  • onload 在图片加载成功后会调用onload()方法。形如<img src='123.png' id='xxx'>，可通过使用jsxxx.onload=function(){console.log('图片加载成功');}调用该事件。仅供测试时使用，实际请使用getElementById方法。
  • onerrorf 在图片加载失败后会调用onerror()方法。通过该方法可在图片加载失败时,对img标签的src属性重新赋值，一般展示提示图片加载失败的图片。可通过使用jsxxx.error=function(){xxx.src='404.jpg';}加载404图片。

table标签

table标签下包含较多标签,可按层次分：第一层为、、，分别表示表格的头部、主题、底部，这三者并不是必须的，浏览器会自动纠错将tr、td标签添加在tbody中。第二层为、、，tr表示表格的一行，th表示table head cell，为表格头部单元格，td表示table data cell,为表格数据单元格，tr、th都应在tr中。

table相关样式

table { border-collapse:collapse; border-spacing:0 }
  • table-layout 自动定制列宽（值为auto则根据内容宽度，值为fixed则列宽等宽）
  • table-collapse 控制单元格是否合并
  • border-spacing 控制表格单元格间距

form标签

from表示表单，用于向服务器提交信息。

form相关属性

  • action action属性用于指定提交时请求的地址。如<form action="//baidu.com"><input type="text"><input type="submit"></form>
  • method method属性用于指定提交时的请求方法，默认为GET请求，可使用method='POST指定使用POST请求。
  • target target指定提交后相应数据的窗口，不指定则为当前窗口，具体值可参考a标签的target属性。
  • autocomplete autocomplete表示是否自动填充，有on/off两个值。允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

一些与form相关的

  • 一个表单中必须有一个type='submit'的按钮用于提交，可以是input或者是button，其中button默认类型为submit。
  • 类型为submit的input与button的区别：input为自闭合标签，无法在其中添加其他内容，而button中可添加其他内容，例如标签img，<button type="submit"><strong>提交</strong>button>

input标签

input 标签用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据，它的主要作用就是让用户输入内容。

input基本属性

标签 描述 标签 描述
<input type = "text" required>默认类型 + html5的验证器<input type = "date">输入日期的控件
<input type = "button">按钮<input type = "hidden">特殊使用的隐藏输入框
<input type = "submit">提交按钮<input type = "color">用于指定颜色的控件
<input type = "checkbox">多选框，相同的name属性为一组<input type = "password">值被遮盖的单行文本字段
<input type = "radio">

单选框，相同的name属性为一组

<input type = "e-mail">编辑 e-mail 的字段
<input type = "file">点击可上传文件，multiple多文件<input type = "number">输入浮点数的控件
<input type = "img">图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。
    
<input name= "erha">表单内的input要有name属性<input autofocus type = "text">自动聚焦
<input type="checkbox" checked>表示已经选中状态<input placeholder= "请输入">输入提示
<input value="123">输入框的值<input type = "button" disabled>禁用
    
<select><option value="">-请选择-<option><option value="1">星期一</option><option value="2">星期二</option></select>

<textarea style="resize:none;width:50%;height:300px"></textarea>
### input常用事件
事件描述
onfocus()当input 获取到焦点时触发
onblur()当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空
onchange() 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。
onclick()主要是用于 input type=button，input 作为一个按钮使用时的鼠标点击事件
onselect()当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中
oninput()当input的value值发生变化时就会触发，（与onchange的区别是不用等到失去焦点就可以触发了）
onkeydown()

按下按键时的事件触发

onkeyup()当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件--相当于一个按键，两个事件，没怎么用过
以上事件可以直接放到input的属性里，例如：<input type="text" οnfοcus="a();" οnblur="b()" οnchange="c();" οnkeydοwn="d();" />，
也可以通过js给input dom元素添加相应的事件，如：document.getElementByTagName('input').onfocus = function(){};
avatar
文章
阅读
粉丝