黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端

这篇具有很好参考价值的文章主要介绍了黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、HTML5基础

1、网页的相关概念

1.1什么是网页?

黑马程序员前端课程文档,前端,html5,css31.2什么是HTML?

黑马程序员前端课程文档,前端,html5,css3

2、常用浏览器

2.1常用的浏览器

黑马程序员前端课程文档,前端,html5,css3

2.2浏览器内核

黑马程序员前端课程文档,前端,html5,css3

3、Web标准

 3.1为啥需要Web标准?

黑马程序员前端课程文档,前端,html5,css3

3.2Web标准的构成 :

黑马程序员前端课程文档,前端,html5,css3

4、HTML语法规范

4.1基本语法概述:

黑马程序员前端课程文档,前端,html5,css3

4.2标签关系:

黑马程序员前端课程文档,前端,html5,css3

5、HTML基本结构标签 

5.1HTML网页:

黑马程序员前端课程文档,前端,html5,css3

 黑马程序员前端课程文档,前端,html5,css3

6、开发工具

6.1VSCode常用快捷键:

第二篇:前端VSCode常用插件-快捷键-以及常用技巧-pink老师 - 哔哩哔哩

快速复制一行:shift+alt+下/上箭头

选定多个相同的单词:ctrl+d

添加多个光标:ctrl+alt+下/上箭头

全局替换某写单词:ctrl+h

快速定位到某一行:ctrl+g

选择某个区块:shift+alt  然后拖动鼠标

放大缩小整个编辑器页面:ctrl +/-

单行注释:ctrl+/

多行注释:ctrl+shift+/

6.2VSCode工具生成骨架标签新增代码:

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

 7、HTML常用标签

7.1标题标签

 黑马程序员前端课程文档,前端,html5,css3

 黑马程序员前端课程文档,前端,html5,css3

 7.2段落标签和换行标签

黑马程序员前端课程文档,前端,html5,css3

 黑马程序员前端课程文档,前端,html5,css3 课堂案例:

黑马程序员前端课程文档,前端,html5,css3

7.3文本格式化标签

黑马程序员前端课程文档,前端,html5,css3

 7.4<div>和<span>标签

黑马程序员前端课程文档,前端,html5,css3

 7.5图像标签和路径

黑马程序员前端课程文档,前端,html5,css3

 黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

 黑马程序员前端课程文档,前端,html5,css3

 黑马程序员前端课程文档,前端,html5,css3

  黑马程序员前端课程文档,前端,html5,css3

 7.6超链接标签

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

 黑马程序员前端课程文档,前端,html5,css3

7.7音频标签

黑马程序员前端课程文档,前端,html5,css3

7.8视频标签

 8、HTML中的注释和特殊字符

8.1注释

黑马程序员前端课程文档,前端,html5,css3

8.2特殊字符

黑马程序员前端课程文档,前端,html5,css3

 9.表格标签

9.1表格的主要作用

黑马程序员前端课程文档,前端,html5,css3

9.2表格的基本语法

黑马程序员前端课程文档,前端,html5,css3

  9.3表格单元格标签

黑马程序员前端课程文档,前端,html5,css3

 9.4表格属性

 黑马程序员前端课程文档,前端,html5,css3

 黑马程序员前端课程文档,前端,html5,css3

 9.5表格结构标签

黑马程序员前端课程文档,前端,html5,css3

 9.6合并单元格

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

 黑马程序员前端课程文档,前端,html5,css3

10.列表标签

 10.1无序列表

 黑马程序员前端课程文档,前端,html5,css3

10.2有序列表

黑马程序员前端课程文档,前端,html5,css3

10.3自定义列表

 黑马程序员前端课程文档,前端,html5,css3

11.表单标签

11.1表单作用

黑马程序员前端课程文档,前端,html5,css3

11.2表单的组成

黑马程序员前端课程文档,前端,html5,css3

 11.3表单域

黑马程序员前端课程文档,前端,html5,css3

 11.4表单控件(表单元素)

黑马程序员前端课程文档,前端,html5,css3

 11.4.1<input>输入表单元素黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

11.4.2 label标签

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

11.4.3 select 下拉表单元素

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

11.4.4 textarea文本域元素

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

12.综合案例

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

13.查阅文档

黑马程序员前端课程文档,前端,html5,css3

CSS3基础

1.CSS简介

1.1HTML的局限性

黑马程序员前端课程文档,前端,html5,css3

1.2CSS-网页的美容师

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

1.3CSS语法规范

黑马程序员前端课程文档,前端,html5,css3

1.4CSS代码风格

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

2.CSS基础选择器

2.1CSS选择器的作用

黑马程序员前端课程文档,前端,html5,css3

2.2CSS基础选择器

黑马程序员前端课程文档,前端,html5,css3

2.3标签选择器

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

2.4类选择器

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

使用类选择器化盒子

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

类选择器特殊使用

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

 黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

2.5 id选择器

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

2.6通配符选择器

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

3.CSS字体属性

3.1字体系列

黑马程序员前端课程文档,前端,html5,css3

3.2字体大小

黑马程序员前端课程文档,前端,html5,css3

3.3字体粗细

黑马程序员前端课程文档,前端,html5,css3

3.4文字样式

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

3.5字体复合属性

黑马程序员前端课程文档,前端,html5,css3

3.6总结

黑马程序员前端课程文档,前端,html5,css3

4.CSS文本属性

4.1文本颜色

黑马程序员前端课程文档,前端,html5,css3

4.2对齐文本

黑马程序员前端课程文档,前端,html5,css3

4.3装饰文本

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

4.4文本缩进

黑马程序员前端课程文档,前端,html5,css3

4.5行间距

黑马程序员前端课程文档,前端,html5,css3

4.6总结

黑马程序员前端课程文档,前端,html5,css3

5.CSS的引入方式

5.1CSS的三种样式表

黑马程序员前端课程文档,前端,html5,css3

5.2内部样式表

黑马程序员前端课程文档,前端,html5,css3

5.3行内样式表

黑马程序员前端课程文档,前端,html5,css3

5.4外部样式表

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

5.5总结

黑马程序员前端课程文档,前端,html5,css3

6.综合案例

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

7.Chrome调试工具

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

8. Emmet语法

8.1快速生成HTML结构语法

黑马程序员前端课程文档,前端,html5,css3

8.2快速生成CSS样式语法

简写+tab键

9.CSS的复合选择器

9.1

黑马程序员前端课程文档,前端,html5,css3

9.2后代选择器

黑马程序员前端课程文档,前端,html5,css3

9.3子选择器

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

9.4并集选择器

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

9.5伪类选择器

9.5.1链接伪类选择器

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

9.5.2Focus伪类选择器

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

9.6总结

黑马程序员前端课程文档,前端,html5,css3

10.CSS的元素显示模式

10.1什么是元素显示模式

黑马程序员前端课程文档,前端,html5,css3

10.2元素显示模式的分类

10.2.1块元素

黑马程序员前端课程文档,前端,html5,css3

10.2.2行内元素

黑马程序员前端课程文档,前端,html5,css3

10.2.3行内块元素

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

10.3元素显示模式的转换

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

10.4例子:小米侧边栏

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

11.CSS的背景

11.1背景颜色

黑马程序员前端课程文档,前端,html5,css3

11.2背景图片

黑马程序员前端课程文档,前端,html5,css3

11.3背景平铺

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

11.4背景图片位置

11.4.1

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

11.4.2案例

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

11.4.3背景图片位置

黑马程序员前端课程文档,前端,html5,css3

11.4.4背景图像固定(背景附着)

  黑马程序员前端课程文档,前端,html5,css3

11.4.5背景属性复合写法

黑马程序员前端课程文档,前端,html5,css3

11.4.6背景颜色半透明

黑马程序员前端课程文档,前端,html5,css3

11.4.7总结

黑马程序员前端课程文档,前端,html5,css3

11.4.8综合案例-五彩导航

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

12.CSS的三大特性

12.1层叠性

黑马程序员前端课程文档,前端,html5,css3

12.2继承性

12.2.1

黑马程序员前端课程文档,前端,html5,css3

12.2.2行高的继承

黑马程序员前端课程文档,前端,html5,css3

12.3优先级

12.3.1

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

12.3.2该注意的问题

黑马程序员前端课程文档,前端,html5,css3

12.4CSS权重的叠加

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

12.4.1两个练习题

黑马程序员前端课程文档,前端,html5,css3

13.盒子模型

13.1盒子模型

13.1.1看透网页布局的本质

黑马程序员前端课程文档,前端,html5,css3

13.1.2盒子模型组成

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

13.1.3边框

1、总体

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

2、边框复写

黑马程序员前端课程文档,前端,html5,css3

3、表格的细线边框

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

4、边框会影响盒子的大小

黑马程序员前端课程文档,前端,html5,css3

13.1.4内边距(padding)

1、总体

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

2、padding复合属性

黑马程序员前端课程文档,前端,html5,css3

3、padding会影响盒子的大小

黑马程序员前端课程文档,前端,html5,css3

4、padding应用-新浪导航栏

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

5、padding不会撑开盒子的情况

黑马程序员前端课程文档,前端,html5,css3

13.1.5外边距(margin)

1、总体

黑马程序员前端课程文档,前端,html5,css3

2、margin典型应用-块级盒子水平居中对齐

黑马程序员前端课程文档,前端,html5,css3

3、行内元素和行内块元素水平居中

黑马程序员前端课程文档,前端,html5,css3

4、外边距合并-嵌套块元素塌陷

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

13.1.6清除内外边距

黑马程序员前端课程文档,前端,html5,css3

13.2 PS基本操作

黑马程序员前端课程文档,前端,html5,css3

13.3综合案例

13.3.1产品模块布局分析

黑马程序员前端课程文档,前端,html5,css3

13.3.2box布局

黑马程序员前端课程文档,前端,html5,css3

13.3.3图片和段落制作

黑马程序员前端课程文档,前端,html5,css3

13.3.4评价和详情制作
13.3.5竖线细节制作

黑马程序员前端课程文档,前端,html5,css3

13.3.6快报模块布局分析

黑马程序员前端课程文档,前端,html5,css3

13.3.7快报模块头部制作

黑马程序员前端课程文档,前端,html5,css3

13.3.8快报模块列表制作

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

13.4圆角边框

13.4.1圆角边框原理

黑马程序员前端课程文档,前端,html5,css3

13.4.2圆角边框的使用

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

13.5盒子阴影

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

13.6文字阴影(了解即可)

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

14.浮动

14.1传统网页布局的三种方式

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

14.2为啥需要浮动

黑马程序员前端课程文档,前端,html5,css3

14.3 什么是浮动?

黑马程序员前端课程文档,前端,html5,css3

14.4浮动特性

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3

黑马程序员前端课程文档,前端,html5,css3文章来源地址https://www.toymoban.com/news/detail-844629.html

14.5浮动元素经常和标准父级搭配使用

15.常见网页布局

16.清除浮动

17. PS切图

18.学成在线案例

H5C3 

实践项目-品优购电商网站

到了这里,关于黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [学习笔记]黑马程序员-Hadoop入门视频教程

    黑马程序员大数据Hadoop入门视频教程,适合零基础自学的大数据Hadoop教程 学习目标 1.理解大数据基本概念 2.掌握数据分析基本步骤 3.理解分布式、集群概念 4.学会VMware虚拟机的导入与使用 5.掌握Linux常用操作命令使用 6.掌握vi/vim编辑器基础使用 1.1.1 企业数据分析方向 数据分

    2024年02月13日
    浏览(56)
  • 《黑马程序员2023新版黑马程序员大数据入门到实战教程,大数据开发必会的Hadoop、Hive,云平台实战项目》学习笔记总目录

    本文是对《黑马程序员新版大数据入门到实战教程》所有知识点的笔记进行总结分类。 学习视频:黑马程序员新版大数据 学习时总结的学习笔记以及思维导图会在后续更新,请敬请期待。 前言:配置三台虚拟机,为集群做准备(该篇章请到原视频进行观看,不在文章内详细

    2024年02月03日
    浏览(70)
  • 跟着pink老师前端入门教程-day03

    6.1 表格的主要作用 主要用于 显示、展示数据 ,可以让数据显示的规整,可读性非常好,特别是后台展示数据时,能够熟练运用表格就显得很重要。 6.2 基本语法 6.3 表头单元格标签 一般表头单元格位于表格的 第一行或第一列 ,表头单元格里面的 文本内容加粗居中显示 ,突

    2024年01月18日
    浏览(46)
  • 跟着pink老师前端入门教程(JavaScript)-day02

    1、什么是变量 白话:变量就是一个装东西的盒子 通俗:变量是用于存储数据的‘ 容器 ’,通过 变量名 获取数据,甚至数据可以修改 注意: 变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。 2、变量在内存中的存储 本质

    2024年02月20日
    浏览(47)
  • 黑马程序员前端学习接口变更

    VUE 刘老师离职了,VUE的接口失效的,一律换为黑马官方接口 axios.defaults.baseURL = \\\'https://www.escook.cn\\\' 换成 axios.defaults.baseURL = \\\'https://applet-base-api-t.itheima.net\\\'    微信小程序 https://api-ugo-web.itheima.net https://www.uinav.com 刘老师博客简介为不再讲课的程序员,但他真的是一位不错的老师

    2024年02月09日
    浏览(53)
  • 《JavaScript前端开发案例教程》课后习题及答案(黑马程序员编著)

    一、填空题 1.window.document.body可以简写为______。 2.console.log(alert(‘Hello’))在控制台的输出结果是______。 3.编辑器中“以UTF-8无BOM格式编码”中的BOM指的是______。 4.alert(‘测试’.length)的输出结果是______。 二、判断题 1.JavaScript是Java语言的脚本形式。( ) 2.JavaScript中的方法名不

    2024年02月09日
    浏览(56)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(七)详情页

    模板代码 创建 srcviewsDetailindex.vue 文件,添加以下代码: 配置路由 在 srcrouterindex.js 中添加对应路由【 /detail/{goodId} 】: 链接跳转 对 srcviewsHomecomponentsHomeNew.vue 文件及其他涉及商品信息的页面修改路由跳转: 封装接口 在 srcapisdetail.js 文件中封装接口用于获取商品信息

    2024年02月10日
    浏览(58)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(八)登录页面

    登录页面的主要功能就是表单校验和登录登出业务。 account password cdshi0080 123456 cdshi0081 123456 cdshi0082 123456 cdshi0083 123456 cdshi0084 123456 cdshi0085 123456 cdshi0086 123456 cdshi0087 123456 cdshi0088 123456 模版代码 在 srcviewsLoginindex.vue 中添加登录页代码: 配置路由跳转 修改 srcviewsLayoutcompon

    2024年02月10日
    浏览(53)
  • 加油优惠价格计算-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)

    一、案例描述 考核知识点 if 、 if…else 、if…else if…else 练习目标 掌握if单分支语句。 掌握if…else双分支语句 掌握if…else if…else多分支语句 需求分析 加油站,为了鼓励车主多加油,实行多加多优惠政策,具体优惠如下: 已知92号汽油,每升6元;如果大于等于20升,那么每

    2024年02月07日
    浏览(96)
  • 黑马程序员前端 Vue3 小兔鲜电商项目——(二)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月11日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包