【云驻共创】轻松入门HTML
HTML中文名为超文本标记语言（英语：HyperText Markup Language）是一种用于创建网页的标准标记语言, 所谓的标记语言就像阿拉伯数字数字, 不需要编程逻辑, 只需记忆即可掌握, 如果你想创建自己独一无二的网站, 那HTML就是你的入门第一课, 本文介绍常见HTML的一些用法, 让你轻松入门HTML
一、WEB简史
Web的诞生
Internet 中文正式译名为因特网，又叫作国际互联网，是由所有使用公共语言互相通信的计算机连接而组成的全球网络。
20世纪60年代未，正处于冷战时期。当时美国军方为了自己的计算机网络在受到袭击时，即使部分网络被摧毁，其余部分仍能保持通信联系，便由美国国防部的高级硏究计划局
（ARPA）建设了一个军用网，叫做“阿帕网”（ ARPAnet）。阿帕网于1969年正式启用，当时仅连接了4台计算机，供科学家们进行计算机联网实验用。这就是因特网的前身。
发展Internet的发展引起了商家的极大兴趣。1992年，美国IBM、MCI、 MERIT三家公司联合组建了一个高级网络服务公司（ANS），建立了一个新的网络，叫做 ANSnet，从而使Interne开始走向商业化。
WWW是 World Wide Webl的缩写，也可以写为W3，中文名为万维网。是集文本声音、图像、视频等多媒体信息于一身的全球信息资源网络。用户通过浏览器在WWW中搜索和浏览自己感兴趣的所有信息。
W3C
-
W3C的成立
1994年10月， Tim berners-Lee在麻省理工学院创立了 World wide Web Consortiun，中文名为万维网联盟，该联盟的简称为W3C，是Web技术领域最具权威和影响力的国际中立性技术标准机构。 -
主要工作
W3C最重要的工作是发展Web规范，这些规范描述了Web的通信协议（比如HTML和 XHTML）和其他的构建模块
- 成员机构
由设立在美国麻省理工大学、欧洲数学与信息学硏究联盟、日本庆应大学和中国北京航空航天大学的四个全球总部的全球团队联合运营。
Tim berners - Lee 蒂姆伯纳斯李，万维网的发明者，南安普顿大学与麻省理工学院教授
网站
Website中文名为网站，是指在internet上根据一定的规则，使用HTML等工具制作的用于展示特定内容相关网页的集合。人们可以通过网站发布自己想要公开的资讯，或者利用网站提供相关的网络服务。
网站是在互联网上拥有域名或地址并提供一定网络服务的主机，是存储文件的空间，以服务器为载体。人们可通过浏览器等进行访问、查找文件，也可通过远程文件传输（FTP）方式上传、下载网站文件
- 网址
在浏览器中输入网站的地址就可以打开想要访问的网站，那么这个网站的地址我们称之为URL，中文名为统一资源定位符，俗称网址。
- URL格式
协议://主机地址+目录路径+参数
以目前网站最常用的https为例
https://bbs.v2fy.com/search?q=win
协议: https
主机地址: www.v2fy.com (主机地址可以用ip表示,也可以用域名表示)
目录路径: /search
参数: q=win
- 常用协议
http协议，超文本传输协议，是用于从万维网服务器传输超文本到本地浏览器的传输协议
ftp协议，文件传输协议，可以通过FTP访问服务器上的文件
file协议，主要用于访问本地计算机中的文件
Web浏览器
- 浏览器
浏览器是一个显示网站服务器或者档案系统内的HTML文件，并让用户与这些文件互动的软件
- 浏览器内核
浏览器内核负责对网页语法进行解释，浏览器内核也就是浏览器所采用的渲染引擎渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
- 常见浏览器
IE浏览器：由微软公司出品，采用 Trident内核
Edge浏览器：由 微软公司出品，采用 Webkit内核
Chrome浏览器：由 Google公司出品，采用 Webkit内核，后换成 Blink内核
Firefox浏览器：由 mozilla公司出品，采用 Gecko内核O
Safari浏览器：由苹果公司出品，采用 Webkit内核
Opera浏览器：由 Opera公司出品，采用 Presto内核
Web服务器
Web服务器主要是提供网上信息浏览服务。Web服务器可以解析HTTP协议，当Web服务器接收到一个HTTP请求时，会返回一个HTTP响应，这样客户端就可以从服务器上获取网页内容，包括CSS、JS、音频、视频等资源。
二、初识HTML
WEB开发
Web开发主要分为前端开发和后端开发两部分，前端更侧重于页面的展示与用户的交互，后端更侧重于数据的处理与服务的访问, HTML语言就属于前端开发的范围。
-
前端开发
前端指的是直接与用户接触的网页，网页上通常有HTML、CSS、 Javascript等内容。 -
后端开发
后端指的是程序、数据库和服务器层面的开发
WEB标准
- WEB开发的标准
Web应用开发需要遵循的标准就叫Web标准，这里Web标准是一系列标准的集合网页主要由三部分组成：结构标准（ⅩML、HTML和ⅩHTML），表现标准（CSs），行为标准（DOM、 Javascript）
- HTML
HTML用来构成网页的内容，内容就是网页制作者放在页面上想让用户浏览的信息，例如文字、图片、视频等等，简单来说就是用来定义网页的內容。
- CSS
CSS决定了网页样式的展现，也就是内容的表现形式，例如字体的颜色、背景的样式、标题的大小等等
- Javascript
Javascript是用来定义网页上的交互，控制网页的行为，例如弹出弹框、页面打开关闭、输入内容的提示等等。
开发工具
Visual studio code是微软推出的针对web开发的代码编辑器，具有开源、高性能、扩展性好的特点。
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发布 XHTML10版本，它是一种更严格的HTML代码
-
2014年W3C发布的最新版HTML5本，增加了新的特性，给用户带来了更丰富的交互体验
标签
标签HTML是由一系列标签组成的，每个标签是以“<”和“>”包裹的单词，通常称之为元素。
例如
<html>
<head ></head>
<body ></body>
</html>
标签的种类
单标签：只有一个标签就能表达完整的含义例如：<input/> <img/>
双标签：由开始标签和结束标签一起组成例如：<div></div> <span></span>
- 元素
一对标签包含的所有内容，其中元素的内容是指开始标签和结束标签之间的内容。
例如：
<div>你幸福吗？</div>
- 属性
标签可以有很多属性，属性总是在开始标签中定叉，而且是以名值对的形式出现，其中属性值以双引号包裹。
例如：
<div class="name">我姓张</div>
三、常用标签
HTML文档基本结构
HTML文件的基本结构由一个<htm></htm>内包含一个文档头标签
<head></head>和一个文档主体标签<body></body>组成，在在最前头还需要加上文档声明标签<!DOCTYPE>
例如
<html>
<head>
<title>HTML文档基本结构</title>
</head>
<body>
<div>我是一只小鸭子</div>
</body>
</html>
标题元素
<h1>~<h6>
标签用于定义标题，
其中<h1>为一级标题，
<h6>为六级标题。
<h1>标签通常用于最顶层的标题。
一个HTML文档之中一般只有一个<h1>标题
段落元素
<p>标签用于定义段落，浏览器会自动在其前后创建一些空白。
<p>中的文字行数取决于浏览器窗口的宽度。
<p>中的连续空格最终都将解析成一个空格。
结构标签
-
Div标签
div是 division的含义，用来划分区域，代表网页中的块，所以一般把它叫做块标签。
dⅳ标签通常用于包围大块内容，它没有任何特殊的含义。
div适合作为最通用的页面容器。
div是块级元素
- span标签
span是内联标签，用在一行文本中，用来修饰文字。
span是内联元素
超链接
超链接是HTML页面非常重要的一环，如果没有链接，每个HTML页面将会孤独的存在，与其它页面将不会有联系链接标签
<a>标签是 anchor的缩写，用于定义网页链接。
- 链接属性
href属性表示链接的地址，可以是相对地址或者绝对地址。
target属性表示点击链接后打开的方式，默认值为self，代表在当前窗口打开新链接，除此之后，还可以设置成blank，代表在新的窗口中打开。
图片
-
img标签用于定义一张图片，属于单标签结构，它有两个属性，Src代表图片的地址，alt属性代表当图片无法显示时的替代文本。
-
图片的地址可以使用相对路径，也可以使用绝对路径。
-
alt属性不要省略，目的是为了更好的兼容无图浏览器，图片会提示成alt属性内的文字
-
在img标签上，还可以通过增加 height属性和 Width属性来设置图片的宽度和高度
列表
- 无序列表
使用
-
标签定义无序列表，
- 标签定义列表项，无序列表的含义是列表项内容没有前后顺序。
<ul> <li>皇室战争</li> <li>部落冲突</li> <li>海岛奇兵</li> </ul>
- 有序列表
使用
-
标签定义有序列表，
- 标签定义列表项，有序列表的每一项有顺序含义
有序列表的前缀通常为数字或者字母。
示例：
<ol> <li>魔兽争霸</li> <li>星际争霸</li> <li>暗黑破坏神</li> </ol>- 自定义列表
使用<d>标签定义自定义列表，内部可以有多个列表项，每个列表项用
- 定义标题，用
- 定义列表项。
<d>标签定义了自定义列表
<d>标签用于结合
- （定义列表中的项目）和<d>（描述列表中的项目）
<dl> <dt>辽宁省</dt> <dd>沈阳市</dd><dd>大连市</dd><dd>鞍山市</dd> </dl>四、表格标签
表格元素
表格用
在表格元素中，使用
<table> <thead><tr><td>头部</td></tr></thead> <tbody ><tr><td>主体</td></tr></tbody> <tfoot><tr><td>底部</td></tr></tfoot> </table>表格的行
使用
<table> <tr> <td>单元格一</td> <td>单元格二</td> <td>单元格三</td> </tr> </table>表格的列
-
使用
- 点赞
- 收藏
- 关注作者
评论（0）