HTML基础标签用法

185 阅读3分钟

a 标签 (anchor锚点)

1. href属性:
href 里面可以传递很多种链接

1 传递http 如 google.com
2 传递HTTPS 如 google.com
3 传递 链接 可以不用加前缀,因为会自动补全,建议使用这种如// google.com
4 传递页面位置,href ="#xyz"可以同一个页面进行跳转 跳转带有id选择器的位置
5 可以传递具体的路径,比如相对路径或者说绝对路径
6 也可以传递伪协议,javascript:;只能是它,填写其他的无论是不填还是填写#都会导致刷新页面
7 mailto: 邮箱 点击后可以直接跳转到邮箱页面发邮件
8 tel:手机号 可以传递手机号,传递后后可以直接拨打电话

2. target 属性

1 _blank 在新的标签页打开
2 _self 在当前页面打开链接
3 _top 在顶级页面打开,这种用法比较少,一般都是当页面出现其他页的时候使用
4 _parent 在父页面打开,跟top类似
5 window.name ,可以自己设置一个名称的链接,如果有就用,
没有就创建一个,然后所有的链接都会通过这个名称的页面来打开
6 iframe 的name。

3. download属性
添加此属性的话,点击选项会自动进行下载操作,不会进行跳转,不是打开页面,而是下载页面

2. table 标签

table标签中只能放以下标签
thead
tbody
tfoot
这三类可放可不放,不加的话浏览器会自动添加tbody标签,加上之后更具有语义化
tr
th
td
这三个是表格的构成
tr是行; th用作第一个行的每列,td就是列,
先有行再有列,

CSS相关属性
table-layout 表格的布局,很少使用了
border-spaceing表格距离
border-collapse:collapse,这个属性把表格中间的边框进行了整合,使得更加符合我们看到的标签

3. img 标签(image)

作用:发出get请求,来展示一张图片

1.src属性
属性指定了图片的来源,可以是相对或者绝对路径,也可以来源网络图片

2. alt属性 设置图片如果无法正常展示时的替代性文字

3 width height属性 可以直接在img中设置图片尺寸

注:为了实现响应式布局,可以设置max-width= 100%,来限制最大的宽度。

2 相关的事件(js事件)
onload 事件
用来检查图片加载成功时的操作
onerror
用来检查图片加载错误时的操作

**3 响应式设置 ** 可以给img设置最大宽高,来自适应屏幕,进行响应式设计;
img{ max-width :100%}
这样图片会跟着屏幕尺寸大小而调整

学习的一些思考

1 通过学习HTML中的基本标签,发现,常用标签中每个标签都有很多属性,但是这些属性并不一定要全部记住,因为28原则,常用的标签属性就那几个,我们要把他们熟练掌握,其他的有个大概印象,然后在学习的过程中去积累,远比自己死记硬背要好的多。