基础认知
目标:认识网页组成、浏览器、web标准
概念铺垫
-
网页有哪些部分组成?
文字图片视频音频超链接
-
背后本质是什么?
前端程序员、工程师的代码
-
代码是通过什么软件转换成用户眼中的页面?
通过 浏览器 “解析和渲染”
常见:IE、Firefox、Chorme(辅助、自带调试功能多)、Safari、Opera
网页
渲染引擎
即“浏览器的内核”,专门对代码进行解析渲染的部分。
ie:trident
firefox:Gecko
Safari:Webkit
Chorme、Opera:Blink(webkit的分支)
内核不同则速度性能和效果不同
web标准
使不同浏览器打开的效果一致
构成 | 语言 | 说明 |
---|---|---|
网页的结构 | HTML | 页面 元素和内容 (决定身体) |
网页的表现 | CSS | 网页元素外观、位置等 样式 (颜色、大小,决定美观) |
网页的行为 | JavaScript | 网页模型的定义和页面 交互 (决定动态) |
HTML初体验
感知
Hyper Text Markup Language : 超文本标记语言 把单词放在一对尖括号里
体会使用txt原始编程 “标签” 行使“加粗”功能:
骨架结构
如一篇文章有 “开头、正文、落款” 的结构,网页也有 “整体、头部、标题、主体” 的固定结构。
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页主体内容
</body>
</html>
开发工具的使用
VSC、记事本(笑)、Webstorm、sublime、dreamweaver 、hbuilder ···
语法规范
注释
ctrl+/
标签构成
双标签,开始标签+包裹内容+结束标签
单标签
标签关系
父子嵌套 head title
兄弟并列 head body
html标签学习
标题标签
场景:突出主题
代码:h系列
h1:一级标题(只至六级)
语义:重要程度递减
特点:加粗 变大且渐小 独占行
排版标签
- 标题
- 段落
- 换行br
- 水平线hr
文本格式化标签
标签 | 场景说明 |
---|---|
b or strong | 加粗 |
u or ins | 下划线 |
i or em | 倾斜 |
s or del | 删除线 |
“语义”(“语气”和“含义”):对人好理解好记忆,对机器(对搜索引擎SEO)有帮助
媒体标签
-
路径
页面要加载某图,须先找到该图
绝对(从盘符开始或某网址)路径&相对路径常用相对路径,即 从当前文件开始出发找目标文件
相对路径的分类:同级、上、下级目录
-
音频
双标签!
<audio src="./music.mp3" controls></audio>
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放(部分不支持) loop 循环 音频目前支持.mp3 .wav .ogg
-
视频
<video src="./video.mp4" controls></video>
常见属性及其功能同上音频表,注意,chorme需配合muted实现静音自动播放
<controls autoplay muted>
-
图片
单标签!
<img src="" alt="">
src和alt赋予属性(属性名、属性值)
-
src:当网页和目标图同属一文件夹路径直接写图片名字(包括后缀)
-
alt:当图加载失败才显示alt的文本,即“替换文本”
<img src="./1.jpg" alt="">
属性写在开始标签内部
标签上可同时存在多个属性
属性间空格隔开
标签名img和属性之间必须空格
属性之间无顺序之分
-
title:“提示文本”,鼠标悬停时才显示的文本
-
width和height,宽度和高度 控制图片尺寸
只设置其一则另一个自动等比例缩放,图片不变形
-
链接标签
"a标签/超链接/锚链接":(双)
<a href="./目标网页.html">超链接</a>
开发网站初期,若未知将来跳转的地址,href的值写#,即空链接
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example00</title>
</head>
<body>
<h1>Tencnt高级web前端开发岗位</h1>
<hr>
<h2>职位描述</h2>
<p>负责前端技术方案和架构的研发和维护</p>
<h2>岗位要求</h2>
<p>精通html5/css3/js等技术;</p>
<p>熟悉bootstrap,vuE,reactjs等框架至少一种以上;</p>
<h2>工作地址</h2>
<p>上海市徐汇区腾云大厦</p>
<img src="./exampleimages/TencentTower.jpg" alt="">
</body>
</html>