HTML+css+js的技术

最新推荐文章于 2024-08-10 10:42:27 发布

小白-阿木木

最新推荐文章于 2024-08-10 10:42:27 发布

阅读量1.5k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/yueying521314/article/details/84404319

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

标签

文本标签
1. hn n表示数字取值1-6，数字越小，标题越大
2. hr水平分割线是一个自闭合标签没有结束标签
3. font叫字体一般放置文本，在开发中多数还是使用html4.0
4. b字体加粗
5. 我字体倾斜
6. br回车换行自闭合标签无间距
7. p段落标签有间距

标签属性
1. 基本标签属性
  1. 颜色
    1. Color =“颜色的单词”;
    2. 三原色rgb红绿蓝
      1. 语法：＃六个字符，每个字符表示一个颜色，采用16进制
      2. F * f = 16 * 16 = 256;
      3. ＃ff0000表示红色＃00ff00表示绿色＃0000ff表示蓝色
  2. 尺寸
    1. 大小=“10px”;
    2. PX表示像素，像素可以省略
  3. 宽度
    1. 表示宽度
    2. 宽度=“60”;
    3. 百分比width =“100％”，会随着页面变化而变化
  4. 对齐
    1. 排列方式
    2. 取值：左中右
2. 字体标签属性
  1. 颜色：颜色
  2. 尺寸：大小最大值为7
  3. 脸部：字体
超链接标签
1. 超链接是可以被点击的文字和图片
2. a标签必须有一个属性
3. Href =“”热点连接
4. 目标目标资源的打开方式，默认是自身跳转
5. Target =“_ self”自身_blank新建窗口打开
6. 可以输入本地的连接和外部连接
列表标签
1. 列表用于显示数据排版页面
2. 有序列表ol type默认为1，也可以修改为a A i I
3. 无序列表ul type默认为disc实心圆circle空心圆方实心方块
4. Ol和ul里边嵌套的li
图片标签
1. 图片标签往网页上插入图片
2. Img ---> image图片影像（重要）
3. Img src =“”路径../表示上一层路径./表示当前路径（默认）
4. 属性
  1. 宽度：宽度改变宽度会同时改变高度
  2. 高度：高度一般只设置宽度特殊情况下会设置高度
  3. 标题：标题鼠标悬停时提示
  4. Alt：提示图片未加载或加载失败时候的提示
  5. 注意：也可以放置互联网图片
行块级标签
1. 行级标签：字体跨度数据写在一行身上不会折行
2. 块级标签：hr hn div标签标签和标签之间会折行
表格标签
1. 表格：就是用来显示数据
2. 表格有行（行）和列（COL）的概念，一行一列组成一个单元格
3. 表表格
4. 特殊属性
  1. TR：行
  2. TD：列
  3. Th：将td换成th表头默认加粗居中
  4. 边框：边框线一般为1
  5. 宽度：宽度
  6. Cellspacing：单元格和单元格之间的距离，单元格和边框的距离一般为0
  7. Cellpadding：单元格和其内容之间的距离一般为0
  8. Bgcolor：backgroundcolor背景背景色
  9. 图片说明：表格的标题
5. 合并属性
  1. colspan属性：行合并
  2. 行跨度：列合并
  3. 无论是行还是列合并，找到前一个单元格，写上属性，合并几个单元格就写几。合并之后记得要删除多余的部分。
6. 了解属性
  1. Thead：语义化标签没有意义
  2. Tbody：语义化标签没有意义
  3. Tfooter：语义化标签没有意义
实体字符
1. 小于：小于<
2. 大于：grant than>
3. 和符号：
4. 空格：

注意

1. HTML是一个解释性语言：不需要编译，直接浏览器执行，还是一个弱类型语言，对语法要求不严谨。
2. 标签名不区分大小写（建议小写），结束标签可以不写，浏览器会默认补全，但是建议写。
3. 在每一个标签中都有属性，标签的描述信息，属性之间要有空格，至少是一个所有的标签，中有可能有相同的属性，但是不同的标签属性一样，含义有可能不一样。
4. 标签之间可以相互嵌套
HTML和CSS

1. 表单形式

表单是不可见的，但又是最重要的。

2. 表单形式的属性

1. 1. Action 提交到服务器的路径（＃表示当前页面）
  2. 方法提交方式
    1. 获得默认值
      1. 在地址上拼接数据
      2. 第一个参数以？的方式拼接
      3. 拼接的格式为key = value
      4. 多个参数之间以＆符号连接地址？key = value＆key = value ...
      5. 拼接的长度有限
    2. 岗位
      1. 数据长度不可见
      2. 长度不限
表单的组件
1. 1. 组件：
    1. 所有的组件必须存在于表单中，否则没有无意义。
  2. 输入标签
    1. 有类型属性决定需要显示组件的类型
      1. T ext 默认值表示文本框
      2. 密码密码框
      3. Radio 单选框单选按钮
      4. 复选框复选框多选按钮
      5. 日期日期
      6. 文件上传
      7. Image图形按钮：可以提交表单，并且可以设置按钮的格式（将数据打包发送的过程）
      8. 重置重置重置不等于清空（会恢复开始的默认选框）
      9. 提交提交==>将数据打包发送的过程
      10. Hidden 隐藏域看不到组件，但是可以将数据发送给另一台计算机，如果不希望用户看到的数据，一般放在隐藏域中，因为隐藏域的数据会提交按钮
      11. 按钮普通按钮
      12. 名称就是关键
      13. 值就是值没有值，默认为空，如果手动输入，已手动输入为主，如果没有默认值，则使用默认值。
      14. Maxlength最大长度
      15. 尺寸尺寸大小默认为20
      16. 选中单选或多选框的默认选中状态checked = “ checked ” 标准语法，非标准语法：checked = “” 或者已检查
      17. Readonly只读标准和畸形跟检查语法一致，只能看不能改，可以提交数据
      18. 已禁用不可用标准和畸形跟检查语法一致，不能改，组件失效
      19. 电子邮件输入电子邮件定义用于电子邮件地址的文本字段
      20. 数字字段

1. 1. 选择标签
    1. 单选下拉框
    2. 子标签选项提交的密钥名称提交的值值，选项允许有多个。
    3. 默认选中在选项中，可以写selected =“selected”和畸形写法
    4. 多选下拉框
    5. Multiple =“multiple”，多选下拉框，size属性表示多选下拉框的显示个数
  2. 多行文本文本域
    1. 名称表示提交的关键
    2. 默认值是标签体中的内容
    3. Cols列
    4. 行行

CSS

1. 1. 什么是CSS
    1. 级联样式表层叠样式表，专门用于网页的美化
  2. CSS美化的好处
    1. 比HTML美化的功能更加强大，可以实现HTML不能实现的功能
    2. 分工明确，CSS专门用于美化，HTML专门用于结构的搭建
  3. 行内样式（必须掌握）
    1. 在每一个标签中都有一个属性style用来描述样式

Style = “ key：valuse; key：valuse; “ ;

1. 1. 内部样式（统一一个页面的所有样式，一般不用）
    1. 一般在头标签中嵌套一个标签<Style type =“text / css”> <style>
    2. Type =“text / css”可以省略，表示在标签体内部的文本，按照css语法解析

选择器{

核心价值;

}

选择器：在页面中上的标签

1. 1. 外部样式（样式独立于文件之外，一般不用）
    1. 1. 找到的CSS文件夹，创建CSS的文件编写即可，建立CSS和HTML的联系
      2. 固定格式：

Rel =“stylesheet”引入的文件的一个样式表

Type =“text / css”按照css语法解析

Href =“../css/demo.css”引入css文件的地址

1. 1. 引入样式的优先级
行内样式优先级最高（程序员使用）
以标签为中心，谁的最近就是使用谁，就近原则，只适用于都在头标签中。
1. 1. CSS样式的好处
    1. 更加强大
    2. 解耦跟html的结构取出来，结构清晰

选择器
1. 1. 用于选择页面的标签，在头中设置，身体中引入
  2. 标签选择器
    1. 标签名称{}一般用来选择一组（html语法规定的一组）标签
  3. ID选择器
    1. #id名称{}一般用来选择唯一的一个标签
    2. ID任意，但需要唯一，ID不可以以数字开头。
  4. 类选择器
    1. .class名称{}一般用来选择一组（人为主观划分的一组）标签
    2. Class类=“类名”类名任意
    3. 所有类名一样，我们人为规定是一组标签。
  5. 选择器的优先级
    1. 选择器越精准，优先级越高
    2. 引入样式对比的是样式写的位置使用的是同一个选择器。
  6. 扩展选择器

常见的CSS属性

1. 背景样式

文本样式

字体样式

浮动和清除浮动

浮动浮动：

明确清除浮动

显示属性

盒子模型
1. 示意图

1. 盒子模型分为两种：
  1. 标准盒子：实际大小内容+内边距+外边距=总大小
  2. 怪异盒子：实际大小总大小= width + height（设置内边距外边距，边框，都是现有的宽高去计算）
  3. 设置固定的盒子盒 - 尺寸：内容 - 盒子;
2. 盒子模型的属性

1. 边框属性

1. 设置四边值

1. 设置每边的值

JavaScript的

概述
1. 1. 的JavaScript的简单描述
    1. 是一门解释性脚本语言，是一门弱类型语言。
  2. 的JavaScript的作用：
    1. 将静态页面转为动态页面。
  3. HTML，CSS和JavaScript的的区别：
    1. HTML用于页面结构的创建
    2. CSS用于对页面的美化
    3. JavaScript的用于将静态的页面转化为动态的页面
  4. 的Java和JavaScript的的关系
    1. 两者并没有直接的联系
    2. JavaScript的是运行在浏览器上的
    3. Java的是运行在服务器上的
    4. 图例

1. 1. JavaScript的的语法组成

2.编写方式：

1. 1. 写在HTML内部的脚本，在脚本标签中编写的js代码;
  2. 以JS文件的形式单独存在HTML的外部，使用的时候使用脚本标签的SRC属性导入进来即可。

3.标签：

1. 1. <SCRIPT> </ SCRIPT>
  2. 属性：
    1. 源：导入JS的路径
    2. 类型：文本类型type =“text / javascript”;

4.JavaScript的注释

5.变量

1. 1. 常用的方式：
    1. Var变量名=初始化值;
  2. 弱类型
    1. 同一变量可以接受不同数据的类型
  3. 字符和字符串的说明
    1. JS中只有字符串类型，没有字符类型，字符串既可以使用双引号也可以使用单引号。
  4. 特点
    1. 瓦尔关键字不是必须的，可以省略，但不建议省略;
    2. 变量名可以重复定义;
  5. 数据类型
    1. JS中数据类型可以分为原始类型和引用类型
    2. 原始类型：

1. 1. 1. 引用类型：

引用类型通常叫做类（类），也就是说，遇到引用值时，所处理的就是对象。

1. 1. 1. 空和未定义的区别
      1. 空是一个对象类型，但没有值，可以认为是引用类型的占位符。
      2. Undefined未初始化的类型，不知道是什么类型。
  2. 类型
    1. 作用：判断指定的变量数据类型
    2. 写法：typeof运算（变量名）或者typeof运算变量名

6.运算符

1. 1. 算术运算符

注意：其中的除法，如果没有除尽，会产小数。

1. 1. 赋值运算符

注意：其中的除法，如果没有除尽，会产小数。

1. 1. 比较运算符

注意：其中的全等和全不等，比较的值和数据类型。

1. 1. 逻辑运算符

1. 1. 三目运算符
    1. 条件判断表达式？“是”：“不是”;
  2. 流程控制语句
    1. 判断
      1. 如果（条件表达式）{}
      2. 如果（条件表达式）{}其他{}
      3. 如果（条件表达式）{} else if（条件表达式）{} else {}
    2. 判断
      1. 对于
      2. 而
      3. 这样做，而
    3. 突破和继续
      1. 破解方法：跳出整个循环
      2. 继续：跳出本次循环
函数

概述：
1. 1. 函数式当它被调用时可重复使用的代码块，JS中的函数类似于java的中的方法;
  2. 函数常用的两种定义方式：命名函数和匿名函数;

函数的基本使用
1. 1. 命名函数格式：
    1. 函数名（参数列表）{

函数体;

[返回值]

}

2.调用函数名称（参数列表）

ii匿名函数格式：

var变量名= funtion（参数列表）{

函数体;

}

调用var变量名= function（实参）{

方法体;

}

3，特点：

1. 1. 1. 1. 形参的类型：在函数定义的时候不用指定类型，的英文因为可变的类型
      2. 函数的返回值：如果在一个函数中需要返回值，直接使用回返回，如果没有返回值，则不写的回报;
      3. 关于函数的重载：在JS中没有函数的重载，同名的函数会覆盖原来的函数，的调用时候只会调用求最后一个函数，而且实参的个数与形参的个数没有关系。
      4. 所有函数的内部都有一个类数组对象，名叫：论据，用来接收调用时提交的所有参数。
变量的作用域
1. 全局变量：定义在方法体外，作用于整个的JavaScript。
2. 局部变量：定义在方法体内，作用于整个方法，

注意：如果在方法体内定义变量的时候没有数据类型，则自动升级为全局变量。

事件
1. 概述
  1. 其实就是行为动作
  2. 事件跟函数可以结合
  3. 的JavaScript中事件都以在开头，所有的时间都叫做onXxx（）...
2. 声明式函数绑定

1. 匿名式函数绑定
  1. 语法：对象.on时间名称= function（）{};

1. 常见的事件

内置对象
1. 数组
  1. 数组的创建方式：
    1. 新数组（）
    2. 新阵列（长度）
    3. 新阵列（a，b，c）
    4. Var变量= [a，b，c];
  2. 特点
    1. 长度可变
    2. 类型不限
  3. 常用的方法

1. 日期
  1. 创建对象语法
    1. Var myDate = new Date（）;
  2. 格式转换为现在
    1. toLocalString（）
  3. 方法

C）全局对象

编码解码函数：

字符串类型转为数字类型

扩展

eval（参数）可以将字符串变成可指定的代码片段

BOM常用的对象

A. 窗口

1.作用：浏览器窗体对象

2.注意：只要是window的方法和属性，window对象名都可以省略。

3.常用方法：

A.与对话框有关的方法

①：alert（“提示信息”）弹出一个确认按钮的信息框

②：字符串提示符（“提示信息”，“默认值s”）弹出一个输入信息框，返回字符串类型。

③：布尔确认（“提示信息”）弹出一个信息框，有确认和取消按钮，如果点确定，则返回true，点取消则返回false;

B.与计时器有关的方法

①：setTimeout（函数名，间隔毫秒数）在指定的时间调用一次函数。只执行一次。返回值为一个编号。

②：setInterval（函数名，间隔毫秒数）每过指定的时间调用1次函数，不停的调用函数。返回值为一个编号

③：clearInterval（计时器编号）清除setIntval（）方法创建时器

④：clearTimeout（计时器编号）清除setTimeout创建的计时器

C.修改元素内容的几个方法和属性

①：document.getElementById（“id”）获取标签对象然后设置属性值，然后用一个变量来接收对象地址。

②：对象名.innerHTML获取元素内部的HTML，可以覆盖和追加（+ =）元素内部的内容，其中的语法会被解析 ;

③：对象名.innerText获取元素内部的文本，可以修改元素内部的纯文本，但其中的标签不起作用 ;

B. 地点

1.浏览器地址栏对象

2.常用的方法：

①：href获取当前地址栏访问的地址

②：href也可以用于页面的跳转，跳转到一个新的页面

③：重新加载重载当前的页面，相当于刷新

C. 历史

历史记录对象
常用的方法：

①：forward（）类似于浏览器上前进按钮

②：back（）类似于浏览器上后退按钮

③：go（）整数或者负数go（1）相当于forward（）go（-1）相当于back（）

DOM常用的对象

的document.getElementById（“ID”）

通过ID属性得到唯一的元素，如果页面上有多个同名的ID，则得到第一个元素。

document.getElementByName（“name”）通过name属性得到一组标签，返回是一个数组。
Document.getElementByTagName（“标签名”）通过标签名字得到一组标签，返回一个数组。
Document.getElementByClassName（“类名”）通过类名得到一组标签，返回一个数组。

JS操作的CSS样式
1. 1. 方式一：
    1. 获取对象.style。样式名=“样式值”;
    2. document.getElementById（“first”）。style.color =“blue”;
  2. 方式二：
    1. 获取元素对象.className =“类名”;
    2. 定义一个风格的标签，然后写类，定义属性，最后调用。