2023年web前端开发学习路线图 - 哔哩哔哩 (bilibili.com)
学习路线如下
2023年web前端开发学习路线图 - 哔哩哔哩 (bilibili.com)
html5+css3+前端项目
一、初识
网页组成：文字、图片、音频、视频、超链接。
网页背后的本质：代码。
通过浏览器的转化（解析和渲染）转化成网页。
浏览器是网页显示、运行的平台。
五大浏览器：IE、firefox、chorme、safari、opera。
渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分。
不同浏览器的内核不同、解析相同代码的速度、性能、效果也不同。
web标准：解决了浏览器的渲染引擎不同带来的差异。
web标准：结构（HTML）、表现（CSS）、行为（Javascript）
HTML：hyper text markup language
整体、头部、标题、主体
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html><!DOCTYPE html>
<html>
<head></head>
<title>我的网页</title>
<body>hello world
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>二、语法规范
html的注释：ctrl+/ <!-- 内容 -->
html标签的结构图：<strong>文字会变粗</strong> 开始标签、包裹的内容、结束标签
标签由<>/和英文单词或字母组成、有单标签、双标签
<br>换行line break
<hr>水平分割线horize
三、HTML标签学习
标签的关系：父子关系（嵌套关系）、兄弟关系（并列关系）
1、排版标签
1.1.1标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
语义：1~6级标题，重要程度依次递减
特点：文字都有加粗、文字都有变大，并逐级减小、独占一行
1.2.1段落标签
场景：在新闻和文章的页面中，用于分段显示
代码：<p>我是一段文字</p>
语义：段落
特点：段落之间存在间隙、独占一行
1.3.1换行标签
场景：让文字强制换行显示
代码<br>
语义：换行
特点：单标签、让文字强制换行
1.4.1水平线标签
场景：分割不同主题内容的水平线
代码：<hr>
语义：主题的分割转换
特点：单标签、在页面中显示一条水平线
2、文本格式化标签
2.1文本格式化标签的介绍
场景：需要让文字加粗、下划线、倾斜、删除线等效果
代码：
| 标签 | 说明 | 标签 | 说明 |
| b | 加粗 | strong | 加粗 |
| u | 下划线 | ins | 下划线 |
| i | 倾斜 | em | 倾斜 |
| s | 删除线 | del | 删除线 |
右边语义：突出重要性的强调语境
2.2标签语义化
实际项目开发选择标签的原则：标签语义化
好处：对人：好理解记忆
对机器：有利于机器解析、对搜索引擎（SEO）有帮助
推荐：strong、ins、em、del表示强调的语义更加强烈！
3、媒体标签
1、图片标签
2、路径
3、音频标签
4、视频标签
3.1.1图片标签的介绍
场景：在网页中显示图片
代码：<img src=""alt="">
特点：单标签、img标签需要展示对应的效果，需要借助标签的属性进行设置！
标签的完整结构图：<img src="" alt="">
属性注意点：
1、标签的属性写在开始标签内部
2、标签上可以同时存在多个属性
3、属性之间以空格隔开
4、标签名与属性之间必须以空格隔开
5、属性之间没有顺序之分
3.1.3图片标签的alt属性
属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载失败时，不会显示alt的文本
3.1.4图片标签的title属性
属性名：title
属性值：提示文本
当鼠标悬停时，才显示的文本
注意点：title属性不仅可以用于图片标签，还可以用于其他标签
3.1.5图片标签的width和height属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：如果只设置了其中一个，另一个没设置的会以等比例缩放，此时图片不会变形。
如果同时设置了width和height两个，若设置不当此时图片可能会变形。
3.1.2路径的介绍
场景：页面需要加载图片，需要先找到对应的图片（通过路径）
分类：
绝对路径
相对路径
3.2.2绝对路径
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。
例如：
盘符开头：D:\day01\images\1.jpg
完整的网络地址：······logo.gif
网址路径容易受网络影响，且当外部网址图片修改时，容易找不到。好处是节省服务器空间。
盘符路径不容易对离线网页进行分享。
3.2.3相对路径
概念普及：
当前文件：当前的html网页
目标文件：要找到的图片
相对路径：从当前文件开始出发找目标文件的过程
相对路径分类：同级目录、下级目录、上级目录
3.2.4相对路径-同级目录
当前文件和目标文件在同一目录中
代码步骤：
方法一：直接写目标文件的名字即可
方法二：./表示当前
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
