前端基础知识——HTML（二）

最新推荐文章于 2024-06-28 11:51:12 发布

simon_dg

最新推荐文章于 2024-06-28 11:51:12 发布

阅读量393

点赞数 1

分类专栏：前端基础文章标签： html 标签相对路径

本文链接：https://blog.csdn.net/simon_dg/article/details/77662687

版权

前端基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

-HTML是负责描述文档语义的语言。
我们应该记住的是HTML的所有标签只是为了给文字增加语义的，比如我下面会介绍的标题标签是给文本增加主标题的语义，而不是给文字加粗、加黑、变大。
- HTML是英语HyperText Markup Language的缩写，超文本标记语言。
- .html就是网页的格式。
一句话总结：HTML唯一作用就是通过标签对，给文本增加语义。这是html唯一能做的。其他的样式全部给CSS负责。

一、HTML的基本语法特性

1.HTML对换行，对tab不敏感

<div class="nav">
    <p>
        <h1></h1>
    </p>
</div>

完全等价于：

    <div class="nav">
    <p>
<h1></h1>
    </p>
    </div>

也就是说在HTML中不是依靠缩进来表示嵌套的，而是看标签的包裹关系。但是，有良好的缩进，代码更易读。正确缩进标签是必要的。

2.空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

显示后，换行折叠了：

3.不同标准下标签封闭（eg：input标签）
HTML5标准：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
<input type="text"> 没有封闭
</body>
</html>

其他标准 eg：xt（x表示XHTML，t表示transitional）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" />  封闭了
</body>
</html>

HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了。除了HTML5少数标签，其他标准下包括HTML5，标签要严格封闭。
补充：
DTD：文档类型声明Doc Type Declaration。有7种DTD，3种HTML4.01的，3种XHTML1.0的，1种HTML5的。
三个小种： strict、transitional、frameset。
XHTML总体上要比HTML严格，比如必须是小写字母标签等等。

二、标签
HTML将所有的标签分为两种：容器级、文本级。
容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。

1.h标签
h标签没有嵌套关系，虽然h标签是容器级，理论上里面可以放其他的标签，但是语义是不允许的。放其他的标签，千万不要这么干。

<h1>到<h6>都是标题标签，只是代表的语义强度不一样。

2.p标签
p标签是文本级的，一定记住里面只能放文字、图片、表单元素。如果你想放其他标签，浏览器会自动将p封闭的。
p标签

3.img标签
自封闭标签，也称为单标签。img只是表示图片，不需要为文字增加语义。

 <img src="" alt="">  HTML中不能直接插入图片，需要img标签引入地址
 SRC为图片的路径，Alt全称alternative，可以替换的，当图片无法正常显示时，会显示上面的内容

4.超链接
一个网站由多个HTML页面组成，超链接实现了页面之间的跳转。

<a href="test1.html" title="我是大师兄" target="_blank">师傅</a>
href为跳转的地址，title为鼠标放上去是显示的内容，target为跳转方式：_blank为在空白页显示目标地址内容，默认是在当前页面刷新。

示例：实现test.html 跳转到 test1.html

超链接

使用默认target：

test.html

跳转到 test1.html

test1.html

使用target=”_blank”

_blank

针对路径补充：相对路径和绝对路径
绝对路径：以file，HTTP，HTTPS开头的都是绝对路径。就像他的名字一样绝对，只有写全了才找的到文件。
相对路径：以自己为起点，找其他的文件。./ 代表当前路径 ../ 代表父级路径，可以理解为相对于自己，找到间隔一个文件夹的文件夹

示例：

现在要从1.html 跳转到 2.html。我们可以看到2.html 在 myweb2 下面，myweb2 在work 下面，要找2.html,就要找到work。所有1.html 相对于自己 “../” 间隔一个文件夹找到work文件夹。所以路径写成<a href="../myweb2/2.html"></a>
同理在1.html 中插入 kaola.png 图片。1.html相对于自己”../../”间隔两个文件夹找到document。所以路径写成<img src="../../photo/kaola.png" alt="">