【HTML】-- 01 初识HTML

发布时间：2024年01月17日

HTML

1.初识HTML

Hyper Text Markup Language：超文本标记语言

1.1 W3C标准

  • W3C
    • World Wide Web Consortium(万维网联盟)
    • 成立于1994年，Web技术领域最权威和最具影响力的国际中立性技术标准机构
    • http://www.w3.org/
    • http://www.chinaw3c.org/
  • W3C标准包括：
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)

1.2 HTML基本结构

图1

如上所示，、等成对的标签，分别叫开放标签和闭合标签。单独呈现的标签(空元素)如

，意为用/来关闭空元素

1.3 网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>

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

<!--段落标签-->
<p>跑得快    跑得快</p>
<p>真奇怪    真奇怪</p>
<p>一只没有耳朵    一只没有耳朵</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
跑得快    跑得快<br/>
真奇怪    真奇怪<br/>
一只没有耳朵    一只没有耳朵<br/>

<!--字体样式标签-->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong><br/>
斜体：<em>i love you</em><br/>

<!--特殊符号-->
空    格：空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格 <br/>
大于号：&gt;<br/>
小于号：&lt;<br/>
版权号：&copy;版权所有duo<br/>

<!--
特殊符号记忆方式：
方法一：&+ ;可以在IDEA中预览各种特殊符号的写法
方法二：搜索引擎查询
-->

</body>
</html>

特殊符号预览：

图2

1.4 图像标签

  • 常见的图像格式

    • JPG
    • GIF
    • PNG
    • BMP
  • <img src="path" alt="text" title="text" width="x" height="y"/>
<!--图像地址 图像的替代文字 鼠标悬停提示文字 图像宽度 图像高度-->

1.5 链接标签

  • 文本超链接

  • 图像超链接

  • <a href="path" target="目标窗口位置">链接文本或图像</a>
<!--链接路径 链接在哪个窗口打开：_self、_blank-->

超链接：页面间链接(从一个页面链接到另一个页面)、锚链接、功能性链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<a id="top">顶部</a><br/>

<!--
href:表示要跳转到哪个页面
target:表示窗口在哪里打开
    _blank:在新建窗口中打开
    _self(默认):在当前窗口中打开
-->
<a href="3.图像标签.html" target="_blank">
    点击图片确认跳转 <br/>
    <img src="../resources/image/fire.jpg" alt="我的头像" title="fire">
</a><br/>
<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>

<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
#
-->

<!--功能性链接
邮件链接：mailto
-->
<a href="mailto:duo_53@163.com">点击联系我</a>

<a href="#top">回到顶部</a><br/>
<a id="bottom">底部</a>

</body>
</html>

上述代码显示网页如下：

图3

图4

此外，还可以通过在href属性中添加#直接跳转至页面中的锚处：

<a href="4.链接标签.html#bottom"><br/>点击跳转</a>
文章来源:https://blog.csdn.net/qq_51916086/article/details/135661701
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章