HTML5基础——网页的基本标签_<a name=“marker”-优快云博客

本文链接：https://blog.youkuaiyun.com/CSMCZM/article/details/106642533

本文介绍了HTML5的基础知识，包括HTML的定义、发展史和W3C标准。详细讲解了HTML的基本结构，如开放和闭合标签，以及网页的元信息，如DOCTYPE声明和< meta >标签。此外，还重点阐述了网页的基本标签，如标题、段落、图像和链接，以及行内元素和块元素的区别。通过实例展示了如何创建图像链接和锚链接，以及功能性链接如电子邮件和即时通讯链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是HTML

Hyper Text Markup Language（超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等

HTML的发展史

在这里插入图片描述

W3C标准

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

W3C标准包括

结构化标准语言（XHTML、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript ）

HTML基本结构

<html>
<head><!--这是头部文件-->
     <title>我的第一个网页</title>
</head>
<body><!--这是主体-->
     我的第一个网页
</body>
</html>

注意：

< body >、< /body>等成对的标签，分别叫开放标签和闭合标签

单独呈现的标签（空元素），如<hr/ >；意为用 / 来关闭空元素

网页基本信息

DOCTYPE声明

<!DOCTYPE  html>

告诉浏览器使用什么规范

<!DOCTYPE html>   <!--告诉浏览器使用什么规范-->
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>

< meta >标签

<meta charset="UTF-8" />       <!--网页字符编码-->  <!--推荐utf-8，还可设置为gb2312-->

注意:

gb2312包含全部中文字符

utf-8则包含全世界所有国家需要用到的字符

页面编码应与页面文件保存时的编码一致

网页的基本标签

标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

<p></p>//段落标签
<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>

换行标签


<br/>//换行标签
<h1>北京欢迎你</h1>
<p>
  北京欢迎你，有梦想谁都了不起！<br />
  有勇气就会有奇迹。<br />
  北京欢迎你，为你开天辟地<br />
</p>

水平线标签

<h1>北京欢迎你</h1>
<hr/>//水平线标签
<p>
  北京欢迎你，有梦想谁都了不起！<br />
  有勇气就会有奇迹。<br />
  北京欢迎你，为你开天辟地<br />
</p>

字体样式标签

加粗：<strong>…</strong>

斜体：<em>…</em>

<strong>徐志摩人物简介</strong>
<p>
   <em>1910</em>年入杭州学堂<br/>
   <em>1918</em>年赴美国克拉大学学习银行学<br/>
</p>

注释和特殊符号

空格               &nbsp;
大于号(>)          &gt;
小于号(<)          &lt;
引号(")            &quot;
版权符号©          &copy;

图像标签

常见的图像格式

1.JPG

2.GIF

3.PNG

4.BMP

语法

<img src="path" alt="text" title="text"  width="x"  height="y" />

src="path"  <!--图像地址-->

alt="text"       <!-- 当图像路径错误，图像无法正常显示时所替代的文字--> 

title="text"     <!--  鼠标悬停提示文字-->            

width="x"        <!-- 图像宽度-->                   

height="y" />    <!-- 图像高度-->

链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

href="path"     <!--链接路径-->

target="目标窗口位置">   <!--链接在哪个窗口打开  常用值：_self、_blank-->

_blank：在新窗口中打开；

_self：默认。在相同的框架中打开；

文本超链接

<a  href="detail.html"  target="_blank">姑娘，欢迎降落在这残酷的世界</a>

图像超链接

<a  href="detail.html"  target="_blank">
    <img src="image/img1.png" alt="姑娘，欢迎降落在这残酷的世界"
           title="姑娘，欢迎降落在这残酷的世界" />
</a>

常用的超链接

锚链接

1.从A页面的甲位置跳转到本页中的乙位置

2.从A页面的甲位置跳转到B页面中的乙位置

创建步骤

1.创建跳转标记

<a name="marker">乙位置</a>

2.创建跳转链接

<a href="#marker">甲位置</a>

功能性链接

电子邮件

MSN

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

行内元素和块元素

块元素

无论内容多少，该元素独占一行（p、h1-h6…）

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)