pink老师前端入门学习笔记（day01）

最新推荐文章于 2022-08-17 14:27:20 发布
最新推荐文章于 2022-08-17 14:27:20 发布
阅读量721 收藏 3
点赞数 3
分类专栏： 前端学习 HTML学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dream2017seek/article/details/115938791
版权

pink老师前端入门学习笔记（day01）

00 前言

可以参考比较完整的笔记：

  1. 「学习笔记」HTML基础

01 编码

直接从记事本复制过来时产生的一个问题

<!-- 在最下方的utf-8中选择其他可以正确显示-->
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> ��һ��ҳ��</title>
    </head>
    <body>
        һ������
    </body>
</html>

可以在设置中调整自动编码，也可以直接搜GB等编码形式。
解决方案
产生这个原因是从记事本复制到VSCODE中，选择的编码形式不一致，导致IDE采用UTF-8的解码方式读取不来：应该是编码无法识别吧。VSCODE默认是UTF-8编码打开文件的。如果遇到了像GB18030 GBK等等的编码，就显示乱码了。这时候点右下角的UTF-8，上面正中出现“reopen with encoding”,点一下。输入gbk或者gb18030。选对了编码打开，就不会乱码了。

02 VScode使用技巧

操作释义
ctrl + “[”代码块整体左移4格
ctrl + “]”代码块整体右移4格
tab左移四格
ctrl + z剪切，pink老师在写代码过程中的习惯为先剪切内容增加标签后再添加ctrl + v粘贴内容到标签中
!英文字符下直接输入!可以快速搭建HTML代码块结构

03 标题标签

标题标签有h1~h6，使用h7、h8测试，结果为正文大小。正文大小介于h4h5之间。
实际标签像素值大小取决于浏览器默认样式。以下摘自https://www.itranslater.com/qa/details/2325823719467385856

IE7IE8FF2FF3OperaSafari 3.1
H124pt2em32px32px32px
H218pt1.5em24px24px24px
H313.55pt1.17em18.7333px18.7167px18px
H4n/an/an/an/an/a
H510pt0.83em13.2667px13.2833px13px
H67.55pt0.67em10.7333px10.7167px10px

这和浏览器的内核即渲染引擎（Rendering Engine）有点异曲同工之处，具体浏览器内核的学习以后再看。

04 段落标签

标签释义
p段落标签，会自动产生一个单位的段间距
h4标题标签，也会自动产生一个单位的段间距
br /换行标签，不会产生段间距
title乱入：作为浏览器最顶端的小页眉显示

05 格式化标签

标签释义
strong加粗
em倾斜
del删除线
ins下划线

06 图片标签img

属性属性值说明
src图片路径必须属性，建议采用相对路径
alt文本替换文本，图像不能显示时显示的文字
title文本提示文本，鼠标放在图像上显示的文字
width像素限定图片宽度，设置单一宽度时会按比例变化长度
height图片长度限定图片长度，设置单一长度时会按比例变化宽度
border像素设置图像的边框粗细，默认为黑色，建议在CSS中设置

备注1：路径写法可以采用

格式说明
src=“image.png”图片和当前文件路径一致
src="/images//image.png"图片在当前文件路径同级文件夹images下
src="./image.png"图片在当前文件路径上级文件夹中

备注2： 属性的顺序可以自己调，基于简单的超文本语言属性值可以不加引号。但通常属性值和变量、关键字要加以区分才需要给属性值加引号。

07 布局嵌套div和span

div分割一行，大盒子，不会造成段间距；
span为行级元素，内容有多大就占用多大的位置。一行可以有多个，小盒子。

08 超链接标签anchor

详细介绍https://blog.csdn.net/qq_42351033/article/details/102690002

属性属性值说明
href路径anchor的路径，可以是网页、其他页面、文件（点击会下载）
也可以是本页标签的其他标签的ID如<a href="#live">个人生活</a>
target跳转方式"_blank"为新网页，默认值“_self”为当前页面跳转
code-dream
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
黑马前端pink老师——jQuery入门基础学习笔记
weixin_44566194的博客
10-31 2011
本文将黑马前端 pink老师讲解的 jQuery 入门基础课笔记整理了一遍，包括 jQuery 概述、基本使用、常用API、jQuery 事件、jQuery 插件其他方法等知识点。
JavaScript 学习笔记 超详细（b站pink老师）_pink老师最新版js笔记
最新发布
2401_84435152的博客
04-28 628
文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。即DOM是浏览器提供的一套专门用来操作网页内容的功能。**DOM作用：**开发网页内容特效和实现用户交互标签天生自带的属性，比如class、id、title等, 可以直接使用点语法操作。比如： disabled、checked、 selected在html5中推出来了专门的data-自定义属性，在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取。
最全pink老师JavaScript笔记-JavaScript 基础部分（同步PPT）
qq_45432867的博客
08-01 7937
浏览器分成两部分：渲染引擎和js引擎浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行执行ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。...
html，css基础知识点参考pink老师的ppt
热门推荐
dyk
06-19 1万+
1. HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。标签对中的第一个标签是 开始标签，第二个标签是结束标签。 2. 有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。 3. HTML 文档的的后缀名必须是 .html 或 .htm 4. <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。 5. <!DOCTYPE>不是
前端Javascript第一天理论：初识 JavaScript
m0_46597922的博客
04-20 421
1. 初识 JavaScript 1.1 JavaScript 是什么 布兰登·艾奇（Brendan Eich，1961年～）。 神奇的大哥用10天完成 JavaScript 设计。 最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。 JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语...
Web前端学习之CSS课件
01-21
CSS相关技术文档-例如CSS基础：类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如： .student{color:#00f;} <p class=“student”>张三<p> 类名的前边一定要加上一个小数点(.)以表示这是个类选择器而不是重定义标签 类名建议起得有意思，避免起abcd等没有意思的名字 在需要应用类选择器的标签内用上class属性套用 在标签内用class属性套用时不需要加上小数点 一个标签要套用多个类的样式，可以使用空格隔开。例如<p class=“student name”>张三</p>
四、pink老师的学习笔记——元素的显示与隐藏
01-08
1. 元素的显示与隐藏 目的 让一个元素在页面中消失或者显示出来 场景 ... 1.1 display 显示（重点） display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display：block 除了转换为块级元素之外，同时还有...
jQuery基础自学笔记（pink老师jQuery全内容）
04-12
《jQuery基础自学笔记》 jQuery 是一款非常流行的 ...通过学习和实践jQuery，前端开发者可以更高效地构建动态、交互性强的网页应用。无论你是初学者还是经验丰富的开发者，jQuery都能为你的项目带来极大的便利。
pink老师的js全视频配套资料.zip
05-10
pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频配套资料 pink老师的js全视频...
javaScript的笔记，学习前端的朋友欢迎借鉴
06-02
PINK 老师的课程
前端JavaScript学习讲义
05-30
一共152的word文档，适合于想要学习前端开发和JavaScript学习的小白，内含有大量的源代码
pink老师推荐的教程里的一个实例 记事本.html
06-15
pink老师推荐的vue教程https://www.bilibili.com/video/BV1HE411e7vY?p=23的第二个示例，小黑记事本，因为没有资源所以都是手写的，欢迎大家来看
传智播客黑马程序员冯威ajax ppt
09-30
传智播客 黑马程序员 冯威ajax ppt
二、前端pink老师的CSS定位学习笔记（超详细，简单易懂）
zep
04-29 3635
定位(position) 1. CSS 布局的三种机制 网页布局的核心 —— 就是用 CSS 来摆放盒子位置。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中： 普通流（标准流） 浮动 让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。 定位 将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是...
b站pink老师前端课程、品优购项目（跟着练的笔记+代码）
weixin_45727991的博客
11-29 6274
02、网站制作流程 1、 03、品优购项目规划 04、项目搭建 05、样式的模块化开发 06、favicon图标制作 favicon.ico一般用于作为略缩图的网站标志，它显示在浏览器的地址栏或者标签上。 1、制作png图片 2、转换为ico图标（第三方软件eg：bitbug） 3、必须！！！放在文件根目录下（常识） 4、html页面引入favicon图标：在html的head标签内引入代码 <link rel="shortcut icon" href="facvicon.ico"> 0
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
m0_51448653的博客
10-15 1804
1.Emmet语法 emmet语法生成html标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
最全pink老师JavaScript笔记-Web APIS部分（同步PPT）
qq_45432867的博客
08-17 3343
JS基础学习ECMAScript基础语法为后面作铺垫，WebAPIs是JS的应用，大量使用JS基础语法做交互效果简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框，直接使用alert(‘弹出’)因为WebAPI很多，所以我们将这个阶段称为WebAPIs。文档对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准
前端学习笔记：JavaScript基础
ycsss的博客
06-09 1385
黑马Pink老师的JavaScript教程：https://www.bilibili.com/video/BV1Sy4y1C7ha?from=search&seid=3161590902859712011 本文在原教程的基础上对目录结构进行了排序和裁剪，一些太基础的概念没有写入。针对视频中的讲解、案例、PPT和源码材料作了一些总结，仅用于个人复习以及学习交流分享。 目录Chapter1. 概述1.1 JavaScript及其历史1.2 JavaScript作用1.3 HTML/CSS/JavaScr
CSS知识点整理（pink老师课程的学习笔记）
ZMH的博客
02-06 2447
CSS知识点整理 CSS简介 CSS语法规范 代码风格 CSS引入方式 CSS元素显现方式 选择器 简单选择器 复合选择器 字体 文本 背景属性 字体属性 文本属性 背景属性 盒子模型 浮动 定位
Ajax学习笔记pink老师
07-29
对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值