写代码啦
HTML常用标签
回复数(0) 浏览数(17)
{{topic.upvote_count || 0}} 编辑 回复

a 标签的用法

属性

  1. 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标签是和一系列标签组合使用的. 关联的标签有trtdththeadtbodytfoot

其中tr表示行,th表示表格内的表头单元格,td表示表格单元格。即便没有tbody标签,浏览器也会帮我们补全他。theadtfoot标签,没有绝对的顺序,会按照标签顺序显示。

table相关样式

table{
     table-layout: auto;// 默认值, 表格及单元格的宽度取决于其包含的内容
     table-layout: fixed;// 表格宽度和列宽度设定
     border-collapse: collapse; // 表单单元格之间border是否合并
     border-spacing: 2px; // 相邻单元格边框之间的距离
}

感想

浏览器对于html标签的兼容性是很大。标签闭合写的不规范,文档声明兼容多个版本,遇到不在规范中的标签也不会导致整个文档无法使用。
标签的作用注意体现在语义上,正确使用标签可以使得文档可读性更好,更有力于seo。

{{topic.upvote_count || 0}}

a 标签的用法

属性

  1. 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标签是和一系列标签组合使用的. 关联的标签有trtdththeadtbodytfoot

其中tr表示行,th表示表格内的表头单元格,td表示表格单元格。即便没有tbody标签,浏览器也会帮我们补全他。theadtfoot标签,没有绝对的顺序,会按照标签顺序显示。

table相关样式

table{
     table-layout: auto;// 默认值, 表格及单元格的宽度取决于其包含的内容
     table-layout: fixed;// 表格宽度和列宽度设定
     border-collapse: collapse; // 表单单元格之间border是否合并
     border-spacing: 2px; // 相邻单元格边框之间的距离
}

感想

浏览器对于html标签的兼容性是很大。标签闭合写的不规范,文档声明兼容多个版本,遇到不在规范中的标签也不会导致整个文档无法使用。
标签的作用注意体现在语义上,正确使用标签可以使得文档可读性更好,更有力于seo。

17
回复 编辑