河南便宜网站建设价格低,上海高端室内设计,校园网站建设管理,搜索引擎广告名词解释000、本人编写前言
前言#xff1a;本笔记来源于莫振杰的书《HTML、CSS、Javascript从零到一快速上手》#xff0c;经过修改制成的自学笔记#xff0c;本书很适合小白学习入门web的相关知识#xff0c;你也可以先看看我从中学到了什么#xff0c;再考虑是否去认真学习这本…000、本人编写前言
前言本笔记来源于莫振杰的书《HTML、CSS、Javascript从零到一快速上手》经过修改制成的自学笔记本书很适合小白学习入门web的相关知识你也可以先看看我从中学到了什么再考虑是否去认真学习这本书。
001、HTMl简介
1前端技术解说
①从“网页制作”到“前端开发”
“网页制作”是web1.0时代2005前的产品主要是静态网页即仅仅供用户浏览图片和文字而无法与服务器进行数据交互的页面。那个时候的网页开发工具三大件Dreamweaver、Fireworks、Flash“前端开发”是web2.0时代2005后的产品由网页制作演变而来这个时候网页分成两种静态网页和动态网页这个时候的网页开发工具三大件HTML、CSS、JavaScript
②从“前端开发”到“后端开发”
前端开发最为核心的技术就是HTML、CSS、Javascript。“HTML控制网页结构CSS控制网页外观、Javascript控制网页行为”相当于一个盖房子的流程 i、使用HTML设置网页的字体类型、背景颜色等 ii、使用CSS修饰字体类型、字体大小、背景颜色等 iii、使用Javascript定义鼠标事件当鼠标挪到某个按钮时按钮的颜色会改变 掌握了前端技术的核心就可以开始开发网站了。但是开发的只是静态网页只能用于浏览不能和服务器交互因此学完三大核心后就还要学习后端技术几种常见的后端技术PHP比较通用的开源脚本语言、JSP类似ASp技术可以在传统的HTML网页中插入Java程序段scriptlet和JSP标记tag从而形成JSP文件用JSP开发的网站是跨平台的既可以在windows下运行也可以在Linux等操作系统上运行、ASP.NET前生就是ASP技术
③学习路线推荐
HTML----CSS----Javascript----jQuery----HTML5----CSS3----ES6----移动web----Vue.js另外不一定要等到精通一门后才学习下一门这也是很难的很多技术都具有交叉关系。我很喜欢折本书里的一句话“只有‘通’十行才可能做到‘精’一行”
2什么是HTML
①HTML全称是“HyperText Markup language”即超文本标记语言严格来说HTML不属于一种编程语言而属于标记语言
②HTML通过多对标签来描述网页学习HTML就相当于学习这些标签用来搭建网页的骨架
p一段文字/p !--p和/p就是一对标签--③有时候也会叫“标签”为“元素”如把“p标签”说成“p元素”
④通过HTML标签来描述一个网页生成一个.html文件再由浏览器解读打开这个文件就可以将网页的效果呈现给用户
002、开发工具
前期只是写HTML的话推荐使用VScode即可安装一些有关web开发的插件吧或者你有其他能编写HTML的编辑器也可以。
003、基本标签
HTML的基本结构如下
!DOCTYPE html !--文档声明--
html !--HTML标签以下到此标签结束都是HTML文档--head !--页头--/headbody !--页身--/body
/html1文档声明
“!DOCTYPE html”标签是文档声明表示这是一个HTML页面最好是必须携带有这个标签
2html标签
告诉浏览器这个页面是从开始到结束的。
有的时候还会在里面看到有一个属性为xmlns的代码例如表示当前页面使用的是W3C的XHTML标准不过这点可以暂时不理会
3head标签
是网页的头部用于定义一些特殊的内容例如页面标题、定时刷新、外部文件等一般来说只有六个标签能放在里面
title标签定义网页标题
!DOCTYPE html
htmlheadtitle网页标题/title/headbody/body
/htmlmeta标签定义页面的特殊消息例如页面关键字、页面描述。这些信息很重要是给搜索引擎蜘蛛看的方便我们平时通过关键字等搜索得到这个页面而mate标签有两个重要的属性name、http-equiv name可以描述网页的信息在实际开发中最重要的其实只有keywords和descriptionhttp-equiv可以描述网页所使用的编码和定义网页自动刷新跳转如果不加上有可能会产生乱码的问题
!DOCTYPE html
htmlheadmeta charsetutf-8!--这里定义了字符编码或者可以写成meta http-equivContent-Type contenttext/html; charsetutf-8--meta http-equivrefresh content5;urlhttps://www.baidu.com/!--10秒后跳转到百度网站--title网页标题/titlemeta namekeywords content网页的关键字:学习HTML的练手网站/meta namedescription content网页的描述:本网站是一个新手学习使用的静态网站/meta nameauthor content网页的作者:limou3434/meta namecopyright content网页的版权信息:本站所有代码仅供本人使用禁止转载//headbody/body
/htmlstyle标签用于定义页面的CSS样式等学到了CSS后再进行讨论link标签用于引入外部样式文件CSS文件等学到了CSS后再进行讨论script标签用于定义页面的Javascript代码也可以引入外部的JavaScript文件等学到了Javascript后再进行讨论base标签这个标签我们暂时忽略不讲只需要知道有这个标签就好了
4body标签
是网页的身体大部分的网页标签都会被写在这里面比如在里面写入p标签段落标签显示一段文字
!DOCTYPE html
htmlheadmeta charsetutf-8!--这里定义了字符编码或者可以写成meta http-equivContent-Type contenttext/html; charsetutf-8--meta http-equivrefresh content5;urlhttps://www.baidu.com/!--10秒后跳转到百度网站--title网页标题/titlemeta namekeywords content网页的关键字:学习HTML的练手网站/meta namedescription content网页的描述:本网站是一个新手学习使用的静态网站/meta nameauthor content网页的作者:limou3434/meta namecopyright content网页的版权信息:本站所有代码仅供本人使用禁止转载//headbodyp网页第一段内容……/p !--这里是p标签。可以写长长的一段话并且会在浏览器显示中自动换行噢--p网页第二段内容……/p p网页第三段内容……/pp网页第四段内容……/pp网页第五段内容……/pp网页第六段内容……/pp网页第七段内容……/p/body
/html5注释标签用于编写注释
用于编写注释
!--这是一段注释…--
/*这也是一段注释*/
