Web前端

1 HTML 超文本标记语言，负责页面内容，后缀名.html或.htm

2 CSS 层叠样式表，负责页面样式、布局、美观程度。后缀名.CSS

3 javascript js脚本语言，负责页面与用户的交互，后缀名.js

 二 快捷键
运行 Ctrl➕R
注释 Ctrl➕/
快速写标签 h1➕Tab
复制一行 Ctrl➕shift➕R
快速格式化代码 shift➕alt➕F

三 html最基础标签
1 html 标签：根标签，所有内容都要写在根标签里
2 等一行标签叫声明标签
3 head 标签：用于浏览器解析网页的
4 body 标签：所有用户可见的内容都写在里面
5 title 标签：用于显示标题，搜索引擎会根据网页中的title内容来排名网页
6 注释：＜!--内容--＞，主要写三项：作者 日期 功能

四 标签中的关系
- [x] 包含：父子元素，祖先元素，后代元素
- [x] 并列：兄弟元素

五 html常用标签
- [x] h1-h6由大到小，重要性逐渐降低，独占一行
- [x] 对于搜索引擎，h1重要性仅次于title，页面只能写一个h1标签
- [x] 一般只用h123
＜P＞段落标签
语义：将文字分段显示
特点：P中的文字独占一行，且段与段之间会有一个间距
＜br＞换行标签（单标签）
它是一个单标签，用于强制换行，段与段之间没间距，/可省略
＜hr＞水平线标签（单标签）
在指定位置上划一条水平线

文体格式化标签
strong标签，加粗，增加重要性
Em标签，识别文本变斜体，增加重要性
Del，增加删除线，增加重要性
Ins，增加下划线，增加重要性

六 特殊字符
＜ → <         ＞ → >     空格→  
版权符号→ ©

七 img图像标签
1 图片格式
   JPG：支持颜色比较多，但不支持透明
   PNG：支持颜色比较多，支持透明
   GIF：支持颜色少，只支持简单透明，但是是动态的
2 语法

属性间不分顺序空格隔开即可

八 绝对路径与相对路径
相对路径：以引用文件所在位置为参考，建立出的路径
下一级路径➕/      上一级路径➕../
q
绝对路径：指目录下的绝对路径 所在盘符

九 超链接a标签
1 语法 ＜a href=""＞文字或图片＜/a＞;
2 属性
属性    属性值    说明
href    目标地址    必写属性
target    _blank    打开窗口方式
3 超链接种类
- [x] 外部链接：跳转到外部网站，href里写完整的网站地址
- [x] 内部链接：跳转到内部网页，href里写网页名称
- [x] 空链接：链接待定，href="#"
- [x] 下载链接：href里写文件名称即可
- [x] 网页元素链接：图片、表格、音频、视频都可以做成超链接（超链接后➕一个图片链接）
- [x] 锚点链接：快速定位到当前网页的某个位置（目标🔗设置一个ID名，找到超链接，在href里写#ID名）
ID属性：它是一个全局属性，每个标签只能有一个ID，且ID是唯一的，ID名称不能以数字开头
十  div、span
无语义，一个盒子用来装内容
特点1 :div独占一行，大合子
特点2：span用来布局，一行可放多个span
十一  列表标签
列表是用来布局，特点是整齐有序
无序列表   ... ：ul li
注意：ul中只能嵌套li标签，加入其他标签都是违法的。li相当于一个大容器可以容纳所有标签

有序列表  1 2 3 :   ＜ol  type="A"＞ li
type 属性
属性值    说明
a/A    采用字母作为序号
i/II    
列表间的互相嵌套
可以在无序列表中放无序或有序列表，同理

自定义列表： dl dt dd
常用于对术语或名词进行解释描述，没有任何项目符号

- [x] 单选按钮
当type=radio时，input是单选按钮
同一组选项name属性值一定要相同，value属性必须写，且与选项值相关
- [x] 多选框
当type=checkbook时，input是多选按钮
同一组选项name属性值一定要相同，value属性必须写，且与选项值相关
- [x] 重置按钮
当type=reset时，input是重置按钮
value属性可以更改按钮文字

- [ ] select下拉列表
语法：出生年月＜select name="year"
         ＜option value="2003" 2003 /option＞
          ＜option 2004 /option＞
          ＜option 2005 /option＞
 /select＞
name属性写在select中，value属性写在option中

- [x] Textarea文本域标签
语法 自我介绍＜Textarea name="值"＞文字                 ＜/Textarea＞
- [x] Label标签
label用于绑定一个表单标签，当点击label中的文本时，焦点会自动跳转到该标签上
＜label for="id名"＞提示文本＜/label＞
- [x] fieldset
用来给表单分组的
＜fieldset＞
       ＜legend＞组别名称＜/legend＞
＜/fieldset＞
十四 CSS
1、Css称作层叠样式表，也是一种标记语言，是网页的美容师，最大的优点是与HTML相分离

2、
color background width height font-size

3、Css引入方式
- [x] 内联样式，直接在HTML里写（不推荐）
- [x] 内部样式表（课堂写），在head标签里引入style标签，样式写里
- [x] 外部样式表（实际开发），在head标签中引入link标签

十五 选择器
1 标签选择器
h1 div
基础选择器
2 Id选择器
3 类选择器
class类：给标签起名字，不能用纯数字和中文名，可以有多类名用空隔开即可。不同标签可以有同类名
4通配符选择器
*
复合选择器
5父子选择器   父元素＞子元素｛｝
6 后代选择器   祖先元素 后代元素｛｝可以写多个标签显出层级关系
7 后一个弟弟选择器
语法：前一个兄弟元素选择器➕后一个兄弟选择器｛｝
8 后面所有弟弟选择器
语法：前一个～后一个｛｝
9 并集选择器
选择器1,选择器2,....｛｝;可以选择多种不同的标签为他们定义相同的样式
10 交集选择器
选择器1选择器2....｛｝;【无符号隔开】
可以选中同时满足多个选择器的标签，即满足这个又满足那个

十六、伪类选择器

伪类选择器用于向某些选择器添加特殊效果，或者第一个，第n个标签

 

1.链接伪类选择器

 

a:link 选择所有未被访问过的链接

a:visited 选择所有已被访问过的链接

a:hover 选择鼠标移入链接时的状态

a:active 选择鼠标按下链接未弹起的状态

 

注意⚠️

a:visited内只能改字体颜色，保护用户隐私

：hover 可以跟任何标签配合使用

要按照LVHA的顺序写❗️

 

2.子元素类选择器

：first- child 选中第一个子元素

：last- child 选中最后一个子元素

：nth-child() 选中任意位置的子元素

    括号里写正整数，表示选择第几个子元素

    括号里的可以写even（偶数）或odd（奇数）全部子元素

    括号里写An+B表达式，选中指定位置的全部子元素，n从0开始取值（2n+1）=3 所以选择全部的奇数位

：only-child 选中唯一的子元素

十七 选择器优先级

⚠️继承的优先级为0

交集选择器需要将多种选择器相加.

并集选择器的优先级是单独计算，

若优先级相同则 就近原则

 

十八 颜色

1 颜色单词

2 RGB值  （红、绿、蓝）

每种颜色的取值为0～255，还可写百分比

3 十六进制值

语法 #RGB，每种颜色的取值范围00～ff（每两位代表一个值）若每种颜色两位数都一样可简写为两位数#ffff00→#ff0;#bbffaa→#bfa; #666;#ccc

4 HSL

语法：hsl(色相,浓度,亮度)

色相就是色环，取值范围是0～360

浓度取值范围是0％～100％

亮度取值范围是0％～100％，默认为50，亮度0为黑100为白

5 RGBA

语法：(R,G,B,透明度) 透明度的取值范围为0～1，0代表完全透明，1代表完全不透明

6 HSLA  hsl(色相,浓度,亮度,透明度)

 

十九 CSS字体样式

1 字体系列 font- family；用来定义网页中的字体。可加多种字体用,隔开。有空格的字体要加""。

2 font-size：浏览器默认字体大小为16px，

可以给body指定整个页面的字体大小

3 font-weight：用来加粗或不加粗文字

样式值	说明
normal	不加粗
bold	加粗
100～900	400=normal ，700

4 字体倾斜：font-style

normal	标准不倾斜
ltalic	倾斜

5 简写样式：

font｛font- style（倾斜） font- weight（粗细） font- size（大小） font- family（字体）｝顺序不能更换，前两个样式可省略

 

6文本对齐：text- align

left（默认）right center（水平居中）

 

7 文本装饰 text- decoration

none 无装饰线   underline 下划线

overline 上划线  line- through 删除线

 

8 文本缩进 text- indent

用来指定文本的首行缩进，text- indent：2em，其中em是一个相对单位，1em等于当前盒子的一个文字大小。可以指定负值做一些隐藏效果

 

9 行高：line- height

经常用来间接设置行间距。行间距=行高-字体大小

line- height后可写百分比（相对与字体大小）

对于单行文本来说，可以将行高设为父元素的高度一致，可使单行文本居中（行高=高）

font 简写样式，在字体大小后可添加行高，不加则使用默认值

   font：倾斜 加粗 字体大小/行高 字体；

所以line- height 一定要写在font样式后

 

二十 

html中，标签分为三类，块元素，行内元素，行内块元素。

1.块元素

    h,p,div,ul,ol,li等

       特点：1.独占一行，2.可设宽高，3.默认是父元素的100%，4.里面可以放任何元素（⚠️h，p属于文字类的块元素，里面不能放其它元素）

2.行内元素

    a,span,strong,em等

       特点：1.一行可显示多个，2.不可设宽高

3.默认宽度是它内容宽度，4.只能容纳文本或其它行内元素（⚠️a里不能嵌套a，a里面可以放块元素）

3.行内块元素

     img，inpu 等

        特点：1.一行可显示多个，2.默认宽度是本身内容的宽度，3.可设宽高

 

二十一 元素类型转换

display

值	说明
block	转为块元素
inline	转为行内元素
inline-block	转为行内块元素
none	隐藏该元素

display 隐藏的元素不会在页面中占位置

 

二十二 背景样式

1、背景颜色：

background-color:transparent;透明色

2、背景图片：background-imge:url();

    若背景图小于盒子则会平铺充满盒子

    若大于盒子则默认显示左上角

     背景图片会盖住背景颜色

3、背景平铺：background-repeat

no-repeat	不平铺
repeat-x	在水平方向平铺
repeat-y	在竖直方向平铺

4、背景位置：background-position:x y;

方位名词	Top bottom
像素值	y右正下正，x左负上负

5、背景固定：background-attachment

scroll	随滚动条滚动
fixed	固定背景图

经常用来制作视差滚动效果

 

二十三 精灵图

精灵技术针对于背景图片使用，即把多个小图片整合成一张大图片。

精灵图称为sprites，又称为雪碧图

利用background-position 调整精灵图的位置，x轴y轴偏移量为负值

使用精灵图需精确测量背景图标的大小

 

二十四 盒子模型基础

1、定义：html中的元素看成一个个矩形的盒子，它包括内容区 边框 内边距 外边距

2、内容区：使用width height来设置内容区的宽高

 

二十五 边框

1、边框简写

border:宽 颜色 样式; 顺序无要求

border:none;(无边框)

边框样式 solid 单实线 dotted 点状 dashed 虚线 double 双实线

2、boder-top。可单独设每个边的样式

 

二十六 内边距

 

1、简写 padding

20px	四边为20px
20px 10px	上下20，左右10
20px 10px 15px	上20 左右10 下15
5px 6px 7px 8px	上右下左

2、padding-top。单独设

⚠️padding会撑开盒子，可减小盒子宽高保证盒子大小不变

 

二十七 外边距

外边距不会影响盒子大小但会影响盒子位置

1 marging-top- right-bottom-left

2 页面盒子都靠左上摆放，故上、左外边距都会使盒子移动，下、右外边距会使其他盒子动

3 外边距可为负值，盒子会反向移动

4可简写

5 外边距应用

     marging 值可设为auto，auto会将外边距设为最大值

      若将左右同时设为auto，可使盒子在父元素中水平居中

      ⚠️盒子必须是块元素，且必须设置了宽度

       行内或行内块元素水平居中只需给其父元素设text- align：center（必要时可转为块元素）

 

二十八、盒子圆角边框

border-radius 50%;

若想做圆形盒子则需准备一个正方形盒子给50%的像素值

 

border-radius 高度的一半;

圆角矩形

 

椭圆圆弧盒子 25%/50%

要添加/来设置不同方向的半径值，分别为x/y方向

2、

 

二十九、文字阴影

1、text-shadow:阴影水平偏移量 竖直偏移量 模糊度 颜色;

      颜色推荐用rgba，可以给阴影透明效果

      偏移量右正下负，允许设负值

2、多层阴影：可以给文字应用多层阴影效果，语法一样，用逗号隔开即可

 

三十、盒子阴影

   左右：y右正下正，上下：x左负上正

1、box-shadow:阴影水平偏移量 阴影竖直偏移量 模糊度 阴影尺寸 颜色 外内部阴影

⚠️ 默认是外阴影，但外阴影不能写其他单词

盒子阴影不占位置，不影响布局，可叠加使用逗号隔开

 

三十一、布局基础

1.布局的三种方式

•  标准流 盒子按照默认的方式排列

块元素，独占一行 由上到下排列。行内元素按顺序由左到右

• 浮动
• 定位

三十四、浮动

1 使用浮动的目的：让多个块元素水平排列一行

2 小盒子在大盒子中左右水平对齐

   浮动定义：float

用来使盒子漂浮到指定位置，直到碰到父元素的边缘或其他浮动的兄弟元素

     浮动特性（‼️）

    ❶设置了浮动的元素会脱离标准流，浮动的元素不保留原位置

    ❷浮动的元素会一行显示，顶端对齐

    ❸浮动元素会具有类似行内块的特性。若浮动元素没宽度则宽度由内容决定

网页布局第一准则：多个块元素纵向排列找标准流，多个块元素横向排列找浮动

⚠️：浮动和标准流的父盒子进行搭配，先用标准流的父盒子排列上下的位置之后内部子元素采取浮动排列左右位置。

    浮动盒子只会影响浮动盒子后面的标准流不会影响前面的标准流（浮动的盒子会贴着不浮动盒子下面）

 

三十五、清除浮动

1   本质：清除浮动带来的脱标影响

浮动的元素不占位置，某些情况下不确定父盒子需要多少高度所以不给父盒子设高度给子盒子设让它撑开父盒子

❶额外标签法：clear：both在要清除浮动的盒子下➕一个块标签后引用这个类（空标签必须是块元素）

❷overflow：hidden 直接➕在父元素里（溢出部分也会被隐藏）

 

三十六、去除浏览器默认样式

1 ul和ol的项目符号：linst-style：none;

2 去掉各种元素的内外边距：*{margin:0,padding:0};

 

三十七、overflow

• 子元素默认存在于父元素的内容区中，超出父元素的内容称为溢出。它可处理溢出内容
• 语法：overflow:hidden;一剪没

                   overflow:scroll;给父元素加滚动条

         overflow:auto,为父元素按需添加滚动条

 

三十八、父元素的高度塌陷

1 在实际开发中，绝大多数父元素都没有高度

2 在标准流中，父元素的高度默认被子元素撑开

3 子元素浮动后，脱标不占位置，导致无法撑起父而导致高度塌陷

4 解决塌陷方法：将父元素添加清除浮动

 

三十九、定位基础

一 为什么需要定位

1 某个子元素可以自由的在父元素内移动且压住其它元素

2 滚动窗口时，盒子固定在屏幕的某个位置

二 定位组成

定位由定位模式和边偏移量组成

定位模式：相对、绝对、固定定位

边偏移包括：上下左右

 

四十、相对定位

position：relative;

特点：相对于自身原地点位置移动且不脱标继续保留原来位置。最典型应用是给绝对定位当爹

 

四十一、绝对定位

position：absolute;

特点：❶如果父元素或父元素没定位，则以浏览器为准定位

❷如果父元素或祖先元素有定位则以父或祖先元素来移动位置（子绝父相）

绝对定位的盒子脱标不占原来位置，且可压住父盒子中的其它元素

❸绝对定位盒子垂直水平居中的算法

大盒子宽高的百分之50%（left，top），小盒子宽高度的一半（margin）

 

四十二、固定定位

position：fixed;

❶页面滚动位置不变，以浏览器可视窗口为参考点移动，跟父元素没关系。脱标且压住标准流

❷固定定位定位到版心右侧

浏览器可视窗口的一半（left:50%）版心盒子宽度的一半(margin-left 一半）

 

四十三、定位叠放顺序

z-index:整数值;

数值可为正,负,0默认是auto。数值越大，盒子越靠上，数值相同则后来者居上。不能加单位！只有开启定位盒子才能用z-index

 

四十四、display 隐藏与显示

display：none/block

特点：隐藏元素后不占位置

visibility：hidden/visible

特点：隐藏元素后占位置，且溢出部分也会被隐藏掉

 

四十五、CSS三角做法

1 等腰三角形做法

     ❶盒子宽高为0 ❷给盒子设四个方向边框

     ❸其它三个颜色设为透明

2 非等腰直角三角形

     ❶盒子宽高为0，给四个方向边框

     ❷将上边框调大撑开其他边框

     ❸将左下边框设为0

     ❹只保留右边颜色

 

四十六、CSS用户界面样式

1 鼠标样式 cursor：pointer小手，text文本，move移动，not-allowed禁止🚫

2 取消表单轮廓和防止拖拽

取消表单轮廓：outline：none

防止拖拽：textarea｛resize:none｝

 

四十五、vertical-align

用于设置图片或表单和文字垂直对齐，注意该样式只用于行内或行内块元素

vertical-align:baseline基线对齐（默认）、top、middle、bottom

图片底侧空白缝隙解决方案

给图片添加vertical-align：top、middle、bottom只要不是默认，

给图片转换为块元素：display：block（不推荐）