• 【1】前端学习笔记

    教程学习：黑马前端

    黑马前端的个人空间_哔哩哔哩_bilibili

    基础班学习路线：主要学习PC端网站布局，最终网站：品优购静态网站

    目的：精通网页布局，为后面学习JavaScript打下坚实基础

    希望通过这个课程的学习，做出ESP32蓝牙/WIFI进行数据传输的微信小程序。

    1.HTML5基础：学习HTML5基础，主要学习最常见的没有兼容性的HTML标签，课时20%

    2.学习CSS3基础，主要学习最常用没有兼容性的CSS样式，利用前面学习的标签完成传统PC端网页布局，课时50%

    主要学习HTML        CSS        JS基础知识

    1.HTML简介 

    1.什么是网页？

    网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

    网页是网站中的“一页”，通常是HTML格式的文件，它通过浏览器来阅读。

    网页是构成网站的基本元素

    2.什么是HTML？

    HTML：Hyper Text markup language        超文本标记语言，是用来描述网页的一种语言。

    HTML不是一种编程语言，而是一种标记语言

    所谓超文本，有2层含义：

    1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）

    2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

    3.网页的形成？

    网页由网页元素组成，这些元素利用HTML标签描述出来，然后通过浏览器解析来显示给用户。

    2.常用浏览器

    1.常用的浏览器：edge、谷歌浏览器

    2.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

    3.Web标准（重点）

    Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合，W3C(万维网联网)是国际最著名的标准化组织。

    Web标准的构成（面试会问）：主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

    标准说明
    结构结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
    表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
    行为行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript，主要用于交互界面的书写

    Web标准提出的最佳体验方案：结构、样式、行为相分离

    简单理解：结构写到HTML文件中，表现写在CSS文件中，行为写到JavaScript文件中。

    3.HTML标签

    3.1HTML语法规范

    HTML标签是由尖括号包围的关键词

    标签一般成对出现         

    双标签：        <开始标签>

    单标签：       
            ，单标签比较少

    标签关系：

    双标签关系可以分为两类：包含关系(嵌套，父子关系)和并列关系

    包含关系

    1. <head>
    2.     <title>title>
    3. head>

    并列关系

    1. <head>head>
    2. <body>body>

    3.2HTML基本结构标签

    HTML页面也称为HTML文档

    标签名定义说明
    HTML标签页面中最大的标签，称为根标签
    文档的头部在head标签中必须要设置的标签是title
    文档的标题让页面拥有一个属于自己的网页标题
    文档的主体元素包含文档的所有内容，页面内容基本都是放到body里面的

    基本结构： 

    1. <html>
    2.     <head>
    3.         <title>
    4.             我的第一个页面
    5.         title>
    6.     head>
    7.     <body>
    8.         身体部分
    9.     body>
    10. html>

    3.3开发工具

    在vscode中输入！即可自动生成HTML骨架

    1. html>     
    2. <html lang="zh-CN">    
    3. <head>
    4.     <meta charset="UTF-8">      
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>采用vscode创建的第一个页面title>
    8. head>
    9. <body>
    10.     夜深人静写代码
    11. body>
    12. html>

    快捷键：

    ctrl + +：增大字体

    ctrl+N：新建文件 

    3.4 HTML常用标签

    学习标签是有技巧的，重点是记住每个标签的语义。

    标题标签、段落标签

    （1）标题标签：HTML提供了6个等级的网页标题

    ~

    h为head的缩写，意为头部、标题，加租独占一行，1级标题最重要

    <h1>我是一级标题h>

    （2）段落和换行标签（重要）

    用于定义段落，它可以将整个网页分为若干个段落。

    p：paragraph，意为段落

    特点：

    1.文本在一个段落中会根据浏览器窗口的大小自动换行。

    2.段落和段落之间保有空隙。

    <p>我是一个段落标签p>

    换行标签

    可以让文本强制换行显示，属于单标签。可以用于文本，段落，标题中

    br：break的缩写，意为打断、换行。

    特点：

    1.
    是单标签

    2.
    标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距，换行没有间距。

    （3）文本格式化标签在网页中，突出重要性，比普通文字更重要。

    语义标签说明
    加粗或推荐使用语义更强烈
    倾斜或者推荐使用
    删除线或推荐使用
    下划线或者推荐使用

    (4) 

    和标签

    和标签没有语义，他们就是一个盒子，用来装内容。常用！！！布局网页

    1.     <div>这是头部div>
    2.     <span>今日价格span>

    div : division的缩写，表示分割、分区。

    span意为跨度、跨距，横着显示

    特点：

    1.

    标签用来布局，但是现在一行只能放一个
    ，大盒子

    2.标签用来布局，一行上可以多个，小盒子

    (5)图像标签和路径（重点）

    1.图像标签：单标签

    <img src="图像URL" />

    img是image的缩写，意为图像。

    src是标签的必须属性，它用于指定图像文件的路径和文件名。

    必须把图片和网页文件放在一起。

    图像标签的其他属性：各个属性没有先后顺序之分，各属性之间以空格进行分割。

    属性属性值说明
    src图片路径必须属性
    alt文本图像不能正常显示时，显示的文字
    title文本提示文本，鼠标放在图片上时，显示的文字
    width像素设置图像的宽度
    height像素设置图像的高度
    border像素设置图像的边框粗细

    在实际开发中，宽度和高度修改一个即可，会进行等比例缩放 ，图像不会失真

    1. <h4>alt 替换文本，图像显示不出来的时候用文字代替，相当于图片备注h4>
    2. <img src="logo.jpg" alt="logo信息"/>
    3. <h4>title提示文本，鼠标放到图像上，提示的文字，相当于图片备注h4>
    4. <img src="logo.jpg" alt="logo信息" title="logo信息"/>
    5.   <h4>设置图像的大小h4>
    6.     <img src="logo.jpg" alt="logo信息" title="logo信息" width="200" >

     重点掌握：

    1.请说出图像标签那个属性是必须要写的？

    2.请说出图像标签中alt和title的属性区别？

    路径（前期铺垫知识）

    目录文件夹和根目录：

    目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。

    根目录：打开目录文件夹的第一层就是根目录（后面再打开的文件夹不叫根目录）

    相对路径：

    以引用文件所在位置为参考基础，而建立出的目录路径。例如，图片相对于HTML页面的位置，

    又分为：同一级路径、上一级路径、下一级路径

    相对路径分类符号
    同一级路径直接进行引用
    下一级路径/
    上一级路径../

    绝对路径：

    指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

    例：C:\Users\Meng\Desktop\前端学习笔记\第一天\logo.jpg

    在编程的时候，最好采用相对路径，因为每个人的电脑盘符是不一样的，把程序移到别人电脑上，可能运行出错。

    （6）超链接标签（重点）

    在HTML标签中，标签用于定义超链接，作用是从一个页面链接到另一个页面。

    1.链接的语法格式

    <a href="跳转目标" target="目标窗口的弹出方式">文本或图像a>

     a是单词anchor的缩写，意为：锚。

    属性作用
    href用于指定链接目标的url地址，必须属性
    target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开，采用_blank效果好一点！！！

    2.链接的分类

    可以通过这个功能搭建个人网站了！！！，后边再用CSS进行优化。

    （1）外部链接，例如外部网站，个人博客首地址、B站个人空间，外部链接必须加http

    （2）内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可，例如首页，常用于个人网站的搭建，不同页面之间的跳转。

    （3）空链接：如果当时没有确定链接目标，相当于先占一个位置#">页面名字。

    （4）下载链接：如果href里面地址是一个文件或者压缩包时，会下载这个文件。

    地址的链接是文件    .exe     .zip

    (5)网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。非常好用！！！

    （6）锚点链接：当我们点击链接，可以快速定位到页面中的某个位置。例如：回到顶部、转到底部

    • 在链接文本的属性中，设置属性值为#名字的形式，#必不可少，如 第二集
    • 找到目标位置标签，里面添加一个 id属性 = 刚才的名字，如：

      第二集介绍 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <a href="跳转目标" target="目标窗口的弹出方式">文本或图像a>
    13.     <h4>1.外部链接：个人CSDN主页h4>
    14.     <a href="https://blog.csdn.net/qq_45355603?type=blog" target="_self">个人博客a>
    15.  
    16.     <h4>2.内部链接：自己写的网页之间相互跳转h4>
    17.     <a href="gerenboke.html" target="_blank">个人网站a>
    18.  
    19.     <h4>3. 空链接h4>
    20.     <a href="#" target="_blank">空链接测试a>
    21.  
    22.     <h4>4. 下载链接测试h4>
    23.     <a href="logo.zip" target="_blank">下载链接测试a>
    24.  
    25.     <h4>5.网页元素的链接：给图片添加跳转链接，点击图片跳转到个人博客h4>
    26.     <a href="https://blog.csdn.net/qq_45355603?type=blog"><img src="logo.jpg" width="200" />a>
    27.  
    28.     <h4>6.锚点链接测试h4>
    29.     (1)早年经历<br />
    30.     (2)<a href="#live">演艺经历a><br />
    31.     <h4>早年经历h4>
    32.     123
    33.     <h4 id="live">演艺经历h4>
    34.     123
    35. body>
    36. html>

    3.5 HTML中的注释和特殊字符

    注释：以 "结束。

    特殊字符：具体需要的可以百度查找。

    HTML 原代码显示结果描述
    <<小于号或显示标记
    >>大于号或显示标记
    &&可用于显示其它特殊字符
    "“引号
    ®®已注册
    ©©版权
    ™™商标
      半个空白位
      一个空白位
     不断行的空白
  • 相关阅读:
    音视频编解码 入职系列-2
    Javaweb-JSP详解Toretto
    目标检测新思路：DETR
    五分钟k8s入门到实战-应用配置
    JDK自带的序列化框架使用
    性能测试 —— Jmeter 常用三种定时器
    vue-cli实现异步请求返回mock模拟数据
    Python爬虫抓取和分析市场数据
    为什么 C# 访问 null 字段会抛异常？
    【mysql】 bash: mysql: command not found
  • 原文地址：https://blog.csdn.net/qq_45355603/article/details/127591208