美文网首页视觉艺术
HTML系列知识(三)

HTML系列知识(三)

作者: 纭微细雨 | 来源:发表于2019-10-20 10:39 被阅读0次

HTML图像

<img> 即图像标签,需要设置其属性 src指定图像的路径

<img src="http://how2j.cn/example.gif"/>

如果是本地文件,只需把图片放在同一个目录下即可,src直接使用文件名,不需要/

<img src="example.gif"/>

图片在上级目录,则在src上加上 ../,即可访问上级目录的图片,如果是在上级目录的上级目录,则使用 ../../

<img src="../example.gif"/>

src使用图片所在的绝对路径,并在前面加上file://

<img src="file://c:/example.gif"/>

如果设置的大小比原图片大,则会产生失真效果

<img width="200" height="200" src="http://how2j.cn/example.gif"/>

img不能够自己居中,需要放在其他能够居中的标签中实现这个效果,比如h1标签,p标签.

经常采用的手段是放在div中居中

<div align="left">

  <img src="http://how2j.cn/example.gif"/>

</div>

<div align="center">

  <img src="http://how2j.cn/example.gif"/>

</div>

<div align="right">

  <img src="http://how2j.cn/example.gif"/>

</div>

如果图片不存在,默认会显示一个缺失图片,这是不友好的,所以可以加上alt属性。

当图片存在的时候,alt是不会显示的

当图片不存在的时候,alt就会出现

<img src="http://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />

HTML超链

<a>标签即用来显示超链

完整元素是:<a href="跳转到的页面地址">超链显示文本</a>

在新的页面打开超链 ,新增属性target

<a href="http://www.12306.cn" target="_blank">http://www.12306.cn</a>

超链上的提示文字,当鼠标放在超链上的时候,就会弹出提示文字

<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>

使用图片作为超链 

<a href="http://www.12306.com">

<img src="http://how2j.cn/example.gif"/>

</a>

HTML表格

<table>标签用于显示一个表格

<tr> 表示行

<td> 表示列又叫单元格

<table>

  <tr>

      <td>1</td>

      <td>2</td>

  </tr>

  <tr>

      <td>3</td>

      <td>4</td>

  </tr>

  <tr>

      <td>a</td>

      <td>b</td>

  </tr>

</table>

带边框的表格 ,设置table的属性border

<table  border="1">

...

设置table宽度 ,设置table的属性 width,px即像素的意思。

<table  border="1" width="200px">

...

单元格宽度绝对值 ,设置td的属性width

在示例里,1单元格设置了宽度,那么3,和a单元格,自动继承该宽度

2单元格的宽度由table宽度和1单元格的宽度决定

<table  border="1" width="200px">

  <tr>

      <td  width="50px">1</td>

      <td>2</td>

  </tr>

...

单元格宽度相对值 ,设置td的属性width为百分数

<table  border="1" width="200px">

  <tr>

      <td  width="80%">1</td>

      <td>2</td>

  </tr>

...

单元格水平对齐 ,设置td的属性align

<table  border="1"  width="200px">

  <tr>

      <td  width="50%"  align="left">1</td>

      <td>2</td>

  </tr>

  <tr>

      <td  align="center">3</td>

      <td>4</td>

  </tr>

  <tr>

      <td  align="right">a</td>

      <td>b</td>

  </tr>

</table>

设置tr或者td的属性bgcolor

<table  border="1"  width="200px">

  <tr  bgcolor="gray">

      <td  width="50%">1</td>

      <td>2</td>

  </tr>

...

HTML列表

列表分无序列表和有序列表

分别用<ul>标签和<ol>标签表示

无序列表 :

<ul>

<li>DOTA</li>

<li>LOL</li>

</ul>

有序列表 :

<ol>

<li>地卜师</li>

<li>卡尔</li>

</ol>

HTML字体

使用<font>标签表示字体

font常用的属性有 color和size, 分别表示颜色和大小

<font  color="green">绿色默认大小字体</font>

<br>

<font  color="blue"  size="+2">蓝色大2号字体</font>

<br>

<font  color="red"  size="-2">红色小2号字体</font>

相关文章

  • HTML系列知识(三)

    HTML图像 即图像标签,需要设置其属性 src指定图像的路径 如果是本地文件,只需把图片放在同一个目录下即可,s...

  • HTML系列知识(五)

    HTML文本框 即表示文本框 并且只能够输入一行 如果要输入多行 使用文本域 注: 标签很特别,一般是不需要写...

  • HTML系列知识(四)

    HTML块 div span 这两种标签都是布局用的 这种标签本身没有任何显示效果 通常是用来结合css进行页面布...

  • HTML系列知识(六)

    HTML文本域 即文本域 与文本框不同的是,文本域可以有多行,并且可以有滚动条 abcdef 设置宽度和行数 ,使...

  • HTML系列知识(二)

    HTML段落 标签即表示段落,是paragraph的缩写,自带换行效果 在p标签中的文本会自动换行,不在p标签中的...

  • HTML系列知识(一)

    HTML标签 HTML是Hyper Text Markup Language 超文本标记语言 的缩写 HTML是由...

  • 常用标签&选择器

    本系列是前端基础的学习笔记,只是方便自己学习记忆的。 html、xhtml、xml、html5 一些历史知识而已啦...

  • 课程分类

    知识 技能 精神三个系列,游学 工匠 毅行 三个系列,

  • HTML基础知识二

    知识点导航: 一、h 和 p

    HTML标签是分等级的,HTML将所有的标签分为两种: h 系列 h 是容...

  • 《HTML与CSS知识》系列分享专栏

    收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者...

网友评论

    本文标题:HTML系列知识(三)

    本文链接:https://www.haomeiwen.com/subject/xopomctx.html