前端HTML初学笔记，后续更新

最新推荐文章于 2023-01-05 21:41:52 发布

多普勒的猫

最新推荐文章于 2023-01-05 21:41:52 发布

阅读量346

点赞数

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/duopuledemao/article/details/108094574

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

更新日期：2020-08-19

知识框架

HTML+css

JavaScript

学习网址：http://c.biancheng.net/view/7528.html C语言中文网

本文将原学习资料按照自己的记录做了一些排版，删减了部分内容，同时加入了自己学习过程中遇到的问题记录，通常会有颜色标记，方便查阅。

第一章 HTML

1.什么是网页？

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>这是网页标题</title>
</head>
<body>
    <p>这是一段文本</p>

    <a href="http://c.biancheng.net/">这个一个超链接</a>

    <ul>
        <li>条目1</li>
        <li>条目2</li>
        <li>条目3</li>
    </ul>
</body>
</html>

这就是 HTML 代码！我们可以看到很多由<>包围的特殊标记，这叫做 HTML 标签（Tag），浏览器通过识别这些 HTML 标签来渲染出各种界面和效果。

每种 HTML 标签都有不同的含义，适用于不同的场景，能展示出不同的效果，例如：

<html> 标签用来包围当前网页的所有 HTML 代码，可以把它看做一个外壳。
<head> 标签表示网页的头部，用来设置一些网页的参数，在浏览器中是看不到的：
- <meta charset="UTF-8"> 用来指明当前网页的编码格式是 UTF-8；
- <title> 用来设置当前网页的标题，相当于文件的名字，它会显示在浏览器的标题栏。
<body> 标签表示网页的正文内容，也就是需要在浏览器主界面中显示的内容：
- <p> 标签用来表示一个段落，能容纳一段文本；
- <a> 标签用来表示一个超链接，用鼠标点击后可以跳转到其它网页；
- <ul> 标签用来表示一个列表，其中的每个 <li> 都是子标签，用来表示一个列表项。

将上面的代码保存到 index.html，拖到浏览器中运行，可以看到如下的效果：

一个简单的网页

这是一个非常简陋的网页，仅作为例子来演示，真实网页的 HTML 代码远比这复杂，你可以在网页上单击鼠标右键，然后在弹出菜单中选择“查看网页源代码”，就可以查看当前网页的 HTML 代码。

可是当我在记事本中编辑这段代码后，拖到chrome浏览器运行时，出现的却是乱码

查了一下这是由于我们指定浏览器使用的字符集是UTF-8格式，而我在记事本中编辑默认的是ANSI格式。当我使用nodepad++打开文本后，将编码格式转为UTF-8，保存。打开网页可以正常显示。

2.HTML<img>标签

开发过程中，经常使用图像来美化页面，图像已经成为大多数网站的一个重要组成部分。都说一图胜千言，好的图像有助于制作出精美的网站，从而与那些外观平平的网站区别开来。在 HTML 中，使用 <img> 标签来插入图像，其语法格式如下：

<img> 是图片 image 的简称，它只包含属性，没有闭和标签。src 是它的必选属性，用来表示图片的路径来源。下面，我们来详细分析一下 <img> 标签的 src 属性。src 是 source 的简称，用来声明图像文件的来源，也就是定义图片的引用地址。

我们可以尝试一下在之前编辑的文本中加入这个资源

通过下面的形式可以引用互联网上的资源，当然这个资源也可以是本地的，图片可以是.jpg、.png、.gif等多种格式，引用地址可以是相对 url，也可以是绝对 url。

<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994">

其他属性

前面讲述了 <img> 标签的必选属性 src，接下来再看一下它的可选属性。<img> 标签常用的可选属性有alt、title、width以及height等，我们来分别看一下：

alt 属性用来对图像进行文本说明。一般情况下，当浏览器因某种原因无法载入图像时，就会显示这段文本。虽然 alt 属性值可以为空，但还是建议读者给 alt 属性设置符合图像信息的文本；
title 用来设置鼠标移动到图片上的提示文字。它的值一般与 alt 的值相同，最大的区别是显示的前提条件不同，alt 属性是图片加载失败后显示，而 title 属性则是图片加载成功后鼠标放到它上面才显示；
width 用来设置图片的宽度，使用时不需要加单位，默认是像素（px）；
height 用来设置图片的高度，和 width 一样在使用时不需要加单位，默认是像素（px）。

<img src="http://c.biancheng.net/cpp/templets/new/images/logo.jpg?v=3.994" 
      width="200"  
      height="200" 
      title="这是C语言中文网的logo" 
      alt="这是C语言中文网的logo" 
/>

在这段代码中，首先引入了文件的路径，紧接着对图片的宽高进行了设置，均是 200px；其次又设置了 title 属性，当鼠标移动到图片上时，会显示 title 的内容；最后设置了 alt，当图片加载不出来会显示 alt 的内容。

总结

从上面的讲述中我们可以收获以下几点内容：

src 表示图片的引用地址，这个地址可以是相对 url，也可以是绝对 url；
alt 表示图片加载失败时显示的内容；
title 表示鼠标移动到图片上时显示的文字；
width 表示图片的宽，默认单位是像素（px）；
height 表示图片的高，默认单位也是像素（px）。

3.HTML 超链接

在 HTML 中，我们使用 <a> 标签来表示超链接。
超链接（Hyperlink）是网页中最常见的元素之一，整个互联网都是基于超链接而构建的。每个网站都由众多的网页组成，超链接使得网页之间不再独立，它就像一根线，把网页连接在一起，形成一个网状结构。互联网之所以能够称之为“网”，就是因为有超链接的存在。
<a> 标签的语法格式如下：

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

其中，href 属性用来指明要跳转到的 url，target 属性用来指明新页面的打开方式，链接文本需要写在 <a> 和 </a> 之间。

下面，我们来详细分析一下 <a> 标签的各个属性。

href 属性

href 属性指定链接的目标，也就是要跳转到什么位置。href 可以有多种形式，例如：

href 可以指向一个网页（.html、.php、.jsp、.asp等格式），这也是最常见的形式，例如 href="http://c.biancheng.net/view/1719.html"；
href 可以指向图片（.jpg、.gif、.png 等格式）、音频（.mp3、.wav等格式）、视频（.mp4、.mkv格式）等媒体文件，例如 href="/uploads/allimg/181221/134I32557-0.jpg"；
href 可以指向压缩文件（.zip、.rar等格式）、可执行程序（.exe）等，一些下载网站的链接就可以写成这种形式，例如 href="./../uploads/data_package/ComputerFoundation.zip"；
href 甚至还可以指向本机的文件，只是很少这样使用，例如 href="D:/Program Files/360/360safe/360Safe.exe"。

target属性

在创建网页时，默认情况下，超链接在当前的浏览器窗口打开，但是我们可以使用 target 属性来改变目标窗口的打开方式。常见的打开方式如下表所示：

target属性值
属性值	说明
_self	默认，在现有的窗口中打开新页面，原窗口将被覆盖。
_blank	在新的窗口中打开新页面。
_parent	在当前框架的上一层打开新页面。
_top	在顶层框架中打开新页面。

绝大部分情况下，target 属性要么不写，保持默认的 _self，要么把它的值设置为 _blank，在新的窗口中打开链接。

4.URL结构解析

在互联网中，任何一个可访问的文件或文档都具有一个唯一的地址，这种地址称为统一资源定位符（Uniform Resource Locator，URL），也被称为网址。每个 URL 都有其对应的文件（文档），例如 http://c.biancheng.net/view/7410.html 对应的是《网站到底是什么》这篇文章，https://www.baidu.com/index.html 对应的则是百度的官网首页。

URL 是互联网的基础，最常见的形式就是网页通过链接，也就是 <a> 标签来包含其它 URL，用户通过点击，从当前 URL 跳转到另一个 URL。下面我们看一下 URL 是如何构成的。

URL的构成

URL 遵守一种标准的语法，它由协议、主机名、域名、端口、路径、以及文件名这六个部分构成，其中端口可以省略。具体语法规则如下：

scheme://host.domain:port/path/filename

在上述语法规则中，scheme 表示协议，host 表示主机名，domain 表示域名，port 表示端口（可以省略），path 表示文件的路径，filename 表示文件名称。接下来我们详细看一下这几部分到底是如何使用的。

1）协议

协议用来指明客户端和服务器之间通信的类型。我们经常用到的协议有四种：http、https、ftp 以及 file。这四种协议的使用场景如下表所示：

协议使用场景

协议	使用场景
http（HyperText Transfer Protocol）	超文本传输协议。http 协议可以将编码为超文本的数据从一台计算机传送到另一台计算机，不进行加密。
https（HyperText Transfer Protocol over SecureSocket Layer）	安全超文本传输协议。以安全为目标的 http 通道，安全网页，加密所有信息交换。
ftp（File Transfer Protocol）	文件传输协议。
file	本机上的文件。

2) 主机名

主机名可以向浏览器提供文件站点的名称。www 是我们常见的主机名，例如百度的网址 https://www.baidu.com/、淘宝的网址 https://www.taobao.com/ 使用的都是 www 的主机名。除此之外，还有很多网站使用的是其它主机名。例如C语言中文网的网址 http://c.biancheng.net/ 的主机名是c，网易云音乐的网址 https://music.163.com/ 的主机名是 music。

3) 域名

域名和主机名一起使用，被用来定义服务器的地址。Web 服务器遵守数字网际协议（Internet Protocol，IP），每一台连接到因特网的计算机都有一个固定的 IP 地址。域名即 IP 地址的别名，因为一般的 IP 地址都是长串的数字，为了方便记忆所以使用域名进行替代。简单来说，没有域名（IP）我们就不能上网。

4) 端口

端口用来定义主机上的端口号。如果不写，http 的默认端口号是 80，https 的默认端口号是 443，ftp 的默认端口号是 21。还是拿 C语言中文网举例说明，不论用户输入 http://c.biancheng.net/ 还是 http://c.biancheng.net/:80，浏览器都会解析为 C语言中文网的链接。

5) 路径

路径指定服务器上文件的所在位置。就像我们自己在计算机上保存文件时所指定的文件夹一样，Web 服务器上的文件也有可能是存放在子目录（就是文件夹中的子文件夹）中的。如果是这样，路径中的相邻文件夹需要使用斜线（/）隔开。例如 http://c.biancheng.net/view/views/7410.html 这个网址，它的路径就是 /view/views。

6) 文件名

文件名用来定义文档或资源的名称。和路径类似，路径指的是文件夹，而它指的是文件夹中的文件。我们在《网站到底是什么》这篇文章中讲到过网页文件的后缀有很多种，比如.html 、.php、 .jsp、.asp等。

5.HTML块级元素及行内元素

在 HTML 中，标签（tag）通常又被称作元素（element）。例如 <a> 标签又叫做 <a> 元素，<p> 标签也叫作 <p> 元素。

HTML 元素根据其表现形式可以分为 2 种：

块级元素
行内元素

块级元素

块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下表：


块级元素	说明
div	最典型的块元素
p	表示段落
h1-h6	表示1-6级标题（默认加粗）
br	表示换行
ol	有序列表
ul	无序列表

行内元素

行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表：

行内元素	说明
a	超链接
span	常用行级
strong	加粗，强调
b	加粗，不强调
em	斜体，强调
i	斜体，不强调
img	图片
input	输入框
select	下拉列表

元素的嵌套

HTML 中的各个元素之间是可以互相嵌套的，例如：

块元素可以嵌套块元素
块元素可以嵌套行内元素
行内元素可以嵌套行内元素
行内元素可以嵌套块元素

值得注意的是我们不建议在行内元素中嵌套块元素，这样不仅不符合开发规范，还会导致行内元素也独占一行。
下面来看一段元素之间互相嵌套的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素间的嵌套</title>
</head>
<body>
    <!-- 块级元素嵌套块级元素 -->
    <div>
        <p>p标签（块级元素）</p>
        <div>div标签（块级元素）</div>
    </div>
    <!-- 块级元素嵌套行内元素 -->
    <div>
        <span>span标签（行内元素）</span>
    </div>
    <!-- 行内元素嵌套 -->
    <span>
        <span>span标签（行内元素）</span>
        <a href="#">a标签（行内元素）</a>
    </span>
</body>
</html>

效果如下：

åç´ é´çåµå¥

总结

块级元素的宽度是 100%，在浏览器中默认独占一行。
行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
块级元素内部可以嵌套块级元素或行内元素。
建议行内元素里面只嵌套行内元素。

6.HTML列表

在网站开发过程中，我们经常会使用到列表（list）。列表可以将若干条相关的内容进行整理，让内容看起来更加有条理。例如，C语言中文网首页的「推荐阅读」、「精品教程」以及「最近更新」中的内容都使用了列表进行排列。接下来咱们看一下列表的具体使用方法。

HTML 为我们提供了 3 种不同的列表：

有序列表
无序列表
定义列表

有序列表

在 HTML 中， <ol> 标签用来表示有序列表。有序列表之间的内容有先后顺序之分，例如菜谱中的一系列步骤，这些步骤需要按顺序完成，这时就可以使用有序列表。
我们来看一个简单的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML有序列表</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
      <li>先将水煮沸</li>
      <li>加入一勺米</li>
      <li>搅拌均匀</li>
    </ol>
</body>
</html>

HTMLæåºåè¡¨

<ol> 是 order list 的简称，表示有序列表。它可以为列表的每一项进行编号，默认从数字 1 开始；
<li> 是 list item 的简称，表示列表的每一项。列表中还可以包含文本或其它元素，甚至是新的列表。<ol> 中有多少个 <li> 就表示有多少条内容。

无序列表

在 HTML 中，我们使用 <ul> 标签来表示无序列表。无序列表和有序列表类似，都是使用 <li> 标签来表示列表的每一项，但是无序列表之间的内容是没有顺序的。例如，早饭的种类不需要表明顺序，这时就可以使用无序列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML无序列表</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul>
      <li>鸡蛋</li>
      <li>牛奶</li>
      <li>面包</li>
    </ul>
</body>
</html>

<ul> 是 unordered list 的简称，表示无序列表。默认情况下，无序列表的每一项都使用●符号表示；
<li> 同 <ol> 中的 <li> 一样，它也表示列表中的每一项。

定义列表

在 HTML 中，<dl> 标签用于创建定义列表。它是由定义标题和定义描述两部分组成的，而且至少要包含一条定义标题或定义描述。一般情况下，当要展示的列表形式包括标题和描述两部分时，使用定义列表再合适不过了。
具体语法格式如下：

上述代码中使用了 <dl>、<dt> 及 <dd> 标签，我们来分别看一下这三个标签：

<dl> 是 definition list 的简称，表示定义列表；
<dt> 是 definition term 的简称，表示定义术语，也就是我们常说的定义标题。一般情况下，每个定义标题都会对应若干条定义描述；
<dd> 是 definition description 的简称，表示定义描述。定义描述一般是对定义标题的解释说明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML定义列表</title>
</head>
<body>
    <!-- 定义列表 -->
    <dl>
        <dt>Web前端简介</dt>
        <dd>HTML（超文本标记语言）</dd>
        <dd>CSS（层叠样式表）</dd>
        <dd>JavaScript（脚本语言）</dd>
    </dl>
       <dl>
        <dt>C语言中文网</dt>
        <dd>HTML教程</dd>
        <dd>CSS教程</dd>
        <dd>JavaScript教程</dd>
    </dl>
</body>
</html>

å®ä¹åè¡¨

通过运行结果可以发现，<dt>、<dd> 标签的联系与区别：

都在浏览器中独占一行，属于块级元素；
<dt> 充当了列表的标题，多个 <dt> 之间可以没有关系；
一般情况下，<dd> 标签中间的内容是对 <dt> 的描述。

多普勒的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端HTML初学笔记，后续更新

更新日期：2020-08-19知识框架HTML+cssJavaScript学习网址：http://c.biancheng.net/view/7528.html C语言中文网第一章 HTML1.什么是网页？<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>这是网页标题</title>&l...
复制链接

扫一扫