今天学习了HTML中的一些常用标签,HTML中常用的标签有a标签、table标签、img标签、form标签、input标签、现已不推荐使用的iframe标签等,这篇文章主要介绍一下a标签、table标签、img标签的作用及用法。
1.a标签的用法
a标签的常用属性有href、target、rel、download等,它的作用有跳转到外部页面、跳转到内部锚点、跳转到邮箱或电话等,学习a标签需要重点了解其href和target属性的取值及作用。
href属性:该属性取值有四种类型。
(1)第一种类型取值为网址链接,作用是跳转到外部页面,可以使用http、https协议类型,也可以不指定使用什么网络传输协议,那么此时浏览器就会自动去尝试使用哪种协议直到成功跳转到页面,例如以谷歌为例,就可以将href值取为“//google.com”。
(2)第二种类型取值为路径类,作用是跳转到内部页面,既可以是绝对路径,也可以是相对路径,例如取值为“/a/b/c”、“a/b/c”、“a”、“./a”,值得注意的是,在使用http协议访问页面的时候,其根目录就是开启服务器的那个目录,而不是硬盘上的根目录。
(3)第三种类型取值为一些伪协议,作用有实现JavaScript的代码、跳转到邮箱、跳转到电话。若要实现JavaScript,则需要取值为“javascript:代码;”,那么当点击a标签的时候,就可以执行其中的“代码”,但是这种类型常用的作用是来满足当点击a标签的时候,页面没有任何反应的需求,页面既不会跳转,也不会有任何刷新,这种情况下不能设置有任何“代码”,即将href设置为“javascript:;”;若要实现跳转到邮箱,需要将href设值为“mailto:邮箱地址”,那么页面就会跳转到发邮箱的页面;若要实现跳转到电话,需要将href设值为“tel:手机号”,那么页面就会跳转到拨号处,在手机上特别适用。
(4)第三种类型取值为“#xxx”,xxx是某个元素的id值,这样取值的作用是跳转到当前页面中id值为xxx的元素的位置。
target属性:该属性取值有五种。(1)_blank,表示点击该a标签后新的内容在另一个窗口打开。(2)_self,表示点击该a标签后新的内容在当前窗口打开。(3)_top,表示当页面中有多个框架(即iframe)的时候,点击该a标签后新的内容在最外层的页面打开。(4)_parent,表示当页面中有多个框架(即iframe)的时候,点击该a标签后新的内容在其上一个框架(父框架)页面中打开。(5)自定义内容,表示在窗口名为该自定义内容的窗口中打开,当第一次点击该a标签,会在一个新的窗口中打开,同时将该窗口命名为自定义的内容,当以后再点击该a标签的时候就会自动在这个窗口打开。
2.table标签的用法
见名知意,该标签的作用就是创建表格,相关的标签有thead、tbody、tfoot、tr、th、td,thead表示表格的头部,tbody表示表格的主体内容,tfoot表示表格的尾部,tr表示表格的一行,th表示表格的标题,td表示表格的数据,例如要创建一个学生成绩表:
代码:
<table> <thead> <tr> <th></th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> </thead> <tbody> <tr> <th>小红</th> <td>45</td> <td>45</td> <td>45</td> </tr> <tr> <th>小明</th> <td>89</td> <td>89</td> <td>89</td> </tr> <tr> <th>小丽</th> <td>90</td> <td>90</td> <td>90</td> </tr> </tbody> <tfoot> <th>总分</th> <td>87</td> <td>87</td> <td>87</td> </tfoot> </table>效果:
相关的样式:table-layout;table-collapse;table-spacing
3.img标签的用法
作用:该标签的作用是发出GET请求,展示一张图片。
属性:该标签具有alt、height、width、src等属性,src属性用来指定图片的保存路径,指定后浏览器就会根据该路径寻找图片;alt属性用来设置当图片由于一些原因加载不出来时展现给浏览者的内容;height和width属性用来分别设置图片的高度和宽度,若只设置了宽度,那么高度就会自适应,同样若只设置了高度,宽度就会自适应。
max-width:考虑到响应式设计的时候,常常需要用到max-width,例如若设置图片的max-width值为100%,那么图片无论在多么小的屏幕下也能展示完全。
事件:img标签支持的事件有onload、onerror等,onload表示图片加载成功事件,onerror表示图片加载失败事件。
学习HTML其实挺简单的,虽然整个HTML包含很多标签,但是初学者并不需要花费太多的时间去逐个记忆,因为很多标签也是不常用的,我们只需要记住那些常用的标签,而对于不常用的标签,我们需要做的就是在脑海中留一个印象,等到需要用的时候再去详细查阅相关用法。