做免费推广网站,做网站对企业有什么好处,浏览加速器,广州市品牌网站建设公司链接
HTML 介绍 写代码的位置#xff1a;VSCode
看效果的位置#xff1a;谷歌浏览器
安装插件 open in browser#xff1a; 接下来要保证每次用 open in browser 打开的是谷歌浏览器。只需要将谷歌浏览器变为默认的浏览器就可以了。
首先进入控制面板#xff0c;找到默…链接
HTML 介绍 写代码的位置VSCode
看效果的位置谷歌浏览器
安装插件 open in browser 接下来要保证每次用 open in browser 打开的是谷歌浏览器。只需要将谷歌浏览器变为默认的浏览器就可以了。
首先进入控制面板找到默认程序 VSCode Ctrl b 折叠侧边栏。 效果 修改代码加上标签 点击刷新按钮刷新网页查看效果 需要包裹内容时使用双标签不需要则使用单标签。
HTML 中绝大多数都是双标签只有极个别是单标签。
HTML 基本骨架就是网页模板所有网页都要基于这个模板来编写代码。这个模板由几个固定的标签组成用这几个标签来表示 HTML 的不同位置。写代码时可以根据位置的不同来对号入座。
最外层是一对 html 标签html 标签表示整个网页。
HTML 基本骨架 用快捷键生成模板的效果 在浏览器中打开时是一个空白的白板没有任何内容 如果想要展示一些文字需要将文字写在 body 标签内部。
例如
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body想要展示的文字。
/body
/html效果 注意这里代码里的网页标题是 Document浏览器网页的标题同样也是 Document是保持对应的。
标签的关系
标签之间有两种关系
父子嵌套兄弟并列
htmlhead/headbody/body
/html注释 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body这是文字能看见吗br!-- 这是注释浏览器不显示。 --!-- 可以给代码加注释 --strong111. 这是加粗的内容。/strong!-- strong222. 这是加粗的内容。/strong --
/body
/html效果 标题标签 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6
/body
/html效果 段落标签 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp有些亲贵却不在乎前车之鉴多尔衮一垮台便纷纷来永平府设立王庄、田庄。这两年山川秀美的所在不时出现楼阁亭台点缀的花园、歇山顶的高大堂屋、卷棚式的青砖住房一派华美富丽乡下人都看得目瞪口呆了。/pp虹桥镇的东岳庙前和通向四乡的大路口早已布棚林立摊贩如云了。火势旺盛的炉边热气腾腾铜勺敲着锅边当当响卖的是油炸果子、油豆腐、豆浆、豆腐脑、杂碎汤提篮挎筐的小贩声声吆喝叫卖着酱鸡、卤蛋、夹肉火烧、点红馒头茶棚、酒棚随处可见落花生、炒栗子、金黄柿子、山里红更摆得一堆一堆的。小地摊最多在兜售用麦草、箔纸编制的各种玩具身上写着“富贵有余”字样的红鱼手捧大元宝笑嘻嘻的“招财童子”盛满银锭、金光闪闪的“聚宝盆”象征福气的红绒蝙蝠等等。摊贩的主顾主要倒不是赛神队伍而是这些来自方圆百里内的游人看客。这里既有身着直领衫、交领衫、毡帽布鞋被满洲人称为“蛮子”的汉人又有长袍短褂、皮帽皮靴被汉人叫做“鞑子”的满洲人、蒙古人既有缠腰带、背褡裢、一脸风霜的庄户人又有长衫翩翩、满面书卷气的文人。不管是哪种人都将在这纷纷攘攘的庙会上吃饱喝足看够然后买点小玩艺儿带回家买个“聚宝盆”叫做“求财如意”买只绒蝙蝠叫做“戴福还家”。只这吉兆就够叫人舒心快意的了。这就难怪太阳才上一竿镇上已经万头攒动一片嘈杂了。/p
/body
/html效果 换行与水平线标签 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body第一行内容。还是第一行内容。br第二行内容。br第三行内容。!-- 可以添加多个换行从而产生空行 --brbrbr新的一行。hr
/body
/html效果 文本格式化标签 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodystrongstrong 加粗/strongbrbb 加粗/bbremem 倾斜/embrii 倾斜/ibrinsins 下划线/insbruu 下划线/ubrdeldel 删除线/delbrss 删除线/sbr嵌套写法brstrongem加粗斜体/em/strong
/body
/html效果 图像标签 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg src./1.jpgimg src./2.jpg
/body
/html两张图片不会换行除非一张图片太大了导致放不下下一张图片会看起来放在了下一行其实还是在同一行。或者下一张图片比较大在上一张图片后面放不下就会单独放到一行中。
在实际工作当中设置图片的高度和宽度都是通过 CSS 来设置的对 HTML 的高度和宽度两个属性只需要了解即可。 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 网速较慢时图片加载不出来有了替换文本不用猜也能知道图片是什么内容。 --img src./11.jpg alt周依然img src./2.jpg title还是周依然
/body
/html效果 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 单独指定图片的高度或者宽度时图片会按比例放大或缩小同时指定图片的高和宽时图片尺寸将会变为指定的值 --img src./1.jpg alt width600img src./1.jpg alt width900 height200
/body
/html效果 路径 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg srcE:\杂\2.jpg altimg srcE:/杂/2.jpg alt
/body
/html不希望下载图片而是使用网络图片 程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- https://www.itheima.com/images/logo.png --img srchttps://www.itheima.com/images/logo.png
/body
/html超链接 超链接标签是双标签 a中间包裹内容。
程序示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya hrefhttps://www.baidu.com/跳转到百度/a !-- 好使 --bra hrefwww.baidu.com/跳转到百度/a !-- 不好使 --br!-- 可以跳转本地文件 --a href./01-标签的写法.html跳转到01-标签的写法/a
/body/html对于超链接按住 Ctrl 键就能在新窗口中打开。 或者再加一个属性也能实现新窗口打开
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya hrefhttps://www.baidu.com/ target_blank跳转到百度/a !-- 好使 --bra hrefwww.baidu.com/跳转到百度/a !-- 不好使 --br!-- 可以跳转本地文件 --a href./01-标签的写法.html跳转到01-标签的写法/a
/body/html开发初期不确定跳转地址则 href 属性值写为 #表示空链接页面不会跳转在当前页面刷新一次。
程序示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodya href#空链接/a
/body/html音频标签
音频标签在网页中插入声音。 音频标签是 audio 双标签src 属性是必须要有的属性。
程序示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyaudio src./media/music.mp3/audio
/body/html此时打开浏览器是没有声音的因为浏览器把自动播放的功能都是禁用的。而且也看不出来有没有添加成功因为没有任何提示信息打开浏览器就是一个空白的白板。如图 可以使用 controls 属性显示音频控制面板面板能看到就说明声音插入成功了。
程序示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyaudio src./media/music.mp3 controls/audio
/body/html效果 controls 属性的完整写法为 controls controls但是在书写 HTML5 属性时如果属性名和属性值相同可以简写为一个单词。因此 controls controls 可以简写为 controls。
添加 loop 属性可以让音频自动循环播放一次播放完了后自动开始从头播放。
添加 autoplay 属性将不会起任何作用因为浏览器是禁用自动播放的。
程序示例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyaudio src./media/music.mp3 controls loop autoplay/audio
/body/html视频标签 视频标签在网页中插入一个视频。
程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyvideo src./media/vue.mp4/video
/body
/html效果 看不出来是不是一个视频下面添加控制面板
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyvideo src./media/vue.mp4 controls/video
/body
/html效果 点击播放按钮就可以开始播放视频了。
添加 muted 属性时打开浏览器时默认声音是关闭的可以手动打开。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyvideo src./media/vue.mp4 controls loop muted/video
/body
/html效果 有了 muted 属性之后再添加 autoplay 属性时当打开浏览器时视频将自动播放且静音播放。如果没有 muted 属性却有 autoplay 属性当打开浏览器时视频将不会播放。
程序示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyvideo src./media/vue.mp4 controls loop muted autoplay/video
/body
/html综合案例一 个人简介
VSCode 自动换行alt z
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title个人简介/title
/head
bodyh1尤雨溪/h1hrp尤雨溪前端框架a href#Vue.js/a的作者a href#HTML5/a版Clear的打造人独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目a href#JavaScript/a最后自己也走上了开源之路现全职开发和维护a href#Vue.js/a。/pimg src./photo.jpg alt尤雨溪的照片 title尤雨溪h2学习经历/h2p尤雨溪毕业于上海复旦附中在美国完成大学学业本科毕业于Colgate University后在Parsons设计学院获得Design Technology艺术硕士学位任职于纽约Google Creative Lab。/ph2主要成就/h2p尤雨溪strong大学专业并非是计算机专业/strong在大学期间他学习专业是室内艺术和艺术史后来读了美术设计和技术的硕士ins正是在读硕士期间他偶然接触到了JavaScript 从此被这门编程语言深深吸引开启了自己的前端生涯/ins 。/pp2014年2月开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。/ph2社会任职/h2p2016年9月3日在南京的JSConf上Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合目标是让大家能用 Vue 的语法跨三端。/p
/body
/html效果 综合案例二 Vue 简介
程序
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 简介/title
/head
bodyh1Vue.js/h1pVue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用SPA提供驱动。/pp其作者为a href./个人简介.html target_blank尤雨溪/a /ph2主要功能/h2pVue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层并且非常容易学习非常容易与其它库或已有项目整合。另一方面Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。/ppVue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。/ppVue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习非常容易与其它库或已有项目整合。另一方面在与相关工具和支持库一起使用时 [2] Vue.js 也能驱动复杂的单页应用。/pvideo src./media/vue.mp4 controls/video
/body
/html
