HTML头部
HTML头部指的是head
标签内的所有元素
在 元素中你可以插入脚本(scripts)
, 样式文件(CSS)
,及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- meta标签描述了一些基本的元数据。 -->
<!--META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。 -->
<!-- 为搜索引擎定义关键词: -->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!-- 为网页定义描述内容: -->
<meta name="description" content="HTML基础">
<!-- 定义网页作者: -->
<meta name="author" content="dream">
<!-- 每30秒钟刷新当前页面: -->
<meta http-equiv="refresh" content="30">
<title>HTML头部</title>
<!-- <title> 标签定义了不同文档的标题。在 HTML/XHTML 文档中是必须的。 -->
<base href="" target="_blank">
<!-- <base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接: -->
<link rel="stylesheet" type="text/css" href="../css/mystyle.css">
<!-- <link> 标签定义了文档与外部资源之间的关系。 通常用于链接到样式表.-->
<link rel="shortcut icon" href="../img/seven.jpg">
<!-- 也可以把属性rel的值改为'shortcut icon'在网页标题左侧显示logo等图片 -->
<style>
.first_style{width:500px;height:500px;background: greenyellow;margin: 0 auto;}
</style>
<!-- <style> 标签定义了HTML文档的样式文件引用地址.在<style> 元素中你也可以直接添加样式来渲染 HTML 文档: -->
<script type="text/javascript"></script>
<!-- <script>标签用于加载脚本文件,如: JavaScript。 -->
</head>
<body>
<div class="first_style"></div>
</body>
</html>
以上代码内容均可直接使用html格式文件用浏览器运行
文本标签
HTMl通过文本标签对输出的文本进行格式
<body>
<h1>我的第一个大标题!</h1>
<h2>我的第一个小标题!</h2>
<!-- 标题(Heading)通过 <h1> - <h6> 标签进行定义. 浏览器会自动地在标题的前后添加空行。-->
<hr/>
<!-- <hr> 标签在 HTML 页面中创建水平线。 -->
<h1>h1标签对应6号字体</h1>
<font size="6">这是6号字体文本</font>
<h2>h2标签对应5号字体</h2>
<font size="5">这是5号字体文本</font>
<h3>h3标签对应4号字体</h3>
<font size="4">这是4号字体文本</font>
<h4>h4标签对应3号字体</h4>
<font size="3">这是3号字体文本</font>
<h5>h5标签对应2号字体</h5>
<font size="2">这是2号字体文本</font>
<h6>h6标签对应1号字体</h6>
<font size="1">这是1号字体文本</font>
<!-- 1到6号标题与1到6号字体逆序对应 -->
<p>我的第一个段落!</p>
<hr/>
<p>我的第二个段落!</p>
<hr/>
<p>我的<br/>第三个段落!</p>
<!-- p标签定义一个段落,hr可以用于分隔内容,br用于换行,hr和br都是空元素 -->
<!-- 文本格式化标签 -->
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<!-- 这些标签常用于显示计算机/编程代码。 -->
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<!-- 地址写法 -->
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<!-- 缩写和首字母缩写 -->
<bdo dir="rtl">该段落文字从右到左显示。</bdo>
<!-- 改变文字的方向 -->
<q>Build a future where people live in harmony with nature.</q>
<!-- 自动给文字打上引用语 -->
<del>blue</del> <ins>red</ins>
<!-- 删除字和插入字 -->
<cite>The Scream</cite>
<!-- <cite> 标签定义作品的标题 -->
</body>
以上代码内容均可直接使用html格式文件用浏览器运行