小工具      在线工具  汉语词典  css  js  c++  java

HTML+CSS+JS基础

前端开发,html,css,javascript 额外说明

收录于:152天前

HTML基础标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML基础标签</title>
</head>
<body>
    <h1></h1>
    ...
    <h6></h6>   定义标题


    <b></b>  定义粗体文本

    <u></u>  定义文本下划线

    <i></i>  定义斜体字

    <p></p>  定义段落

    <br> 定义换行

    <hr> 定义水平线


    <img src="" width="" height="">  定义图片

    <audio src="" controls="controls"></audio>   定义音频,controls定义播放按钮

    <video src="" controls="controls"></video>   定义视频

    尺寸:% 和 px
    路径: ./当前目录   ../上级目录

    <a href="" target=""></a>  定义超链接
        href:指定访问资源的url
        target:指定打开资源的方式
            _self:默认,当前页面打开
            _blank:空白页面打开

    <ol>
        <li></li>   定义有序列表
    </ol>

    <ul>
        <li></li>   定义无序列表
    </ul>

    <table border="" cellspacing=""></table>   定义表格  border 定义表格边框宽度  cell..定义单元格之间的空白
    <th></th>      定义标题
    <tr align=""></tr>   定义行   align 定义内容对其方式
    <td rowspan="" colspan=""></td>   定义列  row..定义单元格横向跨越行数  col..定义纵向跨越列数

    <table>
        <tr>
        <th>序号</th>
        <th>排名</th>
        </tr>
        <tr>
            <td>1</td>
            <td>100</td>
        </tr>

    </table>


    <div></div>   布局标签,一个div占一行
    <span></span>  行内布局标签,一个span占其包裹的内容

    <form action="" method=""></form>  定义表单  act..定义发送表单的url,met..定义发送方法有get,post等

    <input type="" name="">  定义表单项  type定义类型,name定义名称
    <label></label>  为表单项定义标注
    <select>定义下拉列表
        <option></option> 定义下拉列表的列表项
    </select>
    <textarea></textarea> 定义文本域


</body>
</html>

css基础

内联样式
<div style=""></div>   style属性设置css

内部样式
<style >
    标签修改样式
    div{
    
      xxx:xxx;
    }
    id修改样式
    #id{
    
      xxx:xxx;
    }
    class属性修改样式
    .名称{
    
      xxx:xxx;
    }
</style>

外部引入
<link href="demo.css" rel="stylesheet">
demo.css文件
div{
    
  ...
}
.id{
    
  ...
}
#class{
    
  ...
}

javascript基础

//引入
//内部脚本:js写在html中

<script>
    alert("你好!")
</script>


//外部脚本:js写在js文件中,通过script标签引入

<script src="" rel="stylesheet"></script>

注释 // /*/

大括号标识代码块
<script>
    if (count==1){
    
        alert("count")
    }
</script>

//输出语句
<script>
    window.alert("")   //弹出警告栏
    document.write("");   // 写入html
    console.log("");       //写入控制台
</script>

循环和条件判断和java一样

函数:
定义
<script>
    function funcNmae(参数1,参数2){
    
        执行的代码
    }
    //弱类型语言不需要定义数据类型

    function add(a,b) {
    
        return a+b;

    }
调用
    funcNmae(a,b);
    let result=add(a,b);

    定义方法二
    var funcname1=function (参数){
    

    }
</script>

js对象:
Array  是变长,越界就直接赋值,可存储不同类型数值
var arr=new Array(1,2,3);  var arr1=[1,2,3];

arr[索引]=值

属性
.lenght  长度

方法
.push() 追加
.splice(start,end)


String

var str=new String("hello");
var str="hello"
属性
.lenght

方法
.charAt()  返回指定位置字符
.indexOf() 检索字符串
.trim()   去除首尾空格

自定义对象

var person={
    
    name:"zhangsan",
    age:"21",
    eat:function(){
    
        alert("eat dinner!");
    }
}


BOM  浏览器对象模型
组成
Window   浏览器窗口对象
    window.alert()
    window.confirm()   //带有提示信息和确认按钮的提示框
    window.setTimeout(function,time)  //一定时间后执行一个function,只执行一次,time是毫秒值1000为一秒
    window.setInterval(function,time) //在一定时间后执行一个function,循环执行
Navigator    浏览器对象
Screen     屏幕对象
History     历史记录对象
    window.history.方法()
    window.history.back()  //加载history列表的前一个url
    window.history.forward()  //加载history列表的下一个url
Location    地址栏对象
    window.location.方法()
    window.location.href("https://www.baidu.com"); //跳转到百度,重定位
所有的window都可以省略

DOM 文档对象模型
将标记语言的的各个组成部分封装为对象
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文档对象
Comment:注释对象

js通过DOM对html进行控制
改变html内容
改变html元素样式css
对html dom做出反应
添加html元素

文档对象的属性,获取element对象
getElementById: 根据id属性获取,返回一个Element对象
getElementsByTagName :根据标签名称返回Element数组
getElementsByName:根据name属性获取,返回Element数组
getElementsByClassName:根据class属性获取,返回Element对象数组

element对象的使用,使用.获取其属性
.style  设置css样式
.innerHTML  设置元素内容,覆盖原来的
对于checkbox标签用element的checked属性判断是否选中

事件监听:

事件绑定的方式:1.html标签的属性绑定  2.通过DOM元素绑定
<input type="button" onclick="func()">
<script>
    function func(){
    
        alert("点击了!");
    }
</script>

<input type="button" id="btn">
<script>
    document.getElementById("btn").onclick=function (){
    
        alert("点击了!");
    }
</script>

鼠标事件:
    元素的聚焦点的得失,获取焦点后的变化,失去后的变化
    元素的点击事件
    鼠标移到某元素,或离开的变化
    表单元素的提交前的判断onsubmit函数
    onload  页面加载完成后执行
    onmouseover 鼠标移到猫元素上触发
    onmouseout  鼠标移出元素后触发
    onclick  点击
    onfocus 获得焦点
    onblur 失去焦点
    onsubmit 提交表单 return false 不能提交 return true 可以提交

键盘事件
    onkeydown 某个键盘按下后触发

正则表达式
定义了字符串的组成规则
语法:
^  :表示开始
$  :表示结束
[] :代表某个范围内的单个字符,[0-9]
.  :代表任意单个字符,除了换行和结束符
\w :代表单词字符,数字,字母,下划线_
\d :代表数字字符,相当于[0-9]
量词:
+  :至少一个
*  :零个或多个
?  :零个或一个
{
    x} :x个
{
    m,} :至少m个
{
    m,n} :至少m个,最多n个

直接定义
var re=/^\w{
    6,12}$/     没有引号,以两个/包裹
使用RegExp对象定义
var re=new RegExp("^\w{6,12}$");

.test方法验证
var str="qwer123456";
var flag=re.test(str);  返回值为boolean类型

. . .

相关推荐

额外说明

触发JVM执行Full GC的情况及对策

堆内存划分为 Eden、Survivor 和 Tenured/Old 空间,如下图所示: 从年轻代空间(包括 Eden 和 Survivor 区域)回收内存被称为 Minor GC,对老年代GC称为Major GC,而Full GC是对整个堆来说的,在最

额外说明

技术成长模型

  如果把成长看成是一门武功秘籍的修炼,可以总结为5重境界。 一技之能 独立做事 带人做事 让人愿意跟你做事 做属于自己的事 如果把成长看成职位的升迁,可以定义为一下5个职位。 开发工程师 高级开发工程师 架构师 技术总监 CTO CTO 平时做些什么,

额外说明

Unity中Shader的光照模型Lambert

文章目录 前言 一、Lambert光照模型 1、公式 可以使用图形计算器来看出这个点积对于结果的影响 前言 Unity中Shader的光照模型Lambert,是一个经验型光照模型,非物理光照模型,用于低性能的解决漫反射效果,但是不会产生高光效果,高光效果

额外说明

Unity 实战项目 ☀️| 只用一个脚本做一个 刮刮乐 案例,一不小心刮出来一个女朋友!【学习娱乐一下】

-博客主页:https://blog.csdn.net/zhangay1998 -欢迎点赞 - 收藏 ⭐留言 - 如有错误敬请指正! -本文由 呆呆敲代码的小Y 原创,首发于 CSDN- -未来很长,值得我们全力奔赴更美好的生活✨ -前言 -只用一个脚本

额外说明

Pytorch 最全入门介绍,Pytorch入门看这一篇就够了

本文通过详细且实践性的方式介绍了 PyTorch 的使用,包括环境安装、基础知识、张量操作、自动求导机制、神经网络创建、数据处理、模型训练、测试以及模型的保存和加载。 1. Pytorch简介 在这一部分,我们将会对Pytorch做一个简单的介绍,包括它

额外说明

【Java 进阶篇】MySQL主键约束详解

MySQL是一个强大的关系型数据库管理系统,用于存储和管理大量数据。在数据库中,主键约束是一项非常重要的概念,它有助于确保数据的完整性和唯一性。本文将详细介绍MySQL主键约束,包括什么是主键、为什么需要主键、如何创建主键以及主键的最佳实践。 1. 什么

额外说明

基于 Gin 模块化开发 API 框架设计

一、gin项目介绍 gin框架对于写go语言的人来说入门很简单,有点类似python中的flask框架,什么都需要自己去找第三方包,然后根据自己的经验来创建目录结构,对于没有项目经验的人来说,这点真的不如同类型的beego框架,已经有清晰的目录结构,有时

额外说明

VB案例:简易记事本

目录 一、运行效果 1、主界面 2、菜单系统 (1)文件菜单 (2)编辑菜单

额外说明

二次开发接入阿里云视频点播服务mp4格式视频会被直接下载问题解决方案

EduSoho 阿里云视频点播服务mp4视频会被直接下载的问题解决方案 开发遇到一个问题就是视频点播服务接入后暴露直接地址设置很多地方都无法解决尤其是面对一些流氓软件 解决办法,设置URL鉴权和Refer防盗链 暴露如下 我们需要设置一下URL鉴权 UR

ads via 小工具