本人从来没有接触过互联网建站类的知识,只不过突然有一天,就想自己弄一个网站,然后就开始了学习建站,从小白站长开始起步学习,期间走了很多弯路。最初是直接了解服务器、域名、宝塔,然后接着是买源码,虚拟机,服务器等,开始搭建自己的网站了。wordpress、帝国CMS都用过了,可是发现,这些东西,你根本就玩不6,因为欠缺很多基础知识,一边遇到问题,一边学习,这个太慢了,所以,就想着从头开始,专门找一门课程去学习,然后就在一些免费平台找到了相应的课。文章会记录自己一步步学习的过程,一步步积累的进度。我不知道会遇到什么问题,不比在学校里,有很多人可以交流,让我们努力向前看吧。就如那句诗——乘风破浪会有时,直挂云帆寄沧海。
第一章Web前端开发HTML不是一门编程语言,而是一种用于定义内容结构的标记语言。HTML由一系列的元素组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。
Web系统分别三部分,前端、后端、还有数据交互
网页元素:分为表单、站标、导航栏、文字超链接和广告横幅等。
他是通过浏览器将html网页代码解码编译出来,给大众显示,即展现在我们眼前的网页。
他是通过服务器将网站展现出来。我们说的网站,其实是一个文件夹,网页是文件夹里的文件。
下图就是他的展现逻辑:
而浏览器,则是编译,是很重要的一部分。目前,谷歌浏览器是最好的,行业老大哥。
当然,他也有技术标准。
下图为大家形象展示他的结构:
前端技术标准:万维网联盟
HTML基础知识HTML概述HTML语言由标签、元素、属性构成。
HTML:“超文本标记语言”,它是制作网页的标准语言
标签、元素
由尖括号包围,比如title,通常是成对出现的
标签、属性
总结:我们得认识这些在HTML中常用的标签,记住他,并熟练使用。
HTML文件结构文件结构:主要是.html或者.htm两种格式的文件。
HTML编辑器
记事本、SublimeTextemmet插件、WebStorm等
HTML5文件结构
lang属性:搜索引擎en英文、zh中文
meta:元数据
charset属性:字符集编码方式浏览器:UTF-8是国际编码
字符集与编码
UTF-8包含所有语言,占用空间最小,所以,一般我们都是用UTF-8来编码。
乱码问题:可能编码方式不一样
HTML标签(I)标题h1~h6
段内换行br(单独出现)
段内分组span
段落p
预留格式pre
水平线hr(单独出现)
空格字符nbsp
HTML标签(II)超链接:a
三种用法:
HTML标签(III)img标签
上级目录查找:用..表示到上级目录
总结:
一般我们用相对路径。
HTML标签(IV)区域:div
列表:ulolli
表格:tabletrtd
区域标签,就是把网页分成一个个小区域。
无序列表ulli:没有序号
有序列表olli:有12..序号
表格tabletrtd
表头单元格th
HTML标签(V)表单标签:form
这些输入框、单选、复选都是表单元素
文本框、密码框标签:input
在HTML中,type是类型的意思,是一个标签属性
按钮:提交按钮、重置按钮
重置按钮:reset
单选框和复选框
下拉列表框selectoption
文本域Textarea
!然后按table扩展或者按ctrl+e扩展
ctrl+/选择代码就变成注释了
ctrl+shift+/撤销注释
段落:p{输入文字}按ctrl+e扩展
图片:img[src=图片属性]然后扩展
标签嵌套:pspan扩展
同级标签:pimg+a扩展
(divp)+(divimg)扩展
快速生成多个元素:
ulli*扩展
快速生成文本内容:lorem扩展就会自动生成段落文本
lorem4:生成四个单词的文本
语义化接下来就是css样式的学习了,将会介绍css的相关知识。