HTML 常用块级标签
2019-04-13 本文已影响0人
Biosciman
超文本标记语言（HyperText Markup Language，HTML）是一种用于创建网页的标准标记语言。
HTML的标准结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML的标准结构相应解释
<!DOCTYPE html>
<!--第一行为声明文档，告诉浏览器用什么html格式解析代码（不区分大小写）-->
<html lang="en">
<!--html是网页中最大的标签-->
<head>
<!--head头：主要写不直接显示在页面中的内容，一般是网页的一些设置-->
<meta charset="UTF-8">
<!--设置网页的编码格式-->
<title>我的第一个网页</title>
<!--设置网页的标题-->
</head>
<body>
<!--body体：主要写显示早页面中的内容-->
welcome to html
<!--标题标签：有默认样式；独占一行-->
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<!--没有七级标题-->
<!--段落标签：有默认样式；独占一行-->
<p>这是段落</p>
<P>这是换<br>行</P>
<!--br标签强制换行-->
<!--列表-->
<!--无序列表：有默认样式；独占一行-->
<!--ul标签中只能写li标签-->
<ul>
<li>这是无序列表</li>
<li>这是无序列表</li>
<li>这是无序列表</li>
</ul>
<!--有序列表-->
<ol type="I", start="2">
<li>这是有序列表</li>
<li>这是有序列表</li>
<li>这是有序列表</li>
</ol>
<!--自定义列表-->
<dl>
<dt>自定义列表的标题</dt>
<dd>这是自定义列表</dd>
</dl>
<!--表格标签：table声明表格：th表头、tr行、td列-->
<table border="1" cellpadding="10px" cellspacing="0" width="800px" height="800px">
<!--声明表格-->
<!--
表格属性：
width:设置单元格的总体宽度
height：设置单元格的总体高度
border:边框
cellpadding:内容距离表框的距离
cellspacing:单元格和单元格之间的距离
rowspan:设置垂直方向一个单元格占据的高度
colspan:设置水平方向一个单元格占据的宽度
anglin:内容水平对其方式：默认居左
valign:内容垂直对其方式：默认居中
-->
<th colspan="4">这是表格中的表头</th>
<!--声明表格，默认居中加粗-->
<tr align="center">
<!--这是表格中的第一行 居中：center；居右：right；居左：lift-->
<td colspan="4">这是第一行的第一列</td>
<!-- <td>这是第一行的第二列</td>-->
<!-- <td>这是第一行的第三列</td>-->
<!-- <td>这是第一行的第四列</td>-->
</tr>
<tr align="lift" valign="bottom">
<!--这是表格中的第二行 居下：bottom；居上：top；居中：medial-->
<td rowspan="2">这是第二行的第一列</td>
<td>这是第二行的第二列</td>
<td>这是第二行的第三列</td>
<td>这是第二行的第四列</td>
</tr>
<tr align="right" valign="top">
<!--这是表格中的第三行-->
<!-- <td>这是第三行的第一列</td>-->
<td>这是第三行的第二列</td>
<td>这是第三行的第三列</td>
<td>这是第三行的第四列</td>
</tr>
</table>
<hr>
<!--hr为水平分割线-->
<!--区块元素div：没有默认样式，独占一行。一般用来划定一块区域，配合css在布局中使用-->
<div>这是一个div</div>
<br>
<br>
<br>
</body>
</html>
