HTML(Hyper Text Markup Language)标签介绍

最新推荐文章于 2024-08-27 15:45:31 发布

Echo.....

最新推荐文章于 2024-08-27 15:45:31 发布

阅读量267

点赞数

文章标签： html 前端 java

本文链接：https://blog.csdn.net/m0_61810345/article/details/125975600

版权

W3C 万维网联盟（World Wide Web Consortium）

W3C标准包括

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

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

<!DOCTYPE html>
<html lang="en">
<!-- 网页头部 -->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 网页主体-->
<body> <!-- 开放标签-->

</body> <!-- 闭合标签 单独呈现的标签（空元素） /用来关闭空元素-->
</html>

<!--注释 -->
<!--DOCTYPE:告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>

<html lang="en"><!-- 总标签-->
<!--head标签 代表网页头部-->
<head>
<!-- mate描述性标签，它用来描述我们网站的一些信息  -->
<!--    mate一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="练习，HTML">
    <meta name="description" content="学习HTML">
<!--    title 网页标签-->
    <title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
hello world
</body>
</html>

网页基本标签

标题标签

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

段落标签

<!--段落标签-->
<p> 散落的月光穿过了云</p>
<p>躲着人群</p>
<p>铺成大海的鳞</p>
<p>海浪打湿白裙</p>
<p>试图推你回去</p>

换行标签

<!--换行标签-->
散落的月光穿过了云<br/>
躲着人群<br/>
铺成大海的鳞 <br/>
海浪打湿白裙<br/>
试图推你回去 <br/>

水平线标签

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

字体样式标签


<!--粗体，斜体-->
<h1>字体样式标签</h1>
正常:i love you
粗体: <strong>i love you</strong>
斜体: <em>i love you</em>

注释和特殊符号

<!--特殊符号-->
空       格:
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权
<!--特殊符号记忆方法
&  ;
-->

运行结果

图像标签

常见的图像格式

JPG

GIF

PNG

BMP（位图）

<!--img学习
src : 图片地址
        相对地址，绝对理路径
        ../ 上一级目录
alt  :加载失败显示的内容
title  :悬停文字（鼠标停在图片上显示的文字）
wight:宽
height:高

src alt 必写
-->
<img src="../resources/image/1.jpg" alt="ping" title="悬停文字" width="700" height="400">

链接标签

<!--a标签学习
href: 必填，表示要跳转的页面
target : 表示窗口在哪里打开
    _blank  在新窗口打开
    _self   在自己窗口打开（默认）
-->
<a href="第一个网页.html"target="_blank">点击我跳转到页面一</a>
<br/>
<a href="http://www.baidu.com"target="_self">点击我跳转到百度</a>
<br/>
<a href="第一个网页.html"><img src="../resources/image/1.jpg" alt="ping" title="悬停文字" width="700" height="400">
</a>

<!--锚链接
1需要一个标记
2跳转到标记
-->
<a href="#top">回到顶部</a>
<a name="down"></a>

<!--功能性链接
邮件链接 : mailto

-->
<a href="mailto:28679572@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="需要帮助联系我" title="需要帮助联系我"/></a>

列表的分类

有序列表

<!--有序列表
应用范围：试卷、问答等-->
<ol>
    <li>JAVA</li>
    <li>Python</li>
    <li>C</li>
    <li>C++</li>
    <li>Go</li>
</ol>

无序列表

<!--无序列表
应用范围：导航，侧边栏-->
<ul>
    <li>JAVA</li>
    <li>Python</li>
    <li>C</li>
    <li>C++</li>
    <li>Go</li>
</ul>

定义列表

<!--自定义列表
dl 标签
dt  列表名称
dd  列表名称
应用范围：公司网站底部-->
<dl>
    <dt>学科</dt>
    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>C</dd>
    <dd>C++</dd>
</dl>

运行结果

表格标签

基本结构

单元格

行 tr

列 td

跨行 colspan

跨列 rowspan

<!--表格标签 table
行   tr   rows
列   td
border="1px" 加分割线
-->

<table border="1px">
    <tr>
<!--        colspan 跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
<!--        rowspan 跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>