Web前端笔记记录
Web前端笔记记录
- 概念理解
-
- 1、网站
- 2、VS Code
- 3、html
-
- html的超文本性
- html的语言性
- html的标记性
-
- 写法
- 4、css
- 5、Web前端的三大核心技术
- 6、网站开发
- 实操
-
- 快捷键的使用
- 在VS Code里可以进行的操作（功能）
-
- 新建文件
- 新建文件夹
- 商店
- 搜索
- 网页调试
- 网页的编写
-
- html初始代码
- html注释
- html语义化
- 标题与段落
- 文本修饰标签
- 图片标签
- 链接标签
- 跳转锚点
- 特殊符号
- 无序列表
- 有序列表
- 定义列表
- 表格标签
- 表格属性
- 表单标签
- div与span的“爱恨情仇”
- CSS的基础语言
-
- CSS样式引入的方式
- CSS中的颜色表示法
- CSS背景样式
-
- backgrpund-image背景图片
- background-repeat 背景平铺
- background-position 背景位置
- background-attachment：背景图随滚动条移动的方式
- CSS边框样式
- CSS文字样式
-
- font-family
- font-size：
- font-weight
- font-style
- color
- CSS的段落样式
-
- text-decoration
- text-transform
- text-indent
- text-align
- line-height
- 字间距
- CSS复合样式
- CSS选择器
-
- ID选择器
- CLASS选择器
概念理解
1、网站
网站是由n多个网页组成的，每一个网页都是一个html.文件
2、VS Code
VS Code来自微软，是一个开源的、基于Electron的轻量代码编辑器。
3、html
html是一种超文本标记语言，通过标记符号来标记要显示的网页中的各个部分，可以说明文字，图形，动画，声音，表格，链接等。
html常见标签：周期表
html的超文本性
可以分为文本内容和非文本内容（图片、视频、音频等）。
html的语言性
是种编程语言。
html的标记性
标记也称标签（可以上下排列也可以组合嵌套）：
例如： ”< header >“”< footer >"
写法
第一种：单标签 ”< header>“
第二种：双标签”< header >< /header>“
4、css
CSS中文意思是“层叠样式表"，它是一种标准的样式语言，主要作用是定义网页的样式（美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精准控制。
5、Web前端的三大核心技术
html： 结构
CSS：样式
JavaScript：行为
6、网站开发
UI设计师：设计稿
Web前端开发工程师（H5开发）设计稿—>代码
数据库里的数据—>显示到页面
HTML+CSS
实操
快捷键的使用
ctrl + m 静音
*ctrl + s 保存
ctrl + alt + a 截屏
ctrl + a 全选
ctrl + x 剪切
ctrl + c 复制
ctrl + alt + a 复制
ctrl + v 粘贴
ctrl + z 撤销
ctrl + y 前进
ctrl+d 选择相同元素的下一个
ctrl+/ 快速添加注释与删除注释
shift + home 从头选中一行
shift + end 从尾部选中一行
shift + alt +⬇ 快速复制一行
shift +alt +a 快速添加注释和删除注释
alt + a 复制
alt+左键 多光标
tab 向后缩进
tab + shift 向前缩进
tab + 输入的 创建标签（单双）
在VS Code里可以进行的操作（功能）
新建文件
点击该按钮可以新建一个编写的文件
新建文件夹
点击该按钮可以新建文件夹，点击文件及可以进行文件夹的重命名、删除等操作
商店
在最左侧的工具栏中有此”商店“选项，可以在此寻觅自己需要的文件，小功能。
搜索
在最左侧的工具栏有此”搜索“选项，可以在此输入一段字符（中、英…），可以帮助找出出现过该段字符的文件以及内容。
网页调试
可以在编写文件的同时，右键调出运行该文件下的网页。
网页的编写
html初始代码
每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法。
/*文档声明：告诉浏览器这是个html文件
/*html文件的最外层标签：包裹着所有的html标签代码 lang=”en“表示这是一个英文网站
/*元信息：是编写网页中的一些赋值信息 charest=”UTF-8“国际编码，让网页不出现乱码的情况。
Document /*设置网页标题
/*显示网页内容的区域
html注释
写法：
< ! - - 注释内容 - - >
在浏览器中看不到，只能在代码中能看到注释
意义:
1、把暂时不用的代码注释起来，方便以后使用
2、对开发人员进行提示，方便后续人员理解
快捷添加注释与删除注释：
1、ctrl + /（my think is the best）
2、shift + alt + a
html语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择合适的HTML标签进行编写。
好处：
1、在没有CSS的情况下，页面也能呈现出很好的内容结构。
2、有利于SEO，让搜索引擎爬虫（网络机器人）更好的理解网页。
3、方便其他设备解析（如屏幕保护器，盲人阅读器等）。
4、便于团队开发与维护。
标题与段落
标题 —>双标签 ： < h1>< /h1>…< h6>< /h6>
在一个网页中，h1标题最重要（一级标题）并且一个.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用（h6是级别最小的标题，大小接近与正文）。
段落—> 双标签：< p>< /p>
文本修饰标签
强调—>双标签：
< strong> 加粗文本< /strong> 例如： 加粗
< em>斜体文本< em> 例如：斜体区别：
1、写法和展示效果是有区别的，一个加粗，一个斜体
2、strong的强调性更强，em的强调性稍弱< sub>（下标） —— < sup>（上标） 例如：H2O —— 52=25
< del>（删除文本）—< ins>（插入文本）例如：我是搞笑男—— 我爱学习
注：一般情况下，删除文本都是和插入文本配合使用的。
图片标签
img—>单标签
src：引入图片的地址（有相对地址和绝对地址之分）
相对地址：分为同级，父级，子级（自己瞎编的没有文献支持）
同级可以直接引用
例如：< img src=“./dog.jpg” alt=“”>
父级需要前缀加“.”，再一层一层的输入地址文件
例如< img src=“…/img/animal/dog.ipg” alt=“”>
子级需要再次添加地址
例如< img src=“/img/animal/dog.jpg” alt=“”>alt：当图片出现问题的时候，可以显示一段友好的提示（如果图片地址损坏或者不存在，会显示破损图片的标签并显示alt里的内容）
title:提示信息
width、height ：改变图片的大小如果不加width和height，在网速很慢的情况下会出现图片出现之前一个样子，图片加载出以后又一个样子。
如果加了width和height，则不会出现这样的情况，显示的都是排版时的样子
链接标签
a—> 双标签 < a>< /a>
href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下是当前页面打开。
_self 当前页面打开
_blank 新窗口打开
base—>单标签：作用是改变链接的默认行为
例如< base target=“_blank”>放在< head>…< /head>语句中就可以实现全部链接标签都是先新窗口打开。
跳转锚点
1、“#”加id属性
< a href=“#html”>HTML< /a>
< h2 id=“html”>< /h2>
可以实现在前面点击“HTML”时跳入下面h2的地方2、“#”加name属性
< a href=“#html”>HTML< /a>
< a name=“html”>< /a>(该语句放在需要跳到的地方)
该语句同样可以实现点击前面的“HTML”时跳到下一语句存放的下一行的位置。
特殊符号
编写一些文本时，经常会遇到输入法无法输入的字符，如®（注册商标），©（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格符都是特殊字符,还有解决<>的冲突，在HTML中，为这些特殊字符准备了专门的代码
空格—————& nbsp;
版权符号©——& copy;
注册商标®——& reg;
小于号<——& lt;
大于号>——& gt;
和号&——& amp;
人民币¥——& yen;
摄氏度°——& deg;
无序列表
< ul>:列表最外层容器
< li>:列表项
注:< ul>< li>必须是组合出现的,他们之间是不能有其他的标间的
- 第一项
- 第二项
成品展示
- 第一项
- 第二项
前面的"小黑点"是可以通过"type"属性来改变前面标记的样式(后期一般是通过CSS去控制)
可以查询type属性查询栏了解更多关于"小黑点"的"故事"
有序列表
< ol>列表的最外层容器
< li>列表的列表项
- 第一项
- 第二项
- 第三项
成品展示
- 第一项
- 第二项
- 第三项
注:有序列表列表用的非常少,经常用的是无序列表,无序列表可以去代替有序列表(后期可以通过CSS实现)
有序列表前的各种符号同样可以用"type"属性来改变,详情可通过type属性查询栏来了解更多的"故事"。
定义列表
< dl>：定义列表
< dt>：定义专业术语或名词
< dd>：对名词进行解释和描述
- HTML
- 超文本标记语言
- CSS
- 层叠样式表
- Javascript
- 网页脚本语言
成品展示
HTML
- 超文本标记语言
CSS- 层叠样式表
Javascript- 网页脚本语言
>
> -
> 我是优降宁
>
> -
> 我爱py
>
>
>
>
成品展示
- 我是优降宁
- 我爱py
注：列表之间可以互相嵌套，形成多层级的列表。
表格标签
< table>:表格的最外层容器
< tr>:定义表格行
< th>:定义表头
< td>:定义单元格
< caption>:定义表格标题
语义化标签（没多大效果，主要是规范）：< tHead>头，< tBody>身，< tFood>尾
注：表格标签之间是有嵌套关系的，要符合嵌套规范。
天气之子
日期
天气情况
出行情况
2022年1月1日
晴
天气晴朗，适合出行
2022年1月2日
小雨
有小雨，出门请带伞
成品展示
表格属性
border ;表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式
valign：上下对齐方式
border(加在< table>之中< table border=“1”>)
cellpadding（加在< table>之中< table border=“1” cellpadding=“30”>）
cellspaceing(加在< table>之中，< table border=“1” cellpadding=“30” cellspacing=“30”>)
单元格与单元格之间的距离
colspan(加在所需合并的几列的< td>标签里< td colspan=“2”>…< /td>)
rowspan（）
表单标签
< form>：表单的最外层容器
< input>（单标签）：标签用于收集用户信息，根据不同的type属性值，展示不同的控件，
如输入框、密码框、复选框等。
text ：普通的输入框
password：密码输入框
checkbox：复选框
radio：单选框
file：上传文件
submit：提交按钮
reset：重置按钮
常见属性还有checked，diasabled，name，for
成品展示：
< textarea>:多行文本框
< select>、< option>：下拉菜单
成品展示
限时制作（仿制）