- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

[华为云在线课程][轻松入门HTML][学习笔记]

John2021 发表于 2022/01/11 23:03:33 2022/01/11

【摘要】 1，WEB简史 1.1，WEB的诞生 Internet中文正式译名为因特网，又叫作国际互联网，是由所有使用公共语言相互通信的计算机连接而组成的全球网络。历史起源20世纪60年代末，正处于冷战时期。当时美军为了自己的计算机网络在受到袭击时，即使部分网络被摧毁，其余部分仍能保持通信联系，便由美国国防部的高级研究计划局(ARPA)建设了一个军用网，叫做"阿帕网"(ARPAnet)。阿帕网于19...

1，WEB简史

1.1，WEB的诞生

Internet

中文正式译名为因特网，又叫作国际互联网，是由所有使用公共语言相互通信的计算机连接而组成的全球网络。

历史

起源
- 20世纪60年代末，正处于冷战时期。当时美军为了自己的计算机网络在受到袭击时，即使部分网络被摧毁，其余部分仍能保持通信联系，便由美国国防部的高级研究计划局(ARPA)建设了一个军用网，叫做"阿帕网"(ARPAnet)。阿帕网于1969年正式启用，当时仅连接了4台计算机，供科学家进行计算机联网实验用。这就是因特网的前身。
发展
- Internet的发展引起了商家的极大兴趣。1992年，美国IBM、MCI、MERIT三家公司联合组建了一个高级网络服务公司(ANS)，建立了一个新的网络，叫做ANSnet，从而使Internet开始走向商业化。

WWW

WWW是World Wide Web的缩写，也可以写为W3，中文名为万维网。是集文本、声音、图像、视频等多媒体信息于一身的全球信息资源网络。用户通过浏览器在WWW中搜索和浏览自己感兴趣的所有信息。

1.2，W3C

W3C的成立

1994年10月，Tim Berners-Lee在MIT创立了World Wide Web Consortium，中文名为万维网联盟，该联盟的简称为W3C，是Web技术领域最具权威和影响力的国际中立性技术标准机构。

主要工作

W3C最重要的工作是发展Web规范，这些规范描述了Web的通信协议（比如HTML和XHTML）和其他的构建模块。

成员机构

由设立在麻省理工学院、欧洲数学与信息学研究联盟、日本应庆大学和中国北京航空航天大学的四个全球总部的全球团队联合运营。

Tim Berners-Lee

蒂姆·伯纳斯·李，万维网的发明者，南安普顿大学与麻省理工学院教授。

1.3，网站

网站

Website中文名为网站，是指在Internet上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。人们可以通过网站发布自己想要公开的资讯，或者利用网站提供相关的网络服务。
网站是在互联网上拥有域名或地址并提供一定网络服务的主机，是存储文件的空间，以服务器为载体。人们可通过浏览器等进行访问、查找文件，也可通过远程文件传输(FTP)方式上传、下载网站文件。

网址

在浏览器中输入网站的地址就可以打开想要访问的网站，那么这个网站的地址我们称之为URL，中文名为统一资源定位符，俗称网址。

URL格式

常用协议

http协议，超文本传输协议，是用于从万维网服务器传输超文本到本地浏览器的传输协议。
ftp协议，文件传输协议，可以通过FTP访问服务器上的文件。
file协议，主要用于访问本地计算机中的文件。

1.4，WEB浏览器

浏览器

浏览器是一个显示网站服务器或者档案系统内的HTML文件，并让用户与这些文件互动的软件。

浏览器内核

浏览器内核负责对网页语法进行解释，浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

常见浏览器

IE浏览器：由微软公司出品，采用Trident内核
Chrome浏览器：由谷歌公司出品，采用Webkit内核，后换成Blink内核
Firefox浏览器：由Mozilla公司出品，采用Gecko内核
Safari浏览器：由苹果公司出品，采用Webkit内核
Opera浏览器：由Opera公司出品，采用Presto内核

1.5，WEB服务器

服务器

Web服务器主要是提供网上信息浏览服务。Web服务器可以解析HTTP协议，当Web服务器接收到一个HTTP请求时，会返回一个HTTP响应，这样客户端就可以从服务器上获取网页内容，包括CSS，JS，音频，视频等资源。

2，初识HTML

2.1，WEB开发

Web开发

Web开发主要分为前端开发和后端开发两部分，前端更侧重于页面的展示与用户的交互，后端更侧重于数据的处理于服务的访问。
而HTML语言就属于前端开发的范围。

前端开发

前端指的是直接与用户接触的网页，网页上通常有HTML，CSS，Javascript等内容。

后端开发

后端指的是程序，数据库和服务器层面的开发。

前端开发三大件

HTML，CSS，JavaScript。

2.2，WEB标准

Web开发的标准

Web应用开发需要遵循的标准就叫Web标准，这里Web标准是一系列标准的集合。网页主要由三部分组成：结构标准(XML，HTML，XHTML)，表现标准(CSS)，行为标准(DOM，JavaScript)。

HTML

HTML用来构成网页的内容，内容就是网页制作者放在页面上想让用户浏览的信息，例如文字、图片、视频等等，简单来说就是用来定义网页的内容。

CSS

CSS决定了网页样式的展现，也就是内容的表现形式，例如字体的颜色、背景的样式、标题的大小等等。

JavaScript

JavaScript是用来定义网页上的交互，控制网页的行为，例如弹出弹框、页面打开关闭、输入内容的提示等等。

2.3，开发工具

编辑器

Visual Studio Code是微软推出的针对Web开发的代码编辑器，具有开源、高性能、拓展性好的特点。

优势

免费
高性能
自定义配置
代码提示功能强大
方便插件拓展

2.4，HTML发展史

HTML概念

HTML即超文本标记语言(HyperText Markup Language)，是用来构建网页的一种标记语言。

HTML历史

1993年由互联网工程工作小组(IETF)发布工作草案。
1995年发布HTML2.0版本。
1997年1月14日由W3C发布HTML3.2版本。
1997年12月18日由W3C发布HTML4.0版本。
1999年由W3C发布HTML4.01版本。
2000年由W3C发布XHTML1.0版本，它是一种更严格的HTML代码。

HTML5

2014年W3C发布的最新版本，增加了新的特性，给用户带来了更丰富的交互体验。

HTML与XHTML的关系

XHTML是可拓展超文本标记语言，一种更严格、更纯净的HTML语言。

主要的不同点

XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭。
标签名必须用小写字母。
XHTML文档必须拥有根元素。

HTML的语义化

HTML5新增加了很多语义化标签，不同的HTML标签代表了不同的网页内容。

优势

语义化HTML会使HEML结构变得清晰，有利于代码的维护。
有利于搜索引擎抓取。
语义化使代码仍具有可读性。
语义化会使HTML代码变得更简洁，提高页面加载速度。
语义化有助于屏幕阅读器等设备地识别。

2.5，HTML标签

标签的种类

单标签：只有一个标签就能表达完整的含义。
例如：<input/><img/>
双标签：由开始标签和结束标签一起组成。
例如：<div></div> <span></span>

元素

一对标签包含的所有内容，其中元素的内容是指开始标签和结束标签之间的内容。
例如：<div>你好</div>

属性

标签可以有很多属性，属性总是在开始标签中定义，而且是以名值对的形式出现，其中属性值以双引号包裹。
例如：<div class="name">你好啊</div>

3，常用标签

3.1，基本结构

HTML文档基本结构

HTML文件的基本结构由一个<html></html>内包含一个文档头标签<head></head>和一个文档主体标签<body></body>组成，在最前头还需要加上文档声明标签<!DOCTYPE>

第一个HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML文档基本结构</title>
</head>
<body>
<div>我是一只小鸭子</div>
</body>
</html>

3.2，标题

标题元素

<h1>~<h6>标签用于定义标题，其中<h1>的重要性最高，而<h6>的重要性最低。
<h1>标签通常用于最顶层的标题。
一个HTML文档之中一般只有一个<h1>标题。

`<h1>`~`<h6>`标签例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div>
    <h1>一二三四</h1>
    <h2>一二三四</h2>
    <h3>一二三四</h3>
    <h4>一二三四</h4>
    <h5>一二三四</h5>
    <h6>一二三四</h6>
</div>
</body>
</html>

3.3，段落

段落元素

<p>标签用于定义段落，浏览器会自动在其前后创建一些空白。
<p>中的文字行数取决于浏览器窗口的宽度。
<p>中的连续空格最终都将解析成一个空格。

`<p>`标签的使用场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<p>
    华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商。目前华为约有19.7万员工，业务遍及170多个国家和地区，服务全球30多亿人口。
</p>
<p>
    华为致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界：让无处不在的联接，成为人人平等的权利，成为智能世界的前提和基础；为世界提供最强算力，让云无处不在，让智能无所不及；所有的行业和组织，因强大的数字平台而变得敏捷、高效、生机勃勃；通过AI重新定义体验，让消费者在家居、出行、办公、影音娱乐、运动健康等全场景获得极致的个性化智慧体验。
</p>

</body>
</html>

3.4，结构标签

div标签

div是division的含义，用来划分区域，代表网页中的块，所以一般把它叫做块标签。
div标签通常用于包围大块内容，它没有任何特殊的含义。
div适合作为最通常的页面容器。
div是块级元素

span标签

span是内联标签，用在一行文本中，用来修饰文字。
span是内联元素。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div>华为
    <div>华为云</div>
    <div>华为服务器</div>
</div>
<span>华为电脑
        <span>华为手机</span>
        <span>华为电视</span>
    </span>
</body>
</html>

3.5，链接

链接

链接是HTML页面非常重要的一环，如果没有链接，每个HTML页面都会孤独的存在，也其他页面将不会有联系。

链接标签

<a>标签是anchor的缩写，用于定义网页链接。

链接属性

src属性表示链接的地址，可以是相对地址或者绝对地址。
target属性表示点击链接后打开的方式，默认值为"_self"，代表在当前窗口打开新链接，还可以设置为"_blank"，代表在新的窗口中打开。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div>
    <a href="https://www.huawei.com" target="_blank">huawei</a>
</div>
</body>
</html>

3.6，图片

图片标签

img标签用于定义一张图片，属于单标签结构，它有两个属性，src代表图片的地址，alt属性代表当图片无法显示时的代替文本。
图片的地址可以使用相对地址和绝对地址。
alt属性不要省略，目的是为了更好的兼容无图浏览器，图片会提示成alt属性内的文字。
在img标签上，还可以通过增加height属性和width属性来设置图片的宽度和高度。

图片示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div>
    <img src="phone.png" alt="这是华为手机的图片">
</div>
</body>
</html>

3.7，列表

无序列表

使用<ul>标签定义无序列表，<li>标签定义列表项，无序列表的含义是列表项内容没有前后顺序。
可以在ul标签上使用type属性定义图形符号的样式，当属性值为disc时，显示为点；当属性值为square时，显示为方块；当属性值为circle时，显示为圆。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<ul>
    <li>皇室战争</li>
    <li>部落冲突</li>
    <li>海岛奇兵</li>
</ul>
</body>
</html>

有序列表

使用<ol>标签定义有序列表，<li>标签定义列表项，有序列表的每一项有顺序定义。
有序列表的前缀通常为数字或者字母。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<ol>
    <li>魔兽争霸</li>
    <li>星际争霸</li>
    <li>暗黑破坏神</li>
</ol>
</body>
</html>

自定义列表

使用<dl>标签定义自定义列表，内部可以有多个列表项，每个列表项用<dt>定义标题，用<dd>定义列表项。
<dl>标签定义了自定义列表(definition list)。
<dl>标签用于结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目)。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标签</title>
</head>
<body>
<ul type="disc">
    <li>一二</li>
    <li>一二</li>
    <li>一二</li>
</ul>
<ol type="a">
    <li>一二</li>
    <li>一二</li>
    <li>一二</li>
</ol>
<dl>
    <dt>华为手机</dt>
    <dd>mate</dd>
    <dt>华为电视</dt>
    <dd>tv1</dd>
    <dt>华为手表</dt>
    <dd>watch1</dd>
</dl>
</body>
</html>

4，表格标签

4.1，表格标签

表格元素

表格用<table>标签定义，里面由若干行和列的单元格组成。
在表格元素中，使用<tr>表示表格中的一行，使用<td>表示列。
表格可以定义标题，用<caption>标签定义。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table>
    <caption>表格标题</caption>
    <tr>
        <td>一二</td>
        <td>三四</td>
        <td>五六</td>
    </tr>
</table>
</body>
</html>

结构

可以使用<thead><tbody><tfoot>三个标签分别定义表格的头部、主体、底部。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table>
    <caption>华为手机列表</caption>
    <tr>
        <td>型号</td>
        <td>颜色</td>
        <td>价格</td>
    </tr>
    <tr>
        <td>mate30</td>
        <td>白色</td>
        <td>5000</td>
    </tr>
    <tr>
        <td>p30</td>
        <td>黑色</td>
        <td>4000</td>
    </tr>
</table>
</body>
</html>

4.2，行

表格的行

使用<tr>标签定义表格的行。
tr标签内部用来包含td标签。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table>
    <tr>
        <td>单元格一</td>
        <td>单元格二</td>
        <td>单元格三</td>
    </tr>
</table>
</body>
</html>

4.3，列

表格的列

使用<td>标签定义表格的列。
td有两个常用的属性，colspan用于定义单元格跨行，rowspan用于定义单元格跨列。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<table border="1" width="300" height="300">
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
    </tr>
</table>
</body>
</html>

4.4，表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input</title>
</head>
<body>
<form action="https://www.huawei.com" method="get">
    <div>购买手机</div>
    <div>用户名: <input type="text" name="user"></div>
    <div>密码: <input type="password" name="pwd"></div>
    <div>手机:
        <input type="radio" name="photo" id="p" value="p40">
        <label for="p">p40</label>
        <input type="radio" name="photo" id="m" value="mate40">
        <label for="m">mate40</label>
    </div>
    <div>配件:
        <input type="checkbox" name="part" id="" value="1">无线耳机
        <input type="checkbox" name="part" id="" value="2">充电宝
    </div>
    <div>
        <input type="submit" value="提交">
    </div>
</form>
</body>
</html>

5，表单

5.1，表单标签

表单元素

使用<form>标签定义表单，表单有两个最重要的属性action和method，action属性定义了表单提交的地址，method属性定义了表单提交的方式。
表单提交有两种方式，get和post。
其他的表单控件元素必须放在form标签的内部。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<form action="https://www.huawei.com" method="get">
    <div>最喜欢的华为手机型号是？</div>
    <div>
        <input type="text" name="" id="">
    </div>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
</body>
</html>

5.2，input