前端之路

119 阅读3分钟

网页哪些部分组成?

文字,图片,音频,视频,超链接

网页背后的本质?

前端程序员写的代码

前端的代码通过什么软件转换成用户眼中的网页?

通过浏览器转化(解析和渲染)成用户看到的页面

浏览器是网页显示,运行的平台,是前端开发必备利器

渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分 chrome/opera Blink Blink其实是Webkit的分支 浏览器引擎不同 导致解析相同代码时的速度 性能 效果不一样

web标准

:三个构成,结构html,表现css,行为javascript

htmL:页面元素和内容

css:网页元素的外观和位置等页面样式(如:颜色,大小等)

javascript:网页模型的定义与页面交互(动态效果)

网页整体 双标签 头部 双标签 ; 身体 双标签 ; 标题 双标签 ; 什么是注释:

方便下次看到此处理解

程序员添加注释,是为了给谁看的?

下次阅读代码者(自己或者其他程序员) 注释的快捷键:Ctrl+/**

单标签:


水平分割线,主题的分割转换
换行

标题标签:h系列标签

,语义:1-6级标题,重要程度依次递减

Ctrl+D:向后选中相同内容 shift+alt+向下键:向下复制一行

元素分类

一个网页只用一个h1标签就够了,慎用h1标签

段落标签:

双标签

加粗 下划线 倾斜 删除线

这四组标签突出重要性的强调语境

一个标签可以拥有多个属性,属性之间必须用空格隔开

图片标签: (src;属性名) ; (引号“”)里面是属性值 ,alt一样

src:来源 alt:替换文本,当图片无法正常显示时,显示出文字

title:提示文本 ,当鼠标悬停图片时,显示出的文字;不仅仅用于图片显示,还有其他作用

width宽度 height高度 如果只设置两者中的一个,另一个没设置的会自动等比例缩放

对于width和height属性只需要给出一个值,另一个等比例缩放,好处就是图片不变形

相对路径:同级目录只需要打(./) 上级目录(../) 下级目录 (目标文件夹/所需文件名称)

下级目录还可以:“./目标文件夹/所需文件名称”

<./>:等于当前目录,默认方式 <../>:等于返回上一级

上级目录不限于只打一个../,如果在上两级:“../../目标文件夹/目标名称”

音频标签各种属性

:audio 双标签 必须属性src=“”。controls:显示播放的控件

autoplay:自动播放(部分浏览器不支持) loop:循环播放

语法格式<audio src="音频" (controls属性)(autoplay属性)(loop属性)>

音频标签目前支持三种格式:MP3,Wav,Ogg

视频标签:

video 双标签 必须属性src=""。跟音频标签的三个属性一致,可共同使用。

视频标签在谷歌浏览器使用autoplay自动播放属性时(在谷歌浏览器中必须配合muted实现静音播放)

视频标签目标支持三种格式:MP4,webM ,Ogg

链接标签:a

双标签 必须属性href=“”。

语法格式跳转接口

当开发网站初期,我们还不知道跳转地址的时候,就打“#”; “#“也称谓通链接

href:跳转地址

target属性:目标网页打开方式

_self:覆盖原网页(默认值)

_blank:在新窗口中跳转(保留原网页)

另外补充:target="blank",当这里少了个下划线时。在浏览器的新标签页面中打开了链接,每次点击超链接时

,只会“刷新”已打开的页面,无法创建新的窗口打开页面。

小知识

以后项目里面的首页都叫”index“