最近笔者在学习有关Java后端的内容,所以很有必要去了解一下前端的内容。这篇文章主要是记录一些自己在学习过程中觉得重要和难以理解的内容和自己的一些想法。由于自己是学后端,所以对于前端的很多内容并不做深入研究,只是了解而已。本文覆盖的知识点并不全面,有些描述也并不是那么专业,仅供参考,谢谢。
一、前端概述
(1)前端定义
在学习之前,我们得先知道前端是什么。
"前端”是与用户直接交互的部分,包括你在浏览网页时接触的所有视觉内容–从字体到颜色,以及下拉菜单和侧边栏。这些视觉内容,都是由浏览器解析、处理、渲染相关 HTML、CSS、Javascript 文件后呈现而来。
https://jingyan.baidu.com/article/0320e2c13be9381b87507b04.html
简单的理解就是,前端是用户能看到的一些东西(操作界面之类的),而后端一般不向用户开放,是开发人员设计架构、管理数据之类的。
(2)前端主要涉及的基础技术
三大语言:HTMl, CSS, 和 JavaScript
常用框架: jQuery、vue、 react、angular
这里主要是学习这三大语言的一些基础知识,框架之类的倒不用着急。至于开发工具(编辑器)倒是看个人喜好了,并且没后端的工具那么严格,推荐使用sublime txt 和webstorm。并且初学者刚开始就用一些简单的文本编辑器(电脑自带的记事本也可以)就好了,不用去配置软件,很方便。
学习网站强烈推荐w3school,跟着网站上面走,入门是没问题的。
二、HTML学习(基础知识)
(1)HTML概述
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如
- HTML 标签通常是成对出现的,比如 和
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
https://www.w3school.com.cn/html/html_jianjie.asp
另外关于HTML还有HTML5,这两者的区别可以参见大佬的博客浅谈html与HTML5的三大区别,作为初学者就不要纠结了,学这两个都可以,网上都有很多的资料,并且也未特意去区分,这里主要讲关于HTML的相关内容。
(2)HTML实例
在写HTML之前要注意其注释是采用如下的方式
<!--注释-->
下面是一个完整的实例:
<!--!DOCTYPE用于指定文档类型-->
<!DOCTYPE html>
<!--html标签是整个html文件的开始,注意标签要成对出现-->
<html>
<!--head标签用于定义文档的头部,它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等-->
<head>
<title>文档的标题</title>
</head>
<!--body定义文档的主体-->
<body>
<!--h+数字用于定义标题,数字代表标题的级数-->
<h1>这是一级标题</h1>
<h6>这是六级标题</h6>
<!--p表示段落-->
<p>这是第一段</p>
<p>这是第二段</p>
<!--br/用于换行-->
<p>
这是第三段。换行,<br/>换行,<br/>换行。<br/>
</p>
<!--b用作定义粗体文本-->
<p>
<b>这是一段粗体文字</b>
</p>
<!--img用于指定图像,其中src表示图像的路径(url),alt表示图像的替代文本-->
<p>
<img src="J:\杂物\美化\壁纸\壁纸1.jpg" alt="这是一张壁纸">
</p>
</body>
</html>
这上面只涉及一些非常常见的标签,对于一些非常简单的静态网页的编写已足够,有关其他标签请参考HTML教程,在具体实践时再去参考相关资料也是可以的,这样查几次过后就会了。
要注意的是所编辑的文件最终要保存为.html的格式才能让浏览器识别打开。另外虽然HTML标签不区分大小写但是还是建议用小写,便于阅读源码,并且在未来会强制使用小写。
(3)HTML重要概念
①元素
- HTML元素
HTML 元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
开始标签 元素内容 结束标签 This is a paragraph This is a link 开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。
- 元素语法
HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容(empty content)
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
- 嵌套的HTML元素
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文档由嵌套的 HTML 元素构成。
②属性
- HTML属性
HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name=“value”。
属性总是在 HTML 元素的开始标签中规定。
2019.12.08