自学前端 7.14

网页基础认知

网页由文字 图片 音频 视频 超链接构成

写的代码vs code 由浏览器Chrome转换成网页

五大浏览器：IE 火狐 Chrome Safari Opera

浏览器用渲染引擎即浏览器内核解析代码，内核不一样速度 性能 效果也不一样

Web标准写代码会在不同引擎有一样效果

Web标准三个构成：

HTML 内容，结构； CSS 页面样式，表现 ；JS JavaScript 页面交互，动态效果，行为

一. HTML Hyper Text Markup Language 超文本标记语言

1.加粗 <strong></strong> 

tips：在文件资源管理器->查看->显示->文件扩展名勾上，能改文件类型

2.HTML骨架结构 html head title body 

 3.开发工具VS code 

tips: 新建的文件夹左击拖拽到VScode里，在左边的任务栏里能看到文件夹的全部文件

tips:新建一个.html文件，英文状态下的！+ enter/tab 能自动生成骨架，试过了中文状态下的！不行

tips：没保存的.html 文件上面里面有一个白色小圆点，保存ctrl + s 过后会变成 X 

tips：在VScode代码的页面右击，open in default browser （在默认的浏览器打开，default 默认的，还学了个英语单词，快乐），快捷键Alt + B 

神奇的是我在做这步的时候居然没有这个，按快捷键也没用，然后我又苦逼地去搜索了为啥

只有run code 然后我点了，又说语言不支持或未定义

 真沉默了，我想着可能是和我在VScode 上为了运行C程序然后搞的一系列操作有关，下了那个run code ，最后发现是没安装插件

【安装插件】就是在这个我标红的地方，点开搜索open in browser

 【解决方案】搜了好几个都试了一下子，最后是安装了一个open in browser的插件，然后再在File->Preference->Settings搜索open in brower：Defult 在它下面的框框填Chrome 我用的默认是谷歌，然后alt+B就欧克了，太sb了我，哈哈哈，自嘲一下

接下来让我很无语的是为甚么我在title上改了标题，谷歌网页打开的标题还不变，无语了，不知道为啥，现在知道了，没保存，我是憨憨

HTML注释 

tips:单行注释 ctrl+/，按一次加，再按一次取消

HTML标签

HTML标签的结构<>/,有双标签(要确定开始和结束的位置)<strong></strong>，单标签（）<br>换行<hr>

标签关系 父子（嵌套），兄弟（并列），这个就是字面意思，学过离散的树应该都知道

标题标签：h1到h6，文字从大到小，文字都加粗，独占一行，

tips:复制一行：光标放在那一行，ctrl+C ctrl+v 就能复制上一行内容到下一行

tips:删除同一行相同的字符：先选中同一行相同的内容，ctrl+D 能选选中下一个一样的，这样能一下改好几个

段落标签<p></p>：在网页里自动换行，每个标签独占一行，段落之间有间隙

tips: <br>换行 <hr>水平分割线

tips：代码自动换行设置：在VScode的上边栏里的查看->自动换行work wrap

文本格式化标签：b strong 加粗 u ins 下划线 i em 倾斜 s del 删除线

不自动换行

了解标签有语义化，eg.p表示段落，h表示标题

单词的标签有突出重要性的作用

图片标签：<img src="cat.jpg" alt="This is a cat">

要用图片标签要对其属性进行设置：src="" (要用的图片的位置) alt=""（图片加载失败的时候显示alt的文字内容） 属性名=“属性值”

title属性：鼠标悬停的时候显示，不仅仅用在img中

width:宽度 height：高度标签 两个

标签属性：src alt title 

tips: ./是当前的意思

路径：绝对路径(一般不用)，相对路径（多用）

绝对路径：从盘符开始 eg: D:\day01\images\1.jpg 

完整网络地址：eg.  https://www.itcast.cn/2018czgw/images/logo.gif

\反斜杠  /斜杠

mac电脑没有盘符，绝对路径以\开始

相对路径：从当前文件开始找目标

同级文件 ./cat.gif cat.gif

下级文件：image/cat.gif      /点进去

上级文件：../cat.gif                           ../返回一级

eg.复杂一点的： ../image/cat.gif

音频 audio

<audio src="文件路径" ></audio>

音频常见属性：src 音频路径 controls autopaly(一般浏览器不支持) loop

 视频标签 video属性和audio一样 controls autoplay loop

<video src=""></video>

谷歌用 muted autoplay可以实现静音自动播放

链接标签

<a href="./目标网页"> </a>