制作php网站,创新网站建设方案书,个人介绍网站模板,网站怎么做收录1. 使用软件
vscode 谷歌浏览器 vscode下载地址#xff1a;https://code.visualstudio.com/ 谷歌可以使用360软件管家安装
2. 安装插件
在vscode中安装插件#xff1a;open in browser#xff0c;点击Extensions后搜索对应插件名然后点击安装Install 安装完成后可在htm…1. 使用软件
vscode 谷歌浏览器 vscode下载地址https://code.visualstudio.com/ 谷歌可以使用360软件管家安装
2. 安装插件
在vscode中安装插件open in browser点击Extensions后搜索对应插件名然后点击安装Install 安装完成后可在html文件中右键多了两个选择 或者安装live server插件然后右键选择Open with live Server他就会帮助我们启动浏览器然后使用win ➡的方式切屏就可以看到实时的效果展示。
3. 标签语法
HTML 超文本标记语言——HyperText Markup Language。
超文本链接标记标签带尖括号的文本
标签结构
标签要成对出现中间包裹内容里面放英文字母标签名结束标签比开始标签多 /标签分类双标签和单标签
strong需要加粗的文字strong
br
hr4. HTML骨架
html整个网页head网页头部用来存放给浏览器看的信息例如 CSS title网页标题 body网页主体用来存放给用户看的信息例如图片、文字
htmlheadtitle网页标题/title/headbody网页主体/body
/html提示 VS Code 可以快速生成骨架在 HTML 文件.html中!英文配合 Enter / Tab 键 5. 标签的关系 作用明确标签的书写位置让代码格式更整齐 父子关系嵌套关系子级标签换行且缩进Tab键 htmlbody/body
/html兄弟关系并列关系兄弟标签换行要对齐 head/head
body/body6. 注释
概念注释是对代码的解释和说明能够提高程序的可读性方便理解、查找代码。
注释不会再浏览器中显示。
在 VS Code 中添加 / 删除注释的快捷键Ctrl /
!-- 我是 HTML 注释 --7. 标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
h1一级标题/h1
h2二级标题/h2
h3三级标题/h3
h4四级标题/h4
h5五级标题/h5
h6六级标题/h6显示特点
文字加粗字号逐渐减小独占一行换行 经验 h1 标签在一个网页中只能用一次这是一种规范写法但并不强制用来放新闻标题或网页的 logoh2 ~ h6 没有使用次数的限制 8. 段落标签
一般用在新闻段落、文章段落、产品描述信息等等。
p段落/p显示特点
独占一行段落之间存在间隙
9. 换行和水平线
换行br水平线hr
br
hr10. 文本格式化标签
作用为文本添加特殊格式以突出重点。常见的文本格式加粗、倾斜、下划线、删除线等。 提示strong、em、ins、del 标签自带强调含义语义。 10-图像标签
作用在网页中插入图片
img src图片的 URLsrc用于指定图像的位置和名称是img的必须属性。
图像属性 属性语法
属性名“属性值”属性写在尖括号里面标签名后面标签名和属性之间用空格隔开不区分先后顺序
12. 路径
概念路径指的是查找文件时从起点到终点经历的路线。
路径分类
相对路径从当前文件位置出发查找目标文件绝对路径从盘符出发查找目标文件 Windows 电脑从盘符出发Mac 电脑从根目录出发
相对路径
查找方式从当前文件位置出发查找目标文件
特殊符号
/ 表示进入某个文件夹里面 → 文件夹名/**. ** 表示当前文件所在文件夹 → ./… 表示当前文件的上一级文件夹 → …/
绝对路径
查找方式Windows 电脑从盘符出发Mac 电脑从根目录/出发
img srcC:\images\mao.jpg提示 Windows 默认是 \ 其他系统是 /建议统一写为 /特殊的绝对路径 → 文件的在线网址https://www.itheima.com/images/logo.png 应用场景网页底部友情链接 13. 超链接标签
作用点击跳转到其他页面。
a hrefhttps://www.baidu.com跳转到百度/ahref 属性值是跳转地址是超链接的必须属性。
超链接默认是在当前窗口跳转页面添加 target“_blank” 实现新窗口打开页面。
拓展开发初期不确定跳转地址则 href 属性值写为 #表示空链接页面不会跳转在当前页面刷新一次。
a hrefhttps://www.baidu.com/跳转到百度/a!-- 跳转到本地文件相对路径查找 --
!-- target_blank 新窗口跳转页面 --
a href./01-标签的写法.html target_blank跳转到01-标签的写法/a!-- 开发初期不知道超链接的跳转地址href属性值写#表示空链接不会跳转 --
a href#空链接/a14. 音频
audio src音频的 URL/audio常用属性 拓展书写 HTML5 属性时如果属性名和属性值相同可以简写为一个单词。 !-- 在 HTML5 里面如果属性名和属性值完全一样可以简写为一个单词 --
audio src./media/music.mp3 controls loop autoplay/audio15. 视频
video src视频的 URL/video常用属性
!-- 在浏览器中想要自动播放必须有 muted 属性 --
video src./media/vue.mp4 controls loop muted autoplay/video16. 综合案例一-个人简介 网页制作思路从上到下先整体再局部逐步分析制作 分析内容 → 写代码 → 保存 → 刷新浏览器看效果 h1尤雨溪/h1
hr
p尤雨溪前端框架a href../17-综合案例二/vue简介.htmlVue.js/a的作者a href#HTML5/a版Clear的打造人独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目a href#JavaScript/a最后自己也走上了开源之路现全职开发和维护a href#Vue.js/a。/p
img src./photo.jpg alt尤雨溪的照片 title尤雨溪
h2学习经历/h2
p尤雨溪毕业于上海复旦附中在美国完成大学学业本科毕业于Colgate University后在Parsons设计学院获得Design Technology艺术硕士学位任职于纽约Google Creative Lab。/p
h2主要成就/h2
p尤雨溪strong大学专业并非是计算机专业/strong在大学期间他学习专业是室内艺术和艺术史后来读了美术设计和技术的硕士 ins正是在读硕士期间他偶然接触到了JavaScript 从此被这门编程语言深深吸引开启了自己的前端生涯/ins 。/p
p2014年2月开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。/p
h2社会任职/h2
p2016年9月3日在南京的JSConf上Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合目标是让大家能用 Vue 的语法跨三端。/p17. 综合案例二-Vue简介 h1Vue.js/h1
pVue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用SPA提供驱动。/p
p其作者为a href../16-综合案例一/个人简介.html target_blank尤雨溪/a/p
h2主要功能/h2
pVue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层并且非常容易学习非常容易与其它库或已有项目整合。另一方面Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。/p
pVue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。/p
pVue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习非常容易与其它库或已有项目整合。另一方面在与相关工具和支持库一起使用时 [2] Vue.js 也能驱动复杂的单页应用。/p
video src../media/vue.mp4 controls/video
