HTML常用标签

182 阅读5分钟

这一章来诉说我们那些我们在HTML中最常用的标签

  • 链接a
    元素 (或锚元素) 创建一个到其他网页,文件,同一页面内的位置,电子邮件地址或任何其他URL的超链接。
    我们通常称为a标签

它的常用属性有

href这表示链接目标的URL或URL片段
target该属性指定在何处显示链接的资源
download此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
alt点击的提示

href这表示链接目标的URL或URL片段
这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号(#),它指定一个内部目标在当前文档中的位置(ID)开头的名字。URL不限于网页(HTTP)的文件。URL可能使用浏览器所支持的任何协议。例如,文件,FTP,大多数用户代理mailto工作。

<a href="http://www.baidu.com/"></a>	//用于跳转到对应的网址
//第一种用法
---------------------------------------------------------------------
<div id="load"></div>
<a href="#属性">跳过来</a>  //给标签添加id可以点击链接后跳转到网页对应位置
第二种用法
---------------------------------------------------------------------
<a href="load.html"></a> //可以跳转到你目录的其他文件中
第三种用法

target该属性指定在何处显示链接的资源
_self: 当前页面加载,即当前的响应到同一HTML 4 frame(或HTML5浏览上下文)。此值是默认的,如果没有指定属性的话。
_blank: 新窗口打开,即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
_parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。

使用方法
<a href="http://www.baidu.com/" target="_self"></a>
<a href="http://www.baidu.com/" target="_blank"></a>
<a href="http://www.baidu.com/" target="_parent"></a>

alt点击的提示

<a href="http://www.baidu.com/" alt="这是百度的链接"></a>  //可以防止链接失效,给用户一个提示

  • 链接img
    作用发出get请求展示一张图片
    属性alt/height/width/src
    事件onload/onerror
    响应式max-width:100%
<img src="123.png" style="width:100px;height=50px;"" alt="这是张狗子的图片"/>  
//src是图片的路径,alt是图片的注释,width设置宽度,height设置高度
  • 表格table
结构部分
<table>
	<thead>//头部
    	<tr>    //这是行
        	</th>   //这是列,th代表表格的表头
            </th>
        </tr>
    </thead>
    <tbody> //身体主体部分
    	<tr>   //这是行
        	<td>  //表格的内容部分
            </td>
        </tr>
    </tbody>	
    <tfoot></tfoot> //脚部
</table>

可以使用的属性有表格boder-collapse、boder-spacing

	boder-collapse:5px; //控制boder是否合并
	boder-spacing:5px; //控制boder是否产生间隔值
    
  • 表单form用于提交数据
    属性有action 用于提交到那个位置/autocomplete/method 选择POST和GET提交/target

  • 输入框input

Type	描述	基础例子	Spec
button	没有默认行为的按钮,上面显示 value 属性的值,默认为空。		
checkbox	复选框,可设为选中或未选中。		
color	用于指定颜色的控件;在支持的浏览器中,激活时会打开取色器。		
date	输入日期的控件(年、月、日,不包括时间)。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。		  
datetime-local	输入日期和时间的控件,不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。		
email	编辑邮箱地址的区域。类似 text 输入,但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。		
file	让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。		
hidden	不显示的控件,其值仍会提交到服务器。举个例子,右边就是一个隐形的控件。		
image	带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失,alt 属性就会显示。		
month	输入年和月的控件,没有时区。		
number	用于输入数字的控件。如果支持的话,会显示滚动按钮并提供缺省验证(即只能输入数字)。拥有动态键盘的设备上会显示数字键盘。		
password	单行的文本区域,其值会被遮盖。如果站点不安全,会警告用户。		
radio	单选按钮,允许在多个拥有相同 name 值的选项中选中其中一个。		
range	此控件用于输入不需要精确的数字。控件是一个范围组件,默认值为正中间的值。同时使用htmlattrdefmin   和 htmlattrdefmax来规定值的范围。		  
reset	此按钮将表单的所有内容重置为默认值。不推荐。		
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮,用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。		
submit	用于提交表单的按钮。		
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。		
text	默认值。单行的文本区域,输入中的换行会被自动去除。		
time	用于输入时间的控件,不包括时区。		
url	
用于输入 URL 的控件。类似 text 输入,但有验证参数,在支持动态键盘的设备上有相应的键盘。
week	用于输入以年和周数组成的日期,不带时区。