【前端】HTML | 易学教程

易错知识点

<!DOCTYPE html>不属于HTML标签，它用于指定文档的类型
<pre>标签用于预定义格式处理，文本在浏览器中显示时遵循HTML文档规范
在HTML表格里面如果我们的表格很复杂，那么表格要完全加载下来再显示，它的加载时间太长影响用户体验，所以我们可以使用表格结构划分标签，让它加载一部分就显示一部分

HTML链接

<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
	<title>HTML图像与超链接</title>
	<meta charset="utf-8">
</head>
<body>
	<img src="F:\360MoveData\Users\acer\Desktop\捕获.PNG" alt="微信截图">  <!--绝对路径-->
	<!--alt的作用是当网络不好，或者src里面属性错误，
		或者浏览器禁用图片等不能显示图片的情况下显示的文字-->
	<img src="捕获.PNG" alt="微信截图">  <!--相对路径-->
	<!--当图片的位置发生改变的时候，绝对路径将不能显示，但是相对路径可以-->
	<!--设置属性-->
	<img src="捕获.PNG" height="100px" width="50px" >  <!--px代表像素-->  
	<img src="捕获.PNG" height="20%" width="30%" >  <!--也可以使用%来定义，%表示占容器大小的百分之几-->  
</body>
</html>

HTML列表

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta charset="utf-8">    
</head>
<body>
<ol type="i" border="1"> <!--这是以小写罗马字符表示,border代表方框的粗细-->
    <li>白日依山尽</li>
    <li>黄河入海流</li>
</ol>
<ol type="a">
    <li>黄河入海流</li><!--这是小写字母表示-->
</ol>
<ol type='I'><!--这是以大写罗马字母bioassay-->
    <li>html是超文本标记语言</li>
</ol>
<ol type='A'><!--这是以大写罗马字母bioassay-->
    <li>html是超文本标记语言</li>
</ol>
<dl>
    <dt>列表项标题信息</dt>    <!--这三个标签必须一起使用-->
    <dd>列表项描述信息</dd>
    <dd>列表项描述信息</dd>
    <dt>列表项标题信息</dt>
</dl>
</body>
</html>

HTML表格

<!DOCTYPE html>
<html>
<head>
	<title>HTML表格</title>
	<meta charset="utf-8">
</head>
<body>
	<!--下面创建一行两列的表格-->
	<table border="1">  <!--设置边框,不设置的话默认没有-->
		<thead>
			<caption>定义列表标题</caption>
			<tr>
			<th>加粗</th>
			<td>定义列表块</td>
			</tr>
		</thead>
		<tbody>
			<tr>
			<th>加粗</th>
			<td>定义列表块</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
			<th>加粗</th>
			<td>定义列表块</td>
			</tr>			
		</tfoot>
	</table>
</body>
</html>

效果：
在这里插入图片描述

来源：CSDN

作者：Lucky C

链接：https://blog.csdn.net/happygjcd/article/details/103658403

标签

html表格