本文介绍了Web前端的基础知识，包括HTML的标签和属性，如超文本和标记的概念，以及客户端/服务器模式。接着讲解了CSS用于控制页面样式的原理和常见样式属性，如颜色、边框和定位。还讨论了JavaScript的基础，以及如何通过JQuery简化前端交互。此外，文章提到了浏览器的作用和页面结构，以及如何处理多媒体和表单元素。
Web前端基础
应用程序分类
客户端/服务器
Client/Server CS模式
用户需要下载客户端才能使用。特点:功能丰富，安装繁琐，需要更新，平台不同 软件不同，开发成本高。
Web前端基础学习路线
HTML CSS JAVAScript Jquery
THTML:Hyper Text Markup Language超文本标记语言
超文本
可以理解为超级文本：超越了文本的限制，如图片、音频、视频等。 也可以理解为超链接文本：通过某个连接，可以访问互联网中的任意地址。
标记
可以称为标签用<>括起来的一个特定的单词
标签分为单标签和双标签。
单标签<meta 属性名="属性值"/>
双标签<body 属性名="属性值"></body>
标签中可以加属性，双标签中可以继续嵌套标签。
用HTML标签写出的文件保存为.html文件，称为页面文件。
标签的属性:
在标签中，通过加入 属性名="属性值"，就可以让某个标签拥有指定的特征
<标签名 属性1="值" 属性2="值"></标签名>
<html>
<head>
<！-- chaeset 就是一个属性，utf-8就是该属性的值-->
<meta charset="utf-8"/>
</head>
<body>
<！--src就是一个属性-->
<img src="图片路径">
</body>
</html>
浏览器
浏览器是用于运行HTML页面的平台
用HTML语言写出来的网页文件，需要浏览器对其解释渲染
浏览器与HTML文件的关系类似于JVM与java文件的关系
页面的基本组成结构
<！-- HTML中的注释-->
<！-- doc文档type类型 说明当前页面的文档类型 HTML5-->
<！DOCTYPE html>
<html>
<head>
<！-- meta元 设置页面的属性 charset字符集 utf-8表示支持中文的编码格式-->
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
页面主题内容asfialfal
</body>
</html>
HTML中表示颜色的方式
颜色的十进制RGB
RGB表示红绿蓝 俗称三基色
RGB（0,0,0）黑色RGB(255,255,255)白色
颜色的十六进制RGB
#000000黑色 #FF0000红色，可以简写为#F00
常用标签
页面中的标签，也称为页面中的元素或节点。所有的元素可以分为两大类
标签的类型
块级元素
如果一个标签占满整行，称这个标签为块级元素。
行内元素
如果一个标签占一行中的一部分，称这个标签为行内元素。
单标签
| 常用单标签 | 作用 | 类型 |
| <input/> | 表单元素 | 行内元素 |
| <img src="鱼片路径"alt="替换图片的文字"title="鼠标悬停时提示文件"width="图片宽度"height="图片高度"/> | 图片 | 行内元素 |
| <br/> | 换行 | 块级元素 |
| <hr/> | 水平线 | 块级元素 |
双标签
| 常用标签 | 作用 | 类型 |
| <h1></h1>~<h6><h6/> | 一级标题到六级标题 文字加粗 1级最大 | 块级元素 |
| <p><p/> | 段落 | 块级元素 |
| <span></span> | 行内标签 | 行内元素 |
| <sub></sub><sup></sup> | 文字下标 文字上标 | 行内元素 |
| <b></b> | 文字加粗 | 行内元素 |
| <i></i> | 文字倾斜 | 行内元素 |
| <u></u> | 下划线 | 行内元素 |
| <font color=""size="" face=""></font> | 已过时 字体 | |
图片img
<img>单标签，行内元素
<img src="图片路径" alt="无法显示图片时的文字"title="鼠标悬停时的文字"width="宽度"height="高度">
图片路径可以使用相对路径或绝对路径
- 绝对路径:文件在计算机中的完整路径
- 相对路径:从当前页出发，找到图片所在位置。
1.使用".../"跳出当前目录
2.使用"xxx/"进入xxx目录
列表ul/ol/li
双标签，都是块级元素，li写在ul或ol标签中。
通常使用列表实现页面的水平导航，垂直导航。
无序列表ul
默认每个li前用实心圆修饰，通过type属性更改
square正方形，dist默认实心圆，circle空心圆，none去掉修饰
有序列表ol
默认每个li前用数字修饰，通过type属性更改
a/A i/I 1
表格table
双标签 table是块级元素，tr th td是行内元素
| 表格相关标签 | 作用 |
| table | 定义表格 |
| tr | 表格中的行 |
| td | 一行中的单元格 |
| th | 特殊的td，文字加粗居中，使用th实现表头 |
合并行rowspan="n"
给td添加该属性，表示n行合1行
合并列colspan="n"
给td添加该属性，表示n列合并1列
a标签
<a>显示文字</a>，行内元素
| 核心属性 | |
| href | 访问某个链接 如果要访问锚点，#开头 |
| target | _self:默认自身页面访问，_blank:空白页面访问，_parent父页面访问，某个iframe的name:在指定的iframe中访问 |
| name | 定义锚点 |
超链接
锚点
1.设置锚点
<a name="锚点名"></a>
2.访问锚点
<a href="#锚点名">访问锚点</a>
浮动框架iframe
在页面中嵌入一个页面
<a target="某个iframe的名称"href="某个路径">访问</a>
<iframe width="100%" height="600px" name="该iframe的名称"></iframe>
marquee标签
多媒体
公用属性:controls显示控制器 muted静音 autoplay:自动播放 chrome浏览器视频需要添加muted属性后才能使用autoplay loop:循环
音频/视频:
表单与表单元素:
表单form
双标签，块级元素，用于接收用户输入的数据
<form action="表单提交路径" method="表单提交方式"></form>
| form标签核心属性 | 值 | 作用 |
| action | 可以是某个页面或某个控制器的路径 | 将表单中的数据提交到指定路径 |
| method | post/get | 默认为get，提交的数据会暴露在地址栏中，数据长度有限制，post方式不会存在这些问题 |
表单元素
| 常用表单元素 | 说明 |
| input | 单标签，行内元素，通过改变type属性值，变化为不同的表单元素 |
| select | 双标签，行内元素，下拉框 |
| option | 双标签，select的子标签，下拉菜单中的选择，value属性表示该选项的值，如果不设 置，value值默认为option标签中的文本 |
| textarea | 双标签，行内元素，文本域 |
| input标签的type值 | 作用 |
| text | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| date | 日历 |
| number | 数字选择器 |
| file | 提交文件 |
| hidden | 隐藏域 |
| button | 普通按钮 |
| reset | 重置按钮 |
| submit | 提交按钮 |
| 表单元素的属性 | 作用 |
| name | 用于提交表单时设置提交的参数名 |
| value | 用于输入框的默认值或单选复选按钮的默认值 |
| required | 用于输入框或按钮设置为必填或必选项 |
| placehoder | 用于输入框的默认提示文字 |
| checked | 用于单选按钮和复选框默认选中 |
| selected | 用于下拉菜单默认选中 |
| readonly | 只读 |
| disabled | 让某个元素失效 |
| min/max/step | number独有，设置最小最大步长 |
| rows/cols | textarea独有，设置行数/列数 |
div标签
双标签，块级元素，没有任何特点，页面的主流布局就是div
CSS:
Cascading Style Sheets层叠样式表
用于控制HTML中标签样式的语言。
可以精确到像素，用于美化HTML标签。
CSS语法
样式名:样式值;
选择器
用于选中页面中元素(标签)的工具
ID选择器
- 给某个标签添加id的属性，对其命名
- 通过#id名获取
- 通常用于获取某一个元素，id名称不要冲突
类选择器
- 给某些标签添加class的属性，对其命名
- 通过.class名获取
- 通过用于获取一组元素
元素选择器/HTML选择器/标签选择器
直接通过标签名获取元素，获取所有对应标签。
后代选择器
*表示所有元素
空格表示所有子元素
>表示得到第一层子元素
div p{
/*得到div下的所有子元素p*/
}
div>p{
/*得到div下第一层子元素p*/
}
div*{
/*得到div中的所有子元素*/
}
群组选择器
使用逗号将多个选择器同时选中
p,#md,.mp{
}
CSS写在哪里
写在某个标签的style属性中
<div style="样式名:值;"></div>
写在head标签下的style标签中
写在一个独立的css文件中
1.新建一个.css文件，在其中编写css样式
*{
margin:0;
padding:0;
}
2.在页面中通过link标签导入
<head>
<!-- 导入css文件-->
<link rel="stylesheet " href="xxx.css">
</head>
选择器的优先级
内嵌在style标签>>id选择器>>class选择器>>标签选择器
在选择某个元素时，尽量将其层次关系写具体 a b c{}
常用样式
尺寸
只有块级元素才能设置尺寸
| 相关样式名 | 值 | 举例 |
| width | px/百分比/vw | width:100px 50% 30vw |
| height | px 百分比 vh | height:100px 100% 30vh |
背景background
| 样式名 | 作用 | 值 |
| background-color | 背景色 | 颜色的单位 十进制 十六进制RGB |
| background-image | 背景图 | url(图片路径) |
| background-size | 背景图尺寸 | cover覆盖 百分比 cover会完全覆盖100%会显示完整图片 |
| background-position | 背景图片位置 | 10px表示同时向下和向右移动10px |
| background-repeat | 背景图片是否重复 | 默认重复 no-repeat不重复 repeat-x表示x轴重复 |
| background-attachment | 背景图固定 | fixed表示将背景图固定，不随滚动条滚动 |
| background | 背景图样式简写 | 可以同时设置以上多个参数。 |
背景渐变
渐变色css白马自动生成https://uigradients.com
background: linear-gradient(to 方向,颜色1,颜色2,颜色3...)
方向:left right top bottom
background:linear-gradient(to right,#fdeff9,#ec38bc)
边框border
边框会套在元素外层，元素原本大小不变，最终所占页面区域大小为元素大小+边框宽度
| 边框相关样式 | 作用 | 值 |
| border-style | 边框线条样式 | solid dashed double dotted |
| border-width | 边框宽度 | px |
| border-color | 边框颜色 | 颜色的三基色 |
| border | 同时设置所有边框线条宽度和颜色 | border:1px red solid |
| border-方向-样式 | 某方向的style或width或颜色，方向为left top right bottom | border-left-color:red |
| border-方向 | 同时设置某边框线条，宽度和颜色 | border-top:1px dotted blue; |
| border-上下方向左右方向-radius | 设置某个方向的边框为圆角 | |
| border-radius | 同时设置四个角为圆角，如果正方形，值为边长的一半则为圆形 | |
| outline | 轮廓 input文本框默认获得焦点时，会显示一个轮廓，通常设置为none去掉轮廓 | |
| border-collapse | 合并相邻边框，通常用于合并表格中的td的边框 | 表格{bordercollapse:collapse} |
字体
| 样式名 | 作用 | 值 |
| color | 文本颜色 | 颜色的三种写法 |
| text-decoration | 文本修饰 | underline下划线line-through删除线 overline上划线 通常给页面中的所有a标签设置text-decoration:none去掉a标签默认的下划线 |
| text-align | 文本对齐方式 | 默认left左对齐 right右对齐 center居中 |
| line-height | 行高 | 设置为与文字相同大小，行间距为0。"垂直居中"时，将行高设置为容器高度 |
| text-indent | 首行缩进 | 根据文字大小设置缩进像素，如默认文字16px，首行缩进2字符，则设置为32px |
| text-shadow | 文本阴影 | 颜色 水平位置 垂直位置 模糊程度 如#000 4px 5px 3px表示水平向右4px 垂直向下5px 模糊3px |
| letter-spacing | 字符间距 | 像素 |
| word-break | 英文换行方式 | 默认break-word以单词为单位换行，不会拆分单词break-all以字母为单位换行，会拆分单词 |
列表
| 样式名 | 作用 | 值 |
| list-style-type | 设置列表li前的标记 | 通常设置为none去除标记 |
| list-style-position | 设置列表li前的标记的位置 | 默认outside，标记位于li之外;inside表示标记位于li之中 |
| list-style-image | 设置列表li前的标记为图片 | url(图片地址) |
术表样式cursor
| 值 | 效果 |
| pointer | 指示链接的指针(手) |
| move | 可移动的十字箭头 |
| help | 问号的箭头 |
| progress | 带载入的箭头 |
| wait | 载入状态 |
| crosshair | 十字线 |
| text | 光标 |
伪类
表示某个元素的某种状态
用于对某些元素在不同的状态下呈现不同的效果
如a标签有访问前，悬停时，按下时，访问后四种状态对应四个伪类
| a标签的伪类 | 作用 |
| a:link | 未访问时 |
| a:hover | 鼠标悬停 |
| a:active | 鼠标按下 |
| a:visited | 访问后 |
hover可以适用于很多标签，如#xx:hover,表示鼠标悬停在id为xx的元素上时，
追加内容，通过context属性编辑追加的内容，同时可以设置其他样式。
| 在某个元素之前或之后插入内容 | 说明 |
| :after | 之后 |
| :before | 之前 |
显示方式display
控制元素的类型或是否显示
| 值 | 作用 |
| block | 将元素设置为块级元素，这样元素就能独占一行，能设置尺寸 |
| inline | 将元素设置为行内元素，这样元素占一行中的一部分，不能设置尺寸 |
| inline-block | 将元素设置为行内块，这样元素占一行中的一部分，能设置尺寸 |
| none | 将元素不显示，不保留元素位置 |
浮动float
让某个元素脱离原本的位置，朝某个方向对齐
left right none:左浮动 右浮动 清除浮动
float:left和display:inline-block的区别
相同点:都能让多个块级元素称为行内块
display:inline-block
多个元素最终位于同一行内，可以设置尺寸，元素以下线对齐，保留该行位置，保留原宿间的缝隙，后续元素为新的一行。
float:left
多个元素最终位于同一行，可以设置尺寸，元素以上线对齐，不保留该行位置，不保留元素间的缝隙，后续元素会紧邻。
盒子模型
页面中的所有块级元素，都是一个盒子,每个盒子由元素自身，内边距padding，外边框border，外间距marjin组成
边框border:元素外的一圈
内边框padding:边框与元素之间的距离
外边距marjing:元素A的边框与元素B的边框之间的距离
| 盒子模型相关样式 | 作用 |
| padding | 内边距，1个参数表示同时设置4个方向，两个参数表示设置上下，左右。四个参数时表示顺时针设置 |
| margin | 外边距，1个参数表示4个方向，如果值设置为auto，表示自动将所在的容器 剩余距离除以2。 |
| padding-方向 | 某个方向的内边距，方向可以是left，right，top，bottom |
| margin-方向 | 某个方向的外边距 |
一个元素的所占位置是外边框+边框+内边距+元素自身大小。
如果让某个块级元素居中，使用margin:上下距离auto;
盒子模型阴影
元素{ box-shadow:#000 4px 4px 4px};
溢出overflow
处理子元素超出父元素的部分:
| 值 | 作用 |
| visible | 默认 溢出部分显示 |
| hidden | 溢出部分隐藏 |
| scroll | 溢出部分使用滚动条控制 |
定位position
将元素以像素为单位调整位置
| 值 | 含义 | 作用 |
| fixed | 固定定位 | 让元素固定在页面上的某个位置，不会页面的滚动而改变位置 |
| absulote | 绝对位置 | |
| relative | 相对位置 |
配合定位使用样式
| 作用 | 值 | |
| left | 元素距离页面左边界的左右距离 | 正右负左 |
| top | 上边界距离 | 正下负上 |
| right | 右边界距离 | 正左负右 |
| bottom | 下边界距离 | 正上负下 |
文档流
页面中每个元素默认都有自己的位置，这个位置称为文档流
如果某个元素脱离文档流，就会失去它原本所占的位置，后续元素就会顶替其位置。
可以通过浮动float，固定定位position:fixed,绝对定位position:absolute让元素脱离文档流
脱离文档流后，通过改变left right top bottom移动其位置。
固定定位fixed:
让某个元素脱离文档流，默认根据页面的四个边界进行定位。
绝对定位absolute:
让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据body定位
相对定位relative
元素不会脱离文档流，根据它原本的位置进行定位，定位原点是根据元素本身的位置。
层叠z-index
对于已定位的元素，可以通过z-index调整层叠顺序，值是一个数字，越大离眼睛越近。
不透明度opacity
设置某个元素的不透明度，0~1之间的小数表示不透明度，1完全不透明，0完全透明
如果只是定义背景透明时，使用rgba(red,green,blue,alpha),alpha使用
转换transform
改变元素的状态 ，如旋转，移动，缩放等。
| 值 | |
| rotate(30deg) | 顺时针2D旋转30度 |
| rotateX/Y/Z(30deg) | 沿xyz轴3D旋转30度 |
| translateX/Y(50px) | 朝X或Y轴平移50个像素 |
| translate(10px,30px) | 朝右移动像素px 下移动30px像素 |
| scale(1.5) | 缩放1.5倍 |
以上所有效果可以通过transform:效果1 效果2...同时设置
transform: rotate(30deg) translateX(100px) scale(1.2)
过渡transition
设置某个转换效果完成所需的时间等参数
自定义动画animation
1.定义动画的关键帧
2.给某个元素设置animation样式
| animation相关样式 | 作用 |
| animation-name:动画名 | 执行指定动画 |
| animation-duration:3s | 动画执行时间 |
| animation-delay:3s | 动画延时时间 |
| animation-iteration-count:3 | 动画执行次数，infinite表示无限 |
| animation-timing-function:linear | 动画执行时间函数，linear表示匀速 |
| animation:动画名 5s 2s | 简写 只写一个时间表示用时，写两个时间表示第一个是用时，第二个是延时 |
扫一扫
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
