HTML知识基础语法篇(8)

最新推荐文章于 2022-02-10 20:51:53 发布

KeepTec

最新推荐文章于 2022-02-10 20:51:53 发布

阅读量792

点赞数 2

CC 4.0 BY-SA版权

分类专栏：编程 HTML5 前端文章标签： html html5

本文链接：https://blog.youkuaiyun.com/BlankPaper1/article/details/106059609

编程同时被 3 个专栏收录

14 篇文章

订阅专栏

HTML5

12 篇文章

订阅专栏

前端

12 篇文章

订阅专栏

这篇博客介绍了HTML中关于主体内部标签的详细知识，包括脚本链接、图像的使用和属性设置，如高度、宽度、边框、对齐方式、提示文字和替换文字。还讲解了如何创建图像超链接以及设置图像热区链接。此外，文章还提及了表格的基本构成，如table、tr和td，以及caption、th、width、align和border等属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML基础知识

第八篇主体内部标签

30∼34

脚本链接
语法：
<a href=“JavaScript:…”>文字链接</a>
在JavaScript:后面编写的就是具体的脚本
实例：
<a href=“javascript:window.close()”>关闭窗口</a>
拓展：
空链接href="#"
语法：
<a href="#">…</a>
添加图像——<img>
语法：
<img src=“图像文件的地址”>
设置图像属性
[1].图像高度——height
默认情况下改变高度时其宽度也会进行等比例调整
语法：
<img src=“图形文件地址” heigth=“图像高度”>
图像高度单位是像素
[2].图像宽度——width
语法：
<img src=“图像文件地址” width=“图像宽度”>
可以同时设置这两个属性，如果不等比例图片会变形
[3].图像边框——>border
默认情况下，图片没有边框
语法：
<img src=“图像文件地址” border=“图像边框的宽度”>
[4].图像水平间距——hspace
如果不使用
进行换行显示，图像会紧跟在文字后面，但是可以通过hspace进行调整
语法：
<img src=“图像地址” hspace=“水平间距”>
[5].图像垂直间距——vspace
语法：
<img src=“图像地址” vspace=“垂直间距”>
[6].图像相对文字基准线的对齐方式——align
图像和文字之间的排列通过align参数来调整，图像的绝对对齐方式与相对文字的对齐方式不同
绝对对齐方式：左对齐，右对齐，和居中对齐
相对对齐方式：（相对文字对齐方式）则是指图像与一行文字的相对位置
语法：
<img src=“图像的地址” align=“相对文字的对齐方式”>
align值：
top：把图像的顶部和同行的最高部分对齐（可能是文本顶部，也可能是图像顶部）
middle：把图像的中部和行的中部对齐（通常是文本行的基线，并不是实际的行的中部）
bottom：把图像的底部和同行文本的底部对齐
texttop：把图像的顶部和同行中最高的文本的顶部对齐
absmiddle：把图像的中部和同行中最大项的中部对齐
baseline：把图像的底部和文本的基线对齐
absbottom：把图像的底部和同行中的最低项对齐
left：使图像和左边界对齐（文本环绕图像）
right：使图像和右边界对齐（文本环绕图像）
示例：

       <img src="/图片/1.jpg" align="bottom">
       <img src="/图片/2.jpg" align="middle">
       <img src="/图片/3.jpg" align="top">

这里只是部分代码

添加图像——<img>（图像属性续）
[7].图像的提示文字——title
当浏览网页时如果图片下载完成，把鼠标放在图片上，一会就回显示图片的描述信息
语法：
<img src=“图像地址” title=“提示文字内容”>
[8].图像替换文字——alt
当图片无法加载时，可以通过alt属性在图片的位置显示定义的替换文字
语法：
<img src=“图像地址” alt=“替换文字内容”>
图像超链接
语法：
<a href=“链接地址” target=“目标窗口的打开方式”><img src=“图像文件地址”>
图像标记中可以添加属性
设置图像热区链接
将图像划分成不同的区域进行链接设置，而包含热区的图像也可以称为映射图像
首先需要在图像文件中设置映射图像名，在图像的属性中使用<usemap>标记添加图像要引用的映射图像名称
语法：
<img src=“图像地址” usemap=“映射图像名称”>
然后需要定义热区图像以及热区链接属性
<map name=“映射图像名称”>
<area shape=“热区形状” coords=“热区坐标” href=“链接地址”/>
</map>
shape：
rect：矩形
circle：圆形
poly：多边形
coords：
rect：包含四个参数：left，top，right，bottom就是矩形的对角
circle：包含三个参数：center-x，center-y，tadius就是圆形值和半径
poly：与多边形有关
coords参数需要按照顺序取各点x，y，可以是顺时针也可以是逆时针
可添加打开新窗口的方式
表格的基本构成——table，tr，td
<table></table>：表格标记
<tr></tr>：行标记
<td></td>：设置所使用的脚本语言，代替了language
在表格中一般通过3个标记来构建，分别是表格标记，行标记，单元格标记
表格标记：<table> </table>
表格的其他各属性都要在表格的开始标记<table>和表格的结束标记</table>直接才有效
行标记：<tr></tr>
单元格标记：<td></td>
[1].设置表格标题——caption
语法：
<caption></caption>
在表格上方添加无边框的行标题行，默认情况下居中
[2].表格头——th
用来表示这一行的类别，表格的表头内容加粗显示，语法与<td>一样
[3].设置表格宽度——width
默认情况下，表格的宽度是根据内容自动调整，也可以手动设置
语法：
<table width=“表格宽度”>
表格宽度可以是像素值，也可以是浏览器的百分比
表格高度一样
[4].设置表格对齐方式——align
表格对齐方式用于设置调整整个表格在网页中的位置
语法：
<table align=“表格对齐方式”>
align值：
left：左对齐
center：居中
right：右对齐
[5].设置表格边框宽度———border
默认情况下，表格边框不显示，为了使表格更加清晰，可以使用border参数设置边框宽度
语法：
<table border=“边框宽度”>
单位是像素