您的位置：首页 > Web前端

【前端学习整理】入门：领域知识与基础HTML文档说明。

2019-02-16 17:14 513 查看

想好开始学习前端了吗，先来了解一下基础吧。

什么是前端
Web与贯穿前端的HTML
我的第一个HTML文档

什么是前端

前端是非常热门的职业，涉及广泛，可以设计和制作各种网站，手机app，小程序的开发等等。
要掌握前端需要学习基础的网页开发语言，例如:

HTML:

描写网页的内容，和布局。就像修造子，一砖一瓦的砌。

css:

修饰网页的内容，便于用户读者观看浏览。砖瓦砌成了房子不能直接住人吧，还要装修。

javascript:

添加网页的交互，让网页活动起来。房子里如果只有一个床是不是很单调，并且死气沉沉的。添加了网页的
交互就像是家里多了电视机，电脑，手机等等让网站看起来更丰富。

当然，一个优秀的前端会的远远不止这些低语:什么？还有那么多东西要学？,还有各种框架如jQuery、Bootstrap、Vue等等。
框架其实就是把基础的语言内容打包简化便于我们操作和改善用户体验的。

如果造房子一砖一瓦都是人工手动，那高楼大厦岂不就累死人了。所以有塔吊啊，起重机啊等等工具的协助。就像这里的框架。

知者不难，难着不知。加油为了梦想 (ง •_•)ง
怎么样骚年，准备好了吗，和我一起前进吧。

Web与贯穿前端的HTML

Web

（World Wide Web）

即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。
是建立在

Internet

上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南

HTML是一种超文本标记语言

(HyperText Markup Language,简称:HTML)

是一种用于创建网页的标准标记语言。
超文本：就是说页面内可以包含图片、链接、，甚至音乐、程序等非文字元素。
标准通用标记语言：是一种定义电子文档结构和描述内容的国际标准语言。

HTML不是编程语言，是标记语言。
标记语言是一套标记标签

(markup tag)

HTML可以用来建立自己的Web站点，运行在浏览器上，有浏览器来解析。

HTML文档的后缀名：

.html

.htm

以上两种后缀名没有区别，都可以使用。

我的第一个HTML文档

<!DOCTYPE html>
<!-- DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义来解析文档。
此处声明为html5文档 DOCTYPE不区分大小写-->
<html>
<!-- html元素是HTML页面的根元素 -->
<head>
<!-- head包含了文档的元(meta)数据，如<meta charset="UTF-8">定义网页的编码格式为utf-8。 -->
<meta charset="utf-8">
<!-- 在大部分浏览器中，直接输入中文会出现乱码的情况，这时候需要在头部将字符声明为UTF-8 -->
<title>我的第一个HTML文档！</title>
<!-- title元素描述了文档的标题-->
</head>
<body>
<!-- body元素包含了可见的页面内容 只有body区域会在浏览器内显示。-->
<h1>我的第一个标题！</h1>
<!-- h1元素定义一个大标题 -->
<p>我的第一个段落！</p>
<!-- p元素定义一个段落 -->
<!-- 标签对中的第一个标签为开始标签，第二个标签是结束标签。开始和结束标签也被称为开放标签和闭合标签。 -->
<!-- 不要忘记使用结束标签，虽然没有结束标签大多数浏览器也会正确显示HTML，但是不要依赖这种做法，可能会产生不可预料的结果或错误 -->

4000
<a href="www.baidu.com"></a>
<!-- a元素定义了一个超链接，href属性中指定链接的地址 -->
<!-- HTML元素包括了整个开始标签到结束标签，HTML属性指开始标签内的属性 属性一般描述于开始标签 属性总是以名称/值对的形式出现
如果属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'-->
<br />
<!-- 没有内容的HTML元素被称为空元素，空元素在开始标签中是关闭的，在开始标签中添加斜杠 比如 <br /> 是关闭空元素的正确方法 -->
<img src="../img/seven.jpg" alt="第七班" width="640" height="413" title="火影忍者第七班!">
<!-- img元素定义一张图片，src属性填写正确的图片路径 alt用于表示图片说明，当图片不显示或盲人阅读时可以用alt表达图片内容(益于seo优化)
width和height都是告诉浏览器图片的真实尺寸(益于seo优化)。 -->
<!-- title属性编写的说明元素内容 -->
</body>
</html>

以上代码内容均可直接使用html格式文件用浏览器运行

笔记

一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签。（尽管目前浏览器是识别有些标签不闭合的情况，但是取的最好的保证兼容性，使用闭合）

标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航