公告

记录一下自己学习和生活中的所见所闻

小凯的个人成长
Search K

Appearance

HTML&CSS ​

笔记记录于看博学谷视频的学习笔记，课程已经有详细的笔记了，这里采用简写记录重点，用于回顾

什么是Web ​

Details

就是网站

网站的工作流程 ​

1.首先我们需要通过浏览器访问发布到前端服务器中的前端程序，这时候前端程序会将前端代码返回给浏览器。

image.png 2.浏览器得到前端代码，此时浏览器会将前端代码进行解析，然后展示到浏览器的窗口中，这时候我们就看到了网站的页面，如下图所示： image.png 3.但是此时这个页面是没有数据的，因为数据在我们的数据库中，所以我们浏览器需要根据前端代码中指定的后台服务器的地址 向 我们的后台服务器（内部有java程序）发起请求，后台服务器再去从数据库中获取数据，然后返回给浏览器。 image.png 4.浏览器拿到后台返回的数据后，然后将数据展示在前端资源也就是网页上，然后我们就看到了如下图所示的完整的内容

image.png整个流程如下：

1.浏览器先向前端服务器请求前端资源，也就是我们所说的网页

2.浏览器再向后台服务器发起请求，获取数据

3.浏览器将得到的后台数据填充到网页上，然后展示给用户去看

网站开发模式 ​

前后端分离开发 之前的混合开发已经落后了

网页由什么组成 ​

image.png

网页背后本质是什么 ​

image.png

如何转换 ​

image.png 不同浏览器内核不一样，导致相同代码解析出现不同效果，所以要制定标准

web标准 ​

image.png

什么是HTML ​

超文本标记语言 image.pngimage.png

学习网站 ​

https://www.w3school.com.cn/index.html

image.png

学会查这个文章

什么是CSS ​

image.png

基本骨架 ​

image.pngimage.png

VScode安装 ​

https://code.visualstudio.com

image.png

英文下! +回车 直接生成HTML骨架

image.png

h1 img

输入这些都可以直接自动补全 提升开发效率

设置自动保存

image.png

HTML常见标签 ​

image.pngimage.pngimage.png

  • img
    • src
      • 绝对路径
        • 绝对磁盘路径：本地电脑上的图片
        • 绝对网络路径：网络上的图片
      • 相对路径
        • . 当前路径
        • .. 代表上一级路径
        • image.png
    • alt
    • width： 设置宽度 px像素 % 百分比
    • height：设置高度
    • 宽度和高度一般只写一个，高度也会等比例缩放，如果设置两个就会变得很难看
  • h1
  • hr image.png

CSS引入方式 ​

image.pngimage.png

优先级 ​

image.png

后加载就是表示哪个代码在下面就是优先哪个

颜色表示方式 ​

image.png

这些颜色我们可以去网站上使用取色器来扒下来

插件 ​

image.pngimage.png

image.png 然后就可以了

CSS选择器 ​

image.png

优先级 ​

image.png 设置字体大小

image.png

超链接 ​

image.png

  • a
    • href属性：要跳转的url地址
    • target属性：
      • _self:当前页打开
      • blank 打开新的空白页image.pngimage.png

正文排版 ​

image.png

视频标签 ​

image.png

段落标签 ​

image.png

缩进 ​

image.pngimage.pngimage.png

盒子模型 ​

image.png

div专门用来做布局的标签

image.pngimage.png 盒子模型都是在样式中设置的

image.png

效果 image.png 已经有边距了 image.png

image.png

布局 ​

image.pngimage.pngimage.png

image.png

表格标签 ​

image.png

表单标签 ​

image.pngimage.png