html实现网页布局
-
- 1.HTML头部元素
- 2.HTML 区块
- 3.HTML 布局
-
- 4.十二分法
1.HTML头部元素
①：网页标题信息，会显示在搜索引擎结果页面中</code><br> ②<code><style>：定义样式文件引用地址，也可以在<style> 元素中直接添加样式来渲染 HTML 文档</code></p>
<p>③<code><meta>：元数据元素meta用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据</code></p>
<p>④<code><link>：定义文档与外部资源之间的关系。通常用于链接到样式表:</code></p>
<p>⑤<code><script>:用于加载脚本文件，如： JavaScript。<script>标签既可包含脚本语句，也可以通过 "src" 属性指向外部脚本文件。</code></p>
<h2>2.HTML 区块</h2>
<p>(1)区块元素：</p>
<p>在浏览器显示时，通常会以新行来开始（和结束）如：<code><h1>, <p>, <ul>, <table>等</code></p>
<p>(2)内联元素：</p>
<p>在显示时通常不会以新行开始，如:<code><b>, <td>, <a>, <img>等</code></p>
<p>(3)<code><div> 元素</code><br> 区块元素，可用于组合其他 HTML 元素的容器<br> 没有特定的含义,浏览器会在其前后显示折行<br> 与 CSS 一同使用，可用于对大的内容块设置样式属性<br> 另一个常见的用途是文档布局</p>
<p>(4)<code><span> 元素</code><br> 内联元素，可用作文本的容器<br> 没有特定的含义<br> 与 CSS 一同使用，可用于对文本设置样式属性</p>
<h2>3.HTML 布局</h2>
<p>使用<code><div></code>进行页面布局<br> 实现一个下图所示的布局：</p>
<p><a href="http://img.e-com-net.com/image/info8/89e6443d1a654317932b8a784c563e78.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/89e6443d1a654317932b8a784c563e78.jpg" alt="3.html实现网页布局_第1张图片" width="650" height="348" style="border:1px solid black;"></a></p>
<h3>演示代码:</h3>
<pre><code><!DOCTYPE html>
<html>
<head>
<title>HTML布局
