HTML 学习记录(上）

jigsaw_zyx

已于 2022-04-30 19:52:57 修改

阅读量317

点赞数 1

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

于 2022-04-14 13:34:45 首次发布

本文链接：https://blog.csdn.net/jigsaw_zyx/article/details/124166871

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

内容是《少年歌行》的插曲，学习资源源自B站狂神的HTML+头歌作业

HTML 基本概念

HTML是一种标准化的标记语⾔，由一套标记标签(markup tag)组成。Web前端开发人员的一项主要工作就是利用HTML标签来编写⽹页，将文本、超链接、图片、语音、视频等各种内容整合起来，实现绚丽多姿的网页。

下面是大家需要记住的关于HTML的一些基本描述：

HTML标记标签，通常简称HTML标签；

HTML文档，通常简称HTML页面、网页等；

HTML5能够较好的兼容HTML之前版本，但也废弃了一些旧的HTML特性。

基本的HTML结构

这是一个最基本HTML页面：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>Hello World</title>  
    </head>  
    <body bgcolor="yellow">  
        <h1 align="center">这是一个一级标题</h1>  
        <p>这是第1个段落。</p>  
        <p>这是第2个段落。</p>  
    </body>  
</html>

在这里插入图片描述

HTML 标签

HTML标签由一对尖括号、标签名，以及反斜杠组成，包括开始标签和结束标签两类：

开始标签的格式：<标签名>。
结束标签的格式：</标签名>。

因此，

<html>，<head>，等都是开始标签；

</html>，</head>，等都是结束标签。

HTML 元素

HTML元素是由HTML开始标签、元素内容、HTML结束标签，以及各种HTML属性组成的嵌套式HTML内容单元。

典型的HTML元素的格式：

<标签名> 元素内容 </标签名>

因此，

一个HTML文档，即…就是一个最大的HTML元素；

<head>...</head>，...也都是HTML元素（其中…表示两个标记之间的所有内容）。

HTML 属性

属性提供了有关HTML元素的更多的信息。

HTML属性位于开始标签，其基本的结构如下：

<标签名属性名=“属性值”> 元素内容 </标签名>

下面是关于属性的一些要点：

属性在开始标签中规定；

属性是以名称/值对的形式出现，比如：name=“value”；

一个标签可以包含多个属性；

HTML属性不会展现到网页上。

本例中，bgcolor属性代表主体(body)部分的颜色；align属性代表对齐方向，其值有：
在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello world</title>
  </head>  
    <!--------- Begin-------->

<!-- 淡黄色 -->
  <body bgcolor="F6F3D6">
    <!--用HTML语言向世界打声招呼吧！-->
    <h1 align="center">Hello World</h1>
    <p align="center">动手改变世界</p>
  </body>
    <!--------- End-------->

</html>

一、网页基本信息

在这里插入图片描述

DOCTYPE:告诉浏览器我们用什么规程
注释快捷键ctrl+/

DOCTYPE HTML的作用

<!DOCTYPE HTML>

声明了该文档是HTML 5的文档。

因为在Web世界里，有很多各式各样的文档类型，所以我们首先需要做的便是声明该文档是HTML，以便浏览器正确显示网页。

如果你想声明为HTML 4.01的文档可以这样写：

<!DOCTYPE `HTML` PUBLIC "-//W3C//DTD `HTML` 4.01 Transitional//EN"   
"http://www.w3.org/TR/`HTML`4/loose.dtd">

因为本实训以HTML 5作为标准，所以统一使用第一种方式。

提示：

为什么与HTML4.01相比HTML 5声明中没有数字"5"呢？
因为W3C认为之前的文档声明太过复杂，正好借此机会移除版本号，这样声明就更加简化；

在背景知识中，你能够了解更多HTML版本的历史信息。

根元素：HTML 元素

然后，元素告知浏览器其本身是一个HTML文档。

除去第一行外，其余的页面内容都应该包含在元素中，所以它也被称为根元素。

头元素：head 元素

与属性会给元素增添附加信息一样，head元素能为整个网页增添更多信息。可以用在head中的标签有, , ,

网页标题元素：title

本例网页主要内容是“我的第一个网页”，所以title也设置为“我的第一个网页”。
title元素的内容即网页标题，它是一个网页必需的元素之一。

<title>我的第一个网页</title>

在这里插入图片描述

元信息元素：meta，描述性关键词

meta元素提供元数据信息，主要包括：

页面编码；
网页标题；
网页描述；
网页关键词。

这些信息，一方面可用于告知浏览器如何展示页面，另一方面可以提供给搜索引擎检索。
因为搜索引擎会通过meta元素的name和content属性来检索页面，所以当我们加入了合适的关键字和描述内容时，页面就更容易被搜索引擎发现。

<!--  meta描述性关键词  -->
    <meta name="keyword" content="sicnu学习记录">
    <meta name="description" content="来这里学java">

编码格式：charset

<meta charset="utf-8">

该行定义了浏览器解析网页文档时使用的编码方式。通常，我们使用utf-8编码以支持各国语言。

描述：description

描述信息使用一句话告知搜索引擎我们网页的主要内容是什么。

通常description的写法如下：

<meta name="description" content="一句话描述网页内容">

关键词：keywords

同理，关键词信息使用多个并行的关键词告知搜索引擎我们网页内容的关键词信息。

通常keywords的写法如下：

<meta name="keywords" content="关键词一,关键词二,关键词三">

主体元素：body 元素

<body>元素是一个文档的主体，文档内容都包含在<body>元素中，最终呈现在网页上。

代码

<!--  DOCTYPE:告诉浏览器我们用什么规程 -->
<!--注释快捷键ctrl+/-->

<!DOCTYPE html>

<!--head:代表网页头部-->
<html lang="en">
<head>
    <!--    meta:用于表述网站信息-->
    <meta charset="UTF-8">
    <!--  meta描述性关键词  -->
    <meta name="keyword" content="sicnu学习记录">
    <meta name="description" content="来这里学java">

    <!--    网页标签-->
    <title>我的第一个网页</title>
</head>

<!--网页主体-->
<body>
Hello World!
</body>

</html>
<!d

二、网页基本标签

（1）标题标签

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

在这里插入图片描述

（2）段落标签

<!--段落标签-->
<!--段落快捷键：p+Tab-->
<p>天涯路相伴</p>
<p>有你在身边</p>

在这里插入图片描述

（3）水平线标签

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

在这里插入图片描述

（4）换行标签

<!--换行标签:更紧凑间距小-->
风华不枉少年<br/>
晚霞映红你侧脸<br/>
温润如玉的眉眼<br/>

在这里插入图片描述

（5）字体样式

1.粗体

<strong>藏着执着的信念</strong>

在这里插入图片描述

2.斜体

<em>英雄从不轻叹</em>

在这里插入图片描述

（6）特殊符号

<!--特殊符号-->
<!--空格:&nbsp-->
<p>空&nbsp；格</p>
<!--大于号:&gt;-->
<p>&gt</p>
<!--小于号:&lt;-->
<p>&lt</p>
<!--版权所有符号:&copy;-->
&copy江月
<br>

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

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

<!--段落标签-->
<!--段落快捷键：p+Tab-->
<p>天涯路相伴</p>
<p>有你在身边</p>

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

<!--换行标签:更紧凑间距小-->
风华不枉少年<br/>
晚霞映红你侧脸<br/>
温润如玉的眉眼<br/>

<!--字体样式标签-->
<!--粗体斜体-->
<strong>藏着执着的信念</strong>
<em>英雄从不轻叹</em>
<br>

<!--特殊符号-->
<!--空格:&nbsp-->
<p>空&nbsp;格</p>
<!--大于号:&gt;-->
<p>&gt</p>
<!--小于号:&lt;-->
<p>&lt</p>
<!--版权所有符号:&copy;-->
&copy江月
<br>
只用&nbsp此生乱流年
一腔的热血
举杯望青天
将心向明月.
往事化作尘烟
花开花落雨缠绵
水波淡淡生云烟

<br>
&copy;江月

</body>
</html>

三、图像标签

在这里插入图片描述
src：图片地址
绝对地址，相对地址
…/ 上一级目录
alt:图片名字（必填）

<img src="../resoures/img/QQ图片20210811172820.jpg" alt="海绵宝宝" title="悬停文字">

将图片放入新建的资源文件夹（好习惯）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>

<!--快捷键:img+Tab-->
<!--img学习
src:图片地址（必填）
  相对地址,绝对地址
  ../ 上一级目录

alt:图片名字（必填）
-->
<img src="../resoures/img/QQ图片20210811172820.jpg" alt="海绵宝宝" title="悬停文字">
</body>
</html>

四、链接标签

在这里插入图片描述

概念

超链接是网页互连的核心，网页之间通过超链接连接在一起。

我们使用<a> 标签定义超链接。

一个简单的例子如下：

<a href="https://baidu.com">百度搜索</a>

点击a元素内容后打开百度搜索网页。

其中，href属性指定了超链接的目标，本例中即跳转到百度。

属性

href 属性
href 属性是超链接最重要的属性，它用于指定超链接目标的 URL。

典型的超链接格式如下：

 <a href="URL">

其中，目标URL有三种类型：

锚 URL (anchor URL)： 指向同一页面内某一位置；

相对 URL (relative URL)： 指向同一网站的不同文件；

绝对 URL (absolute URL)： 指向另一个网站。

提示:

URL：Uniform Resource Locator，统一资源定位器；

为什么叫作锚URL呢？

锚的含义取于船上的锚，船把锚沉在水底后，如果船随水飘移了，只要一拉锚的锁链就会回到抛锚的位置。同样的，在html中点锚链接就能回到指定位置。

这三种链接实际效果是如何的呢？下面让我们通过三组实例来加深理解。

锚 URL 实例：创建网页内导航

<body>  
    <h1>HTML 入门</h1>  
    <h2>本页目录</h2>  
    <ul>  
        <li><a href="#toc1">简介</a></li>  
        <li><a href="#toc2">第1关</a></li>  
        <li><a href="#toc3">第2关</a></li>  
    </ul>
    <h2 id="toc1">简介</h2>  
    <p>HTML(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。  
    在CSS(Cascading Style Sheets，级联样式表单)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
    <h2 id="toc2">第1关</h2>  
    <p>初识HTML：简单的Hello World网页</p>
    <h2 id="toc3">第2关</h2>  
    <p>HTML链接：带超链接的网页</p>  
    <hr>  
    <p><a href="#">回到顶部</a></p>  
</body>

其中第5行：

<a href="#toc1">简介</a>

定义了一个指向#toc1目标的锚链接。所以，点击之后会定位到第10行：

<h2 id="toc1">简介</h2>

id属性值为toc1的位置。

所以，完整的一对页面内导航的写法为：

<a href="#id值内容">简介</a>

<开始标签 id="id值内容">内容<结束标签>

此外，当href="#"时，默认回到网页顶部位置。

相对 URL 实例：跳转到同一网站的另一个网页

<body>  
    <h2>主页</h2>  
    <h3>网站导航：</h3>  
    <ul>  
        <li><a href="./home.html">主页</a></li>  
        <li><a href="./blog.html">博客</a></li>  
        <li><a href="./project.html">项目</a></li>  
        <li><a href="./about.html">关于我</a></li>  
    </ul>  
</body>

在这里插入图片描述
在上述例子中，因为home.html、blog.html、project.html和about.html均在同一文件夹中；所以第6行：

<a href="./blog.html">博客</a>

./blog.html链接到了同一文件夹中的blog.html页面。

我们说的相对URL是相对于什么呢？

是相对于当前网页home.html路径的URL。.代表当前路径，所以./blog.html代表当前路径下的blog.html网页

绝对 URL 实例：跳转到另一网页

<body>  
    <p>你可以使用搜索引擎，例如  
        <a href="https://www.google.cn" title="google搜索">Google</a>、  
        <a href="https://www.baidu.com" title="Baidu搜索">Baidu</a>、  
        <a href="https://www.bing.com" title="bing搜索">Bing</a>等，搜索网络信息。</p>  
</body>

显示和操作效果如下：
在这里插入图片描述

在这里插入图片描述
绝对URL即指定了完整的网页路径。

发送电子邮件

我们还可以将href属性值设置为mailto:邮箱地址，这样做可以调起邮箱应用，发送邮件到对应地址。

例如：

发送邮件到：<a href=“mailto:someone@email.com”>someone

<p>若需帮助，请发送问题到<a href="mailto:someone@email.com">E-Mail</a>。</p>

target 属性：在何处打开链接
target属性规定了在何处打开超链接。

一个常用的例子如下：

<p>
<a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>

其中，我们指定了 target="_blank"，所以在点击之后，将在新标签中打开链接。

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML链接</title>
    <meta name="description" content="HTML链接知识讲解">
    <meta name="keywords" content="HTML, Link">
</head>
  <!--------- Begin-------->

<body>
    <h1>HTML 入门</h1>
    <h2>本页目录</h2>
    <ul>
        <li><a href="#toc1">简介</a></li>
        <li><a href="#toc2">第1关</a></li>
        <li><a href="#toc3">第2关</a></li>
    </ul>

    <h2 id="toc1">简介</h2>
    <p>
        <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
        <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a>(Cascading Style Sheets，级联样式表单)和
        <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
    <p>自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。</p>
    
    <h2 id="toc2">第1关</h2>
    <p>初识HTML：简单的Hello World网页</p>
    <h2 id="toc3">第2关</h2>
    <p>HTML链接：带超链接的网页</p>
    <hr>
    <p>若需帮助，请发送问题到<a href="mailto:someone@email.com">E-Mail</a>。</p>
    <p><a href="#">回到顶部</a></p>
</body>
  <!--------- End-------->

</html>

在这里插入图片描述

jigsaw_zyx

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML 学习记录(上）

内容是《少年歌行》的插曲，学习资源源自B站狂神的HTML+头歌作业HTML 基本概念HTML是一种标准化的标记语⾔，由一套标记标签(markup tag)组成。Web前端开发人员的一项主要工作就是利用HTML标签来编写⽹页，将文本、超链接、图片、语音、视频等各种内容整合起来，实现绚丽多姿的网页。下面是大家需要记住的关于HTML的一些基本描述：HTML标记标签，通常简称HTML标签；HTML文档，通常简称HTML页面、网页等；HTML5能够较好的兼容HTML之前版本，但也废弃了一些旧的HTML特性
复制链接

扫一扫