前端学习：HTML头部、布局
目录
HTML头部
一、HTML
元素
二、head标签和header标签的不同
三、HTML
元素
四、HTML
元素
五、HTML
元素
六、 HTML
七、HTML元素
为搜索引擎定义关键词：
为网页定义描述内容：
每60秒刷新当前页面：
八、HTML
九、HTML头部元素合集
HTML布局
一、使用
元素的HTML布局
、<base>、<link>、<meta>、<script>、<style>.</p>
<p>HTML<title>元素不仅可以显示文本，也可以在左侧显示logo等图片。</p>
<blockquote>
<p><head></p>
<p> <link rel="shortcut icon" href="./4_19/微信图片_20221020120621.jpg"></p>
<p> <title>这是一个带图片的标签
三、HTML
HTML头部
一、HTML元素
元素是所有头部元素的容器，里面可以包含脚本。后面我们会介绍到这些标签，这里先列举一下，下面的标签都可以添加到head里面：
二、head标签和header标签的不同
head标签用于定义文档头部，它是所有元素的容器。
header标签用于定义文档的页眉（介绍信息）。例如：
段落
一级标题
三、HTML元素</h2>
<p><title>标签定义文档的标题。title元素在所有的HTML文档中都是必需的。</p>
<p>title元素能够：</p> 定义浏览器工具栏中的标题 提供页面被添加到收藏夹时显示的标题 显示在搜索引擎结果中的页面标题
<h2 id="%C2%A0%E5%9B%9B%E3%80%81HTML%3Cbase%3E%E5%85%83%E7%B4%A0"> 四、HTML<base>元素</h2>
<p><base>标签为页面上的所有链接规定默认地址或默认目标（target)：</p>
<blockquote>
<p><base href="http://www.baidu.com/images/" /></p>
<p> <base target="_blank" /></p>
</blockquote>
<p> 补充：target在前面有过介绍，是控制网页打开位置，上面"_blank"是在新窗口打开页面</p>
<h2 id="%E4%BA%94%E3%80%81HTML%3Clink%3E%E5%85%83%E7%B4%A0">五、HTML<link>元素</h2>
<p><link>标签定义文档与外部资源之间的关系。</p>
<p><link>标签最常用于连接样式表：</p>
<p><img alt="" height="27" src="http://img.e-com-net.com/image/info8/9a1f62b3d3fe4aceab050ac0e4f76cdb.jpg" width="600"></p>
<h2 id="%E5%85%AD%E3%80%81%20HTML%3Cstyle%3E%E5%85%83%E7%B4%A0">六、 HTML<style>元素</h2>
<p><style>标签用于为HTML文档定义样式信息。</p>
<p>你可以在style元素内规定HTML元素在浏览器中呈现的样式：</p>
<blockquote>
<p><style></p>
<p> #root{</p>
<p> background-color: #7fffd4;</p>
<p> width: 500px;</p>
<p> height: 600px;</p>
<p> margin: 10 auto;</p>
<p> padding: 30px;</p>
<p> }</p>
<p> </style></p>
</blockquote>
<h2 id="%C2%A0%E4%B8%83%E3%80%81HTML%3Cmeta%3E%E5%85%83%E7%B4%A0"> 七、HTML<meta>元素</h2>
<p>meta标签描述了一些基本的元数据。</p>
<p>元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。</p>
<p><meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。</p>
<p>META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</p>
<p><meta> 标签始终位于 head 元素中。</p>
<p>以下演示几个实例：</p>
<h3 id="%E4%B8%BA%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E5%AE%9A%E4%B9%89%E5%85%B3%E9%94%AE%E8%AF%8D%EF%BC%9A">为搜索引擎定义关键词：</h3>
<blockquote>
<p><meta name="selectall" content="JAVA,C,PANME,DO"></p>
</blockquote>
<h3 id="%C2%A0%E4%B8%BA%E7%BD%91%E9%A1%B5%E5%AE%9A%E4%B9%89%E6%8F%8F%E8%BF%B0%E5%86%85%E5%AE%B9%EF%BC%9A"> 为网页定义描述内容：</h3>
<blockquote>
<p><meta name="concrotion" content="这是一个网页"></p>
</blockquote>
<h3 id="%E6%AF%8F60%E7%A7%92%E5%88%B7%E6%96%B0%E5%BD%93%E5%89%8D%E9%A1%B5%E9%9D%A2%EF%BC%9A%C2%A0">每60秒刷新当前页面： </h3>
<blockquote>
<p> <meta http-equiv="refresh" content="60"></p>
</blockquote>
<h2 id="%E5%85%AB%E3%80%81HTML%3Cscript%3E%E5%85%83%E7%B4%A0%C2%A0">八、HTML<script>元素 </h2>
<p><script>标签用于加载脚本文件，如：Vue.js。</p>
<h2 id="%E4%B9%9D%E3%80%81HTML%E5%A4%B4%E9%83%A8%E5%85%83%E7%B4%A0%E5%90%88%E9%9B%86">九、HTML头部元素合集</h2> 标签 描述 <head> 定义关于文档的信息。 <title> 定义文档标题。 <base> 定义页面上所有链接的默认地址或默认目标。 <link> 定义文档与外部资源之间的关系。 <meta> 定义关于 HTML 文档的元数据。 <script> 定义客户端脚本。 <style> 定义文档的样式信息。
<h1 id="%C2%A0HTML%E5%B8%83%E5%B1%80"> HTML布局</h1>
<h2 id="%E4%B8%80%E3%80%81%E4%BD%BF%E7%94%A8%3Cdiv%3E%E5%85%83%E7%B4%A0%E7%9A%84HTML%E5%B8%83%E5%B1%80">一、使用<div>元素的HTML布局</h2>
<p><div>元素常用作布局工具，因为能够轻松地通过CSS对其进行定位。</p>
<p>下面我们通过一个例子来看：</p>
<p></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
科技强国
北斗
我国卫星导航产业现在面临的重大挑战是，在面临全球其他三大系统挑战的同时，我国行业发展 …
而卫星导航是名副其实的战略性新兴产业，具有高成长、高效益特点，是小投入、大产出的典型，具有可持续发展的强大潜力，生命期至少50年。
科技强国
北斗
我国卫星导航产业现在面临的重大挑战是，在面临全球其他三大系统挑战的同时，我国行业发展 …
而卫星导航是名副其实的战略性新兴产业，具有高成长、高效益特点，是小投入、大产出的典型，具有可持续发展的强大潜力，生命期至少50年。