html入门学习-页面布局相关_html排版入门-CSDN博客

本文链接：https://blog.csdn.net/wangblove/article/details/107136117

前面已经讲过注册页面，下面我们说说内容页；

内容页面先会考虑总体排版，于是就有了框架，<iframe src="www.abc.com"></iframe>
还可以用区块标记<div></div>

网页文章需要分段，于是就有了<p>这我我的第一个段落</p>；
给段落加个标题，于是有了<h1></h1> 到<h5></h5> 这类标题标记；
为了让同事更方便理解你的代码，就有了注释代码：

<!--这是一个注释，注释在浏览器中不会显示-->
通过<br> 实现换行；

也可以用table 实现网页格式布局 ,行标记<tr></tr>，列标记<td></td>，跨列属性colspan=N，跨行属性 rowspan=n，

span 也可以用来做区块

我的母亲有蓝色的眼睛。

下面是实际应用代码和截图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe src="//www.runoob.com">
		  <p>您的浏览器不支持  iframe 标签。</p>
		</iframe>
<br>
<a href="//www.runoob.com"> 访问菜鸟教程 </a>
		  <p>这里是一个段落</p>
		  <br>
		  <table border=1>
			  <tr>
			  	<th>标题1</th>
			  	<th colspan="2">标题2</th>
			  </tr>
			  <tr>
				  <td rowspan="2">这是个单元格</td>
				  <td>这里是第二格</td>
				 <td>这里是第二格</td>
				  </tr>
			<tr>
				 <td>这是第二行</td>
				 <td>这里是第二格</td>
								  </tr>  	
		  </table>
		
<br><br>
无序列表
<ul>
	<li>列表1</li>
	<li>列表2</li>
	<li>列表3</li>
</ul>
<br>
有序列表
<ol>
	<li>列表1</li>
	<li>列表2
	<ol>
		<li>列表1</li>
		<li>列表2</li>
		<li>列表3</li>
	</ol>
	</li>
	<li>列表3</li>
</ol>

	</body>
</html>

在这里插入图片描述