基础认知
目标：认识网页组成、浏览器、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>