html基础知识入门(2)

1.p标签

表示段落，有换行效果

2.strong

粗体效果

3.em

斜体效果

4.pre

预格式，一般用于显示代码

<pre>
public class HelloWorld {
 
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
 
</pre>

结果：

5.del

删除效果

6.ins

下划线效果

7.img src

加载图像

<img src="图像地址"/>

• 如果图像和网页在同一目录下，直接使用文件名即可
• 如果图像在上级目录，在src内加上…/即可
• 如果图像在其他目录，使用绝对路径，并在前面加上file://

8.设置图像大小

<img width="num" height="num" src="url"/>

9.图像位置

<div align="left">
  <img src="url"/>
</div>

<div align="center">
  <img src="url"/>
</div>

<div align="right">
  <img src="url"/>
</div>

10.alt

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

<img src="url" alt="图片不见了" />

11.超链接

<a href="跳转到的页面地址">超链显示文本</a>

12.target="_blank"

新的页面打开超链接

<a href="url" target="_blank">超链接显示文本</a>

13.超链接上显示文字

<a href="url" title="跳转到url">超链接显示文本</a>

14.使用图片作为超链接

<a href="url">
<img src="url"/>
</a>

15.table tr td

表格 行 列

<table>
  <tr>
      <td>1</td>
  </tr>

</table>

16.border

表格带边框

<table border="1">
  <tr>
      <td>1</td>
  </tr>

</table>

17.设置表格宽度

<table border="1" width="num px">
  <tr>
      <td>1</td>
  </tr>

</table>

18.设置列的宽度

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

19.使用相对值设置宽度

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

20.设置单元格内对齐方式

<table border="1" width="20px">
  <tr>
      <td width="50%" align="left">1</td>
  </tr>

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

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

</table>

21.单元格垂直对齐

<table border="1" width="200px">
  <tr>
      <td width="10%" valign="top" >1</td>
      <td>
             2   <br/>
             2   <br/>
      </td>
  </tr>
 
  <tr>
      <td valign="middle"  >3</td>
      <td>
             4   <br/>
             4   <br/>
      </td>
  </tr>
 
  <tr>
      <td valign="bottom" >a</td>
      <td>
             b   <br/>
             b   <br/>
      </td>
  </tr>
 
</table>

22.横跨两列, 水平合并

<table border="1" width="200px">
  <tr>
      <td colspan="2" >1，2</td>
  </tr>
</table>

23.横跨两行, 垂直合并

<table border="1" width="200px">
  <tr>
      <td rowspan="2">1,3</td>
      <td>2</td>
  </tr>

  <tr>
      <td>4</td>
  </tr>
</table>

24.背景色

  <tr bgcolor="gray">
     <td width="10%">1</td>
      <td>2</td>
  </tr>
 
  
  <tr>
      <td>a</td>
      <td  bgcolor="gray">b</td>
  </tr>

25.块

用于整体设置格式
div会自动换行
span不会换行

<div style="margin-left:100px" >
 <img src="url"/>
  <br/>
 <img src="url"/>
</div>

26.字体

<font color="green">绿色默认字体</font>
<br>
<font color="blue" size="+20">蓝色大20号字体</font>
<br>
<font color="red" size="-20">红色小20号字体</font>```
## 27.内联框架
即在网页内插入网页

```handlebars
<iframe src="url" width="102px" height="400px">
</iframe>

-学海无涯苦作舟