网络前端】标签手册 HTML/CSS/JavaScript
前言:
“前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默
经过小新缜密的思考与亲身体验,忍不住分享一下给大家。有人工智能兴趣的朋友们,推荐大家一起学习 ????点击直接访问????
里面有丰富的人工智能学习资料,真正做到从入门到入土,还不快来一起学习????????????
个人名片:
????作者简介:一名大一在校生
????❄️个人主页:小新爱学习. ????
????️系列专栏:零基础学java ----- 重识c语言
????每日一句:.还有星月可寄望,还有山川可浪漫。
文章目录
- WEB前端????????????
- HTML✨✨✨
- 标签 ✨✨✨
- 1.标签名属性名都要用小写字母✨✨✨
- 2.浏览器会自动数略多余空格和换行 ✨✨✨
- 特殊符号✨✨✨
- 图片链接????????????
- a链接 双标签链接????????????
- 页面间链接
- 2.功能性链接????????????
- 列表????????????
- 表格
- 框架
- 表 单
- 语法
- css 样式表
- 简介
- 优势
- 语法
- 选择器
- 三种样式
- css的高级选择器
- 层级选择器
- 伪类选择器
- 伪类样式
- 伪类结构选择器
- 属性选择器
- 默认标签分类
- css3美化网页元素
- div盒子模型
- 动画
- 变形
- 平移transform: translate(-100px , 200px
- 旋转*transform: rotate(360deg);* 以某个顶点旋转 transform-origin: top left;
- 缩放transform: scale(0.8);
- 倾斜transform:skewX(30deg)
- 自定义动画
- javaScript
- 壹.ECMAScript 标准语法
- 一.基本语法
- 1.与HTML结合
- 2.注释
- 3.数据类型
- 4.变量 可重复定义 同名文件覆盖 最好和java同样写法
- 5.运算符
- 二.基本对象
- 1.Function:函数(方法)对象 与Java相同
- 2.Array数组对象
- 3.Date:日期对象
- 4.Boolean 对象
- 5.String
- 6.Number
- 7.Math 算数类 Math对象不需要创建 直接使用
- 8.RegExp 对象 正则表达式
- 9.Global 全局对象,不需要创建对象 直接调用
- 贰.BOM 浏览器对象模型
- 叁.DOM:文档相关模型
- JQuery
WEB前端????????????
HTML✨✨✨
HTML 超文本标记语言
- HTML(Hypertext Markup Language)超文本标记语言。
- 它负责网页的三个要素之一结构。
- HTML使用标签的形式来标识网页中的不同组成部分
- 所谓超文本指的就是超链接,使用超链接可以让我们从一个页面跳转到另一个页面
标签 ✨✨✨
1.标签名属性名都要用小写字母✨✨✨
2.浏览器会自动数略多余空格和换行 ✨✨✨
- br/换行 单标签
- hr/水平线 单标签
- pre标签 保持文章格式 原本输出
- p 段落标签 双标签
- h1-6 标题标签 双标签
- strong 加粗 双标签 重要东西
- em 斜体双标签
- b加粗 双标签 无所谓
- < !-- -->注释标签
特殊符号✨✨✨
 ; 空格 >; 大于号 <;小于号 ";引号 ©;版权符号
图片链接????????????
<img src=图像相对路径 同级文件直接路径 上级文件…/ 下级文件
alt=图片无法显示提示文字 title=图片悬浮文字 width= 宽 height=高 后四个可写可不写 全部双引号 >
a链接 双标签链接????????????
页面间链接
<a href=“页面跳转链接” 外地链接写全链接 本地 上级文件…/ >我是链接 点击图片进入链接:图片链接在a链接跳转 直接加入其内 如上
target="" 设置跳转页面 不写默认_self 新增页面跳转 _blank
title=悬浮文字
2.功能性链接????????????
生成代码 直接百度搜索 < a href ="">
3.锚链接
< a href="#"> < a href=""> 上下呼应
列表????????????
1.无序列表< ul> < li>双标签 < li>在< ul>里面
2.有序列表< ol>双标签 < li>在< ol>里面
3.定义列表< dl>大列表 < dt>表标题 < dd>表内容 皆为双标签
表格
表格 <table border代表表格大小 cell padding一般情况为0 cellspacing一般为0 bgcolor表表格内容颜色 width表宽高 >
< tr>表示行 行里套列 < td>代表列 双标签 < td>里加内容
<colspan 表跨列 得删本列东西多余列> <rowspan 表跨行 得删除下面同样列>
另加表格得在该行该列下加table colspan rwsopan都在< td>里
音频标签<audio src=“路径” autoplay controls现实控制条 loop循环播放 >双标签
视频标签<video src=“路径 poster=”"" 设置封面图片 >双标签
框架
*< frameset cols=列 rows= 行 表示剩下全部 双标签 不可写在body里面 >
< frame src 依次代表其上数值>
另加框架在其框架下新加frameset noresize表示禁止调节框架
表 单
在boby里面 双标签<from method=七种方式 常用俩种post暗问提交安全速度慢 get明问提交不安全速度快 action=向何处发送表单数据>
表单控件
语法
单行文本框<input type=元素类型 必须写 默认text name=元素名称 可选必须写 value=元素初始的值 placeholder提示信息 size表长度 maxlength表可输出最大字符数 >
单选按钮< input type=“radio”单选按钮 name=“sex” value="” 必须写 男
< input type=“radio” name=“sex”> 女 name要一样
< label for=“nv”> 跟前面产生关联 ID一样
button标签 按钮 默认submit 清空reset 普通button
复选按钮< input tyoe=“checkbox”
checked表默认选中
列表框 双标签 < select name size表默认显示列 >
<option value表 selected表默认选中项目> selected表默认选中项目< optgroup label=“山西”> 分组
< /select>
多行文本域< textrea cols=显示列数 rows=显示行数>文本内容 < /textrea>
W文件域 <input type= file name= files
邮箱<input type= email name= email
网址<input type= url name= urlname
日期<input type= date
数字
搜索框
只读 read only
禁用 disabled
隐藏域hidden
表单验证 1.placeholder 文本框提示
2.required 非空验证
3. patern 验证规则 正则表达式
css 样式表
简介
可以对html以及xhtml进行包装
优势
1 内容与表现分离
2网页表现统一容易更改
.3丰富样式 是布局灵活
4.减少网页代码量 增加网页浏览速度 节省 网络带宽
5.运用独立页面的css 有利于网页被搜索引擎收录
语法
选择器{声明1
声明2} 得写在head 里
选择器
类选择器 class 针对. 多次使用
ID选择器 id针对# 使用一次 大范围使用
标签选择器 无符号所有都适用
并集选择器 多个选择器通过,分割可以为多个选择器设置同样样式
交集选择器 选择同时满足多个选择器要求的元素 用.操作符链接 中间不能添加空格
选择器优先级 id选择器> 类选择器>标签选择器
分离 建立css文本文件 不需要< style>标签
写好后在html文件head标签里引入css 俩种方式 1连接式 < link href=路径 rel type>属于 html 标签
2 导入方式< style/>@inshiziprot url(“路径”)< /style> 属于 css样式
三种样式
内部样式表 写入html内head里面
外部样示表 用的多 最符合css优势
行内样式表<style=“字体大小 ‘;’颜色”“”>一般不用 调试用
优先级 就近原则 行内>内部样式表>外部样式表
css的高级选择器
层级选择器
父子关系
1.后代选择器 .选择所有子元素 可以嵌套 用空格连接
2.子选择器 只选择直接的元素 用>连接
兄弟关系
3.相邻兄弟选择器 只选择紧跟其后的一个 用+连接 只能向后选择
4.通用兄弟选择器 选择紧跟其后的所有元素 用~连接 只能向后选择
伪类选择器
伪类样式
a: hover{} a:link未访问超链接样式
a:visite 单击后样式
a:hover鼠标悬浮其上样式
a:active单击未释放样式
顺序 a:link>a:visite > a:hover> a:active
伪类结构选择器
1.选择第一个子元素/ ul li:first-child{ color:red; }
2./*选择最后一个子元素 ul li:last-child{ color:blue;}
3./*选择索引位置寻找子元素 从1开始 ul li:nth-child(4){ color: green; }
4.选择奇数类子元素 ul li:nth-child(odd)
5.选择偶数类子元素 ul li:nth-child(even)
6. 选择第一个特定元素 .box p:first-of-type{
7. 选择最后一个特定元素 .box p:last-of-type{
8. 选择某个特定元素 .box p:nth-of-type()
属性选择器
1. 按钮包含某个元素 input[placeholder]{ width: 200px;}
2. 按钮 包含某些元素 input[type^=“pass”]{ border: 1px solid red; }
3. 按钮 必须包含这些元素 input[type=“password”]{ border: 1px solid blue; }
4. 按钮以某个元素结尾 input[type$=“t”]{ border: 1px solid green; }
5. 按钮只要包含某个元素 input[type=“t”]{ height: 50px; }*
默认标签分类
1.块状标签 (block) 独占一行 可改变宽高 hn div p hr header footer section
- 内联标签(inline) 不独占一行 不可改变宽高 a span lable
- 行内块元素 (inline-block) 可改变宽高 不独占一行 img
改变块状元素方式display inline-bock 内敛块状并存 block内敛变块状 inline 块状变内敛 none隐藏
代码语义化
css3美化网页元素
< span>标签 < /span>
字体样式 font family 字体类型 fontsize (12px)字体大小 fontstyle 字体风格 fontweight 字体粗细 也可以只写font 顺序不能变
文本样式 colro 文本颜色 text-align 水平对齐方式 text-indent 首行文本缩进 line-height文本行高 letter-spacing字间距
文本装饰 text-decoration none默认值 underline下划线 overline 上划线 line-through删除线
文本阴影 text-shadow 水平偏移量 垂直编译量 隐影大小 阴影颜色
列表样式 list-style-tybe
list-style-image:
list-style-
背景定位 background—image图片路径 url() repeat重复模式 position 位置 颜色 像图定位 重复方式background-size 背景图片定位
渐变1.线性渐变linear-gradinet( 方向 颜色 颜色)
2.径向渐变
div盒子模型
双标签< div>< /div>
1. 边框 border 三个值都要写border-color边框颜色
border-width边框粗细
border-style边框样式 double 双划线 solid实线
简写为border 粗细 样式 颜色
- 2.外边距 margin 网页居中对齐 margin:0px auto 取消
- 3.内边paddding 同上
- 边框颜色
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing: border-box; 不改变盒子宽高…0
盒子阴影 box-shadow :inset x轴 y轴 模糊半径
标准文档流钟父元素的高度是所有子元素高都之和 如果子元素产生浮动 就会脱离标准文档流 就不能为父元素贡献高度了 如果所有子元素都产生浮动 name父元素高度会变为0
解决子元素浮动之后父元素高度塌陷的方法
magin高度塌陷问题
两个垂直相邻的元素 设置margin外边距时 会以最大的外边距为准 较小的会忽略 调整边距较大的值即可
父子元素中 子元素的margin-top默认会失效 1.给父元素加边框2.给父元素添加 overflow: hidden;
定位position 目标元素 定位模式 偏移量
动画
变形
平移transform: translate(-100px , 200px
水平垂直移动 一个盒子水平垂直居中
旋转transform: rotate(360deg); 以某个顶点旋转 transform-origin: top left;
缩放transform: scale(0.8);
倾斜transform:skewX(30deg)
自定义动画
创建自定义函数
@keyframes dh{ from{transform: rotate(0deg); } to{ transform: rotate(360deg); } }
然后再需要盒子里面 animation: dh 1s 2 linear;
javaScript
html超文本标记语言 表内容 +css表现 +js行为
客户端脚本语言
运行在客户端浏览器中的, 每个浏览器都有解析就是引擎
不需要编译 直接运行
功能:可以增强用户与html之间的交互 可以控制HTML元素 让页面有一些动态效果 增强用户体验
发展史 第一个浏览器网景 布兰登兰克
js=ECMAScript+js自己的东西(DOM+BOM)
壹.ECMAScript 标准语法
一.基本语法
1.与HTML结合
三种输出方式:1 alert 弹框提示 2console.log 控制台打印 3 document.write body里面输出
< 1>内部js 定义< script>标签 标签体内写入js代码(写在html任意位置 但定义的位置会影响执行顺序 :可以定义多个 )
< 2>外部js 创建js文件 通过 script标签的src属性标签引入 js不加< script>标签 html里< script src="js ">< /script>
2.注释
<1>单行注释//
<2>多行注释/**/
const 用于定义常量 并且必须初始化 常量不能重复赋值
parseint 可以将字符串转变为整数 parseFloat 可以将字符串转变为浮点数
3.数据类型
<1>原始数据类型
(1)number:数字 整数/小数/NaN(一个不是数字的数字类型)
(2)string:字符串 “abc”“a”最好双引号
(3)boolean:true和false
(4)null:一个对象的空占位符 运算后得到的是object
(5)undefined:未定义 的对象
(6)symbol 主要用于创建私有属性
(7)bigint 数字后加N
<2>引用数据类型:对象
4.变量 可重复定义 同名文件覆盖 最好和java同样写法
var 变量名=初始化值;
typeof 获取变量的 数据类型
5.运算符
<> <1>一元运算符 ++、–
++、–符号在其后先运算在增减 符号在其前先增减在运算 自增或自减
±号正负数:string转number按照字面值转化 如果字面值不是数字转为NaN
boolean转number true=1 false是0
<2>算术运算符+ 、-、 * 、 / 、%、
<3>赋值运算符 必须赋值 var =、+=、-=、*=、/=、%=
<4>比较运算符 只能返还 boolean的true或者false >、<、 >=、<=、===(全等于 js里面才有) 单等于是赋值 ==双等于是比较 自动转换数据类型
比较方式(1)类型相同 直接比较
字符串比较 按照字典顺序进行比较
(2)类型不同 先进行类型转化 再比较
===:全等于在比较前 先判断类型 类型不同直接false 在进行比较
<5>逻辑运算符&&、(与) ||、 (或) !(非)除了0
!非(取反运算):其他类型转boolean number: 0或NaN为true 其他为false
string : “”空字符串为true 其他为false
null和undefind为ture
对象: 所有对象都为false
<6>三元表达式 ? :表达式?值1:值2;
如果表达式为true执行值1内容
如果表达式为flase 执行值2的内容
<7>流程控制语句
(1)if…else… 表达式 if( boolean表达式){ 内容 } else{ 内容} 如果正确执行其一 否则执行其二 与三元表达式相同 可互换
(2)switch … case… switch( 变量 可以接受任何原始数据类型 ){case1 … break case2…break default } 与if…else if…else…相同
(3)while while( boolean表达式 初始化变量){ 循环条件 自增量 } 先判断后执行
(4) do…while… do( 初始化变量){ 自增量 } while{ 循环条件} 最起码执行一次 先执行一次 后判断条件
(5)for for(初始化变量 循环条件 自增量 ){ }
二.基本对象
1.Function:函数(方法)对象 与Java相同
函数的全局变量全局可以用 成员变量 只能本函数使用 出了作用域失效
如果对一个没有声明过的变量 进行赋值 那么这个变量自动提升为全局变量*
<1> var 变量名=new Function(参数列表,方法体);不常用
<2>function 方法名称(参数列表){ 方法体}
<3>var 方法名=function(参数列表){方法体} 方法名相同 覆盖 下面覆盖上面
2.属性 length代表参数个数
3.特点(1)在方法的声明中 有一个隐式内置对象 是一个数组arguments 里面封装了所有实际参数
(2)方法的定义参数的数据类型不需要写 返回值类型不需要写
(3)如果定义方法名相同 会覆盖
(4)方法的调用只和方法名相关 和参数列表无关
高阶函数
2.Array数组对象
<1>创建
var 数组名=new Array(元素列表);
var 数组名=new Array(默认长度);
var 数字名=【 元素列表】;
<2>属性 length 数组的长度
<3>特点(1)长度可变
(2)数据类型可变
<4>方法(1)push():向数组的末尾添加一个或多个元素,返回一个新长度
unfrist 首部添加元素
pop弹出末尾元素
shift 弹出首部元素
splice删除指定元素位置 c
- concat*链接数组
every每个元素都满足条件 返回ture 否则false
some任何一个元素满足条件 返回true 全部不满足才是false
reverse() 反转数组
sort*//数组默认排序 讲元素转换为字符串 然后排序*
(2)join():将数组中的元素按照指定的分隔符拼接为字符串
3.Date:日期对象
<1>创建 var 变量名=new Date();
<2>方法 getTime();获取毫秒值
tolocalestring();可以获得当前本地时间 以字符串形式展现
4.Boolean 对象
5.String
6.Number
7.Math 算数类 Math对象不需要创建 直接使用
math.方法名();
方法:round();四舍五入最接近的整数
max(); 取一组数列最大值
min();取一组数列最小值
abs();绝对值
ceil();对数进行向上舍入
floor();对数进行向下舍入
random();返回0-1之间的随机数
math.floor(math.random()*100+1) 1-100随机数
8.RegExp 对象 正则表达式
var 变量名=new RegExp(“正则表达式”)
var 变量名=/正则表达式/
方法:test(参数)验证指定的字符串是否为合规的正则表达式
9.Global 全局对象,不需要创建对象 直接调用
URL编码:encodeURL( )
URL解码:decodeURL ( )
URL编码:encodeURLConoinent()
URL解码: decodeURLConoinent() 编码字符更多
parseInt():将字符串转成数字
isNaN():判断值是否为NaN
NaN参与==比较全部返回false.包括自己
eval():执行js脚本
贰.BOM 浏览器对象模型
封装了浏览器各个组成部分
组成: window对象 窗口对象
navigator对象 浏览器对象
screen对象 显示器对象
history对象历史记录对象
location 对象 地址栏对象
叁.DOM:文档相关模型
将我们的html的标记语言文档的各个组成部分,封装成对象 我们可以使用这些对象,对html标记语言文档进行CRUD操作
1.核心DOM 针对 任何结构的文档的标准模型
<1>Document 文档对象
<2>Element 元素对象
<3>Attribut:属性对象
<4>Comment:注释对象
2.XML DOM 针对XML文档的标准模型,
3 HTML DOM 针对HTML文档的标准模型
Document 文档对象
<1> 创建 document
window.document
<2>方法
方法 |
说明 |
获取Element对象 getElementByID() |
根据id属性获取元素对象 id一般是唯一的 |
getElementsByTagName() |
根据元素的名称获取元素对象 返回是数组 |
getElementsByClassName() |
根据元素的class属性来获取元素对象 、返回是数组 |
getElementsByName() |
根据 元素的name属性来获取元素对象 返回是数组 |
②创建其他DOM对象的方法
方法 |
说明 |
createAttribut () |
创建DOM属性对象 |
createElement() |
创建DOM元素对象 |
createComment() |
创建DOM注释对象 |
createTextNode() |
创关键DOM节点对象 |
innerhtml会进行标签转义 innertext不会
<3>属性
Element 元素对象
<1>创建通过document创建
<2>方法
- ①setAttribut()设置属性
- ②removeAttribut()删除属性
<>
Nede节点对象
方法
- appenChild():向节点的子节点列表的结尾添加新的子节点 添加
- removeChild():删除当前节点的指定子节点
- replaceChild():用一个新节点 替换一个子节点 - 属性:parentNade:返回节点的父节点
HTML DOM: innerHTML:标签体的设置和获取
控制元素样式“1 使用元素的style属性来设置 元素对象.style.样式 className来设值类名称
JQuery
1他是一个JS的框架 用于简化js的开发 本质就是一些js文件 里面封装了js原生的代码而已
2 使用步骤<1>下载 1.X版本 兼容IE 678
2.X版本 不兼容IE 678
3.X版本 支持最新浏览器 不兼容IE 678
<2>导入JQuery的js文件<scriptsrc=“js文件”>
JQuery对象 本质是一组伪数组 属性名师连续数字 包含length属性 只有jq对象才能使用jq函数库
¥()工厂函数 用于获取的jq对象
1.通过工厂函数将原生对象转换成jq对象
2.通过选择器查找标签元素节点 并转换为jq对象
3.通过html文档 创建元素节点 并转换为jq对象
4.可以处理页面加载完成后的事件监听