HTML常用标签

175 阅读3分钟

<a>标签的用法

<a>元素可通过它的href属性创建通向其他网页,文件,同一页面内其他位置,电子邮件电子,或其他URL的超链接。

<a>元素的属性

  1. 全局属性:class,id,hidden,style,tabindex,title,contenteditable,data- 等。

  2. href属性:hypertext reference,href属性的值可以为网址,路径,伪协议,id等。

    • http:// 网址
    • https:// 网址
    • // 网址
    • a/b/c
    • /a/b/c
    • javascript: 代码
    • maito:邮箱地址
    • tel:手机号
    • id href=#xxx 跳转到页面内id为xxx的位置(href=“#top”或href=# 跳转到页面顶部)
    • file:路径
    • ftp:地址
  3. target属性:该属性指定在何处显示链接的资源。取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。 以及四个特殊值:_self,_top,_blank,_parent。当target="xxx"时,若有窗口或iframe的name值为xxx,则打开该窗口或iframe,若不存在xxx窗口,则新建一个name值为xxx的窗口。

<table>元素

table元素表示表格数据,允许包含<caption>,<colgroup>,<thead>,<tbody>,<tfoot>这几个子元素。<tbody>中包含<tr>,<tr>中包含<th><td>

相关的重要样式有:table-layout,可取值为auto或fixed,决定单元格宽度分配方式;border-collapse:collapse 单元格紧密排列;boerder-spacing:p 单元格距离为0;

<img>元素

<img>元素会发出一个GET请求,并展示一张图片。

src属性:此属性为必须属性,值可以为网络地址,本地路径,相对路径或绝对路径二者均可。

alt属性:在图片加载失败后显示alt属性的值。

height/width属性:设置图片大小,只写一个,另一个会自适应。设置两个和原图片比例不符的值,会导致图片变形。在适配多设备时,加上max-width:100%样式。

有两个关于img元素的重要事件:onload/onerror,用来监听图片加载状态。当图片加载失败时,可由此设置补救行为。

<form>元素

<form>元素发出一个GET或POST请求,向 Web 服务器提交信息,并刷新页面。

<form>元素包含输入和提交按钮。

<form>中的提交按钮可以为<input type="submit" value="输入按钮的显示名”/><button type="submit">按钮名</button><form>内必须有一个type=“submit”的按钮。两个按钮的区别是:button可以自由在按钮名中加入标签和样式。

输入标签有<input>,<select><option value=“”>,<textarea><label>等。<label for “id”>xxx</label>点击时可以用于激活对应的<input name=“‘’ id=“”>输入框,配合使用;点击label时会自动跳转到该id对应的输入表单;<textarea name=“” cols=“” rows=“” placeholder=“xxx”></textarea>可以用于输入多行内容;和<input>有所区别,默认值需写在标签中间位置,<input>默认值为value属性的值;<textarea>可设置resize:none样式,避免文本输入框拖动缩放。<select name=”” id=””><option value=””></option></select>多个option选一个的框;<option>的value属性的值为真正提交的值;标签之间的值为显示值;加上selected属性的<option>为默认项;

<input>的属性有:type,name(必须,否则input的内容无法提交给服务器),placeholder(提示用户输入内容),autofocus(输入框处于激活,得到焦点状态),disabled(输入框被禁止输入),value=“”(输入框的默认值,没有填写时默认值为空);required(输入验证),tabindex。

<input>的type属性值可以为:text单行文本,password密码,checkbox复数选择框,radio单选框,hidden,button,submit,reset清空重置,email,file文件,number,search,tel,date,time,range,url等。

<input>加require属性后,会自动验证,依赖HTML5自带的验证器。<input>的常用事件有:onchange/onfocus/onblur。

注意:

  • 一般不监听input元素的click事件
  • form内的input元素必须有name属性
  • form内需要放一个type=submit的提交才能触发submit事件