HTML学习（二）

文章目录

• 图片标签
• 属性
• 超链接标签
• 表格标签
• 属性
• 原格式输出
• 尖括号的输出

图片标签

加载一张图片:

<img src="./img/Aida.png"/>
<img src="img/head.jpg"/>

可以看到图片的末尾不会换行，所以图片标签是行内元素。

属性

长宽：
改变图片的大小，可以写成像素，也可以写成百分比。

 width="200px" height="200px"

注：当只写宽或者只写高的时候，图片会将长宽等比例的放大缩小

使用网络资源
只需要在src中写入对应图片的地址即可

<img src="https://www.baidu.com/img/bd_logo1.png?where=super" >

不安全，被别人删了就加载不出来了

标题

 <img src="img/109951163723944814.gif" title="ITMan 现状" alt = "图片加载失败" >

• title : 当鼠标悬浮在图片上的时候会出现
• alt ：当图片加载失败的时候会出现

超链接标签

点击可以跳转到另一个界面
文本

<!-- 本地资源 -->
<a href="dome02.html" >跳转</a>
<!-- 网络资源 -->
<a href="http://www.baidu.com">百度</a><br>

图片
超链接标签内部也可以是图片，点击图片跳转另一个页面

<a href="http://www.baidu.com"><img src = "https://www.baidu.com/img/bd_logo1.png?where=super" width="100px"/></a>

跳转位置
在默认情况下，新打开的页面是在原页面的，可以通过修改target参数修改跳转页面的位置。

<a href="http://www.baidu.com" target="_blank">baidu</a><!--在新窗口打开-->

参数为：

原页面是新打开页面的父级页面，第一个打开的窗口是顶层页面。

锚点
锚点用于页面内的跳转，用于“返回顶部”、“目录”等

<a href="#first">第一章</a><br>
<a href="#second">第二章</a><br>
<a href="#third">第三章</a><br>
<a href="#fourth">第四章</a><br>
<a id = "first"/>
<a id = "second"/>
<a id = "third"/>
<a id = "fourth"/>

设置标签用a便签的id参数（在html5之后用id,之前用name）,在合适的位置添加锚点，之后在需要跳转的位置用a标签的herf参数 #+锚点名，即可实现跳转。

表格标签

创建一个表格

创建一个表格用<table></table>
在表格中加入一行<tr></tr>
在行中加入单元格<td></td>
如果想加表头用<th></th>

<table >
			<tr>
				<th>姓名</th>
				<th>id</th>
				<th>学校</th>
			</tr>
			<tr>
				<td>王二狗</td>
				<td>2969</td>
				<td>dmu</td>
			</tr>
			<tr>
				<td>大伟哥</td>
				<td>3929</td>
				<td>dmu</td>
			</tr>
		</table>

属性

表格框的宽度：

<table border="1px">

内容到边框的距离

<table cellpadding="5px">

单元格之间的宽度

<table cellspacing="10px">

调整单元格高度
通过调整行的高度实现

<tr height="100px">

调整单元格宽度
通过调整第一行单元格宽度实现

<th width="100px">学校</th>

快捷建表

<!--建4行5列的表格，输入下面的语句，按tab-->
table>tr*4>td*5

单元格合并
只能相邻单元格，合并的时候一定要记得把合并的单元格标签删掉

<td colspan="2"></td><!--行合并，向右合并一个，一共两个合成一个-->
<td rowspan="2"></td><!--列合并，向下合并一个，一共两个合成一个-->

原格式输出

可以将尖括号内的文本原格式输出，html中什么样，浏览器中就什么样，常用于输出代码（换行多）。

<pre>xxx</pre>

尖括号的输出

在html中使用尖括号，浏览器会自动识别为标签，想要用尖括号，就要用尖括号的替代符号。
< — &lt
> — &gt

&lt h1 &gt 尖括号的输出 &lt / h1 &gt

来源：CSDN

作者：聪明的王二狗

链接：https://blog.csdn.net/w_xy999/article/details/104595444