HTML基础学习第四课(HTML头部元素与布局)

1、HTML头部元素

元素中你可以插入脚本(scripts),样式文件(css),及各种meta信息。可以添加在头部区域的元素标签为:

一、</span>:网页标题信息,会显示在搜索引擎结果页面中</p> <p><strong>二、</strong><span style="color:#4da8ee;"><style></span>:定义样式文件引用地址,也可以在<span style="color:#4da8ee;"><style></span>元素中直接添加样式来渲染HTML文档</p> <p>举例如下:</p> <pre><code class="language-html"><DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> body {background-color:yellow} </style> </head> </html></code></pre> <p><strong>三、</strong><span style="color:#4da8ee;"><meta></span>:原数据元素meta用于指定网页的描述,关键字,文件的最后修改时间,作者,和其他原数据</p> <p>举例如下:</p> <pre><code class="language-html"><DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="xiaomo"> <meta name="keywords" content="HTML"> </head> </html></code></pre> <p>分别是字符设定,作者信息和搜索引擎提供的关键字。</p> <p><strong>四、</strong><span style="color:#4da8ee;"><link></span>:定义文档与外部资源之间的关系,通常用于链接到样式表。</p> <p>举例如下:</p> <pre><code class="language-html"><DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </html></code></pre> <p><strong>五、</strong><span style="color:#4da8ee;"><script></span>:用于加载脚本文件,如:JavaScript。</p> <p>举例如下:</p> <pre><code class="language-html"><DOCTYPE html> <html> <script> document.write("Hello,World!") </script> </html></code></pre> <p><span style="color:#4da8ee;"><script></span>标签既可包含脚本语句,也可以通过“src”属性指向外部脚本文件。</p> <h2>二、HTML区块</h2> <p><strong>区块元素:</strong>在游览器显示时,通常会以新行来开始(和结束)如:<span style="color:#4da8ee;"><h1>,<p>,<ul>,<table></span>等</p> <p><strong>内联元素:</strong>在显示时通常不会以新行开始,如:<span style="color:#4da8ee;"><b>,<td>,<a>,<img></span>等</p> <p><strong><span style="color:#4da8ee;"><div></span>:元素</strong></p> <p>区块元素,可用于组合其它HTML元素的容器;没有特定的含义,游览器会在其前后显示折行</p> <p>与CSS一同使用,可用于对大的内容块设置样式属性;另一个常见的用途是文档布局</p> <p><strong><span style="color:#4da8ee;"><span></span>:元素</strong></p> <p>内联元素,可用作文本的容器;没有特定的含义;与CSS一同使用,可用于对文本设置样式属性</p> <h2>三、HTML布局</h2> <p>使用<span style="color:#4da8ee;"><strong><div></strong></span>进行页面布局,实现一个下图所示的布局。</p> <p><a href="http://img.e-com-net.com/image/info8/b3df1f5bfd4a4d0b84ae63ce1e92aa27.jpg" target="_blank"><img alt="HTML基础学习第四课(HTML头部元素与布局)_第1张图片" height="371" src="http://img.e-com-net.com/image/info8/b3df1f5bfd4a4d0b84ae63ce1e92aa27.jpg" width="650" style="border:1px solid black;"></a></p> <p>代码如下:</p> <pre><code class="language-html"><DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>头部元素布局

导航栏:
正文内容:

 

你可能感兴趣的:(HTML,html)