1、面试题:web 前端的三大组成
html 标签,标记,结构 --- 网页的基本组成部分
css 样式 --- 修饰页面
javascript 行为 --- 用户交互
2、html ---- css
html
3、网站的站点建立
所有网站 都会有个首页 --- 命名 index.html === shouye.html
banner header content footer
所有的静态资源会放到一个文件夹下
图片
视频
音频
index.html cate.html cart.html mine.html
index.css cate.css cart.css mine.css
index.js cate.js cart.js mine.js
4、快速生成的结构中
面试题: <!DOCTYPE html> 有什么作用?
声明当前文档是一个 html文件类型
DOC TYPE html文件类型
document type === html
html === 根
<> 标签 | 标记 | 元素 | 盒子
分类
单标签 <_____/>
双标签 <_____> </_____>
基本语法: < html标签属性="html属性对应的属性值">
5、代码的注释 快捷键 ctrl + /
6、
<title>百度一下,你就知道</title> 设置标题的
link - favicon ==== <link rel="shortcut icon" href="自己的网站的独特"logo" type="image/x-icon"> 设置“小图标的”
"logo" 是一个 ico 文件 ==== ui设计师提供的
前端自己制作 https://www.bitbug.net/
提前准备一张图片 ---- 下一步生成 ico 文件
打开网站 -
第一步:选择对应的图片 https://www.bitbug.net/
第二步:选择相对于的尺寸 - 一般选择 32 * 32 即可
第三步:输入附加码
第四步:生成 ico 文件
把生成好的 ico 文件放在自己的 文件夹中 - 和 html 文件放在一起
href="./刚刚生成的 ico 文件"
7、基础标签学习
学习方法:
1、记住是什么标签 - 标签的名称【单词】
2、记住标签在什么情况下使用即可
1、标题标签
h1 ~ h6
2、段落标签
p
特殊字符   【空格的意思】
3、强制性换行标签
br
4、上下角标标签
上角标 sup
下角标 sub
5、特殊的转义字符
https://www.w3school.com.cn/html/html_entities.asp
6、修饰文本的标签
1、加粗的
b === strong
2、倾斜的
i === em
3、删除线
s === del
4、下划线
u
7、特殊的字体标签
font
color="red" color="#abcdef" size="4" face="楷体"
html 标签的属性 ==== font 标签的属性
设置颜色的 属性名 color = 属性值 颜色值
【1、直接写颜色单词 2、十六进制 # _ _ _ _ _ _ ( 0 1 2 3 4 5 6 7 8 9 a b c d e f)】
设置大小的 属性名 size = 属性值 1-7
设置种类的 属性名 face = 字体名称即可
8、图片标签
img
src === 图片的路径
1、直接使用网址式的链接 显示图片 【不是很安全 --- 地址 保持高度一致】 === 绝对路径
2、直接使用本地电脑的盘符显示图片 === 绝对路径
相对路径 【工作过程中,尽可能使用相对路径】
相对于当前的 html 文件 的 路径关系
1、在同一个目录下 使用的是 ./
2、如果是图片在html文件的上一个目录 使用的是 ../
3、如果是图片在html文件的上一个目录的上一个目录 使用的是 ../../
alt
=== 图片找不到之后的提示文本
title
=== 鼠标悬停在图片上显示的文本
width - height
=== 设置尺寸的
如果都是是自己手动设置 - 难么就用设置的
如果只是设置一个,那么另一个 等比例进行缩放
面试题: alt 和 title 有什么区别?
alt === 图片找不到之后的提示文本
title === 鼠标悬停在图片上显示的文本
面试题:图片的类型有哪些?
jpg png gif webp
1)jpg :有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;
2)gif:无损压缩格式,支持透明,支持动画,适用于颜色数量较少的图像;
3)png:无损压缩格式,支持透明,不支持动画,适用于颜色数量较少的图像;
4)webp!!!WebP是一种有损压缩格式。不同的是,WebP格式的压缩效率更为出色
在同等质量下,WebP格式图像的体积要比JPEG格式图像小40%。浏览网页的速度将大幅提升
9、超链接标签
a
href === 超链接文件的路径 - 类似于 img的src
target === 打开超链接文件的位置
_self === 默认值 在自己的窗口
_blank === 在一个新的窗口打开
特点:
1、文本的颜色
2、自带下划线
10、列表
有序列表
ol ======= type --- 设置序号排序
- 1数字 / A大写英文字母 / a小写英文字母 / i小写罗马数字 / I大写罗马数字
li
无序列表
ul ===== type --- 设置无序的形状
- disc实心圆 / circle空心圆 / square实心方块
li
自定义列表
dl
dt ==== 名词
dd ==== 名词解释
8、控制台的使用 = 鼠标右击 选择 检查===打开控制台
1、选择左上角的选择项,随机在页面中选择,之后,能够在控制台看到想要的内容 高亮,可直接复制操作