DAOkonglong
DAOkonglong

Web前端学习笔记

Web前端学习笔记

目录

  • Web前端学习笔记
  • 前言
  • 一、拨开云雾见天日，守得云开见月明
    • 1.1.1 什么是HTML和CSS
    • 1.1.2 VS Code编辑器
    • 1.1.3 深入了解网站开发（部分）
    • 1.1.4 Web前端三大核心技术
    • 1.1.5 HTML基本结构和属性
    • 1.1.6 HTML的初始代码
    • 1.1.7 HTML中的注释
    • 1.1.8 HTML语义化
    • 1.1.9 HTML标签的使用
      • 标题标签
      • 段落标签
      • 文本修饰标签
      • 图片标签和图片属性
      • 跳转链接
      • 跳转锚点
      • 列表标签
      • 表单标签
      • ，标签
    • 1.2.1 CSS基础语法
      • CSS样式的引入方式
      • CSS中颜色的表示法
      • CSS的背景样式
      • CSS边框样式
      • CSS文字样式
      • CSS段落样式
      • CSS复合样式
      • CSS选择器
        • 1.ID选择器
        • 2.CLASS选择器
        • 3.标签选择器（tag选择器）
        • 4.群组选择器（分组选择器）
        • 5.通配选择器
        • 6.层次选择器
        • 7.属性选择器
        • 8.伪类选择器：
        • 9.结构性伪类选择器：
      • CSS样式继承
      • CSS优先级
      • CSS盒子模型
    • 1.2.2 标签分类
      • 按类型分类
      • 按内容分类
    • 1.2.3 标签嵌套规范
    • 1.2.4 CSS中overflow溢出隐藏
    • 1.2.5 CSS透明度与手势
    • 1.2.6 CSS最大最小宽高
    • 1.2.7 CSS默认样式
    • 1.2.8 PS基本操作与图片格式
    • 1.2.9 CSS中的float浮动
      • 利用clear属性清除float浮动的影响
      • position定位
        • CSS添加省略号
      • CSS Sprite
      • CSS圆角设置

前言

  1. 拨云见日
    初步学习HTML,CSS,切图流程，pc企业站布局，pc游戏布局
  2. 溯本求源
    深入学习HTML,CSS的扩展知识，HTML5新语法以及CSS3新语法，不同
    浏览器的兼容问题以及解决方案
  3. 风生水起
    学习制作布局，如：弹性布局，网格布局，移动端布局，响应式布局以及基
    于响应式布局的Bootstrap框架
  4. 巧夺天工
    工程方面的知识。预编译CSS，postcss，CSS架构，CSS的部分高级功能，CSS与JS的交互

一、拨开云雾见天日，守得云开见月明

1.1.1 什么是HTML和CSS

首先了解什么是HTML和CSS，它们是做网站的两种编程语言，一般情况下需要配合使用，是网站开发的基础语言。HTML构建网站的框架结构，而CSS对网站进行修饰美化。

再来了解网站，网站是由浏览器将代码解析后形成的。（网站可以通过鼠标右键查看源代码）

Web前端学习笔记_第1张图片

一个网站是由多个网页组成的，每个网页为一个.html文件，即每个网站由多个.html文件组成

了解这些后接下来需要了解.html文件如何写，在哪写。一个.html文件最简单的创建方法可以在电脑指定一个目录下创建一个文本文档并且将文档的扩展名.txt改成.html，然后通过鼠标右键从打开方式中选中笔记本来将内容写入.html文件。但是这种方法效率低，而且容易出问题。因此这就需要一个更为高效的工具或方法。

1.1.2 VS Code编辑器

全称Visual Stdio Code，来自微软，是一个开源的、基于Electron的轻量代码编辑器。（下载地址）编辑器初始为英文，可在左侧起向下的第5个图标，点击搜索Chinese来安装中文插件。

在这里插入图片描述

▼

在这里插入图片描述

open in browser和view in browser插件
在扩展中下载后可以在编辑器中运行编辑的网页文件。前者可以在编辑页面右键点击open in default browser

Web前端学习笔记_第2张图片

后者可以在左侧栏右击.html文件点击view in browser打开

Web前端学习笔记_第3张图片

VS Code的简单使用
左侧工作区可以进行新建文件夹，文件以及添加文件夹到工作区的操作，左侧的搜索功能可以在工作区已有的文件中寻找关键词
比较常用的快捷键：

  • ctrl + s ：保存
  • ctrl + a ：全选
  • ctrl + x ：剪切
  • ctrl + c(v)：复制（粘贴）
  • ctrl + z(y)：撤销（前进） （个人觉得比较重要的，误操作后可挽回）
  • ctrl + d：选择相同元素的下一个
  • shift + 任意键盘方向键：移动光标选中文字
  • shift + home：从光标位置选中至所在行头部
  • shift + end：从光标位置选中至所在行尾部
  • shift + alt + ↓：向下复制光标所在行
  • alt + 键盘上下方向键：向上向下移动光标所在行
  • alt + 鼠标左键：多光标

设置vs code视区之内自动换行

左上文件>首选项>设置搜索word，下拉寻找到

Web前端学习笔记_第4张图片

然后选择on即可

1.1.3 深入了解网站开发（部分）

UI设计师：提供设计稿

“UI”的本义是用户界面，是英文User和interface的缩写。UI设计师简称UID（User Interface Designer），指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。

Web前端开发工程师（H5开发）：用代码将设计稿实现，将数据库的数据显示到页面，HTML和CSS就是由其操作的（HTML：写结构；CSS：加上外观）

Web前端开发工程师，是从事Web前端开发工作的工程师。主要进行网站的开发、优化、完善的工作。

Web后端开发工程师：数据库数据的存储管理
（粗略了解）

1.1.4 Web前端三大核心技术

俗称网页开发三剑客
HTML：结构

HTML是超文本标记语言，是一个网站页面的主要内容和主体框架。主要用来实现静态页面，目前我们看到的文字、图片、动画、声音、表格、超链接等网页元素都是通过HTML实现的。HTML是由各种标签组成的，所学习HTML就是在了解HTML主体框架的结构基础上学习各种标签的使用方法。

CSS：样式

CSS是层叠样式表，主要用来控制调整网页的样式，它与网页的结构和内容没有关系，仅仅是通过不同语义的标签来调整网页内容的不同表现样式。在网页上实现CSS样式调整一般有两种方式：内嵌式，将CSS代码集中写到HTML文档的头部标签中，并用style标记定义，一般位于head标记中的title标记之后，简而言之就是直接在THML文件中直接添加CSS样式的方式；嵌入式，是将所有的样式放在一个或多个以CSS为拓展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文件中，简而言之就是HTML文件域CSS文件单独存在，再通过Link的方式将CSS所写的样式添加到HTML中。

JavaScript（JS）：行为

JavaScript是一种完整的网页脚本语言，有自己独立的语法，可以完成复杂的程序逻辑，而HTML和CSS仅仅是标记语言，不具备编程语言的程序逻辑。JavaScript主要负责网页的各式各样的动态功能，因此可以为用户提供更流畅美观的页面浏览效果，以及添加页面交互行为，给用户更好的视觉和使用体验。JavaScript的工作原理是通过在HTML网页中直接嵌入JS脚本，可以实现相应浏览器时间，读写HTML元素内容，更改HTML元素样式等功能。

三者关系就如舞狮子，HTML就相当于没有装饰的道具骨架和穿着普通衣服的人，CSS就是为这些道具添加漂亮的外衣和绚丽的色彩并且为舞狮的人统一服装，而JavaScript则规定舞狮的动作的标准，三者结合才能让人看到一场非常吸引人的舞狮表演。

1.1.5 HTML基本结构和属性

HTML：超文本标记语言（Hyper Text Markup Language）网页制作必备的编程语言。

超文本：文本内容 + 非文本内容（图片、视频、音频等）

标记：<单词>（也叫做标签）

语言：编程语言

标签写法分为两种：
单标签：<单词>
双标签：


VS Code创建标签快捷键：输入标签单词后 + Tab

标签可以上下排列也可以组合嵌套

Web前端学习笔记_第5张图片

标签属性：修饰标签，设置当前标签的一些功能。可以写多个属性。

<标签 属性="值" 属性2="值2">

1.1.6 HTML的初始代码

每个html文件都需要写初始代码。（html文件规范）
VS Code中输入！+Tab快捷生成初始代码
初始代码：

DOCTYPE html>   ←文档声明：告诉浏览器这是html文件
<html lang="en">  ←html文件的最外层标签：包裹了所有的html标签代码  lang="en"表示一个英文网站  lang="zh-CN"表示一个中文网站
	<head>
	   	<meta charset="UTF-8">  ←元信息：编写网页中的一些赋值信息(UTF-8:采用国际编码，识别国家语言防止出现乱码)
    	<title>Documenttitle>  ←设置网页的标题
	head>
<body>
    显示网页内容的区域
body>
html>

上面初始代码中head标签和body标签部分↓

Web前端学习笔记_第6张图片

title标签部分↓

在这里插入图片描述
在这里插入图片描述

1.1.7 HTML中的注释

注释的代码只能在编辑文件中看到，浏览器中不会显示注释代码。

用处：

  1. 把暂时不用的代码注释掉，方便以后需要时使用。
  2. 加注释以解释代码，方便他人理解自己写的代码，也方便自己重新回顾编辑修改时能回想起代码的作用。

快捷键添加注释和取消注释：

  1. ctrl + / （快捷生成注释代码，光标所在行全部注释）
  2. shift + alt + a（快捷生成注释代码，可以将鼠标选中的部分注释）

两种注释方法也可以将注释的部分取消掉。

1.1.8 HTML语义化

HTML中不同的标签实现不同的功能，所谓的HTML语义化指的是根据网页中内容的结构来选择合适的HTML标签进行编写。

语义化的好处：

  1. 在没有CSS修饰过的情况下网页的页面也能呈现出很好的内容结构。
  2. 有利于SEO，让搜索引擎爬虫更好的理解网页。
  3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
  4. 便于团队开发与维护。

1.1.9 HTML标签的使用

标题标签

网页内容的标题，与head标签不同，双标签

标题

…
标题
，数字越大标签越小，最小到6。在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签，其他标签不限制。h5,h6标签比较少使用。

段落标签

双标签

内容

，一个段落只使用一次p标签（语言规范）

Web前端学习笔记_第7张图片
Web前端学习笔记_第8张图片

文本修饰标签

表示强调的标签：
：双标签，表示强调，对文本进行加粗。

<strong>strong>

：双标签，表示强调，将文本转为斜体字。

<em>em>

第一串文字无任何修饰，第二串文字被strong修饰加粗，第三串文字被em修饰为斜体。（两者的强调区别：strong的强调性更强，em的强调性稍弱。）


、：双标签，下标文本和下标文本。

<sub>下标文本sub>  <sup>上标文本sup>

满足特定需求，如勾股定理，化学中水分子的表示…

在这里插入图片描述
在这里插入图片描述


、：双标签，删除文本（delete）、插入文本（insert）。

<del>给文本加删除线del>  <ins>给文本加下划线ins>

在这里插入图片描述
在这里插入图片描述

一般删除文本标签和插入文本标签配合使用。

图片标签和图片属性

图片标签：单标签。

<img src="" alt="">

图片标签属性：

src属性：引入图片的地址。
在网页中选择一张图片鼠标右击选择在新标签页中打开图片后复制其地址，然后粘贴至src中。

Web前端学习笔记_第9张图片
在这里插入图片描述
在这里插入图片描述
Web前端学习笔记_第10张图片

alt属性：当图片出问题的时候，可以显示一段提示用户的文字。
在图片地址中随便修改使地址无效后加上提示。

在这里插入图片描述
Web前端学习笔记_第11张图片

如果不在alt属性里加入提示，图片出错后会显示空白，用户将无法得知图片出错。

title属性：提示信息（实际上html标签都有title属性）。
在上面编辑的图片标签加上title属性，这样鼠标停留在图片上会显示提示文字。

在这里插入图片描述
Web前端学习笔记_第12张图片

width、height属性：控制图片大小（控制图片的宽和高，CSS也可以做到这点，挖个坑）。
此属性可以不加，图片就为原大小，但是一般会加上，如果不加上，网速较慢的时候图片加载出来后会在文章中突然插入将文段撑开，如果加上该属性，网速慢的时候网页会预先给图片位置留白等待图片加载，这样可以减少网速慢时加载图片的突兀感。
在Chrome浏览器中可以按F12打开调式工具模拟网速慢的情况。
如图（在network到小图标那步需要ctrl + r添加测试项目）

Web前端学习笔记_第13张图片

（如果图片太小可能效果不明显）

引入文件的地址路径
在HTML中地址分为两种，一种为相对路径，一种为绝对路径。（在上面的图片标签中引入的网络地址为绝对路径）
相对路径
“.” ：在路径中表示当前路径
“. .”：在路径中表示上一级路径
可以理解为参照当前编辑的html文件的路径来寻找文件

在这里插入图片描述

绝对路径
实实在在的路径，如网页地址，电脑中的文件路径。
例：

  • https://i0.hdslb.com/bfs/face/c3d33a1cf26c8b6f503cf0f78b61c214200665f0.jpg@92w_92h.avif
  • C:/Users/GUGUGUUUU/Desktop/VS

注意windows系统的电脑中文件的路径使用的斜杠为“\”，在html文件中使用不影响，但是网络地址中必须使用“/”。

跳转链接

a标签：双标签，给文字提供网页链接进行跳转，也可以在a标签里嵌套一个图片标签让图片能进行网页跳转。

<a href="在这写网页地址">这里写文字a>

a标签的属性：href属性和target属性
href属性：写链接地址

<a href="http://www.baidu.com">访问百度a>

target属性：可以改变链接打开的方式，默认情况下是在当前页面打开（_self）默认在当前页面打开的话可以不用加上target标签，而新建一个窗口来打开使用（_blank）

<a href="http://www.baidu.com" target="_blank">百度a>

这里引出一个问题，如果想让一个网页中每个链接打开都通过新建窗口的方式打开是不是需要每个a标签都需要添加target（_blank）属性，有问题当然就有解决方案，这里用到了base标签。

base标签为页面上的所有链接规定默认地址或默认目标，浏览器会使用 标签中指定的URL来解析所有的相对URL，base其实就是定义一个默认的地址和默认目标

先不做深入了解，先了解如何解决上述问题。

Web前端学习笔记_第14张图片

在head标签中添加下面的代码，作用是使网页中所有的target标签的值都默认为_blank。

<base target="_blank">

跳转锚点

不同于链接，是在当前页面中进行内容跳转，用一个不恰当的比方，把当前网页比喻一本书，跳转锚点就是快速翻到某一页，那一页仍是网页的内容，没有新建窗口也没有打开新的网址。一般用来做网页目录，或者做返回顶部操作。

使用a标签实现跳转锚点
实现方法一：#号配对id属性
例：

<a href="#html">HTMLHTML>a>
<h2 id="html">HTML超文本标记语言h2>

上述例子是点击HTML的跳转锚点后会跳转至HTML超文本标记语言标题的位置。
实现方法二：#号配对name属性

例：

<a href="#html">HTMLHTML>a>
<a name="html">a>

上述例子是点击HTML跳转锚点后跳转至匹配name属性的位置（注意name属性是加给a标签的）。

特殊符号
在编写一些文本时经常会遇到输入法无法输入的字符，如®（注册商标）、©（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。

Web前端学习笔记_第15张图片

比较常用的是左右尖括号和空格。

列表标签

无序列表

    、
  • ：前者的表示最外层容器、列表项（ul和li必须是组合出现的他们之间不能有其他标签，li标签里可以嵌套其他标签）。
    正面例子：

    	<ul>
        <li>第一项li>
        <li>第二项li>
    ul>

    错误示例：

        <ul>
        <p>
            <li>第一项li>
            <li>第二项li>
        p>
    ul>

    ul里可以添加type属性：改变前面列表的样式，默认小圆点（一般都是用CSS去控制）

    <ul type="">ul>

    在这里插入图片描述

    具体有什么样式去查表

    有序列表

      、
    1. ：前者为列表的最外层容器，后者为列表项（有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表，具体用CSS实现，同样，两标签之间不能有其他标签）

      ol里也可以添加type属性来改变样式。

      定义列表
      列表项需要添加标题和对标题进行描述内容时会用上定义标签，像是一个标题和内容的结构。

      ：定义列表（和ul，ol类似）
      ：定义专业术语或名词
      ：对名词进行解释和描述

      	<dl>
        <dt>HTMLdt>
        <dd>超文本标记语言dd>
        <dt>CSSdt>
        <dd>层叠样式表dd>
        <dt>Javascriptdt>
        <dd>网页脚本语言dd>
    dl>

      Web前端学习笔记_第16张图片

      嵌套列表
      列表之间可以互相嵌套形成多层级的列表。
      例：用无序列表嵌套做一个菜单

      <ul>
        <li>
            小吃类
            <ul>
                <li>煮粉干li>
                <li>拌青菜li>
                <li>蛋炒饭li>
                <li>煎蛋li>
                <li>米饭li>
            ul>
        li>    
        <li>
            卤味类
            <ul>
                <li>鸭肠li>
                <li>面筋li>
                <li>牛肚li>
                <li>猪耳朵li>
                <li>猪头肉li>
                <li>大肠li>
                <li>鱿鱼li>
            ul>
        li>
        <li>
            套餐类
            <ul>
                <li>卤面筋饭li>
                <li>猪肉饭li>
                <li>猪耳朵饭li>
                <li>卤猪脚饭li>
                <li>卤猪舌头饭li>
            ul>
        li>
        <li>
            炖罐类
            <ul>
                <li>猪蹄黄豆li>
                <li>猪肚莲子li>
                <li>猪心枸杞li>
                <li>羊肉枸杞li>
                <li>牛肉枸杞li>
            ul>
        li>
    ul>
    <p><em>亲，20元以上可送餐哦！！em>p>

      Web前端学习笔记_第17张图片

      表格标签
      需要罗列一堆数据时会用上。

      ：表格的最外层容器。
      ：定义表格行。
      （头）、（身体）、（尾），双标签。（不会对网页造成影响，不具备效果，语义化规范，详见1.1.8HTML语义化）

      Web前端学习笔记_第19张图片

      天气预报暂时没有尾。

      注：在一个table当中，tBody可以出现多次，但tHead，tFood只能出现一次。

      表格属性
      border：控制表格边框。

      例如：赋值1。
      Web前端学习笔记_第20张图片
      ↓
      Web前端学习笔记_第21张图片

      cellpadding：控制单元格内的空间。
      cellspacing：控制单元格之间的空间。

      例如：都赋值为30。
      在这里插入图片描述
      Web前端学习笔记_第22张图片

      注：以上三者都是加到table标签当中。
      rowspan：合并行。
      colspan：合并列。

      Web前端学习笔记_第23张图片
      Web前端学习笔记_第24张图片

      注：说是合并，更感觉像是一个元素同时占了几列或几行的单元格。
      align：控制左右对齐的方式。（left，center，right，对应单元格中左中右的位置。）
      valign：控制上下对齐的方式。（top，middle，bottom，对应在单元格中上中下的位置。）

      Web前端学习笔记_第25张图片

      注：可以放在tr里统一控制表格同一行元素的位置，也可以放在th和td里单一改变元素的位置，如果表格单元空间较小，控制元素位置会无明显效果，因为部分空白为填充部分。

      表单标签

      ：双标签，表单的最外层容器。
      ：单标签，标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
      表单标签的嵌套关系没有表格那么严格。

      Web前端学习笔记_第26张图片

      <form action="http://www.baidu.com">
        <h2>输入框：h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框h2>
        <input type="checkbox" checked>苹果
        <input type="checkbox">香蕉
        <input type="checkbox" disabled>葡萄
        <h2>单选框h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件h2>
        <input type="file">
        <h2>提交和重置按钮h2>
        <input type="submit">
        <input type="reset">
    form>

      Web前端学习笔记_第27张图片

      action是输入提交按钮的地址，placeholder是显示输入框的提示信息，checked是默认勾选（可写为checked = "checked"但是等号及后面可以忽略），disabled是使input支持的控件失效（但仍会显示），多个单选框中加入name属性并赋同样的值可以进行配对使这几个单选框只能选一个。

      ：定义表头。
      		：定义表格单元。
      ：定义表格标题。
      全为双标签，它们之间嵌套有语法规范。
      例：

      <table>
        <caption>天气预报caption>
        <tr>
            <th>日期th>
            <th>天气情况th>
            <th>出行情况th>
        tr>
        <tr>
            <td>2022年10月22日td>
            <td>天气晴朗td>
            <td>适合出行td>
        tr>
        <tr>
            <td>2022年10月23日td>
            <td>小雨td>
            <td>出门带伞td>
        tr>
    table>

      Web前端学习笔记_第18张图片

      语义化标签