[声明]学习于【千锋教育_Web前端最全教程从入门到精通(HTML+CSS全套)-哔哩哔哩】
初识前端开发
学习四阶段
PART1 拨云见日
- 入门基础:HTML、CSS
- 切图流程:传统切图(手动切图、参考线切图)、精准切图
- 实战阶段:PC企业站布局、PC游戏站布局
PART2 溯本求源
- 扩展知识:HTML、CSS
- 新语法:HTML5、CSS3
- 浏览器间的兼容和hack
PART3 风生水起
- 流行布局:弹性布局、网格布局、移动端布局、响应式布局—Bootstrap框架
PART4 巧夺天工
- 工程方面:预编译CSS、postcss、CSS架构
- 高级功能:CSS高级用法
- CSS与JS交互
什么是HTML和CSS?
HTML(结构层)
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
CSS(表现层)
CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
二者相辅相成,配合使用,共同作为网站开发的基础语言
如何进行网站编译?
万能之王:记事本
缺点:效率低
宇宙第一编译器:VScode
VS Code,全称Visual Studio Code,来自微软,是一个开源的、基于Electron 的轻量代码编辑器。
优点:
- 开源 — 免费使用
- Electron — 可以让我们使用纯 JavaScript 调用丰富的原生 API 来创建桌面应用;可以把它看作是专注于桌面应用而不是 web 服务器的 io.js 的一个变体。
下载地址
安装插件途径
语言包、open in browser 、 view in browser
编辑器基本使用
创建文件、创建文件夹、重命名和删除等等
vscode快捷操作
Ctrl+S 保存
Ctrl+A 全选
Ctrl+X 、Ctrl+C 、Ctrl+V :剪切、复制、粘贴
Ctrl+Z 、Ctrl+Y :撤销、前进
Shift+End :从头选中一行
Shift+Home :从尾部选中一行
Shift+Alt+↓ :快速复制一行
Alt+1 或↓:快速移动一行
tab :向后缩进
Tab+Shift :向前缩进
Ctrl+D :选择相同元素的下一个
alt + 鼠标左键:多光标
替换背景图
- 找到插件软件—>左侧小方格
2.搜索background-cover并安装
3.ctrl+shift+p 搜索“backgroundCover - start”
4.选择“select picture”
5.替换背景
还不赶紧安排上(乐)
浏览器知多少?
五大主流浏览器
Internet Explorer (IE)
微软公司旗下浏览器,是目国内用户量最多的浏览器。
软以IE和Windows捆绑的模式不断向市场扩展份额,使IE成为市场的绝对主流。
IE浏览器内核:Trident内核
Opera(欧朋)
挪威Opera Software ASA公司旗下的浏览器。
Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核
Safari(苹果)
苹果公司在苹果手机上开发Safari浏览器,利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。
Safari浏览器内核:Webkit内核
Firefox(火狐)
Mozilla公司旗下浏览器,是网景公司后来的浏览器。
Firefox浏览器内核:Gecko内核
Chrome
google旗下的浏览器。Chrome浏览器至发布以来一直讲究简洁、快速、安全,所以Chrome浏览器到现在一直受人追捧。
Chrome浏览器内核:最初是Webkit内核,现在是Blink内核
其实Blink就是Webkit的分支
五大浏览器采用的都是单内核,而随着浏览器的发展现在也出现了双内核。如360浏览器(Chrome+IE)、QQ浏览器(Chrome+IE)都是采用双内核。
web前端三剑客
HTML、CSS、JavaScript的关系
其中,JS和HTML可脱离其余两者而独立存在
HTML的基本结构和属性
一、基本结构
- 超文本:文本内容+非文本内容(图片、视频、音频等)
- 标记(标签):单词+Tab–><单词>
- 语言:标记语言
二、属性
用于修饰标签,设置当前标签的一些功能
<标签 属性="值" 属性2="值2">
三、HTML初始代码
每个.html文件都有的代码叫做初始代码,要符合HTML文件的规范写法。
创建html初始代码快捷键:!+Tab
<!DOCTYPE html> //文档声明:告诉浏览器这是一个html文件
<html lang="en"> //html文件的最外层标签:包裹着所有html标签代码
//lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站
<head>
<meta charset="UTF-8"> //元信息:是编写网页中的一些赋值信息
//charset="UTF-8"是告知浏览器此页面属于什么字符编码格式,下一步浏览器做好“翻译”工作
//unicode:万国码 "UTF-8"是Unicode的升级版
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> //设置网页的标题
</head>
<body>
//显示网页内容的区域
</body>
</html>
四、HTML注释
注释的代码,只有在文件中看得到,但是浏览器显示不出来
<!-- 注释的内容 -->
添加注释:Ctrl+/
删除注释:Shift+Alt+A
意义
- 把暂时不用的代码注释起来,方便以后使用。
- 对开发人员进行提示。
五、HTML语义化
根据网页中内容的结构,选择适合的HTML标签进行编写。
优点
- 在没有CSS的情况下,页面也能呈现出很好的内容结构。
- 有利于SEO,让搜索引擎爬虫更好的理解网页。
- 方便其他设备解析(如屏幕阅读器、盲人阅读器等)。
- 便于团队开发与维护。
HTML标题和段落
标题–>双标签
<h1>我是一个可爱的标题</h1>
h1- h6标题等级逐层递减
在一个网页中,h1标题最重要,并且一个.html文件中只能出现一次h1标签。
网页中尽量不用h5、h6
段落–>双标签
<p>我是比标题更可爱的小段落</p>
六、文本修饰标签
强调–>双标签
<strong>我是比沸羊羊强壮的强调标签</strong>
<em>我是一个斜斜的强调标签</em>
区别
- 写法和展示效果是有区别的,一个加粗、一个斜体。
- strong的强调性更强,em的强调性稍弱。
下标、上标文本
<sub>我是一个踏实的下标</sub>
<sup>我是一个蹦跶的上标</sup>
举例
- y=ax
- K2Cr2O7
删除文本、插入文本
<del>我是一个舍不得你的删除文本</del>
<ins>我是一个刚认识你的插入文本</ins>
二者可组合使用
例
大减价:不要998不要98只要999998
七、图片标签与图片属性
图片–>单标签
快捷键:img+Tab或Enter
<img src="" alt="" title="" width="" height="">
src:引入图片的地址
alt:当图片出现问题的时候,可以显示一段友好的提示文字。
title:提示信息
width、height:图片的大小
当网速较慢时定义图片大小给用户体验感更强
八、引入文件的地址路径
相对路径
.在路径中表示当前路径
…在路径中表示上一级路径
<img src="" alt="">
输入./自动显示同级中图片
输入…/自动显示上一级图片
绝对路径
<img src="E:\HTML\html exersise\jojo.jpg" alt="">
跳转链接
<a>标签
文字跳转
<a href=“https://editor.csdn.net/md/?articleId=127354197”>显示文字</a>
图片跳转
<a href=“https://editor.csdn.net/md/?articleId=127354197”>
<img src="图片路径"alt="">
</a>
跳转锚点
方式一
#号
id属性
<a href="#html">HTML</a>
<h2 id="html">HTML超文本标记语言</h2>
方式二
#号
name属性
<a href="#html">HTML</a>
<a name="html"></a>
<h2>HTML超文本标记语言</h2>
<base>标签
改变链接的默认行为的
<base target="_blank">//默认链接是从新窗口打开
九、特殊符号
编写一些文本时,经常会遇到输入法无法输入的字符,如 ® (注册商标)、©(版权符)等,还有往一段文字中加入多个空格时,页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符,在HTML中,为这些特殊字符准备了专门的代码。
特殊字符 | 含义 | 代码 |
---|---|---|
空格符 |  ; | |
© | 版权 | ©; |
® | 注册上标 | ®; |
< | 小于号 | <; |
> | 大于号 | >; |
& | 和号 | &; |
¥ | 人民币 | ¥; |
° | 摄氏度 | °; |
十、无序列表
<ul>、<li>:列表的最外层容器、列表项
ul和li必须是组合出现的,他们之间不能有其他标签
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
type属性:改变前面标记的样式(一般都是用CSS去控制)
十一、有序列表
<ol>、<li>:列表的最外层容器、列表项
有序列表用的非常少,经常用的是无序列表,无序列表可以去代替有序列表。
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
同样可以利用type属性改变有序列表的样式
十二、定义列表
<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>叠层样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>