网页哪些部分组成?
文字,图片,音频,视频,超链接
网页背后的本质?
前端程序员写的代码
前端的代码通过什么软件转换成用户眼中的网页?
通过浏览器转化(解析和渲染)成用户看到的页面
浏览器是网页显示,运行的平台,是前端开发必备利器
渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分 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“