第二节：标签、路劲、样式

最新推荐文章于 2024-11-01 12:26:05 发布

小戈&328

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量126

点赞数

分类专栏： DIV+CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_43220836/article/details/126830618

版权

DIV+CSS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文档详细介绍了HTML的基础知识，包括超链接`<a>`和图片`<img>`标签的使用，以及相对和绝对路径的概念。同时，讲解了样式的三种形式：行内样式、内部样式和外部样式，强调了它们在网页设计中的应用。通过对这些基础知识的学习，读者可以更好地理解和创建静态网页。

摘要由CSDN通过智能技术生成

第二节：标签、路劲、样式

文章目录

- 第二节：标签、路劲、样式

1、标签

超链接标签：

<a href="" target=""></a>
href是标签属性(链接地址)  引号部分就是属性值(跳转的路径地址)
target是页面打开方式
	默认值 _self 当前页面打开
	_blank 新页面打开
	文本,图片,某一区域 都可以作为超链接跳转
<a href="https:www.baidu.com" target="">跳转到百度</a>

图片标签:

<img src="">
src是标签属性(这个是路径)
alt是标签属性(图片描述)  图片加载不成功 作为替换文本
width是标签属性(宽度)
height是标签属性(高度)
这里的宽高是图片的原始值,有利于图片压缩
title 标题
页面图片展示的大小,只能在css样式里面写
<img src="01.jpg" alt="这是加载图片失败时的提示" width="800" height="600" title="这是一个图片">

<!doctype html>
<!--文档类型声明 HTML网页-->
<html>
<!--根标签-->

<head>
    <!--整个网页的基本信息 浏览器搜索引擎抓取-->
    <meta charset="UTF-8">
    <!--字符编码 国际编码-->
    <meta name="Keywords" content="xiaoge-education">
    <!--网站关键字 浏览器搜索-->
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <!--网站描述信息-->
    <title>01-常用标签</title>
    <!--网站的标题-->
</head>

<!--网页的展示部分-->

<body>
    <!-- a 标签 跳转到百度 -->
    <a href="https:www.baidu.com">跳转到百度</a>

    <!-- 图标标签 -->
    <img src="./img/test.jpg" alt="加载失败" width="800" height="600" title="这是一个图片">

</body>

</html>

2、路径

路径:

相对路径：

相对路径:相对于谁开始找
1、同一个文件夹里面 直接书写图片名称
2、图片相对于html文档在下一个文件夹内部 文件夹名称/图片名称 (多层文件夹嵌套 必须依次查找)
3、图片相对于html文档在上一个文件夹内部 跳出当前文件夹 ../图片名称(多层文件夹嵌套 必须依次跳出)

绝对路径：

绝对路径:
本地绝对路径(电脑 的盘符开始)
网络绝对路径(从域名开始 找到存储图片的服务器)

<!doctype html>
<!--文档类型声明 HTML网页-->
<html>
<!--根标签-->

<head>
    <!--整个网页的基本信息 浏览器搜索引擎抓取-->
    <meta charset="UTF-8">
    <!--字符编码 国际编码-->
    <meta name="Keywords" content="xiaoge-education">
    <!--网站关键字 浏览器搜索-->
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <!--网站描述信息-->
    <title>01-常用标签</title>
    <!--网站的标题-->
</head>

<!--网页的展示部分-->

<body>
    <!-- 相对路径 -->
    <a href="./case.html">相对路径 基于当前文件</a>
    <!-- 绝对路径 -->
    <a href="https:www.baidu.com">绝对路径 基于https</a>
    <a href="file:///C:/Users/xiaoge/Desktop/chapter/case/case.html">绝对路径 基于电脑磁盘</a>

</body>

</html>

3、样式

样式：
行内样式
行内样式是在标签中添加style属性

内部样式
在文件中创建style标签里面根据选择器实现给标签添加属性

外部样式
创建一个css文件在文件中添加属性，通过导入的方法添加到页面中使用

<!doctype html>
<!--文档类型声明 HTML网页-->
<html>
<!--根标签-->

<head>
    <!--整个网页的基本信息 浏览器搜索引擎抓取-->
    <meta charset="UTF-8">
    <!--字符编码 国际编码-->
    <meta name="Keywords" content="xiaoge-education">
    <!--网站关键字 浏览器搜索-->
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <!--网站描述信息-->
    <title>01-常用标签</title>
    <!--网站的标题-->

    <style>
        /* 内部样式 */
        a {
            display: block;
            height: 50px;
            line-height: 50px;
            background-color: #555;
            color: red;
            text-decoration: none;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>

<!--网页的展示部分-->

<body>
    <!-- 行内样式 -->
    <a href="#" style="color:blue;">相对路径 基于当前文件</a>
    <a href="#">相对路径 基于当前文件</a>
    <a href="#">相对路径 基于当前文件</a>

    <!-- 
        外部样式：外部样式将style标签中的内容独立到一个新的css文件中 使用link导入当前页面即可
        style.css 中内容：
        
            a {
            display: block;
            height: 50px;
            line-height: 50px;
            background-color: #555;
            color: red;
            text-decoration: none;
        }
        html中导入
        eg:<link rel="stylesheet" href="style.css">

     -->

</body>

</html>