HTML 学习打卡_Day2

最新推荐文章于 2022-12-31 21:01:25 发布

WeiComp

最新推荐文章于 2022-12-31 21:01:25 发布

阅读量474

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_50197544/article/details/121587836

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学习 HTML ——打卡！！！Day2

1、HTML 标题

1.1、HTML 标题

作用： 生成粗体或大号的文本

标题 (head)是通过==< h1 >~< h6 >==标签进行定义的。h1是最重要的标题，也称之为一级标题；h6是最不重要的标题，称之为六级标题。

示例：

<h1>
    这是一个标题。
</h1>
<h2>
    这是一个标题。
</h2>
<h3>
    这是一个标题。
</h3>

注意： 编译器会自动地标题地前后添加空行。

1.2、HTML 水平线

< hr > 标签在 HTML 页面中创建水平线，hr 元素可用于分隔内容。

示例：

<p>
    这是一个段落。
</p>
<hr>
<p>
    这是一个段落。
</p>
<hr>
<p>
    这是一个段落。
</p>

1.3、HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更容易被人理解。浏览器往往会忽略注释，也不会显示它们。注释写法如下：

<!--这是一个注释-->

注意：开始括号之后（左边的括号）需要紧跟一个感叹号！，结束括号之前（右边的括号）不需要，合理的使用注释可以对未来的代码编辑工作产生帮助。

1.4、HTML 标签参考手册

标签	描述
< html >	定义 HTML 文档
< body >	定义文档的主体
< h1 > ~ < h6 >	定义 HTML 标题
< hr >	定义水平线
< !–……-- >	定义注释

2、HTML 段落

2.1、HTML 段落

段落是通过 p 元素定义的。段落写法如下：

<p>
    这是一个段落。
</p>
<p>
    这是另一个段落。
</p>

2.2、不要忘记使用结束标签

即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

<p>
    这是一个段落。
<p>
    这是另一个段落。

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释: 在未来的 HTML 版本中，不允许省略结束标签。

2.3、HTML 拆行

作用：在不产生一个新段落的情况下进行换行，使用< /br >。

示例：

<p>
    这个<br>段落<br>演示了分行的效果。
</p>

注意：==<(尖括号) /br (尖括号)>==元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

2.4、HTML 输出-使用提醒

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，我们无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

2.5、HTML 标签参考手册

标签	描述
< p >	定义一个段落
< br >	插入单个拆行（换行）

3、HTML 文本格式化

3.1、HTML 文本格式化

HTML 使用标签 < b > 与 < i > 对输出的文本进行格式，如粗体 or 斜体。这些 HTML 标签被称为格式化标签。

通常标签 < strong > 替换加粗标签 < b > 来使用，尖括号 em 尖括号替换尖括号 i 尖括号标签来使用。

<b>
    这个文本是加粗的。
</b>

<br />

<strong>
    这个文本是加粗的。
</strong>

<br />

<big>
    这个文本是放大的。
</big>

<br />

<em>
    这个文本是斜体的。
</em>

<br />

<i>
    这个文本是斜体的。
</i>

<br />

<small>
    这个文本是缩小的。
</small>

<br />

这个文本包含
<sub>
    下标
</sub>

<br />

这个文本包含
<sup>
    上标
</sup>

删除字效果 和 插入字效果

<body>
<P>
    My favorite color is <del>blue</del> <ins>red</ins>!
</P>
</body>

3.2、HTML 文本格式化标签

标签	描述
< b >	定义粗体文本
< em >	定义着重文字
< i >	定义斜体字
< small >	定义小号字
< strong >	定义加重语气
< sub >	定义下标字
< sup >	定义上标字
< ins >	定义插入字
< del >	定义删除字

4、HTML 链接

作用：HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接，点击链接可以从一张页面跳转到另一张页面。

4.1、HTML 链接语法

<a href="url">链接文本</a>

4.2、HTML 超链接（链接）

HTML 使用标签 < a > 来设置超文本链接。
超链接可以是一个字、一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当你把鼠标指针移动到网页中的某个链接时，箭头会变为一只小手。
在标签 < a > 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线
- 访问过的链接显示为紫色并带有下划线
- 点击链接时，链接显示为红色并带有下划线

示例：点击这个超链接会把用户带到菜鸟教程的首页。

<a href="https://blog.csdn.net/weixin_50197544/article/details/121587836?spm=1001.2014.3001.5501">
    访问1_Lina主页！
</a>

4.3、HTML 链接-target 属性

使用 target 属性，可以定义被链接的文档在何处显示。

**示例：**下面的这行会在新窗口打开文档:

<a href="https://blog.csdn.net/weixin_50197544/article/details/121587836?spm=1001.2014.3001.5501" target="_blank" rel="noopener noreferrer">
    访问1_Lina主页！
</a>

4.4、HTML 链接- id 属性

5、HTML 头部

5.1、HTML < head >

head 元素包含了所有的头部标签元素。在 head 元素中可以插入脚本(scripts)，样式文件(CSS)，及各种 meta 信息。

可以添加在头部区域的元素标签为：

<title>、<style>、<meta>、<link>、<script>、<noscript>、<base>

5.2、HTML < title >

title 标签定义了不同文档的标题

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

一个简单的 HTML 文档

<!DOYTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
    文档标题
</title>
</head>

<body>
文档内容……
</body>

</html>

5.3、HTML < base >

5.4、HTML < link >

link 标签定义了文档与外部资源之间的关系，通常用于链接到样式表。

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

5.5、HTML < style >

style 标签定义了 HTML 文档的样式文件引用地址，也可以直接添加样式渲染 HTML 文档。

<head>
    <style type="text/css">
        body {background-color: yellow;}
        p {color:blue}
    </style>
</head>

5.6、HTML < meta >

meta 标签描述了一些基本的元数据，元数据不显示在页面上，但会被浏览器解析。meta 元素通常用于指定网页的描述、关键字、文件的最后修改时间、作者和其他元数据。元数据可以使用与浏览器（如何显示内容或重新加载页面）、搜索引擎（关键字）或其他 Web 服务。meta 一般放置于 head 区域

使用实例：

为搜索引擎定义关键字：

<meta name="keywords" content="HTML,CSS,XML,XHTML,JacaScript">

为网页定义描述内容：

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者：

<meta name="author" content="1_Lina">

每30秒钟刷新当前页面：

<meta http-equiv="refresh" content="30">

示例：

<!--为搜索引擎定义关键字-->
<meta name="keywords" content="HTML,CSS,XML,XHTML,JacaScript">

<!--为网页定义描述内容-->
<meta name="description" content="免费 Web & 编程 教程">

<!--定义网页作者-->
<meta name="author" content="Runoob">

<!--每30秒种刷新当前页面-->
<meta http-equiv="refresh" content="30">

5.7、HTML < script >

script 标签用于加载脚本文件，如：JavaScript。script 元素在以后的章节种会详细叙述。

5.8、HTML head 元素

标签	描述
< head >	定义文档的信息
< title >	定义文档的标题
< base >	定义页面链接标签的默认链接地址
< link >	定义一个文档和外部资源之间的关系
< meta >	定义 HTML 文档中的元数据
<< script >	定义客户端的脚本文件
<< style >	定义 HTML 文档的样式文件

WeiComp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 学习打卡_Day2

HTML 学习打卡_Day2文章目录HTML 学习打卡_Day21、HTML 标题1.1、HTML 标题1.2、HTML 水平线1.3、HTML 注释1.4、HTML 标签参考手册2、HTML 段落2.1、HTML 段落2.2、不要忘记使用结束标签2.3、HTML 拆行2.4、HTML 输出-使用提醒2.5、HTML 标签参考手册3、HTML 文本格式化3.1、HTML 文本格式化3.2、HTML 文本格式化标签4、HTML 链接4.1、HTML 链接语法4.2、HTML 超链接（链接）4.3、HTML
复制链接

扫一扫