Web前端基础学习—

前言：昨天第一次接触Web前端，和pink老师学还在图书馆借了一本书《Web前端开发技术》。C语言还是会继续学习的，只是现在想先巩固一下之前学的知识点，所以也借了一本有关C语言的书。

学习内容：

1.网页
1.1什么是网页
网站是指在因特网上根据定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的——“页”,通常是HTML格式的文件,它要通过浏览器来阅读。
网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页。
常见以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件。
1.2什么是HTML
HTML指的是超文本标记语言( Hyper Text Markup Language),它是用来描述网页的种语言。
HTML不是一种编程语言,而是一种标记语言( markup language)
标记语言是一套标记标签( markup tag)
所谓超文本,有2层含义:
1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
2.它还可以从一个文件跳转到另—个文件,与世界各地主机的文件连接(超级链接文本)。

1.3网页的形成
网页是由网页元素组成的,这些元素是利用html标签描述出来,然后通过浏览器解析来显示给用户的。

前端人员开发代码-->浏览器显示代码(解析、渲染)-->生成最后的web页面

2.Web标准（重点）

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。
2.1为什么需要Web标准

浏览器不同,它们显示页面或者排版就有些许差异。

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有以下优点：
1.让Web的发展前景更广阔。
2.内容能被更广泛的设备访问。
3.更容易被搜寻引擎搜索。
4.降低网站流量费用。
5.使网站更易于维护。
6.提高页面浏览速度。

3.2Web标准的构成
主要包括结构( Structure)、表现( Presentation)和行为( Behavior)三个方面。

Web标准提出的最佳体验方案:结构、样式、行为相分离。
简单理解:结构写到HTML文件中,表现写到CSS文件中,行为写到 JavaScript文件中。

3.HTML标签

3.1基本语法概述
HTML标签是由尖括号<>包围的关键词，例如<html>
通常是成对出现的
<html></html>双标签
开始标签<标签名> 结束标签</标签名>

<br />单标签（不需要结束标签）非常少见
<标签名 />

在标签名后加反斜杠"/",而且习惯性在标签名和"/"之间敲一个空格

3.2标签关系
包含关系（嵌套）和并列关系
<html>
<head></head>
<body></body>
在html的标签中包含着head和body的标签，所以html标签与head标签、body标签是包含关系

head标签和body标签是并列关系

4.HTML基本结构标签

4.1第一个HTML网页
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档

下图的titile打错了，应该是title

下面用taobao的网页作解释（因为前不久刚在这里"剁手"……）

<head></head>定义的地方是：

<title></title>定义的地方：

<body></body>定义的地方：

下面实操一下

1.新建一个文本文档

文档的名字要有文件类型的扩展名显示（这样更方便修改文件类型）我的电脑没有显示就打开电脑文档，点击上方“查看”，点击最右边的“选项”，点击弹出的框中上方的“查看”，把“隐藏已知文件类型的扩展名”的勾选取消即可。这样新建的文本文档的名字是新建文本文档.txt

2.在文档里面打入下面的标记语言

<html><head><title> 学习语录 </title></head><body>键盘敲烂，月薪过万！</body>
</html>

3.保存文档，把文档的类型改为.html变成网页形式（直接重命名文档把txt改为html)

4.然后点击打开（它会在你的默认浏览器中打开）（推荐使用谷歌浏览器）

4.2基本结构标签总结html标签包含着head标签、body标签、title标签。

head标签包含着title标签

head标签与title标签是并列关系

5.使用VSCode工具来创建页面

5.1VSCode的使用

1.双击打开软件。
2.新建文件(Ctrl+N)。
3.保存(Ctr+S),注意一定要保存为.html文件
4.Ctr+加号键,Ctr+减号键可以放大缩小视图
5.生成页面骨架结构。
输入!按下Tab键。
6.利用插件在浏览器中预览页面:单击鼠标右键,在弹出出口中点击" Open In Default Browser"。

5.2推荐安装的插件

6.DOCTYPE和lang以及字符集的使用
输入!按下Tab键。软件自动生成下面这样的页面骨架结构。

<!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></body>
</html>

但是还是建议规范使用

Web前端基础学习——HTML5基础相关推荐

web前端入门学习 html5（1）
web前端入门基础教程,最适合零基础前端小白的视频教程html5+css3 文章目录 html 浏览器内核 web标注语法规范 html基本结构标签 web常用开发工具 vscode基本使用文档类 ...
web前端入门学习 html5（2）
https://www.bilibili.com/video/BV1pE411q7FU?p=50&spm_id_from=pageDriver 文章目录表单标签为什么需要表单? 表单的组成 ...
猿来小课web前端介绍html语言基础学习
HTML是一种超文本标记语言,属于互联网开发技术里面的前端开发技术.同时也是计算机和你所访问的Web站点的沟通语言.当你访问Web服务器所寄存的站点并与其交互时,Web服务器会接收到来自你的浏览器的请 ...
html5移动web开发黑马掌上商城_月入35k大佬总结：web前端必须学习的内容（附全套前端教程）...
为了让学习变得轻松,高效!今天给大家分享一套教学资源,帮助大家在学习Web前端的道路上披荆斩棘,这套资源的领取方式请看文末优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面.交互代码的能力. ...
html5代码_干货篇！零基础学习HTML5要用到的6款开发工具
HTML5不是一种编程语言,而是一种标记语言,是程序员开发网页必用的一种开发工具.目前来说HTML5技术是非常火爆的,而且有专家预估在未来的10年HTML技术都不会过时.HTML5前景好,来学HTML ...
自学和参加web前端培训班需要什么基础
web前端是目前IT行业中比较热门的一个分支.因为web前端入门相对比较简单,所以经常有学员想要了解能不能自学.自学和参加web前端培训班,都是可以考虑的学习方法,但是要结合自身的情况来看.接下来,w ...
web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
web前端知识集合——javascript基础篇之常量和变量（二）
3. 变量和常量: 1.1 变量的声明: js三种方式声明变量,声明不赋值时,默认值为underfined. (1)var声明:var name='Ace',同时声明多个变量var a=1,b=2,c ...
html5语言基础教程,HTML5基础教程，从入门到精通，零基础学HTML5
随着互联网的快速发展,对前端开发方面的人才需求越来越大,其中Web前端领域的HTML5也受到许多人追捧 HTML5是构建Web内容的一种语言描述方式.HTML5是互联网的下一代标准,是构建以及呈现互联 ...
web前端需要学习什么？
Web前端工程师,是伴随着Web的兴起而细分的行业,随着当下企业对用户体验的重视,无论互联网公司还是大型企业都把前端作为自己的招牌门面,看得相当重要.而且随着互联网的不断发展,每年都会诞生大量的企业, ...

Web前端基础学习——HTML5基础

Web前端基础学习——HTML5基础相关推荐

最新文章

热门文章