目录
导言
1.拨云见日
基础部分:HTML、CSS;
切图流程:传统切图 、智能切图、公司流行切图;
实战阶段;PC企业站布局、PC游戏站布局;
2.溯本求源
HTML、CSS的扩展;
语法:HTML5、CSS3;
兼容与修改:hack;
3.风生水起
布局:弹性布局、网格布局、移动布局、响应式布局;
布局框架:Bootstrap;
4.巧夺天工
工程:预编译CSS、postrcss;
架构:CSS架构;
高级功能:CSS的高级功能;
交互:CSS与JS的交互;
Web的入门知识
1.什么是HTML、CSS?
都是做网站的编程语言,一般情况下要配合使用,是作为网站开发的基础语言。
HTML
CSS
2.VS code 编辑器?
vs code 是针对编写现代Web和云应用的跨平台源代码编辑器,可在桌面上运行,并且可以用于Windows、macos和linux。它具有对Java Script、TypeScript和Node.js的内置支持,并具有丰富的其他语言和运行时扩展的生态系统。
3.学习编辑器的基本使用
ctrl + s:保存
ctrl + a:全选
ctrl + x:剪切
ctrl + c、ctrl +v: 复制、粘贴
ctrl + z、ctrl +y:撤销、前进
shift + end:从头选中一行
shift +home:从尾选中一行
shift + alt +↓:快速复制一行
alt + ↑或↓:快速移动一行
tab :向后缩进
tab + shift:向前缩进
alt +鼠标左键:多光标
ctrl + d:选择相同元素的下一个
4.chrome浏览器?
Google Chrome基于开源引擎Webkit、Blink,提供了浏览器扩展框架。
5.了解网站开发?
一个大型网站开发,需要一个团队:
- ui设计师
- Web前端开发工程师(h5开发)
将设计稿转化为代码
将数据库里的数据显示到页面上
核心技术:HTLM、CSS、Java Script
HTML:网站的结构
CSS:网站的样式
Java Script:与用户的交互行为 - Web后端开发工程师:将产生的数据进行储存、管理
6.HTML基础知识与属性
是一种超文本标记语言:
- 超文本:文本内容+非文本内容 (图片、视频、音频等)
- 标记:也称标签,<单词>
- 单标签:<单词>
双标签:<单词></单词>
标签可以是上下排列,也可以组合镶嵌
标签的属性:来修饰标签的,设置当前标签的一些功能
创建标签的快捷键:单词 + tab键 - 语言:编程的语言
- HTML的常见标签:标签
7.HTML的初始代码
- 每一个html都需要添加初始代码,无论写什么网页,都需要初始代码
- 创建HTML初始代码的快捷键:!+tab键
- 初始代码:
<! DOCTYPE html> 文档声明:告诉浏览器这是HTML文件
< html lang=“en”> html最外层标签,包裹着所有HTML代码,lang="en"表示是一个英文网站,lang="zh-cn"表示是一个中文网站
< head>
< meta charset =“UTF-8”> 元信息:是编写网页中的一些赋值信息
< title>Document 是网页的标题
< /head>
< body>
显示网页内容的区域
< /body>
< /html>
8.HTML注释?
- 写法:< !–注释的内容–>
在浏览器中看不到,只在代码中看到注释的内容。 - 意义:
把暂时不用的代码注释起来,方便以后使用。
对开发人员进行提示。 - 快捷添加注释与删除注释
ctrl + /
shift + alt + a
9.HTML语义化
- 语义化指的是,根据网页中内容的结构,选择合适的HTML标签进行编写。
- 好处:
在没有CSS的情况下,页面也能呈现出很好的网页内容结构。
有利于SEO,让搜索引擎爬虫更好的理解网页。
方便其他设备解析(入屏幕浏览器、盲人阅读器等)。
便于团队开发与维护。
10.标题与段落
- 标题:< h>< /h> 双标签,与tittle不同,是在网页内的标题,通常只有一个主标题< h1>< /h1>,副标题可以有多个
- 段落:< p>< /p>双标签
- 练习:
11.文本修饰标签
- 强调:
< strong>< /strong>用于加粗文字
< em>< /em>将文字斜体 - 下标签:< sub>< /sub>
- 上标签:< sup>< /sup>
- 删除:< del>< /del>
- 插入< ins>< /ins>
- 练习:
12.图片标签
- img:单标签,用于插入图片< img>
- src: src + 图片的地址
- alt: 图片有问题时,出现的友好提示
- title :图片的提示信息
- width、height: 控制图片的大小
- 练习:
13.引入文件的地址路径
- 相对路径:
. 在路径中表示当前路径
. . 在路径中表示上一级路径
- 绝对路径:文件或图片的原有地址
14.跳转链接?
a: < a>链接标签
herf: 标签属性,链接的地址
tareget:标签属性,可以改变链接打开的方式,默认情况下,在当前页面打开,用_self ;在新窗口打开,_blank.
base: < base> 是改变链接的默认行为的。
15.跳转锚点
实现一:在a标签下,#号+标题,在h标签下,id属性
实现二:在a 标签下,#号+标题,在a 标签下,name属性
16.特殊符号
- 编写一些文本时,经常会遇到输入法无法输入的字符,如:注册商标、版权符等,还有望一段文字中加入多个空格时,页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符,在HTML中,为这些特殊字符准备了专门的代码。
- 作用:解决冲突,左尖括号,右尖括号,多个空格添加的实现
- 写法: &+字符
- 练习:
17.列表标签
- 无序列表
< ul>:列表的最外层容器
< li>:列表项
< ul> 、< il>必须组合出现,他们中间不能有其他标签。
tape属性:改变前面标记的样式(一般用CSS来控制)
常见:
值 | 描述 |
---|---|
disc | 默认样标,实心圆 |
circle | 空心圆 |
square | 实心方块 |
- 有序列表
< ol>:列表的最外层容器
< li>:列表项
有序列表用的非常少,经常用无序列表,无序列表可以代替有序列表。
tape属性:改变前面标记的样式(一般用CSS来控制)
常见:
- 定义列表
< dl>:定义列表
< dt>:定义专业术语或名词
< dd>:对名词进行解释和描述
练习:
- 嵌套列表
列表之间可以相互嵌套形成多层级列表