一、准备知识1.两位先驱图灵与冯·诺依曼2.计算机由硬件和软件组成软件分为系统软件与应用软件3.应用软件又分为两大类C/S架构特点需要安装、偶尔更新、不跨平台、开发更具针对性。B/S架构特点无需安装、无需更新、可跨平台、开发更具通用性。前端工程师主要做的就是编写B/S网页4.网页的概念1) 网址我们在浏览器中输入的地址。2) 网页浏览器所呈现的每一个页面。3) 网站多个网页构成了一个网站。网页的标准为具有结构、表现和行为分别由html、css和js控制5.浏览器与内核二、html简介1.全称HyperText Markup Language超文本标记语言。2.html发展史三、准备工作1.安装chrome浏览器下载地址https://www.google.cn/chrome。2.安装VSCode下载地址https://code.visualstudio.com/。默认语言使用不便可以安装中文语音包插件3.安装Live Server插件1)可以更加方便的打开网页。2)打开网页的方式更贴近项目上线。3)代码出现改动后可以自动刷新。注意事项1.务必使用VSCode打开的是文件夹否则 Live Server 插件无法正常工作2.打开的网页必须是标准的HTML结构否则无法自动刷新四、html入门1.html初体验1)新建文本文档并将后缀改为html可创建html文件2)程序员写的称为源代码要交给浏览器渲染3)可以借助浏览器查看网页的源代码2.html标签1)标签又称元素是HTML的基本组成单位。2)标签分为双标签与单标签 绝大多数都是双标签。3) 标签名不区分大小写但推荐小写因为小写更规范。4)双标签结构实例p我是一段文本/p5.单标签结构实例input6. 标签之间的关系并列关系、嵌套关系可以使用 tab 键进行缩进3.标签属性1)用于给标签提供附加信息。2)可以写在起始标签或单标签中形式如下实例marquee loop1 bgcolororange尚硅谷让天下没有难学的技术/marquee input typepassword3)有些特殊的属性没有属性名只有属性值例如input disabled4)注意点4.heml基本结构1)在网页中可以通过“检查”来查看某段结构的具体代码2)“检查”和查看“网页源代码”的区别【查看网页源代码】看到的是程序员编写的源代码。【检查】看到的是经过浏览器 “处理” 后的源代码。备注日常开发中【检查】用的最多。4网页基本结构图示其中1. 想要呈现在网页中的内容写在body标签中。2. head标签中的内容不会出现在网页中。3. head标签中的title标签可以指定网页的标题。实例html head title网页标题/title /head body ...... /body /html