继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

html基础02-图片标签、绝/相对地址、表格的属性、链接的属性及链接的分类、name定义锚点的名称、编码

muzidigbig
关注TA
已关注
手记 14
粉丝 17
获赞 96

图片标签(单标签 ,行内块标签)

图片的语法:<img 属性名=”属性值” />

图片的属性

l 图片的路径 src=”图片的地址”(1.网上url 2.本地的绝对地址 3.本地的相对地址<同一个文件夹下同一个地址>)

l 图片的宽度 width=”数值”  以像素为单位的px,不写单位 例如width=”300”

l 图片的高度 height=”数值” 以像素为单位px例如height=”200”

l 图片的边框 border=”数值”

l 图片加载失败解释说明 alt=”对图片的描述内容”(因路径错误或者网络图片加载速度过慢,就会出现alt提示的内容)

l 图片的解释说明 title=”鼠标移上去之后对图片的描述内容”

l 图片和内容左右之间的距离 hspace=”数值”

l 图片和内容上下之间的距离 vspace=”数值” (了解,css样式实现)

注意:图片等比例缩放,只设置宽度或高度

https://img4.mukewang.com/5b4c65040001c4fb10230082.jpg

表格

语法:

  <table>

      <tr>

          <td>内容</td>

          <td>内容</td>

          <td> </td>

      </tr>

      <tr>

        <td>内容</td>

        <td>图片内容</td>

      </tr>

  </table>

  通常表格<table></table>  包括行<tr></tr>  行里面包括单元格<td></td>

  注意:内容一定要放入最底层的标签里面

  表格的<table>的属性

1. 表格的边框 border=”数值” 默认是0

2. 表格的宽度 width=”数值”

3. 表格的高度 height=”数值”(w3c推荐不建议使用高度)    

4. 表格的居中方式 align=”水平对齐方式”  取值 left  center  right

5. 表格中的内容和单元格之间的距离 cellpadding=”数值” 默认数值是2像素

6. 表格中单元格和单元格之间的距离 cellspacing=”数值” 默认数值是2像素    

7. 表格的背景颜色 bgcolor=”颜色值” 例如 bgcolor=”red”

8. 表格的背景图片 background=”图片的地址”(背景图片不能含有中文)---修饰的作用

9. 表格的合并边框线 rules=”all” (w3c不推荐使用,css样式来实现)

10. 表格的边框颜色 bordercolor=”颜色值”例如 bordercolor=”#ff0000”(不建议使用)

注意:背景图片的优先级高于背景颜色

需求:插入三行三列的表格,表格的宽度为990像素,表格的边框粗细为2

https://img3.mukewang.com/5b4c658e00010a8a09330118.jpg

需求:插入两行五列的表格,表格的宽度为1000像素,表格居中显示,表格的边框为默认,在第一行的每一个单元格中放入图片,图片的宽度为190像素,高度为160像素,第二行放入内容

https://img2.mukewang.com/5b4c656e0001038610690404.jpg

<tr>的属性

l Height 行的高度 例如 height=”300”

l Bgcolor背景颜色 例如 bgcolor=”blue”

l Background背景图片 例如 background=”images/33.jpg”

l Align 水平对齐方式 例如  align=”left //center//right”    //或者

l Valign 垂直对齐方式 例如 valign=”top //middle //bottom”

https://img1.mukewang.com/5b4c65ce00011d8208830225.jpg

<td>属性

l Bgcolor 背景颜色

l Background 背景图片 例如 background=”images/XX.jpg”

l Width 单元格的宽度 例如 width=”300”

l Height 单元格的高度 例如height=”40”

l Align 内容在单元格中的水平对齐方式 align=”left/center/right”

l Valign 内容在单元格中垂直对齐方式  valign =”top/middle/bottom”;

rules=”all” 合并表格的边框线


表格的扩充

合并单元格的问题

https://img2.mukewang.com/5b4c662e000145e909410123.jpg

上面的表格  纵向合并rowspan=”数值” 例如rowspan=”3” 纵向合并2个

https://img3.mukewang.com/5b4c66490001ab2608930121.jpg

Rowspan=”2”

口诀: 横向合并,不跨行去除相应单元格。 纵向合并,跨行去除相应单元格。


<a>链接(外链接、内链接)

语法<a 属性=”属性值”>内容</a>

属性

l 链接的地址  href=”链接的地址url”,url绝对地址 相对地址

l Target 打开目标文件的窗口

    _blank  在新的窗口中打开目标文件

    _self 默认的打开方式,在原来的窗口中打开目标文件(原来的窗口被覆盖)

l Name 定义锚点的名称

外链接:https://img1.mukewang.com/5b4c66e5000196fc06230054.jpg

特殊链接

 下载链接

那些文件不用下载可以直接做链接    .html   .jpg  .gif  

那些文件必须下载链接  .zip  .exe

https://img1.mukewang.com/5b4c670c000150ba08160043.jpg

邮件链接

   <a href=mailto:邮件的地址>内容</a>

 空链接

  在当前页面做链接  <a href=”#”>链接的内容</a>

 Javascript(可嵌套JavaScript代码)

 <a href=”javascript:window.close()”>关闭</a>


Name定义锚点的名称(内链接)

同一个页面的不同区域直接跳转

定义锚点

  <a name=”自定义名称”></a>在<a></a>不加内容,给跳转锚点链接中的target用

跳转锚点

  <a href=”#锚点名称”>内容</a>


绝对地址(网络地址)---http:

语法<a  href=http://www.taobao.com>淘宝</a>

https://img.mukewang.com/5b4c679600016a1a09700048.jpg

本地的地址  ----在你的本机上测试

https://img1.mukewang.com/5b4c67b100018b1f08720048.jpg

相对地址

在同一个站点下,在同一个文件夹

l 目标文件和当前文件在同一个目录 ,直接写文件名称  

l 目标文件在当前文件的下一级目录,XX表示文件夹名     XX/文件名称

l 目标文件在当前文件的下两级目录   xx/xx/文件名

l 目标文件在当前文件的上一级目录   ../文件名称

l 目标文件在当前文件的上两级 目录   ../../文件名称    上三级../../../文件名称

https://img3.mukewang.com/5b4c67c9000166cd06300061.jpg


补充知识:

颜色代码(理解)

 英文   red                        green                blue

 十六进制 #ff0000                   #00ff00              #0000ff    

 十进制   rgb(255,0,0)               rgb(0,255,0)           rgb(0,0,255)

十进制:十个基本数0,1,2,3,4,5,6,7,8,9

十六进制  十六个基本数构成 0-9 a b c d e f     #ff6688

八进制    八个基本数够成  0 1 2 3 4 5 6 7

二进制    两个基本数构成 0 1

字符集

为什么要有字符集,是因为计算机只能处理二进制数据。为了让计算机能识别人类语言(0-9、a-z、A-Z、特殊符号),我们就需要对这每一个字符进行“编码”。所谓“编码”就是:每一个字符,可以用不同的二进制来表示。

假设:A 用二进制表示 1000, B  用二进制表示 1001

ASCII编码:用1个字节(8位二进制)来表示所有字符,共可以表示2^8 = 256 。

ANSI编码:其它国家,都对ASCII编码进行扩展,用于显示本国的语言。

          在中文操作系统   gb2312

          繁体操作系统   big5

用2个字节(16位二进制)(来表示,共可以表示2^16 = 65536个字符。

Gb2312 收入了6763个汉字

GBK编码:对GB2312进行扩充,收录了一些冷门字、罕见字、古汉语等。。。大约2.1万个汉字

Unicode编码:计划将世界上所有字符统一编码,用4个字节(32位二进制)来表示一个字符。

它的缺点:编码表文件太大了,不方便使用。用32位二进制表示一个字符,造成空间极大浪费。

UTF-8: (多国语言编码)

不同的字符,它会选择合适编码来进行翻译。




若有不足请多多指教!希望给您带来帮助!

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP