HTML基础入门：结构、样式与交互-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74991285/article/details/129918370

HTML简介

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

web标准的构成：

结构、表现、行为三个方面

结构：用于对网页元素进行整理和分类（HTML)；

表现：表现用于设置网页元素的版式、颜色、大小等外观样式（CSS)；

行为：行为是指网页模型的定义及交互的编写（JAVASCRIPT）；

一、HTML基本结构标签

<html>
     <head>
                <title>第一个页面</title>
     </head>
     <body>
     键盘敲烂，工资过万！
  </body>
</html>

<html>（最大标签根标签）

<head>（文档的头部）

<title>第一个页面</title>（网页标签）

</head>

<body>

键盘敲烂，工资过万！（文档的主体，页面内容基本上放到body里面）

</body>

</html>

二、HTML常用标签

加粗：或

倾斜：或

删除线：<del></del>或<s></s>

下划线：<ins></ins>或

三、标题标签

标题一共六级选文字加粗一行选，由小到大依级减，从重到轻随之变。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题标签</h1>
    <h1>标题一共六级选，</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>
    
</body>
</html>

四、图像标签

图像标签属性注意点：

①图像标签可以拥有多个属性，必须写在标签名后面。

②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

③属性采取键值对的格式，即key="value"的格式，属性="属性值"。

注：scr属性是图像标签中必须要写的。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>图像标签的使用：</h4>
    <img src="img.jpg"/>
    <h4>alt 替换文本 图像显示不出来的时候用文字替换：</h4>
    <img src="img1.jpg" alt="瓦达西程序员"/>
    <h4>title 提示文本 鼠标放在图像上，提示的文字：</h4>
    <img src="img.jpg" alt="瓦达西程序员" title="瓦达西程序员思密达"/>

    <h4>width 给图像设定宽度：</h4>
    <img src="img.jpg" alt="瓦达西程序员" title="瓦达西程序员思密达" width="500"/>
    <h4>height 给图像设定高度：</h4>
    <img src="img.jpg" alt="瓦达西程序员" title="瓦达西程序员思密达" height="100"/>
</body>
</html>

alt：替换文本图像显示不出来的时候用文字替换

title：提示文本鼠标放在图像上，提示的文字

width：给图像设定宽度

height：给图像设定高度

五、路径之相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。

同一级路径：图像文件位于HTML文件同一级如<img src="baidu.gif"/>

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img.jpg" width="500"/>
</body>
</html>

下一级路径：图像文件位于HTML文件下一级如<img src="images/baidu.gif"/>

上一级路径：图像文件位于HTML文件上一级如<img src="../baidu.gif"/>

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="images/img.jpg" />（下一级，斜杠前是文件名）
    <img src="../img.jpg" />(上一级，斜杠前不需要文件名)
</body>
</html>

六、路径之绝对路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="C:\Users\86133\Desktop\HTML\案例\img.jpg" width="1000" />（绝对路径的斜杠与相对路径不同）
    <img src="https://img-nos.yiyouliao.com/alph/160356b2fb9f3c0e8e81290fdec69e10.jpg?yiyouliao_channel=xiaomi_image" />
</body>
</html>

1、引入电脑本地的绝对路径，如C盘下某文件夹里名称为“img.jpg”的图片：

<img src="C:\Users\86133\Desktop\HTML\案例\img.jpg" width="1000" />

（注意：绝对路径与相对路径的斜杠不同）

2、引入网络上的文件：

<img src="https://img-nos.yiyouliao.com/alph/160356b2fb9f3c0e8e81290fdec69e10.jpg?yiyouliao_channel=xiaomi_image" />

七、超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    target 打开窗口的方式 默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面
    <a href="http://ww.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接：网站内部之间的相互链接</h4>
    <a href="gongsijianjie.html" target="_blank">公司简介</a>
    <h4>3.空链接：#</h4>
    <a href="#">公司地址</a>
    <h4>4.下载链接：地址链接的是文件 .exe 或者是 .zip 等压缩包形式</h4>
    <a href="img.zip">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com" target="_blank"><img src="img.jpg"/></a>
</body>
</html>

1、语法格式：

<a href="跳转目标"target="目标窗口的弹出方式">文本或图像</a>

target 打开窗口的方式默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面

2、外部链接：例如

<a href="http://www.qq.com" target="_blank">腾讯</a>
<a href="http://ww.itcast.cn" target="_blank">传智播客</a>

实现如下：

3、内部链接：

网站内部页面之间的互相链接。直接链接内部页面名即可，例如：

<a href="gongsijianjie.html" target="_blank">公司简介</a>

注：不需加http://

4、空链接：

空链接无法打开，格式如下：

<a href="#">空链接</a>

5、下载链接：

如果href里面地址是一个文件或者压缩包时，会下载这个文件。

6、网页元素链接：

在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

例如：

<a href="http://www.baidu.com" target="_blank"><img src="images/img.jpg"/></a>

再点击图片后会跳转到百度页面。

HTML入门学习