网站设计旅行社新闻内容,裕华建设集团网站,跨境电商手机app平台,高端型网站文章目录 img 标签src 属性alt 属性title 属性width/height 属性border 属性 超链接标签#xff1a;a表格标签合并单元格 img 标签
img 是一个单标签
src 属性
img 标签必须搭配 src 使用#xff08;指定图片的路径#xff09; 相对路径#xff1a; ./xxx.png./img/xxx.… 文章目录 img 标签src 属性alt 属性title 属性width/height 属性border 属性 超链接标签a表格标签合并单元格 img 标签
img 是一个单标签
src 属性
img 标签必须搭配 src 使用指定图片的路径 相对路径 ./xxx.png./img/xxx.png../xxx.png 绝对路径 图片路径网络上的图片资源
htmlhead图片插入演示/headbodypstrong相对路径下插入图片/strong在本目录下img srccloud.pngbr/在本目录文件夹中img srcimg/cloud.pngbr/strong绝对路径下插入图片/strongbr/输入图片路径img srcD://My Computer/cloud.pngbr/网络上的图片资源img srchttps://stricky-1319251483.cos.ap-chongqing.myqcloud.com/stricky/pic/202409111630616.png/p/body
/htmlalt 属性
当文本不能正确显示的时候就会显示一个赋给 alt 用来替换的文字alt 后面的文案是只有当图片加载出错的时候才会显示如果图片加载成功则不会显示
htmlheadtitle这是 img 其他属性演示/title/headbodyp白云图片img srccloud.pnggg alt白云图片加载出现问题/p/body
/htmltitle 属性
提示文本鼠标放到图片上就会有提示
htmlheadtitle这是 img 其他属性演示/title/headbodyp白云图片img srccloud.png alt白云图片加载出现问题 title这是一张美丽的白云图片/p/body
/htmlwidth/height 属性
控制宽度高度高度和宽度一般改一个就行另外一个会等比例缩放否则图片就会失衡
htmlheadtitle这是 img 其他属性演示/title/headbodyp白云图片img srccloud.png alt白云图片加载出现问题 title这是一张美丽的白云图片 wight200px/p/body
/htmlpx 代表像素就是图片上许多的亮点。像素越大图片就越大
border 属性
加上边框参数是宽度的像素但是一般是使用 CSS 来设定
htmlheadtitle这是 img 其他属性演示/title/headbodyp白云图片img srccloud.png alt白云图片加载出现问题 title这是一张美丽的白云图片 wight200px border10px/p/body
/htmlborder 后面跟边框的大小 标签后面的属性顺序是没有要求的顺序对显示结果没有影响每个属性之间用 空格 或者 回车 隔开都可以value 都写在 “” 里面 超链接标签a
href必须具备表示点击后会跳转到哪个页面target代表打开方式默认是 _self直接在原页面打开新页面如果是 _blank则用新的标签页打开
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlehref 演示/title
/head
bodya hrefhttps://www.baidu.com/点击跳转百度/aa hrefhttps://www.baidu.com/img srcbaidu.png border5px/aa href#跳转到当前页面/a
/body
/html# 是一个占位符仍然是当前地址前两个都是直接跳转到百度第三个仍然是留在当前网页
表格标签
table 标签表示整个表格tr表示表格的一行td表示一个单元格th表示表头单元格会居中加粗thead表格的头部区域注意和 th 区分范围是比 th 要大的tbody表格得到主体区域
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable border1px width800 height400 cellspacing0 cellpadding50 aligncentertrth姓名/thth性别/thth年龄/th/trtrtd张三/tdtd男/tdtd18/td/trtrtd李四/tdtd男/tdtd19/td/trtrtd王五/tdtd女/tdtd18/td/tr/table
/body
/htmlborder控制边框粗细width、width控制表格大小cellspacing控制单元格之间的距离默认是 2 像素cellpadding控制内容距离边框的距离默认是 1 像素align控制表格相对于周围元素的对齐方式 表格标签有一些属性可以用于设置大小边框等但是一般使用 CSS 方式来设置。这些属性都要放到 table 标签中 align 是表格相对于周围元素的对齐方式aligncenter不是内部元素的对齐方式border 表示边框1 表示有边框数字越大边框越粗 表示没边框.cellpadding内容距离边框的距离默认 1 像素cellspacing单元格之间的距离默认为 2 像素width / height设置尺寸 注意 这几个属性 vscode 都提示不出来 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable border1px width800 height400 cellspacing0 cellpadding50 aligncentertheadtrth姓名/thth性别/thth年龄/th/tr/theadtbodytrtd张三/tdtd男/tdtd18/td/trtrtd李四/tdtd男/tdtd19/td/trtrtd王五/tdtd女/tdtd18/td/tr/tbody/table
/body
/html一般把表头的信息放在 thead 中表格信息放在 tbody 中
合并单元格
将需要合并的单元格数量直接加在 td 后面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable border1px width800 height400 cellspacing0 cellpadding50 aligncentertheadtrth姓名/thth性别/thth年龄/th/tr/theadtbodytrtd张三/tdtd rowspan2男/tdtd18/td/trtrtd李四/td!-- td男/td --td19/td/trtrtd colspan2王五/女/td!-- td女/td --td18/td/tr/tbody/table
/body
/html合并列就用 rowspan合并行就用 colspan后面的数字就是要和并的单元格数量合并后被合并的单元格附近的单元格会被挤开要将其给注释掉
