devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web前端学习笔记

作者：羊村懒王 | 2024-04-23 20:27:05

赞

踩

web前端学习笔记

文章目录

HTML+CSS系列学习笔记

①之拨云见日

HTML CSS 切图流程 PC企业站布局 PC游戏站布局

1、什么是HTML、CSS？

答：html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。
HTML：结构
CSS：样式
一个网站是由N多个网页组成的。

2、VSCode编译器（宇宙第一编译器）

编译器的基本使用：
Ctrl + s 保存
Ctrl + a 全选
Ctrl + x 剪切
Ctrl + c 复制
Ctrl + v 粘贴
Ctrl + z 撤销
Ctrl + y 前进
shift + end 从头选中一行
shift + home 从尾部选中一行
shift + alt + ↓ 快速复制一行
alt + ↑或↓ 快速移动一行

tab 向后缩进
tab + shift 向前缩进

alt + 鼠标左键 多光标
Ctrl + d 选择相同元素的下一个

tab + 单词 → <单词>

3、五大浏览器

1、谷歌浏览器google:以前是Webkit内核，现在是Blink内核。书写前缀—webkit—

其中Blink内核是谷歌和火狐共同开发的浏览器

2、苹果浏览器safari：Webkit内核。书写前缀—webkit—

3、IE浏览器:Trident内核。书写前缀—MS—

IE由于更新慢和trident内核的bug比较多，在很长一段时间和W3C标准脱节

4、火狐浏览器firefox：Geocko内核，也叫Firefox内核。书写前缀—MOZ—

5、欧鹏浏览器opera；最初是Presto，也加入了谷歌大军，从Webkit到Blink。书写前缀—O—

4、深入了解网站开发

职位
UI设计师：设计稿
web前端开发工程师(H5开发）：①设计稿→代码 ②数据库里的数据→显示到页面③HTML + CSS
web后端开发工程师

JavaScript，与HTML、CSS之间的关系？网上找的觉得比较好的回答

5、web前端的三大核心技术

HTML：结构
CSS：样式
JavaScript: 行为

6、HTML基本结构和属性

HTML：超文本 标记 语言
超文本：文本内容和非文本内容（图片、视频、音频等）
标记：单词
语言：编程语言
标记也叫标签：

<header>
<footer>

  • 1
  • 2

写法分成两种：
单标签：<header>
双标签：<header></header>
标签可以上下排列，也可以组合嵌套。
HTML5常见标签：表格
标签的属性：来修饰标签的，设置当前标签的一些功能。<标签 属性="值" 属性2="值2">

7、HTML初始代码

每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。
! + tab: 快速的创建html的初始代码

<!DOCTYPE html>        文档声明：告诉浏览器这是一个html文件
<html lang="en">       html文件的最外层标签：包裹着所有html标签代码    lang="en"表示一个英文网站
<head>
    <meta charset="UTF-8">      元信息：是编写网页中的一些辅助信息        charset="UTF-8"国际编码
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>       设置网页标题
</head>
<body>
显示网页内容
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
8、HTML注释

写法：<!-- 内容 -->
意义：与c语言相同
快捷添加与删除注释
1、Ctrl + /
2、shift + alt + a

HTML语义化
根据网页中内容的结构，选择合适的HTML标签进行编写。

9、标题与段落

标题 → 双标签：<h1></h1>...<h6></h6> 大→小 在一个.html文件中只有一个h1标签。
段落 → 双标签：<p></p>

10、文本修饰标签

强调 → 双标签：

<strong></strong>j加粗，强调性更强
<em></em>斜体，强调性更弱
<del></del>删除文本
<ins></ins>插入文本

  • 1
  • 2
  • 3
  • 4
11、引入文件的地址路径

相对路径
. 在路径中表示当前路径
… 在路径中表示上一级路径
绝对路径

12、图片标签

img→单标签
src：图片地址
alt：图片出现问题时，显示一段文字
title：提示信息
width、height：图片的大小

13、跳转链接
<a></a>双标签
href属性：链接的地址
target：可以改变链接打开的方式，默认情况下：在当前页面打开 _self;新窗口打开 _blank
<base>单标签：作用是改变链接的默认行为


  • 1
  • 2
  • 3
  • 4
  • 5
14、跳转锚点

1、在href="#“号和id属性<h id=”>
2、#号和name属性<a>

15、特殊符号

表格

16、列表标签

1、无序列表
<ul> <li> 符合嵌套规范，他们之间不能有其他标签 type属性:改变前面标记的样式样式
2、有序列表
<ol>,<li>:列表的最外层容器、列表项
3、定义列表
<dl>：定义列表
<dt>：定义专业术语或名词
<dd>：对名词进行解释和描述

17、表格标签

<table>：表格的最外层容器
<tr>：定义表格行
<th>：定义表头
<td>：定义表格单元
<caption>：定义表格标题
注：之间有嵌套关系，要符合嵌套规范。
语义化标签：<tHead> <tBody> <tFood>
注：tBod可以出现很多次，但是tHead、tFood只能出现一次。

18、表格属性

<border>：表格边框
<cellpadding>：单元格内的空间
<cellspacing>：单元格之间的空间
<rowspan>：合并行
<colspan>：合并列
<align>：左右对齐方式；left,center,right
<valign>：上下对齐方式；top,middle,bottom

19、表单标签

<form>：表单的最外层容器 placeholder提示文字
<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
<textarea>：多行文本框
<select>、<option>：下拉菜单

20、div和span

div：做一个区域划分的块
span：对文字修饰的内联

21、CSS基础语言

格式：选择器{属性1:值1;属性2:值2}
单位：px→像素（pixel）、%→百分比
基本样式：width宽、height高、background-color背景色

22、css样式的引入

内联（行内、行间）样式
在html标签上添加style属性来实现的
内部样式
在<style>标签内添加的样式
注：内部样式的优点，可以复用代码
外部样式

<link>标签
rel
href

  • 1
  • 2
  • 3

引入一个单独的css文件，name.css
通过link标签引入外部资源，rel属性指定资源和页面的关系，href属性资源的地址。

23、css中的颜色表示

单词表示法：red blue green yellow等
十六进制表示法：对照表
rgb三原色表示法：rgb（255,255,255）取值范围0~255

24、css背景样式

background-color：背景颜色
background-image：背景图片
url(背景地址)默认：会水平铺满背景图
background-repeat：背景图片的平铺方式

repeat-x x轴平铺
repaet-y y轴平铺
repeat(x,y都进行平铺，默认值）
no-repeat 都不平铺

  • 1
  • 2
  • 3
  • 4

background-position：背景图片的位置

x y ：number(px、%)丨单词
x：left、center、right
y：top、center、bottom

  • 1
  • 2
  • 3

background-attachment：背景图片随滚动条的移动方式

scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照当前浏览器进行偏移的）

  • 1
  • 2
25、css边框样式

border-style：边框样式

solid：实线
dashed：虚线
dotten：点线

  • 1
  • 2
  • 3

borler-width：边框大小
px…
borler-color：边框颜色

red #f000....

  • 1

注：边框也可以对某一边进行单独设置：border-left-style：中间是方向

26、css文字样式

font-family：文字类型
英文，中文
衬线体，非衬线体
注意点：1.多个字体类型的设置目的2.引号的添加目的
font-size：字体大小
默认：16xp
写法：number(px)丨单词（small large …不推荐使用）
font-weight：字体粗细
模式：正常（normal）加粗（bold）
写法：单词（normal，bold）丨number（100 200 300…900，100到500都是正常，600到900都是加粗）
font-style：字体样式
模式：正常（normal）斜体（italic）
写法：单词（normal，italic）
注：oblique也是表示斜体
区别：1.italic带有斜体属性的字体的才可以设置斜体操作。
2.oblique没有斜体属性的字体也可以设置斜体操作。
color：字体颜色

27、css段落样式

text-decoration：文本装饰
下划线：underline，删除线：line-through，上划线：overline，不添加任何装饰：none
注：添加多个文本修饰：line-through underline overline
text-transform：文本大小写（英语）

小写：lowercase
大写：uppercase
首字母大写：capitalize

  • 1
  • 2
  • 3

text-indent：文本缩进
首行缩进
em单位：相对单位，lem永远都是跟字体大小相同
text-align：文本对齐方式

对齐方式：left、right、center、justify（两端点对齐）

  • 1

line-height：定义行高
默认行高：不固定，根据字体的大小不断变化
取值：1.number（px）丨scale（比例值，跟文字大小成比例的）
letter-spacing：定义字间距
word-spacing：定义词间距（英文）
英文和数字折行

1.word-break：break-all；（非常强烈的折行）
2.word-spacing：break-world；（不是那么强烈的折行，会产生一些空白区域）

  • 1
  • 2
28、css复合样式
1.background：red url()repeat 0 0;
2.border：1px red solid；
3.font：
注：至少要有两个值size family
注：如果非要混合去写的话，那么要先写复合样式，在写单一样式，这样样式才不会被覆盖。

  • 1
  • 2
  • 3
  • 4
  • 5
29、css选择器

1.ID选择器

#elem{} id="elem"

  • 1

注：1.ID是唯一的，在一个页面只能出现一次，出现多次是不符合规范的。
2.命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
3.驼峰写法：searchButton（小驼峰）SearchButton（大驼峰）searchSmallButton
短线写法：search-small-button
下划线写法：search_small_button
2.class选择器

.elem{} class="elem"


  • 1
  • 2

注：1.class选择器是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
4.标签+类的写法

②之溯源求本

扩展HTML 扩展CSS HTML5新语法 CSS3新语法 兼容与hack

③之风生水起

弹性布局 网格布局 移动端布局 响应式布局 Bsststrap

④之巧夺天工

预编译CSS postcss CSS架构 高级功能 CSS与JS交互

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/475886
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号