学习目的

巩固一下会的知识并且更努力的梳理一遍，本文长期更新.....

学习html+css的第一天

因为会一些，所以看的比较快

1.编辑器以及浏览器的一些理解以及下载地址

浏览器如何执行html和css等代码
通过内核国内一般都是引用内核并套了个外壳，拥有独立内核的浏览器为以下几个

浏览器名	内核	备注
IE	trident	已挂
chrome	webkit	现已成Blink
sarari	webkit	mac系统
firefox	Gecko	火狐浏览器
Opera	presto	现已成Blink

推荐使用chrome，以及编辑器使用vscode，自己已经都是用了这两个，当然，也可以用notepad++
vscode下载地址看这里
谷歌浏览器或者其他浏览器就自己看情况了，一般百度搜索第一页前两个官网就是了咸鱼把网址也贴上来，有需要的自己点击跳转吧谷歌浏览器官方地址

2.html的基础语法

一、术语说明

web开发工程师=前端开发工程师概念相同

web就类似这样，为网站的可视化页面
w3c
- 中文名字为万维网联盟（非营利性组织），作用是：制定web技术领域标准的组织，官网地址为：https://www.w3.org/
MDN
- Mozilla development network（开发者社区），作用：通过w3c整合成的一个技术文档网站，有各国语言。如下图，可以在百度等输入 mdn即可查到官方的说明

二、基本语法

html 中最小的单位为
element（元素、标签）
元素组成部分
起始标签（begin tag）+元素内容（可选）+元素属性（可选）+结束标签（end tag）
例子：<p style="color:red;font-size: 24px;">ceshi</p>
例子：<img src="https://pic.juyuantop.cn/imgs/2022/04/05/624c3e03ae7ed.png" alt="聚源图床">
元素属性
元素又分为全局属性和局部属性（某个元素特有的属性），常见的全局属性比如有title等
注释————描述你代码的作用
注释这个要着重注意，以后写各种代码都会需要写上注释，不然就自己都看不懂了

html的语义化
语义化：每个HTML元素都有具体的含义
- 标题、段落、超链接、图片等
为什么要语义化呢
这样会利于seo（搜索引擎优化）：每隔一段时间就会来爬蜘蛛
方便浏览器去理解网页结构

学习html+css的第二天

HTML核心元素用法

vscode的一些小技巧以及文本元素

善用alt+shift+↑↓进行快速的复制粘贴
也可以用变量来写，例如写<h1></h1>到<h6></h6> 可以用变量$来写h$*6{$级标题}然后回车就可以快速获得一到六级的标题了
span标签仅仅是用于设置样式使用
pre用于源代码中连续的空白字符（空格、换行、制表（tab缩进））也就是预格式化

a元素的作用

超链接，跳转网页 <a href="https://www.juyuantop.cn" >博客</a>注意，在新窗口打开记得在a标签里面加上target="blank" 这样就是新窗口打开了
锚点，跳转到页面指定位置，比如我在页面有个科学新闻版块，我们可以写<a href="#科学新闻"></a>注意，锚点跳转的地方要加上id，例如<h1 id=科学新闻></h>

关于路径（基本代码全是通用的路径写法）

路径分为绝对路径、相对路径
一般来说，站外资源要用绝对资源，站内资源用相对路径

绝对路径写法
协议名://主机名:端口号/路径
协议名：http、https、file（ftp）这种
主机名：域名、IP
端口号：http（80）https（443）这两个会省略，其他的端口需要去主机商开启或者防火墙放通
相对路径写法
./xxx在当前目录
../xxx表达在上一级目录

img标签

在html里面，img标签是用src来输入路径的例如<img src="https://pic.juyuantop.cn/imgs/2022/04/05/624c3e03ae7ed.png" alt="聚源图床">
也可以嵌套在a标签用于跳转到相应地方

列表

有序列表
<ol>前面还有个序列号，数字、英文、拉丁文等等自选的
例如：
无序列表
<ul>无序号
例如：
定义列表
<dl>单条与多条的定义与描述
例如：

布局

这边的html讲到的布局就是一个，所以在我看来没有什么好学的了，毕竟有一定基础例如图片的示范 html5的布局就大致这样，然后详细的话就是下表了	名称	定义
header	定义文档或节的页眉
footer	定义文档或节的页脚
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（例如侧栏等）
details	定义额外的细节
summary	定义details元素的标题

咸鱼之后写代码谨记尽量用html5写，毕竟语义化一点，看起来更方便一点！

学习html+css的第三天

CSS的规则

作用

使网页变得更好看，更有序，更完善，全称为层叠样式表。多条属性同名的话，生效最后声明的那条属性
分为两部分：选择器、

选择器告诉浏览器要设置样式的html元素例如：font-size、color等
声明块用于设置样式
例子，其中的h1就是元素，后面的{}里面则是声明了样式，我这版就用了color来写了写颜色，效果如图

CSS的写法

写法

内部样式表：写在style标签，例如下图。属性与属性之间用分号分开，vscode会自动补全;
内联样式表：写在元素的style里面，如下图
外部样式表：link标签将css引入
link一般在header，页面的加载同时引入link，如下图为样式

注意：vscode编辑器可以直接输入link，然后下选link:css就可以直接出现，很智能很好用

注意，比较推荐用外部样式表的方法来写，link这种

优点有以下
解决页面当中样式重复的问题
代码分离，利于阅读与维护
利于浏览器优化——link标签会被浏览器缓存，提高页面的响应速度

CSS核心-常见的选择器以及使用场景

标签选择器（元素选择器）
例如：内联内部样式表-如下图
类选择器：页面开发中用的最多的一种选择器
注意，类选择器是以.为开头，如下图
ID选择器：一般配合JavaScript来使用
注意，ID选择器是以#为开头，如下图

开发中常用的其他选择器

通配符选择器：* 用于匹配任何东西，例如下图的所有边距效果
派生选择器：根据文档的dom结构来选择html元素
后代选择器：具体在mdn查看，如下图
子元素选择器：例如span里面还有一层，只会选择第一层
点我前去mdn查看子选择器的说明
相邻选择器：比如p标签的相邻标签，如下图

通过空格表示他们是后代关系，通过+号表示他们是相邻的关系

字段	含义
border	边框宽度
solid	边框线条虚实
color	颜色
font-family	字体
font-style	字体样式
background-color	背景颜色

更多的请点击下方的链接查看css常用属性—— 聚源素材解析可以下载百度文库以及csdn哦

特殊选择器以及使用场景

伪类选择器
例如a标签我们可以使用 1.未选中——link 2.已选中——visited 3.悬浮——hover 4.点击后——active 如下图所示

PS：注意，hover要放在link以及visited后面。先悬浮后点击，要先有选中未选中才能有悬浮样式，然后才能点击。这涉及到css的特性了
- 通过dom结构来选择选择器
  如下图，利用div p:first child就可以选择div标签下面第一个p标签就变颜色了。。如果在div下面第一个是a标签，那么p标签的颜色就无法生效。因为涉及到了css的层级关系
  反之，可以用div p:last child可以选择最后一个。其他的还有奇数偶数，nth-child，这个可以去mdn自己查看，咸鱼也要好好记住

伪类选择器的使用场景以及用法

选择一些元素的特殊效果
例如用link，visited，hover，active这种来给a标签添加伪类选择器
在某些场景选中有关系的元素
例如上面写的first child 、last child 、nth-child这种

学习html+css的第四天

CSS基本概念——盒子模型

什么是盒子模型
在css里面，所有的html元素都可以看成是一个盒子
例如下图所示,当然我这边没有把padding，border写进去

这里面的一些属性都要去mdn以及其他的网站自己多看看，咸鱼这个一定要记住!!!
盒子一般由以下部分组成
- 盒子和盒子之间的间隙（margin）
- 盒子的边框（border）
- 盒子的内部间隙（padding）
- 盒子的内容（content）
  ps 还有一个属性要记住，box-sizing:border-box以及box-sizing：centent-box（w3c规定）但是，一般用border-box比较适合一点

CSS的常用属性

常用属性
- 盒子的位置和大小
- 尺寸
  尺寸有宽度、高度、边界，具体看下面
  宽度 width：可以用单位表示px 也可以用百分比表示 20%（百分比是父元素的宽度来计算）也可以用auto
  高度 height：同宽度
  边界 margin padding 可以简写（上面的margin：20px 10px 20px 10px 上右下左）也可以只选择一边：上下左右这样
- 位置
  浮动 float
  定位 position
  盒子超出部门 overflow overflow还分为三个属性，一个是裁剪（hidden），一个是滚动（scroll），还有一个是根据元素属性自动判断是否需要滚动条（auto）
  overflow:hidden的示例如下
  
  overflow:scroll的示例如下
  
  ps：滚动的话，在ios系统下会隐藏- -在Windows系统下会显示出滚动条
  ps：其他的咸鱼记得去mdn自己看看
- 外观、风格
  background：背景颜色（background-color） || 背景图像 || 背景有没有重复 || 背景要不要固定 || 背景的位置
  其他的可以看看各大官网具体的元素。
  文字属性（font）：
  - 字体大小：font-size
  - 字体是否加粗：font-weight
  - 字体是否是斜体：font-style
  - 字体是什么字体：font-family

学习html+css的第五天

CSS的重要特性之层叠

css的选择器和层叠特性

css的全称是Cascading style sheets（k死给定丝带哦 sheet），层叠样式表

层叠是一个基本的特征
- 一个css属性被多次声明的时候，会根据优先级或者声明顺序来计算采用哪个样式
优先级/权重是怎么计算的呢
- id选择器>类选择器>标签选择器 id>class>tag
  权重的比例如下
- 标签选择器（tag）=1
- 类选择器（class）=10
- id选择器（id）=100
- 通配符选择器和表示关系的选择器，对优先级/权重没有影响
  例外
- !important（在选择器后面加一个这个，那么他的优先级最高）
- 不过一般不推荐用这个
  - 不利于代码维护
  - 建议不要在自己的局部代码（公用代码）里使用
  - 可以在引入外部css、覆盖他本身代码时候，就可以用这个