a 标签的用法
属性
- href: 链接, 可以是网址, 比如
http://google.com
或者是http://google.com
, 如果//google.com
的话,就默认使用最高级别的协议.
也可以是file://XX/XX
, 表示的访问文件系统中的文件. 还可以是伪协议, 最常用的如javascript:
, 这里就表示执行一段javascript代码, 如果想要点击不跳转的a标签可以如下:html <a href="javascript:;">点击我不会跳转</a> <a href="#;">点击虽然我不会跳转,但是可能发生滚动情况</a>
还有其他的伪协议比如mailto:xxx@126.com
会启动系统默认邮件程序写新邮件,地址就是给指定的地址邮箱,tel: (电话)
,在移动端可以呼出电话界面,拨打指定的电话.
在移动端页面也会有用来调用指定的程序的链接
target:
target是指执行链接跳转操作的对象,分为内置的4个值和一个自定义值
内置值的情况:
1. _blank: 新窗口打开链接
2. _top:最顶层的窗口打开链接
3. _parent:父级的窗口打开链接
4. _self: 默认情况,当前窗口打开链接
自定义值: 可以是为窗口(window)定义的名字,或者iframe的名字.需要注意是,如果target的值不是现有的窗口name属性值,那么新打开窗口的name值就是target的值.比如<a href="//www.baidu.com" target="xxx">百度</a>
如果有name为xxx的窗口或者iframe就使用,没有则创建一个name为xxx的窗口
img 标签的用法
属性
src: 表示嵌入的图片的文件路径
alt: 一段对图片的描述
width/height: 图片的设置的宽度和高度,如果不设置的话,会按照原图大小显示,如果只设置了width,那么height会按照壁垒显示
事件
onload: 图片加载完成后触发的事件
onerror: 图片请求发生错误时触发的事件, 常见的用法是,给src属性指定一个默认的图片
响应式
在手机上, 设置 max-width:100%
,图片宽度不会超过父级宽度,并且宽高按原比例缩放显示,这样就达到了响应式图片的效果
img是可替换元素
可替换元素还有表单元素,如input, textarea, object等标签
table用法
table标签是和一系列标签组合使用的. 关联的标签有tr
、td
、th
、thead
、tbody
、tfoot
其中tr
表示行,th
表示表格内的表头单元格,td
表示表格单元格。即便没有tbody
标签,浏览器也会帮我们补全他。thead
和tfoot
标签,没有绝对的顺序,会按照标签顺序显示。
table相关样式
table{
table-layout: auto;// 默认值, 表格及单元格的宽度取决于其包含的内容
table-layout: fixed;// 表格宽度和列宽度设定
border-collapse: collapse; // 表单单元格之间border是否合并
border-spacing: 2px; // 相邻单元格边框之间的距离
}
感想
浏览器对于html标签的兼容性是很大。标签闭合写的不规范,文档声明兼容多个版本,遇到不在规范中的标签也不会导致整个文档无法使用。
标签的作用注意体现在语义上,正确使用标签可以使得文档可读性更好,更有力于seo。