HTML 结构

Posted on 9 月 17, 2026 by jack

HTML 结构：head 和 body 分成两部分 —— 头和躯体

<head> 是头部，放给浏览器看的信息
<body> 是躯体，放用户在页面上能看到的内容

头标签（head 里面的标签）

`<title>` 标签

用来控制当前页面的标题，显示在浏览器顶部标签页上
有什么用？主要是给搜索引擎用的，搜索引擎抓取页面时会读取 title 内容作为搜索结果标题

<title>网页的标题，显示在浏览器顶部</title>Code language: HTML, XML (xml)

`<base/>` 标签

是单标签
作用：为页面上所有相对路径的链接设置默认地址或默认打开方式
href 属性：指定基准URL
target 属性：指定链接默认在哪个窗口打开

<base target="_blank"/>        <!-- 所有链接默认新窗口打开 -->
<base href="http://www.bamn.cn"/>  <!-- 设置基准URL -->Code language: HTML, XML (xml)

一个页面里只能有一个 <base> 标签生效，写了多个只有第一个生效

`<meta>` 标签

是单标签：<meta/>
元素是关于数据的信息，给浏览器看的（浏览器能读得懂），还可以给搜索引擎看的
常见用法：

<meta name="description" content="这个份是页面的描述"/>
<meta name="keywords" content="html,学习"/>Code language: HTML, XML (xml)

属性	作用
`name="description"`	页面描述，搜索引擎搜索结果里会显示这段描述
`name="keywords"`	页面关键词，帮助搜索引擎分类（现在SEO权重很低了）

还有 <meta charset="UTF-8"> 指定字符编码，防止中文乱码，这个后面会学到

`<a>` 超链接标签（body 里的内容）

href 属性：指定跳转地址
target="_blank"：新窗口打开
相对路径 / 绝对路径都能用

<a href="http://www.google.com" target="_blank">go to google</a>Code language: HTML, XML (xml)

完整示例

<html>
    <head>
        <title>网页的标题，显示在浏览器顶部</title>
        <base target="_blank"/>
        <base href="http://www.foxdevelop.com"/>
        <meta name="description" content="这个份是页面的描述"/>
        <meta name="keywords" content="html,学习"/>
    </head>
    <body>
        <a href="http://www.google.com" target="_blank">go to google</a><br/>
        <a href="http://www.foxdevelop.com">go to foxdevelop</a><br/>
        <a href="/hello">go to foxdevelop2</a>
    </body>
</html>Code language: HTML, XML (xml)

示例说明

链接	说明
`go to bing`	绝对路径，新窗口打开
`go to foxdevelop`	绝对路径，因为head里设了 `<base target="_blank"/>`，所以也是新窗口打开
`go to google`	绝对路径，新窗口打开
`go to fox`	相对路径，基准URL是 `http://www.foxdevelop.com`（因为head里设了 `<base href="http://www.foxdevelop.com"/>`），所以实际跳转到 `http://www.foxdevelop.com/`about`.html`

`<body>` 标签

<body> 是页面展现的主体部分，是访问者能够看到的部分
只要在 body 里面的内容都能显示出来，除非隐藏了或者被遮挡了

<body>
    <!-- 这里面写的所有内容，用户都能在页面上看到 -->
</body>Code language: HTML, XML (xml)

HTML 格式化

加粗标签

<strong> 和 <b> 这两个标签都能让文字加粗显示

<b>这是b标签，加粗</b>
<strong>这是strong标签，也是加粗</strong>Code language: HTML, XML (xml)

标签	说明
`<b>`	纯视觉加粗，就是让你看着粗
`<strong>`	语义上加粗，表示”这段内容很重要”，对搜索引擎和屏幕阅读器有意义

两个效果一样，但推荐用 <strong>，因为它有语义含义，不只是样子粗而已

Previous: 标签的说明

Next: HTML的样式化CSS

Posted in HTML

发表回复取消回复